mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 14:46:43 +02:00
feat(auth): add TOTP two-factor authentication across all apps
Uses Better Auth's built-in twoFactor plugin for TOTP + backup codes: Backend (mana-core-auth): - twoFactor plugin in better-auth.config.ts (issuer: ManaCore) - twoFactorEnabled field on users table, backupCodes as encrypted text - 2FA redirect detection in signIn flow - Passthrough controller forwards /two-factor/* to Better Auth - Security event types for 2FA operations Client (shared-auth): - enableTwoFactor, disableTwoFactor, verifyTwoFactor, verifyBackupCode, generateBackupCodes methods with session-to-token exchange UI (shared-auth-ui): - LoginPage: 2FA code input view after password login, backup code toggle - TwoFactorSetup: settings component with enable/disable/QR code/backup codes App integration: - All 19 auth stores have verifyTwoFactor() and verifyBackupCode() - All 19 login pages pass onVerifyTwoFactor and onVerifyBackupCode callbacks - ManaCore settings page has TwoFactorSetup component Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
90e6135637
commit
f5a9edcfb6
49 changed files with 1800 additions and 169 deletions
691
packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
Normal file
691
packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
Normal file
|
|
@ -0,0 +1,691 @@
|
|||
<script lang="ts">
|
||||
import type { AuthResult } from '../types';
|
||||
|
||||
export interface TwoFactorSetupTranslations {
|
||||
title: string;
|
||||
statusEnabled: string;
|
||||
statusDisabled: string;
|
||||
enableButton: string;
|
||||
disableButton: string;
|
||||
regenerateButton: string;
|
||||
passwordLabel: string;
|
||||
passwordPlaceholder: string;
|
||||
confirmButton: string;
|
||||
cancelButton: string;
|
||||
setupTitle: string;
|
||||
setupStep1: string;
|
||||
setupStep2: string;
|
||||
manualEntryLabel: string;
|
||||
copyButton: string;
|
||||
copiedButton: string;
|
||||
doneButton: string;
|
||||
disableConfirmTitle: string;
|
||||
disableConfirmText: string;
|
||||
backupCodesTitle: string;
|
||||
backupCodesWarning: string;
|
||||
copyCodesButton: string;
|
||||
copiedCodesButton: string;
|
||||
}
|
||||
|
||||
const defaultTranslations: TwoFactorSetupTranslations = {
|
||||
title: 'Zwei-Faktor-Authentifizierung',
|
||||
statusEnabled: 'Aktiviert',
|
||||
statusDisabled: 'Deaktiviert',
|
||||
enableButton: 'Aktivieren',
|
||||
disableButton: 'Deaktivieren',
|
||||
regenerateButton: 'Backup-Codes erneuern',
|
||||
passwordLabel: 'Passwort zur Bestätigung',
|
||||
passwordPlaceholder: 'Passwort',
|
||||
confirmButton: 'Bestätigen',
|
||||
cancelButton: 'Abbrechen',
|
||||
setupTitle: '2FA einrichten',
|
||||
setupStep1: '1. Scanne den QR-Code oder gib den Schlüssel manuell ein',
|
||||
setupStep2: '2. Sichere deine Backup-Codes',
|
||||
manualEntryLabel: 'Schlüssel für manuelle Eingabe:',
|
||||
copyButton: 'Kopieren',
|
||||
copiedButton: 'Kopiert!',
|
||||
doneButton: 'Fertig',
|
||||
disableConfirmTitle: '2FA deaktivieren',
|
||||
disableConfirmText:
|
||||
'Bist du sicher, dass du die Zwei-Faktor-Authentifizierung deaktivieren möchtest?',
|
||||
backupCodesTitle: 'Neue Backup-Codes',
|
||||
backupCodesWarning: 'Speichere diese Codes sicher ab. Sie ersetzen die bisherigen Codes.',
|
||||
copyCodesButton: 'Codes kopieren',
|
||||
copiedCodesButton: 'Kopiert!',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
enabled: boolean;
|
||||
onEnable: (
|
||||
password: string
|
||||
) => Promise<{ success: boolean; totpURI?: string; backupCodes?: string[]; error?: string }>;
|
||||
onDisable: (password: string) => Promise<{ success: boolean; error?: string }>;
|
||||
onGenerateBackupCodes: (
|
||||
password: string
|
||||
) => Promise<{ success: boolean; backupCodes?: string[]; error?: string }>;
|
||||
primaryColor?: string;
|
||||
translations?: Partial<TwoFactorSetupTranslations>;
|
||||
}
|
||||
|
||||
let {
|
||||
enabled,
|
||||
onEnable,
|
||||
onDisable,
|
||||
onGenerateBackupCodes,
|
||||
primaryColor = '#6366f1',
|
||||
translations = {},
|
||||
}: Props = $props();
|
||||
|
||||
const t = $derived({ ...defaultTranslations, ...translations });
|
||||
|
||||
type View =
|
||||
| 'status'
|
||||
| 'enable-password'
|
||||
| 'setup'
|
||||
| 'disable-password'
|
||||
| 'regenerate-password'
|
||||
| 'backup-codes';
|
||||
|
||||
let view = $state<View>('status');
|
||||
let password = $state('');
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let totpURI = $state<string | null>(null);
|
||||
let backupCodes = $state<string[]>([]);
|
||||
let copied = $state(false);
|
||||
let codesCopied = $state(false);
|
||||
|
||||
/** Extract the secret from an otpauth:// URI */
|
||||
function extractSecret(uri: string): string {
|
||||
try {
|
||||
const url = new URL(uri);
|
||||
return url.searchParams.get('secret') || uri;
|
||||
} catch {
|
||||
return uri;
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
view = 'status';
|
||||
password = '';
|
||||
error = null;
|
||||
totpURI = null;
|
||||
backupCodes = [];
|
||||
copied = false;
|
||||
codesCopied = false;
|
||||
}
|
||||
|
||||
async function handleEnable() {
|
||||
if (!password) return;
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
const result = await onEnable(password);
|
||||
loading = false;
|
||||
|
||||
if (result.success && result.totpURI) {
|
||||
totpURI = result.totpURI;
|
||||
backupCodes = result.backupCodes || [];
|
||||
view = 'setup';
|
||||
password = '';
|
||||
} else {
|
||||
error = result.error || 'Fehler beim Aktivieren';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDisable() {
|
||||
if (!password) return;
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
const result = await onDisable(password);
|
||||
loading = false;
|
||||
|
||||
if (result.success) {
|
||||
reset();
|
||||
} else {
|
||||
error = result.error || 'Fehler beim Deaktivieren';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRegenerateBackupCodes() {
|
||||
if (!password) return;
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
const result = await onGenerateBackupCodes(password);
|
||||
loading = false;
|
||||
|
||||
if (result.success && result.backupCodes) {
|
||||
backupCodes = result.backupCodes;
|
||||
view = 'backup-codes';
|
||||
password = '';
|
||||
} else {
|
||||
error = result.error || 'Fehler beim Erneuern der Codes';
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToClipboard(text: string, type: 'uri' | 'codes') {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
if (type === 'uri') {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
} else {
|
||||
codesCopied = true;
|
||||
setTimeout(() => (codesCopied = false), 2000);
|
||||
}
|
||||
} catch {
|
||||
// Clipboard API not available
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="two-factor-setup">
|
||||
{#if view === 'status'}
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">{t.title}</h3>
|
||||
<div class="status-badge" class:status-enabled={enabled} class:status-disabled={!enabled}>
|
||||
<span class="status-dot"></span>
|
||||
{enabled ? t.statusEnabled : t.statusDisabled}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
{#if enabled}
|
||||
<button
|
||||
type="button"
|
||||
class="action-button secondary"
|
||||
style:border-color={primaryColor}
|
||||
onclick={() => {
|
||||
view = 'regenerate-password';
|
||||
error = null;
|
||||
}}
|
||||
>
|
||||
{t.regenerateButton}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action-button danger"
|
||||
onclick={() => {
|
||||
view = 'disable-password';
|
||||
error = null;
|
||||
}}
|
||||
>
|
||||
{t.disableButton}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="action-button primary"
|
||||
style:background-color={primaryColor + '60'}
|
||||
style:border-color={primaryColor}
|
||||
onclick={() => {
|
||||
view = 'enable-password';
|
||||
error = null;
|
||||
}}
|
||||
>
|
||||
{t.enableButton}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if view === 'enable-password' || view === 'disable-password' || view === 'regenerate-password'}
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">
|
||||
{#if view === 'disable-password'}
|
||||
{t.disableConfirmTitle}
|
||||
{:else if view === 'regenerate-password'}
|
||||
{t.backupCodesTitle}
|
||||
{:else}
|
||||
{t.title}
|
||||
{/if}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if view === 'disable-password'}
|
||||
<p class="confirm-text">{t.disableConfirmText}</p>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="error-message" role="alert">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (view === 'enable-password') handleEnable();
|
||||
else if (view === 'disable-password') handleDisable();
|
||||
else handleRegenerateBackupCodes();
|
||||
}}
|
||||
>
|
||||
<div class="input-group">
|
||||
<label for="2fa-password" class="input-label">{t.passwordLabel}</label>
|
||||
<input
|
||||
id="2fa-password"
|
||||
type="password"
|
||||
bind:value={password}
|
||||
placeholder={t.passwordPlaceholder}
|
||||
required
|
||||
autocomplete="current-password"
|
||||
class="input-field"
|
||||
style:--ring-color={primaryColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button type="button" class="action-button secondary" onclick={reset}>
|
||||
{t.cancelButton}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !password}
|
||||
class="action-button primary"
|
||||
style:background-color={view === 'disable-password' ? '#ef444460' : primaryColor + '60'}
|
||||
style:border-color={view === 'disable-password' ? '#ef4444' : primaryColor}
|
||||
>
|
||||
{loading ? '...' : t.confirmButton}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else if view === 'setup'}
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">{t.setupTitle}</h3>
|
||||
</div>
|
||||
|
||||
<div class="setup-step">
|
||||
<p class="step-label">{t.setupStep1}</p>
|
||||
|
||||
{#if totpURI}
|
||||
<div class="qr-section">
|
||||
<img
|
||||
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={encodeURIComponent(
|
||||
totpURI
|
||||
)}"
|
||||
alt="QR Code for TOTP setup"
|
||||
width="200"
|
||||
height="200"
|
||||
class="qr-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="manual-entry">
|
||||
<p class="manual-label">{t.manualEntryLabel}</p>
|
||||
<div class="secret-display">
|
||||
<code class="secret-code">{extractSecret(totpURI)}</code>
|
||||
<button
|
||||
type="button"
|
||||
class="copy-button"
|
||||
style:color={primaryColor}
|
||||
onclick={() => copyToClipboard(extractSecret(totpURI || ''), 'uri')}
|
||||
>
|
||||
{copied ? t.copiedButton : t.copyButton}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if backupCodes.length > 0}
|
||||
<div class="setup-step">
|
||||
<p class="step-label">{t.setupStep2}</p>
|
||||
<p class="backup-warning">{t.backupCodesWarning}</p>
|
||||
|
||||
<div class="backup-grid">
|
||||
{#each backupCodes as code}
|
||||
<code class="backup-code">{code}</code>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="copy-button"
|
||||
style:color={primaryColor}
|
||||
style:margin-top="0.5rem"
|
||||
onclick={() => copyToClipboard(backupCodes.join('\n'), 'codes')}
|
||||
>
|
||||
{codesCopied ? t.copiedCodesButton : t.copyCodesButton}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="action-buttons" style:margin-top="1.5rem">
|
||||
<button
|
||||
type="button"
|
||||
class="action-button primary"
|
||||
style:background-color={primaryColor + '60'}
|
||||
style:border-color={primaryColor}
|
||||
onclick={reset}
|
||||
>
|
||||
{t.doneButton}
|
||||
</button>
|
||||
</div>
|
||||
{:else if view === 'backup-codes'}
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">{t.backupCodesTitle}</h3>
|
||||
</div>
|
||||
|
||||
<p class="backup-warning">{t.backupCodesWarning}</p>
|
||||
|
||||
<div class="backup-grid">
|
||||
{#each backupCodes as code}
|
||||
<code class="backup-code">{code}</code>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="copy-button"
|
||||
style:color={primaryColor}
|
||||
style:margin-top="0.5rem"
|
||||
onclick={() => copyToClipboard(backupCodes.join('\n'), 'codes')}
|
||||
>
|
||||
{codesCopied ? t.copiedCodesButton : t.copyCodesButton}
|
||||
</button>
|
||||
|
||||
<div class="action-buttons" style:margin-top="1.5rem">
|
||||
<button
|
||||
type="button"
|
||||
class="action-button primary"
|
||||
style:background-color={primaryColor + '60'}
|
||||
style:border-color={primaryColor}
|
||||
onclick={reset}
|
||||
>
|
||||
{t.doneButton}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.two-factor-setup {
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:global(.light) .two-factor-setup {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
:global(.light) .section-title {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.status-enabled {
|
||||
color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.status-disabled {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
:global(.light) .status-disabled {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex: 1;
|
||||
height: 2.75rem;
|
||||
border: 2px solid;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
:global(.light) .action-button {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.action-button.primary {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background: transparent;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
:global(.light) .action-button.secondary {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.action-button.danger {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.action-button:hover:not(:disabled) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.confirm-text {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
:global(.light) .confirm-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.375rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
:global(.light) .input-label {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
height: 2.75rem;
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9375rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
:global(.light) .input-field {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--ring-color, currentColor);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 0.625rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #ef4444;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setup-step {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
:global(.light) .step-label {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.manual-entry {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.manual-label {
|
||||
font-size: 0.8125rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
:global(.light) .manual-label {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.secret-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.light) .secret-display {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.secret-code {
|
||||
flex: 1;
|
||||
font-size: 0.8125rem;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
:global(.light) .secret-code {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.backup-warning {
|
||||
font-size: 0.8125rem;
|
||||
color: #f59e0b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.backup-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.backup-code {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.8125rem;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
:global(.light) .backup-code {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@ export { default as AuthGateModal } from './components/AuthGateModal.svelte';
|
|||
export { default as SessionExpiredBanner } from './components/SessionExpiredBanner.svelte';
|
||||
export { default as AuthGate } from './components/AuthGate.svelte';
|
||||
export { default as PasskeyManager } from './components/PasskeyManager.svelte';
|
||||
export { default as TwoFactorSetup } from './components/TwoFactorSetup.svelte';
|
||||
|
||||
// Utilities
|
||||
export {
|
||||
|
|
@ -28,3 +29,4 @@ export type {
|
|||
AuthGateTranslations,
|
||||
} from './types';
|
||||
export type { PasskeyManagerTranslations } from './components/PasskeyManager.svelte';
|
||||
export type { TwoFactorSetupTranslations } from './components/TwoFactorSetup.svelte';
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@
|
|||
buildTime?: string;
|
||||
onSignInWithPasskey?: () => Promise<AuthResult>;
|
||||
passkeyAvailable?: boolean;
|
||||
onVerifyTwoFactor?: (code: string, trustDevice?: boolean) => Promise<AuthResult>;
|
||||
onVerifyBackupCode?: (code: string) => Promise<AuthResult>;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -110,6 +112,8 @@
|
|||
buildTime = '',
|
||||
onSignInWithPasskey,
|
||||
passkeyAvailable = false,
|
||||
onVerifyTwoFactor,
|
||||
onVerifyBackupCode,
|
||||
}: Props = $props();
|
||||
|
||||
const t = $derived({ ...defaultTranslations, ...translations });
|
||||
|
|
@ -137,6 +141,9 @@
|
|||
let showEmailNotVerified = $state(false);
|
||||
let resendingVerification = $state(false);
|
||||
let verificationEmailSent = $state(false);
|
||||
let showTwoFactor = $state(false);
|
||||
let twoFactorCode = $state('');
|
||||
let useBackupCode = $state(false);
|
||||
|
||||
// Theme state - can be toggled manually, defaults to system preference
|
||||
let userThemePreference = $state<'light' | 'dark' | null>(null);
|
||||
|
|
@ -229,6 +236,12 @@
|
|||
const result = await onSignIn(email, password);
|
||||
loading = false;
|
||||
|
||||
// Check if 2FA is required
|
||||
if ((result as any).twoFactorRedirect) {
|
||||
showTwoFactor = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
showSuccess = true;
|
||||
successAnnouncement = t.signInSuccess;
|
||||
|
|
@ -258,6 +271,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function handleTwoFactorVerify() {
|
||||
if (!twoFactorCode) return;
|
||||
loading = true;
|
||||
clearError();
|
||||
|
||||
const handler = useBackupCode ? onVerifyBackupCode : onVerifyTwoFactor;
|
||||
if (!handler) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await handler(twoFactorCode);
|
||||
loading = false;
|
||||
|
||||
if (result.success) {
|
||||
showSuccess = true;
|
||||
successAnnouncement = t.signInSuccess;
|
||||
setTimeout(() => goto(successRedirect), 600);
|
||||
} else {
|
||||
setError(result.error || t.signInFailed, 'general');
|
||||
twoFactorCode = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePasskeySignIn() {
|
||||
if (!onSignInWithPasskey) return;
|
||||
loading = true;
|
||||
|
|
@ -352,198 +389,290 @@
|
|||
<!-- Form Section -->
|
||||
<div class="form-section">
|
||||
<div class="form-card" class:shake={shakeError}>
|
||||
{#if showVerifiedBanner}
|
||||
<div class="verified-banner" role="status" aria-live="polite">
|
||||
<Check size={18} class="text-green-500 shrink-0" />
|
||||
<p>{t.emailVerified}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="verified-banner-close"
|
||||
onclick={() => (showVerifiedBanner = false)}
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{#if showTwoFactor}
|
||||
<!-- 2FA Verification -->
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">Zwei-Faktor-Authentifizierung</h2>
|
||||
<p class="form-subtitle">
|
||||
{useBackupCode
|
||||
? 'Gib einen Backup-Code ein'
|
||||
: 'Gib den Code aus deiner Authenticator-App ein'}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">{t.title}</h2>
|
||||
<p class="form-subtitle">{t.subtitle}</p>
|
||||
</div>
|
||||
{#if error}
|
||||
<div class="error-message" role="alert">
|
||||
<Warning size={18} class="text-red-500 shrink-0" />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleTwoFactorVerify();
|
||||
}}
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={twoFactorCode}
|
||||
placeholder={useBackupCode ? 'Backup-Code' : '000000'}
|
||||
required
|
||||
autocomplete="one-time-code"
|
||||
inputmode={useBackupCode ? 'text' : 'numeric'}
|
||||
maxlength={useBackupCode ? 20 : 6}
|
||||
class="input-field"
|
||||
style:--ring-color={primaryColor}
|
||||
style:text-align="center"
|
||||
style:font-size="1.5rem"
|
||||
style:letter-spacing="0.5rem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !twoFactorCode}
|
||||
class="submit-button"
|
||||
style:background-color={primaryColor + '60'}
|
||||
style:border-color={primaryColor}
|
||||
>
|
||||
{loading ? 'Prüfe...' : 'Bestätigen'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if passkeyAvailable && onSignInWithPasskey}
|
||||
<button
|
||||
type="button"
|
||||
onclick={handlePasskeySignIn}
|
||||
disabled={loading || showSuccess}
|
||||
class="passkey-button"
|
||||
style:border-color={primaryColor}
|
||||
class="forgot-link"
|
||||
style:color={primaryColor}
|
||||
style:display="block"
|
||||
style:width="100%"
|
||||
style:text-align="center"
|
||||
style:margin-top="1rem"
|
||||
onclick={() => {
|
||||
useBackupCode = !useBackupCode;
|
||||
twoFactorCode = '';
|
||||
clearError();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
|
||||
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
|
||||
</svg>
|
||||
<span>Passkey</span>
|
||||
{useBackupCode ? 'Authenticator-App verwenden' : 'Backup-Code verwenden'}
|
||||
</button>
|
||||
<div class="divider">
|
||||
<span>{t.orDivider}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if verificationEmailSent}
|
||||
<div class="verified-banner" role="status" aria-live="polite">
|
||||
<Check size={18} class="text-green-500 shrink-0" />
|
||||
<p>{t.verificationEmailSent}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="verified-banner-close"
|
||||
onclick={() => (verificationEmailSent = false)}
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="error-message" id="form-error" role="alert" aria-live="assertive">
|
||||
<Warning size={18} class="text-red-500 shrink-0" />
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
{#if showEmailNotVerified && onResendVerification}
|
||||
<button
|
||||
type="button"
|
||||
class="resend-link"
|
||||
onclick={handleResendVerification}
|
||||
disabled={resendingVerification}
|
||||
style:color={primaryColor}
|
||||
>
|
||||
{resendingVerification ? t.resendingVerification : t.resendVerification}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogin();
|
||||
}}
|
||||
aria-busy={loading}
|
||||
>
|
||||
<!-- Email -->
|
||||
<div class="input-group">
|
||||
<label for="email" class="sr-only">{t.emailPlaceholder}</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:this={emailInput}
|
||||
bind:value={email}
|
||||
placeholder={t.emailPlaceholder}
|
||||
required
|
||||
autocomplete="email"
|
||||
aria-invalid={errorField === 'email'}
|
||||
class="input-field"
|
||||
class:input-error={errorField === 'email'}
|
||||
style:--ring-color={errorField === 'email' ? '#ef4444' : primaryColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="input-group">
|
||||
<label for="password" class="sr-only">{t.passwordPlaceholder}</label>
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
bind:this={passwordInput}
|
||||
bind:value={password}
|
||||
placeholder={t.passwordPlaceholder}
|
||||
required
|
||||
autocomplete="current-password"
|
||||
aria-invalid={errorField === 'password'}
|
||||
class="input-field has-icon"
|
||||
class:input-error={errorField === 'password'}
|
||||
style:--ring-color={errorField === 'password' ? '#ef4444' : primaryColor}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="forgot-link"
|
||||
style:color={primaryColor}
|
||||
style:display="block"
|
||||
style:width="100%"
|
||||
style:text-align="center"
|
||||
style:margin-top="0.5rem"
|
||||
onclick={() => {
|
||||
showTwoFactor = false;
|
||||
twoFactorCode = '';
|
||||
useBackupCode = false;
|
||||
clearError();
|
||||
}}
|
||||
>
|
||||
Zurück zum Login
|
||||
</button>
|
||||
{:else}
|
||||
{#if showVerifiedBanner}
|
||||
<div class="verified-banner" role="status" aria-live="polite">
|
||||
<Check size={18} class="text-green-500 shrink-0" />
|
||||
<p>{t.emailVerified}</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="password-toggle"
|
||||
aria-label={showPassword ? t.hidePassword : t.showPassword}
|
||||
class="verified-banner-close"
|
||||
onclick={() => (showVerifiedBanner = false)}
|
||||
aria-label="Close"
|
||||
>
|
||||
{#if showPassword}
|
||||
<EyeSlash size={20} />
|
||||
{:else}
|
||||
<Eye size={20} />
|
||||
{/if}
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">{t.title}</h2>
|
||||
<p class="form-subtitle">{t.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<!-- Remember & Forgot -->
|
||||
<div class="options-row">
|
||||
<label class="remember-label">
|
||||
<input type="checkbox" bind:checked={rememberMe} style:accent-color={primaryColor} />
|
||||
<span>{t.rememberMe}</span>
|
||||
</label>
|
||||
{#if passkeyAvailable && onSignInWithPasskey}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => goto(forgotPasswordPath)}
|
||||
class="forgot-link"
|
||||
style:color={primaryColor}
|
||||
onclick={handlePasskeySignIn}
|
||||
disabled={loading || showSuccess}
|
||||
class="passkey-button"
|
||||
style:border-color={primaryColor}
|
||||
>
|
||||
{t.forgotPassword}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || showSuccess}
|
||||
class="submit-button"
|
||||
style:background-color={showSuccess ? '#22c55e' : primaryColor + '60'}
|
||||
style:border-color={showSuccess ? '#22c55e' : primaryColor}
|
||||
>
|
||||
{#if loading}
|
||||
<svg
|
||||
class="spinner"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke-opacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
|
||||
<path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
|
||||
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
|
||||
</svg>
|
||||
<span>{t.signingIn}</span>
|
||||
{:else if showSuccess}
|
||||
<Check size={20} />
|
||||
<span>{t.success}</span>
|
||||
{:else}
|
||||
<SignIn size={20} />
|
||||
<span>{t.signInButton}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
<span>Passkey</span>
|
||||
</button>
|
||||
<div class="divider">
|
||||
<span>{t.orDivider}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="register-link">
|
||||
{t.noAccount}
|
||||
<button type="button" onclick={() => goto(registerPath)} style:color={primaryColor}>
|
||||
{t.createAccount}
|
||||
</button>
|
||||
</p>
|
||||
{#if verificationEmailSent}
|
||||
<div class="verified-banner" role="status" aria-live="polite">
|
||||
<Check size={18} class="text-green-500 shrink-0" />
|
||||
<p>{t.verificationEmailSent}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="verified-banner-close"
|
||||
onclick={() => (verificationEmailSent = false)}
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="error-message" id="form-error" role="alert" aria-live="assertive">
|
||||
<Warning size={18} class="text-red-500 shrink-0" />
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
{#if showEmailNotVerified && onResendVerification}
|
||||
<button
|
||||
type="button"
|
||||
class="resend-link"
|
||||
onclick={handleResendVerification}
|
||||
disabled={resendingVerification}
|
||||
style:color={primaryColor}
|
||||
>
|
||||
{resendingVerification ? t.resendingVerification : t.resendVerification}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogin();
|
||||
}}
|
||||
aria-busy={loading}
|
||||
>
|
||||
<!-- Email -->
|
||||
<div class="input-group">
|
||||
<label for="email" class="sr-only">{t.emailPlaceholder}</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:this={emailInput}
|
||||
bind:value={email}
|
||||
placeholder={t.emailPlaceholder}
|
||||
required
|
||||
autocomplete="email"
|
||||
aria-invalid={errorField === 'email'}
|
||||
class="input-field"
|
||||
class:input-error={errorField === 'email'}
|
||||
style:--ring-color={errorField === 'email' ? '#ef4444' : primaryColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="input-group">
|
||||
<label for="password" class="sr-only">{t.passwordPlaceholder}</label>
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
bind:this={passwordInput}
|
||||
bind:value={password}
|
||||
placeholder={t.passwordPlaceholder}
|
||||
required
|
||||
autocomplete="current-password"
|
||||
aria-invalid={errorField === 'password'}
|
||||
class="input-field has-icon"
|
||||
class:input-error={errorField === 'password'}
|
||||
style:--ring-color={errorField === 'password' ? '#ef4444' : primaryColor}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="password-toggle"
|
||||
aria-label={showPassword ? t.hidePassword : t.showPassword}
|
||||
>
|
||||
{#if showPassword}
|
||||
<EyeSlash size={20} />
|
||||
{:else}
|
||||
<Eye size={20} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Remember & Forgot -->
|
||||
<div class="options-row">
|
||||
<label class="remember-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={rememberMe}
|
||||
style:accent-color={primaryColor}
|
||||
/>
|
||||
<span>{t.rememberMe}</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => goto(forgotPasswordPath)}
|
||||
class="forgot-link"
|
||||
style:color={primaryColor}
|
||||
>
|
||||
{t.forgotPassword}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || showSuccess}
|
||||
class="submit-button"
|
||||
style:background-color={showSuccess ? '#22c55e' : primaryColor + '60'}
|
||||
style:border-color={showSuccess ? '#22c55e' : primaryColor}
|
||||
>
|
||||
{#if loading}
|
||||
<svg
|
||||
class="spinner"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke-opacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
|
||||
</svg>
|
||||
<span>{t.signingIn}</span>
|
||||
{:else if showSuccess}
|
||||
<Check size={20} />
|
||||
<span>{t.success}</span>
|
||||
{:else}
|
||||
<SignIn size={20} />
|
||||
<span>{t.signInButton}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">
|
||||
{t.noAccount}
|
||||
<button type="button" onclick={() => goto(registerPath)} style:color={primaryColor}>
|
||||
{t.createAccount}
|
||||
</button>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue