feat(quick-260630-gbh-01): account settings page — avatar upload + conditional password form
- AuthUser interface: add isLocalUser? + hasAvatar? fields - uploadAvatarAction: server action forwarding file to POST /users/me/avatar - AccountSettingsForm: avatar preview with initial fallback + upload; password form only for local users; LDAP notice - /settings/general/account page mirroring smtp page structure - SettingsSidebar: Konto link above SMTP link - de.json + en.json: categoryAccount + account.* keys
This commit is contained in:
@@ -0,0 +1,239 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition, useEffect, useRef } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import {
|
||||
fetchCurrentUser,
|
||||
changePasswordAction,
|
||||
uploadAvatarAction,
|
||||
} from '@/lib/auth-actions';
|
||||
|
||||
export function AccountSettingsForm() {
|
||||
const t = useTranslations('settings');
|
||||
const tAuth = useTranslations('auth');
|
||||
|
||||
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
|
||||
const [pwError, setPwError] = useState<string | null>(null);
|
||||
const [pwSuccess, setPwSuccess] = useState(false);
|
||||
const [pwMismatch, setPwMismatch] = useState(false);
|
||||
const [isPwPending, startPwTransition] = useTransition();
|
||||
const pwFormRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
// Avatar upload state
|
||||
const [avatarError, setAvatarError] = useState<string | null>(null);
|
||||
const [avatarSuccess, setAvatarSuccess] = useState(false);
|
||||
const [isAvatarPending, startAvatarTransition] = useTransition();
|
||||
|
||||
useEffect(() => {
|
||||
fetchCurrentUser().then((u) => {
|
||||
if (u) {
|
||||
setIsLocalUser(u.isLocalUser ?? false);
|
||||
setUsername(u.displayName ?? u.username ?? '');
|
||||
setHasAvatar(!!u.hasAvatar);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
async function handlePasswordSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setPwError(null);
|
||||
setPwSuccess(false);
|
||||
setPwMismatch(false);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const currentPassword = formData.get('currentPassword') as string;
|
||||
const newPassword = formData.get('newPassword') as string;
|
||||
const confirmPassword = formData.get('confirmPassword') as string;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setPwMismatch(true);
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
// Cache-bust the avatar image to force reload
|
||||
setAvatarKey((k) => k + 1);
|
||||
} else {
|
||||
setAvatarError(result.error ?? 'uploadError');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const userInitial = username.charAt(0).toUpperCase() || '?';
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-lg">
|
||||
{/* ── Avatar section ─────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
{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
|
||||
key={avatarKey}
|
||||
src={`/api-proxy/users/me/avatar?t=${avatarKey}`}
|
||||
alt=""
|
||||
className="h-16 w-16 rounded-full object-cover"
|
||||
onError={() => setHasAvatar(false)}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-16 w-16 rounded-full bg-primary flex items-center justify-center text-xl font-medium text-primary-foreground">
|
||||
{userInitial}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t('account.avatarHelp')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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')}
|
||||
</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')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
className="sr-only"
|
||||
disabled={isAvatarPending}
|
||||
onChange={handleAvatarUpload}
|
||||
/>
|
||||
<span 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">
|
||||
{isAvatarPending ? '...' : t('account.uploadCta')}
|
||||
</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{/* ── Password section ────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
{t('account.passwordSectionTitle')}
|
||||
</h2>
|
||||
|
||||
{isLocalUser === false && (
|
||||
<div className="rounded-md bg-muted px-4 py-3 text-sm text-muted-foreground">
|
||||
{t('account.ldapManagedNotice')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLocalUser === true && (
|
||||
<>
|
||||
{pwSuccess && (
|
||||
<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-4">
|
||||
{tAuth('changePassword.success')}
|
||||
</div>
|
||||
)}
|
||||
{pwError && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-4">
|
||||
{tAuth(`changePassword.${pwError}`)}
|
||||
</div>
|
||||
)}
|
||||
{pwMismatch && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-4">
|
||||
{tAuth('changePassword.passwordMismatch')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form ref={pwFormRef} onSubmit={handlePasswordSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="currentPassword" className="text-sm font-medium text-foreground">
|
||||
{tAuth('changePassword.currentPassword')}
|
||||
</label>
|
||||
<input
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
type="password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="newPassword" className="text-sm font-medium text-foreground">
|
||||
{tAuth('changePassword.newPassword')}
|
||||
</label>
|
||||
<input
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
autoComplete="new-password"
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="confirmPassword" className="text-sm font-medium text-foreground">
|
||||
{tAuth('changePassword.confirmPassword')}
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
autoComplete="new-password"
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPwPending}
|
||||
className="flex items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{isPwPending ? (
|
||||
<svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
) : (
|
||||
tAuth('changePassword.submit')
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user