schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

feat(user-settings): avatar delete + accent color

Browse Source 
- DELETE /users/me/avatar endpoint with file cleanup
- PATCH /users/me/accent-color with hex validation (#rrggbb)
- auth.service.ts: include accentColor in user select
- AccountSettingsForm: delete-avatar button + accent color picker/save/reset
- auth-actions.ts: deleteAvatarAction + updateAccentColorAction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-07-02 08:57:31 +02:00
parent cc95395889
commit be3680d0df
4 changed files with 208 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/auth/auth.service.ts
+1
View File
@@ -200,6 +200,7 @@ export class AuthService {
passwordHash: true,
ldapDn: true,
avatarPath: true,
accentColor: true,
},
});
apps/api/src/user/user.controller.ts
+48
View File
@@ -272,6 +272,54 @@ export class UserController {
return { success: true };
}
/**
* DELETE /users/me/avatar
* Remove the current user's profile picture.
*/
@Delete('me/avatar')
async deleteAvatar(@CurrentUser() currentUser: any) {
const user = await this.prisma.user.findUnique({
where: { id: currentUser.id },
select: { avatarPath: true },
});
if (user?.avatarPath) {
const monorepoRoot = path.resolve(__dirname, '..', '..', '..', '..');
const absolutePath = path.join(monorepoRoot, user.avatarPath);
if (fs.existsSync(absolutePath)) {
fs.unlinkSync(absolutePath);
}
await this.prisma.user.update({
where: { id: currentUser.id },
data: { avatarPath: null },
});
}
return { success: true };
}
/**
* PATCH /users/me/accent-color
* Set or clear the current user's accent color.
* T-acc-01: hex color validated server-side.
*/
@Patch('me/accent-color')
async updateAccentColor(
@Body() body: { color: string | null },
@CurrentUser() currentUser: any,
) {
if (body.color !== null && body.color !== undefined && !/^#[0-9a-fA-F]{6}$/.test(body.color)) {
throw new BadRequestException('Invalid color format. Use hex (#rrggbb).');
}
await this.prisma.user.update({
where: { id: currentUser.id },
data: { accentColor: body.color ?? null },
});
return { success: true };
}
/**
* GET /users/me/avatar
* Stream the current user's avatar image.
apps/web/src/components/settings/account-settings-form.tsx
+113 -13
View File
@@ -6,9 +6,13 @@ import {
fetchCurrentUser,
changePasswordAction,
uploadAvatarAction,
deleteAvatarAction,
updateAccentColorAction,
} from '@/lib/auth-actions';
import { useAuthStore } from '@/lib/stores/auth-store';
const DEFAULT_ACCENT = '#ffed00';
export function AccountSettingsForm() {
const t = useTranslations('settings');
const tAuth = useTranslations('auth');
@@ -17,7 +21,6 @@ export function AccountSettingsForm() {
const [isLocalUser, setIsLocalUser] = useState<boolean | null>(null);
const [username, setUsername] = useState<string>('');
const [hasAvatar, setHasAvatar] = useState(false);
const [avatarSrc, setAvatarSrc] = useState('/api-proxy/users/me/avatar');
const [avatarKey, setAvatarKey] = useState(0);
// Password change state
@@ -27,17 +30,24 @@ export function AccountSettingsForm() {
const [isPwPending, startPwTransition] = useTransition();
const pwFormRef = useRef<HTMLFormElement>(null);
// Avatar upload state
// Avatar upload/delete state
const [avatarError, setAvatarError] = useState<string | null>(null);
const [avatarSuccess, setAvatarSuccess] = useState(false);
const [isAvatarPending, startAvatarTransition] = useTransition();
// Accent color state
const [accentColor, setAccentColor] = useState<string>(DEFAULT_ACCENT);
const [accentSuccess, setAccentSuccess] = useState(false);
const [accentError, setAccentError] = useState<string | null>(null);
const [isAccentPending, startAccentTransition] = useTransition();
useEffect(() => {
fetchCurrentUser().then((u) => {
if (u) {
setIsLocalUser(u.isLocalUser ?? false);
setUsername(u.displayName ?? u.username ?? '');
setHasAvatar(!!u.hasAvatar);
setAccentColor(u.accentColor ?? DEFAULT_ACCENT);
}
});
}, []);
@@ -60,30 +70,23 @@ export function AccountSettingsForm() {
startPwTransition(async () => {
const result = await changePasswordAction(currentPassword, newPassword);
// changePasswordAction redirects to '/' on success, so we only reach here on error
if (result) {
setPwError(result.error);
}
if (result) setPwError(result.error);
});
}
async function handleAvatarUpload(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!file) return;
setAvatarError(null);
setAvatarSuccess(false);
const formData = new FormData();
formData.append('file', file);
startAvatarTransition(async () => {
const result = await uploadAvatarAction(formData);
if (result.success) {
setAvatarSuccess(true);
setHasAvatar(true);
setAvatarKey((k) => k + 1);
// Sync to auth store so header avatar updates immediately
bumpAvatarVersion();
if (user) setUser({ ...user, hasAvatar: true });
} else {
@@ -92,6 +95,49 @@ export function AccountSettingsForm() {
});
}
function handleDeleteAvatar() {
setAvatarError(null);
setAvatarSuccess(false);
startAvatarTransition(async () => {
const result = await deleteAvatarAction();
if (result.success) {
setHasAvatar(false);
setAvatarSuccess(true);
setAvatarKey((k) => k + 1);
if (user) setUser({ ...user, hasAvatar: false });
} else {
setAvatarError(result.error ?? 'deleteError');
}
});
}
function handleSaveAccentColor() {
setAccentSuccess(false);
setAccentError(null);
startAccentTransition(async () => {
const result = await updateAccentColorAction(accentColor);
if (result.success) {
setAccentSuccess(true);
if (user) setUser({ ...user, accentColor });
} else {
setAccentError(result.error ?? 'saveError');
}
});
}
function handleResetAccentColor() {
setAccentColor(DEFAULT_ACCENT);
setAccentSuccess(false);
setAccentError(null);
startAccentTransition(async () => {
const result = await updateAccentColorAction(null);
if (result.success) {
setAccentSuccess(true);
if (user) setUser({ ...user, accentColor: null });
}
});
}
const userInitial = username.charAt(0).toUpperCase() || '?';
return (
@@ -102,7 +148,6 @@ export function AccountSettingsForm() {
{t('account.avatarLabel')}
</h2>
<div className="flex items-center gap-4 mb-4">
{/* Avatar preview with initial fallback */}
<div className="relative h-16 w-16 shrink-0">
{hasAvatar ? (
<img
@@ -125,15 +170,16 @@ export function AccountSettingsForm() {
{avatarSuccess && (
<div className="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 px-4 py-3 text-sm text-green-800 dark:text-green-200 mb-3">
{t('account.uploadSuccess')}
{hasAvatar ? t('account.uploadSuccess') : t('account.deleteAvatarSuccess')}
</div>
)}
{avatarError && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-3">
{t('account.uploadError')}
{avatarError === 'deleteError' ? t('account.deleteAvatarError') : t('account.uploadError')}
</div>
)}
<div className="flex items-center gap-2">
<label className="inline-flex items-center gap-2 cursor-pointer">
<input
type="file"
@@ -146,6 +192,60 @@ export function AccountSettingsForm() {
{isAvatarPending ? '...' : t('account.uploadCta')}
</span>
</label>
{hasAvatar && (
<button
type="button"
disabled={isAvatarPending}
onClick={handleDeleteAvatar}
className="inline-flex items-center justify-center rounded-md border border-destructive/40 px-4 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-50"
>
{t('account.deleteAvatarCta')}
</button>
)}
</div>
</section>
{/* ── Accent color section ────────────────────────────────── */}
<section>
<h2 className="text-sm font-semibold text-foreground mb-1">
{t('account.accentColorLabel')}
</h2>
<p className="text-xs text-muted-foreground mb-4">{t('account.accentColorHelp')}</p>
<div className="flex items-center gap-3 mb-4">
<input
type="color"
value={accentColor}
onChange={(e) => setAccentColor(e.target.value)}
className="h-10 w-16 cursor-pointer rounded-md border border-input p-1"
/>
<span className="font-mono text-sm text-muted-foreground">{accentColor}</span>
<button
type="button"
onClick={handleResetAccentColor}
disabled={isAccentPending}
className="text-sm text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
>
{t('account.accentColorReset')}
</button>
</div>
{accentSuccess && (
<div className="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 px-4 py-3 text-sm text-green-800 dark:text-green-200 mb-3">
{t('account.accentColorSuccess')}
</div>
)}
{accentError && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-3">
{t('account.accentColorError')}
</div>
)}
<button
type="button"
onClick={handleSaveAccentColor}
disabled={isAccentPending}
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isAccentPending ? '...' : t('account.accentColorSave')}
</button>
</section>
{/* ── Password section ────────────────────────────────────── */}
apps/web/src/lib/auth-actions.ts
+36
View File
@@ -14,6 +14,7 @@ export interface AuthUser {
mustChangePassword: boolean;
isLocalUser?: boolean;
hasAvatar?: boolean;
accentColor?: string | null;
}
export interface LoginResult {
@@ -200,6 +201,41 @@ export async function uploadAvatarAction(
}
}
export async function deleteAvatarAction(): Promise<{ success: boolean; error?: string }> {
const cookieStore = await cookies();
const session = cookieStore.get('session')?.value;
if (!session) return { success: false, error: 'notAuthenticated' };
try {
const response = await fetch(`${API_URL}/users/me/avatar`, {
method: 'DELETE',
headers: { Cookie: `session=${session}` },
});
if (!response.ok) return { success: false, error: 'deleteError' };
return { success: true };
} catch {
return { success: false, error: 'networkError' };
}
}
export async function updateAccentColorAction(
color: string | null,
): Promise<{ success: boolean; error?: string }> {
const cookieStore = await cookies();
const session = cookieStore.get('session')?.value;
if (!session) return { success: false, error: 'notAuthenticated' };
try {
const response = await fetch(`${API_URL}/users/me/accent-color`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', Cookie: `session=${session}` },
body: JSON.stringify({ color }),
});
if (!response.ok) return { success: false, error: 'saveError' };
return { success: true };
} catch {
return { success: false, error: 'networkError' };
}
}
/**
* Fetch the current authenticated user from the API.
* Uses the session cookie for authentication.