feat: extract shared account components (Profile, Password, MFA, Passkey)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
259
ui/src/components/account/MfaSection.tsx
Normal file
259
ui/src/components/account/MfaSection.tsx
Normal file
@@ -0,0 +1,259 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { QRCodeSVG } from 'qrcode.react';
|
||||||
|
import { errorMessage } from '../../api/client';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import {
|
||||||
|
useAccountMfaStatus,
|
||||||
|
useAccountMfaSetup,
|
||||||
|
useAccountMfaVerify,
|
||||||
|
useAccountBackupCodes,
|
||||||
|
useAccountMfaRemove,
|
||||||
|
} from '../../api/account-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
export function MfaSection() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { data: mfaStatus, isLoading: statusLoading } = useAccountMfaStatus();
|
||||||
|
const setup = useAccountMfaSetup();
|
||||||
|
const verify = useAccountMfaVerify();
|
||||||
|
const backupCodes = useAccountBackupCodes();
|
||||||
|
const remove = useAccountMfaRemove();
|
||||||
|
|
||||||
|
const [setupData, setSetupData] = useState<{ secret: string; secretQrCode: string } | null>(null);
|
||||||
|
const [verifyCode, setVerifyCode] = useState('');
|
||||||
|
const [codes, setCodes] = useState<string[] | null>(null);
|
||||||
|
const [codesSaved, setCodesSaved] = useState(false);
|
||||||
|
const [confirmRemove, setConfirmRemove] = useState(false);
|
||||||
|
|
||||||
|
async function handleStartSetup() {
|
||||||
|
try {
|
||||||
|
const data = await setup.mutateAsync();
|
||||||
|
setSetupData(data);
|
||||||
|
setVerifyCode('');
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to start MFA setup', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleVerify(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!setupData) return;
|
||||||
|
try {
|
||||||
|
const result = await verify.mutateAsync({ secret: setupData.secret, code: verifyCode });
|
||||||
|
if (result.verified) {
|
||||||
|
const bc = await backupCodes.mutateAsync();
|
||||||
|
setCodes(bc.codes);
|
||||||
|
setSetupData(null);
|
||||||
|
setVerifyCode('');
|
||||||
|
setCodesSaved(false);
|
||||||
|
toast({ title: 'MFA enabled successfully', variant: 'success' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Invalid code. Please try again.', variant: 'error' });
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Verification failed', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRegenerateCodes() {
|
||||||
|
try {
|
||||||
|
const bc = await backupCodes.mutateAsync();
|
||||||
|
setCodes(bc.codes);
|
||||||
|
setCodesSaved(false);
|
||||||
|
toast({ title: 'Backup codes regenerated', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to regenerate backup codes', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRemove() {
|
||||||
|
try {
|
||||||
|
await remove.mutateAsync();
|
||||||
|
setConfirmRemove(false);
|
||||||
|
setCodes(null);
|
||||||
|
setSetupData(null);
|
||||||
|
toast({ title: 'MFA removed', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to remove MFA', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCopyAll() {
|
||||||
|
if (!codes) return;
|
||||||
|
navigator.clipboard.writeText(codes.join('\n'));
|
||||||
|
toast({ title: 'Backup codes copied to clipboard', variant: 'success' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDownload() {
|
||||||
|
if (!codes) return;
|
||||||
|
const blob = new Blob([codes.join('\n')], { type: 'text/plain' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'cameleer-mfa-backup-codes.txt';
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (statusLoading) {
|
||||||
|
return (
|
||||||
|
<Card title="Multi-Factor Authentication">
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Backup codes display
|
||||||
|
if (codes) {
|
||||||
|
return (
|
||||||
|
<Card title="Multi-Factor Authentication">
|
||||||
|
<Alert variant="warning" title="Save your backup codes">
|
||||||
|
These codes can be used to sign in if you lose access to your authenticator app. Each code can only be used once. Store them in a safe place.
|
||||||
|
</Alert>
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr 1fr',
|
||||||
|
gap: '8px 24px',
|
||||||
|
marginTop: 16,
|
||||||
|
padding: '16px',
|
||||||
|
background: 'var(--bg-inset)',
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
borderRadius: 6,
|
||||||
|
fontFamily: 'var(--font-mono, monospace)',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
}}>
|
||||||
|
{codes.map((code) => (
|
||||||
|
<span key={code}>{code}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
|
||||||
|
<Button variant="secondary" onClick={handleCopyAll}>Copy all</Button>
|
||||||
|
<Button variant="secondary" onClick={handleDownload}>Download .txt</Button>
|
||||||
|
</div>
|
||||||
|
<label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, fontSize: '0.875rem', cursor: 'pointer' }}>
|
||||||
|
<input type="checkbox" checked={codesSaved} onChange={(e) => setCodesSaved(e.target.checked)} />
|
||||||
|
I've saved my backup codes
|
||||||
|
</label>
|
||||||
|
<div style={{ marginTop: 12 }}>
|
||||||
|
<Button variant="primary" disabled={!codesSaved} onClick={() => setCodes(null)}>
|
||||||
|
Done
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setup flow — QR code + verification
|
||||||
|
if (setupData) {
|
||||||
|
return (
|
||||||
|
<Card title="Multi-Factor Authentication">
|
||||||
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
||||||
|
Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.), then enter the 6-digit code below.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
|
||||||
|
<QRCodeSVG value={setupData.secretQrCode} size={200} />
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '8px 12px',
|
||||||
|
background: 'var(--bg-inset)',
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
borderRadius: 6,
|
||||||
|
fontFamily: 'var(--font-mono, monospace)',
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
marginBottom: 16,
|
||||||
|
}}>
|
||||||
|
{setupData.secret}
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleVerify} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<FormField label="Verification code" htmlFor="mfa-code">
|
||||||
|
<Input
|
||||||
|
id="mfa-code"
|
||||||
|
type="text"
|
||||||
|
inputMode="numeric"
|
||||||
|
maxLength={6}
|
||||||
|
pattern="[0-9]{6}"
|
||||||
|
value={verifyCode}
|
||||||
|
onChange={(e) => setVerifyCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||||
|
placeholder="Enter 6-digit code"
|
||||||
|
required
|
||||||
|
autoComplete="one-time-code"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button type="submit" variant="primary" loading={verify.isPending || backupCodes.isPending} disabled={verifyCode.length !== 6}>
|
||||||
|
Verify & Enable
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="secondary" onClick={() => { setSetupData(null); setVerifyCode(''); }}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main view — enrolled or not
|
||||||
|
return (
|
||||||
|
<Card title="Multi-Factor Authentication">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||||
|
<span className={styles.description} style={{ margin: 0 }}>Status:</span>
|
||||||
|
{mfaStatus?.enrolled ? (
|
||||||
|
<Badge label="Enrolled" color="success" />
|
||||||
|
) : (
|
||||||
|
<Badge label="Not enrolled" color="auto" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{mfaStatus?.enrolled ? (
|
||||||
|
<>
|
||||||
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
||||||
|
Your account is protected with a TOTP authenticator app.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||||
|
<Button variant="secondary" onClick={handleRegenerateCodes} loading={backupCodes.isPending}>
|
||||||
|
Regenerate backup codes
|
||||||
|
</Button>
|
||||||
|
{confirmRemove ? (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<Alert variant="error" title="This will disable MFA on your account." />
|
||||||
|
<Button variant="danger" onClick={handleRemove} loading={remove.isPending}>
|
||||||
|
Confirm removal
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={() => setConfirmRemove(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Button variant="danger" onClick={() => setConfirmRemove(true)}>
|
||||||
|
Remove MFA
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
||||||
|
Add an extra layer of security to your account by enabling multi-factor authentication with an authenticator app.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<Button variant="primary" onClick={handleStartSetup} loading={setup.isPending}>
|
||||||
|
Set up authenticator app
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
136
ui/src/components/account/PasskeySection.tsx
Normal file
136
ui/src/components/account/PasskeySection.tsx
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { errorMessage } from '../../api/client';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Input,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import {
|
||||||
|
useAccountMfaStatus,
|
||||||
|
useAccountPasskeyList,
|
||||||
|
useAccountRenamePasskey,
|
||||||
|
useAccountDeletePasskey,
|
||||||
|
} from '../../api/account-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
export function PasskeyNudgeBanner() {
|
||||||
|
const { data: status } = useAccountMfaStatus();
|
||||||
|
const [dismissed, setDismissed] = useState(false);
|
||||||
|
|
||||||
|
const lastDismissed = localStorage.getItem('passkey_nudge_dismissed');
|
||||||
|
const recentlyDismissed = lastDismissed && (Date.now() - Number(lastDismissed)) < 30 * 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
if (dismissed || recentlyDismissed || !status || status.passkeyEnrolled) return null;
|
||||||
|
|
||||||
|
function handleDismiss() {
|
||||||
|
localStorage.setItem('passkey_nudge_dismissed', String(Date.now()));
|
||||||
|
setDismissed(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Alert variant="info" title="Sign in faster with a passkey">
|
||||||
|
<p style={{ margin: '4px 0 12px' }}>
|
||||||
|
Use your fingerprint, face, or security key instead of typing a code every time.
|
||||||
|
</p>
|
||||||
|
<Button size="sm" variant="secondary" onClick={handleDismiss}>Not now</Button>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PasskeySection() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { data: passkeys, isLoading } = useAccountPasskeyList();
|
||||||
|
const renamePasskey = useAccountRenamePasskey();
|
||||||
|
const deletePasskey = useAccountDeletePasskey();
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [editName, setEditName] = useState('');
|
||||||
|
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
function parseAgent(agent: string | null): string {
|
||||||
|
if (!agent) return 'Unknown device';
|
||||||
|
if (agent.includes('Chrome')) return agent.includes('Windows') ? 'Chrome on Windows' : agent.includes('Mac') ? 'Chrome on macOS' : agent.includes('Android') ? 'Chrome on Android' : 'Chrome';
|
||||||
|
if (agent.includes('Safari') && !agent.includes('Chrome')) return agent.includes('iPhone') ? 'Safari on iPhone' : 'Safari on macOS';
|
||||||
|
if (agent.includes('Firefox')) return 'Firefox';
|
||||||
|
if (agent.includes('Edge')) return 'Edge';
|
||||||
|
return 'Browser';
|
||||||
|
}
|
||||||
|
|
||||||
|
function startRename(id: string, currentName: string | null) {
|
||||||
|
setEditingId(id);
|
||||||
|
setEditName(currentName ?? '');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRename(id: string) {
|
||||||
|
try {
|
||||||
|
await renamePasskey.mutateAsync({ id, name: editName });
|
||||||
|
setEditingId(null);
|
||||||
|
toast({ title: 'Passkey renamed', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to rename passkey', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(id: string) {
|
||||||
|
try {
|
||||||
|
await deletePasskey.mutateAsync(id);
|
||||||
|
setConfirmDeleteId(null);
|
||||||
|
toast({ title: 'Passkey removed', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to remove passkey', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) return null;
|
||||||
|
const credentials = passkeys ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card title="Passkeys">
|
||||||
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
||||||
|
Use your fingerprint, face, or security key to sign in faster.
|
||||||
|
</p>
|
||||||
|
{credentials.length === 0 ? (
|
||||||
|
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>
|
||||||
|
No passkeys registered. Passkeys can be registered during sign-in when prompted.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
|
{credentials.map((pk) => (
|
||||||
|
<div key={pk.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderBottom: '1px solid var(--border)' }}>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
{editingId === pk.id ? (
|
||||||
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||||
|
<Input value={editName} onChange={(e) => setEditName(e.target.value)} placeholder="Passkey name" style={{ maxWidth: 200 }} />
|
||||||
|
<Button size="sm" variant="primary" onClick={() => handleRename(pk.id)} loading={renamePasskey.isPending}>Save</Button>
|
||||||
|
<Button size="sm" variant="secondary" onClick={() => setEditingId(null)}>Cancel</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div style={{ fontWeight: 500 }}>{pk.name || 'Unnamed passkey'}</div>
|
||||||
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
|
||||||
|
{parseAgent(pk.agent)} · Added {pk.createdAt ? new Date(pk.createdAt).toLocaleDateString() : 'unknown'}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{editingId !== pk.id && (
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button size="sm" variant="secondary" onClick={() => startRename(pk.id, pk.name)}>Rename</Button>
|
||||||
|
{confirmDeleteId === pk.id ? (
|
||||||
|
<>
|
||||||
|
<Button size="sm" variant="danger" onClick={() => handleDelete(pk.id)} loading={deletePasskey.isPending}>Confirm</Button>
|
||||||
|
<Button size="sm" variant="secondary" onClick={() => setConfirmDeleteId(null)}>Cancel</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Button size="sm" variant="danger" onClick={() => setConfirmDeleteId(pk.id)}>Remove</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
88
ui/src/components/account/PasswordChangeSection.tsx
Normal file
88
ui/src/components/account/PasswordChangeSection.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { errorMessage } from '../../api/client';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { useChangePassword } from '../../api/account-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
export function PasswordChangeSection() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const changePassword = useChangePassword();
|
||||||
|
|
||||||
|
const [currentPassword, setCurrentPassword] = useState('');
|
||||||
|
const [newPassword, setNewPassword] = useState('');
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||||||
|
|
||||||
|
async function handleChangePassword(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (newPassword.length < 8) {
|
||||||
|
toast({ title: 'Password must be at least 8 characters', variant: 'error' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
toast({ title: 'Passwords do not match', variant: 'error' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await changePassword.mutateAsync({ currentPassword, newPassword });
|
||||||
|
toast({ title: 'Password changed successfully', variant: 'success' });
|
||||||
|
setCurrentPassword('');
|
||||||
|
setNewPassword('');
|
||||||
|
setConfirmPassword('');
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to change password', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card title="Change Password">
|
||||||
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
||||||
|
Update your login password. Minimum 8 characters.
|
||||||
|
</p>
|
||||||
|
<form onSubmit={handleChangePassword} style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 12 }}>
|
||||||
|
<FormField label="Current password" htmlFor="current-pw">
|
||||||
|
<Input
|
||||||
|
id="current-pw"
|
||||||
|
type="password"
|
||||||
|
value={currentPassword}
|
||||||
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||||
|
placeholder="Enter current password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="New password" htmlFor="new-pw">
|
||||||
|
<Input
|
||||||
|
id="new-pw"
|
||||||
|
type="password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
placeholder="Enter new password"
|
||||||
|
required
|
||||||
|
minLength={8}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Confirm password" htmlFor="confirm-pw">
|
||||||
|
<Input
|
||||||
|
id="confirm-pw"
|
||||||
|
type="password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
placeholder="Confirm new password"
|
||||||
|
required
|
||||||
|
minLength={8}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div>
|
||||||
|
<Button type="submit" variant="primary" loading={changePassword.isPending}>
|
||||||
|
Change Password
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
ui/src/components/account/ProfileSection.tsx
Normal file
82
ui/src/components/account/ProfileSection.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { errorMessage } from '../../api/client';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { useAccountProfile, useUpdateDisplayName } from '../../api/account-hooks';
|
||||||
|
|
||||||
|
export function ProfileSection() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { data: profile, isLoading } = useAccountProfile();
|
||||||
|
const updateDisplayName = useUpdateDisplayName();
|
||||||
|
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (profile) {
|
||||||
|
setName(profile.name ?? '');
|
||||||
|
}
|
||||||
|
}, [profile]);
|
||||||
|
|
||||||
|
const isDirty = profile ? name !== (profile.name ?? '') : false;
|
||||||
|
|
||||||
|
async function handleSave(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
await updateDisplayName.mutateAsync(name);
|
||||||
|
toast({ title: 'Display name updated', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Failed to update display name', description: errorMessage(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Card title="Profile">
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card title="Profile">
|
||||||
|
<form onSubmit={handleSave} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<FormField label="Email" htmlFor="profile-email">
|
||||||
|
<Input
|
||||||
|
id="profile-email"
|
||||||
|
type="email"
|
||||||
|
value={profile?.email ?? ''}
|
||||||
|
readOnly
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Display name" htmlFor="profile-name">
|
||||||
|
<Input
|
||||||
|
id="profile-name"
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Enter display name"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
loading={updateDisplayName.isPending}
|
||||||
|
disabled={!isDirty}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user