feat(desktop): DevicePage routes to UserKeySetup or UserKeyUnlock
This commit is contained in:
byGalax
@@ -1,127 +0,0 @@
|
|||||||
import type { DeviceRecord } from '@chat-app/shared/auth';
|
|
||||||
import { extractErrorCode } from '@chat-app/shared/i18n';
|
|
||||||
import { useCallback, useId, useState } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { detectDesktopPlatform, registerCurrentDevice } from '../lib/device';
|
|
||||||
import { AlertIcon, ArrowRightIcon, LockIcon, ShieldIcon, SpinnerIcon } from './icons';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
userId: string;
|
|
||||||
defaultName: string;
|
|
||||||
onRegistered: (device: DeviceRecord) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DeviceRegistration({ userId, defaultName, onRegistered }: Props) {
|
|
||||||
const { t } = useTranslation(['auth', 'errors']);
|
|
||||||
const nameId = useId();
|
|
||||||
const [name, setName] = useState(defaultName);
|
|
||||||
const [busy, setBusy] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const handleSubmit = useCallback(
|
|
||||||
async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const trimmed = name.trim();
|
|
||||||
if (!trimmed) return;
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const device = await registerCurrentDevice({ userId, name: trimmed });
|
|
||||||
onRegistered(device);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
const code = extractErrorCode(err);
|
|
||||||
if (code) {
|
|
||||||
setError(t(`errors:${code}`, { defaultValue: t('errors:generic') }));
|
|
||||||
} else if (err instanceof Error) {
|
|
||||||
setError(err.message);
|
|
||||||
} else {
|
|
||||||
setError(t('errors:generic'));
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[name, userId, onRegistered, t],
|
|
||||||
);
|
|
||||||
|
|
||||||
const platform = detectDesktopPlatform();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
className="w-full max-w-md animate-slide-up rounded-2xl border border-white/10 bg-ink-900/70 p-7 shadow-glow backdrop-blur-xl sm:p-8"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-500/20 ring-1 ring-brand-400/30">
|
|
||||||
<LockIcon className="h-5 w-5 text-brand-300" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="font-display text-lg font-semibold text-white">{t('auth:device.title')}</h2>
|
|
||||||
<p className="text-xs text-neutral-400">{t('auth:device.subtitle')}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6 space-y-1.5">
|
|
||||||
<label
|
|
||||||
htmlFor={nameId}
|
|
||||||
className="block text-xs font-medium uppercase tracking-wide text-neutral-400"
|
|
||||||
>
|
|
||||||
{t('auth:device.name_label')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id={nameId}
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
autoFocus
|
|
||||||
maxLength={64}
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
placeholder={t('auth:device.name_placeholder')}
|
|
||||||
className="w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-neutral-500">{t('auth:device.name_hint')}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-5 rounded-lg border border-amber-500/20 bg-amber-500/10 p-3 text-xs text-amber-200">
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<ShieldIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
|
|
||||||
<span className="min-w-0 flex-1 break-words">{t('auth:device.security_note_dev')}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={busy || name.trim().length === 0}
|
|
||||||
aria-busy={busy}
|
|
||||||
className="group mt-6 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-gradient-to-br from-brand-400 to-brand-600 px-4 py-3 text-sm font-semibold text-white shadow-glow transition hover:from-brand-300 hover:to-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400/60 focus:ring-offset-2 focus:ring-offset-ink-900 disabled:cursor-not-allowed disabled:opacity-60"
|
|
||||||
>
|
|
||||||
{busy ? (
|
|
||||||
<>
|
|
||||||
<SpinnerIcon className="h-4 w-4" />
|
|
||||||
<span>{t('auth:device.cta_loading')}</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span>{t('auth:device.cta')}</span>
|
|
||||||
<ArrowRightIcon className="h-4 w-4 transition group-hover:translate-x-0.5" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
role="alert"
|
|
||||||
className="mt-4 flex items-start gap-3 rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-100"
|
|
||||||
>
|
|
||||||
<AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
|
|
||||||
<p className="min-w-0 flex-1 break-words">{error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p className="mt-4 text-center text-xs text-neutral-500">
|
|
||||||
{t('auth:device.device_platform', { defaultValue: 'Platform' })}: {platform}
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
import {
|
|
||||||
type DeviceRecord,
|
|
||||||
restoreDeviceFromServerRecord,
|
|
||||||
} from '@chat-app/shared/auth';
|
|
||||||
import { useCallback, useState } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import {
|
|
||||||
decodePrivateKeyFromBackup,
|
|
||||||
importDeviceBackup,
|
|
||||||
normalizeRecoveryCode,
|
|
||||||
} from '../lib/deviceBackup';
|
|
||||||
import { devLocalSecretStore } from '../lib/secretStore';
|
|
||||||
import { supabase } from '../lib/supabase';
|
|
||||||
import { writeLocalDeviceId } from '../lib/device';
|
|
||||||
import { AlertIcon, ArrowRightIcon, LockIcon, ShieldIcon, SpinnerIcon } from './icons';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
userId: string;
|
|
||||||
onRestored: (device: DeviceRecord) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Restores a device from a user-provided backup string. The backup embeds
|
|
||||||
// userId + deviceId + X25519 private key; we verify userId matches the current
|
|
||||||
// session, confirm the device row still exists server-side, and then re-seed
|
|
||||||
// the local vault + cached deviceId so the app treats this install as the
|
|
||||||
// original device (conv-key bundles stay valid, no "awaiting" state).
|
|
||||||
export function DeviceRestore({ userId, onRestored }: Props) {
|
|
||||||
const { t } = useTranslation(['app', 'errors']);
|
|
||||||
const [backup, setBackup] = useState('');
|
|
||||||
const [passphrase, setPassphrase] = useState('');
|
|
||||||
const [mode, setMode] = useState<'passphrase' | 'recovery'>('passphrase');
|
|
||||||
const [busy, setBusy] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const handleSubmit = useCallback(
|
|
||||||
async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!backup.trim() || passphrase.length < 1 || busy) return;
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
let privateKey: Uint8Array | null = null;
|
|
||||||
try {
|
|
||||||
const secret =
|
|
||||||
mode === 'recovery' ? normalizeRecoveryCode(passphrase) : passphrase;
|
|
||||||
const payload = await importDeviceBackup(backup.trim(), secret);
|
|
||||||
privateKey = decodePrivateKeyFromBackup(payload);
|
|
||||||
|
|
||||||
const device = await restoreDeviceFromServerRecord({
|
|
||||||
client: supabase,
|
|
||||||
secretStore: devLocalSecretStore,
|
|
||||||
userId: payload.userId,
|
|
||||||
deviceId: payload.deviceId,
|
|
||||||
privateKey,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cache deviceId locally so findExistingDevice picks it up on next load.
|
|
||||||
writeLocalDeviceId(userId, device.id);
|
|
||||||
|
|
||||||
onRestored(device);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
} finally {
|
|
||||||
if (privateKey) {
|
|
||||||
for (let i = 0; i < privateKey.length; i++) privateKey[i] = 0;
|
|
||||||
}
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[backup, passphrase, mode, userId, onRestored, busy],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
className="w-full max-w-md animate-slide-up rounded-2xl border border-white/10 bg-ink-900/70 p-7 shadow-glow backdrop-blur-xl sm:p-8"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/20 ring-1 ring-emerald-400/30">
|
|
||||||
<ShieldIcon className="h-5 w-5 text-emerald-300" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="font-display text-lg font-semibold text-white">
|
|
||||||
{t('app:backup.restore_title', { defaultValue: 'Backup wiederherstellen' })}
|
|
||||||
</h2>
|
|
||||||
<p className="text-xs text-neutral-400">
|
|
||||||
{t('app:backup.restore_subtitle', {
|
|
||||||
defaultValue: 'Bringe einen zuvor erstellten Backup-String + Passphrase mit.',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6 space-y-3">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-xs font-medium uppercase tracking-wide text-neutral-400">
|
|
||||||
{t('app:backup.backup_string', { defaultValue: 'Backup-String' })}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
required
|
|
||||||
rows={5}
|
|
||||||
value={backup}
|
|
||||||
onChange={(e) => setBackup(e.target.value)}
|
|
||||||
placeholder="chatapp-backup-v1…"
|
|
||||||
className="w-full resize-none rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 font-mono text-[11px] leading-relaxed text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="block text-xs font-medium uppercase tracking-wide text-neutral-400">
|
|
||||||
{mode === 'passphrase' ? 'Passphrase' : 'Recovery-Code'}
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setMode((m) => (m === 'passphrase' ? 'recovery' : 'passphrase'));
|
|
||||||
setPassphrase('');
|
|
||||||
setError(null);
|
|
||||||
}}
|
|
||||||
className="cursor-pointer text-[11px] font-semibold text-brand-300 hover:underline"
|
|
||||||
>
|
|
||||||
{mode === 'passphrase'
|
|
||||||
? 'Passphrase vergessen? Recovery-Code nutzen'
|
|
||||||
: 'Stattdessen Passphrase eingeben'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type={mode === 'passphrase' ? 'password' : 'text'}
|
|
||||||
required
|
|
||||||
value={passphrase}
|
|
||||||
onChange={(e) => setPassphrase(e.target.value)}
|
|
||||||
placeholder={mode === 'recovery' ? 'XXXXXX-XXXXXX-XXXXXX-XXXXXX' : ''}
|
|
||||||
spellCheck={false}
|
|
||||||
autoComplete={mode === 'recovery' ? 'off' : 'current-password'}
|
|
||||||
className={
|
|
||||||
'w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40 ' +
|
|
||||||
(mode === 'recovery' ? 'font-mono tracking-widest' : '')
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{mode === 'recovery' && (
|
|
||||||
<p className="text-[11px] text-neutral-500">
|
|
||||||
Stattdessen den Recovery-Backup-String oben einfügen.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-5 rounded-lg border border-brand-500/20 bg-brand-500/10 p-3 text-xs text-brand-100">
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<LockIcon className="mt-0.5 h-4 w-4 shrink-0 text-brand-300" />
|
|
||||||
<span className="min-w-0 flex-1 break-words">
|
|
||||||
{t('app:backup.restore_hint', {
|
|
||||||
defaultValue:
|
|
||||||
'Nach Wiederherstellung übernimmt dieses Gerät die alte Identität — existierende Nachrichten sind wieder entschlüsselbar.',
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={busy || backup.trim().length === 0 || passphrase.length === 0}
|
|
||||||
aria-busy={busy}
|
|
||||||
className="group mt-6 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-gradient-to-br from-emerald-400 to-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-glow transition hover:from-emerald-300 hover:to-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 focus:ring-offset-2 focus:ring-offset-ink-900 disabled:cursor-not-allowed disabled:opacity-60"
|
|
||||||
>
|
|
||||||
{busy ? (
|
|
||||||
<>
|
|
||||||
<SpinnerIcon className="h-4 w-4" />
|
|
||||||
<span>{t('app:backup.restoring', { defaultValue: 'Wiederherstellen…' })}</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span>{t('app:backup.restore_cta', { defaultValue: 'Gerät wiederherstellen' })}</span>
|
|
||||||
<ArrowRightIcon className="h-4 w-4 transition group-hover:translate-x-0.5" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
role="alert"
|
|
||||||
className="mt-4 flex items-start gap-3 rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-100"
|
|
||||||
>
|
|
||||||
<AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
|
|
||||||
<p className="min-w-0 flex-1 break-words">{error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,109 +1,32 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
import { DeviceRegistration } from '../components/DeviceRegistration';
|
|
||||||
import { DeviceRestore } from '../components/DeviceRestore';
|
|
||||||
import { useAuth } from '../context/AuthContext';
|
import { useAuth } from '../context/AuthContext';
|
||||||
|
import { UserKeySetup } from '../components/UserKeySetup';
|
||||||
type Mode = 'register' | 'restore';
|
import { UserKeyUnlock } from '../components/UserKeyUnlock';
|
||||||
|
|
||||||
export function DevicePage() {
|
export function DevicePage() {
|
||||||
const { t } = useTranslation(['app']);
|
const { session, userKeyState, refreshUserKeyState } = useAuth();
|
||||||
const { session, profile, setDevice } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [mode, setMode] = useState<Mode>('register');
|
if (!session) return null;
|
||||||
|
const onComplete = async () => {
|
||||||
if (!session) return null; // Guarded by RequireAuth, but be defensive.
|
await refreshUserKeyState();
|
||||||
|
navigate('/chats', { replace: true });
|
||||||
const defaultName =
|
};
|
||||||
(profile?.displayName ?? profile?.username ?? 'Desktop') + ' Desktop';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-ink-950 px-5 py-10 text-neutral-100 sm:px-8">
|
<main className="flex min-h-screen items-center justify-center bg-ink-950 p-6">
|
||||||
<BackgroundStage />
|
<div className="w-full max-w-md">
|
||||||
<div className="relative z-10 w-full max-w-md space-y-3">
|
{userKeyState.status === 'needs-setup' && (
|
||||||
<div
|
<UserKeySetup userId={session.user.id} onComplete={onComplete} />
|
||||||
role="tablist"
|
)}
|
||||||
aria-label={t('app:backup.mode_label', { defaultValue: 'Gerätemodus' })}
|
{userKeyState.status === 'needs-unlock' && (
|
||||||
className="flex gap-1 rounded-xl border border-white/10 bg-ink-900/60 p-1 backdrop-blur-xl"
|
<UserKeyUnlock
|
||||||
>
|
|
||||||
<TabButton
|
|
||||||
active={mode === 'register'}
|
|
||||||
onClick={() => setMode('register')}
|
|
||||||
label={t('app:backup.mode_register', { defaultValue: 'Neu einrichten' })}
|
|
||||||
/>
|
|
||||||
<TabButton
|
|
||||||
active={mode === 'restore'}
|
|
||||||
onClick={() => setMode('restore')}
|
|
||||||
label={t('app:backup.mode_restore', { defaultValue: 'Backup wiederherstellen' })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mode === 'register' ? (
|
|
||||||
<DeviceRegistration
|
|
||||||
userId={session.user.id}
|
userId={session.user.id}
|
||||||
defaultName={defaultName}
|
hasRecovery={userKeyState.hasRecovery}
|
||||||
onRegistered={(device) => {
|
lockedUntil={userKeyState.lockedUntil}
|
||||||
setDevice(device);
|
onUnlocked={onComplete}
|
||||||
// Signal the chats page to open the post-registration backup
|
|
||||||
// prompt (AppShell reads this on mount).
|
|
||||||
try {
|
|
||||||
window.sessionStorage.setItem('chatapp.backup.prompt', '1');
|
|
||||||
} catch {
|
|
||||||
/* storage disabled — skip hint */
|
|
||||||
}
|
|
||||||
navigate('/chats', { replace: true });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<DeviceRestore
|
|
||||||
userId={session.user.id}
|
|
||||||
onRestored={(device) => {
|
|
||||||
setDevice(device);
|
|
||||||
navigate('/chats', { replace: true });
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function TabButton({
|
|
||||||
active,
|
|
||||||
onClick,
|
|
||||||
label,
|
|
||||||
}: {
|
|
||||||
active: boolean;
|
|
||||||
onClick: () => void;
|
|
||||||
label: string;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
role="tab"
|
|
||||||
aria-selected={active}
|
|
||||||
onClick={onClick}
|
|
||||||
className={
|
|
||||||
'flex-1 cursor-pointer rounded-lg px-3 py-2 text-xs font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
|
|
||||||
(active
|
|
||||||
? 'bg-brand-500/20 text-brand-100 ring-1 ring-brand-400/40'
|
|
||||||
: 'text-neutral-400 hover:bg-white/5 hover:text-neutral-100')
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BackgroundStage() {
|
|
||||||
return (
|
|
||||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0">
|
|
||||||
<div className="bg-grid absolute inset-0 opacity-[0.28]" />
|
|
||||||
<div className="absolute -left-32 top-1/4 h-[460px] w-[460px] rounded-full bg-brand-500/25 blur-3xl" />
|
|
||||||
<div className="absolute -right-32 bottom-0 h-[460px] w-[460px] rounded-full bg-fuchsia-500/15 blur-3xl" />
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_45%,rgba(5,5,7,0.65)_100%)]" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user