mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-21 11:46:41 +02:00
Feat: Login localization, design, märchenzauber feature complete webapp
This commit is contained in:
Till-JS
parent
9c584a2580
commit
84f9343d25
47 changed files with 3254 additions and 175 deletions
|
|
@ -37,5 +37,10 @@ export type {
|
|||
IconName
|
||||
} from './types';
|
||||
|
||||
// Page Translation Types
|
||||
export type { LoginTranslations } from './pages/LoginPage.svelte';
|
||||
export type { RegisterTranslations } from './pages/RegisterPage.svelte';
|
||||
export type { ForgotPasswordTranslations } from './pages/ForgotPasswordPage.svelte';
|
||||
|
||||
// Icon paths
|
||||
export { iconPaths } from './icons/iconPaths';
|
||||
|
|
|
|||
|
|
@ -5,6 +5,38 @@
|
|||
|
||||
type PageMode = 'form' | 'success';
|
||||
|
||||
/** Translation strings for the forgot password page */
|
||||
export interface ForgotPasswordTranslations {
|
||||
titleForm: string;
|
||||
titleSuccess: string;
|
||||
description: string;
|
||||
emailPlaceholder: string;
|
||||
sendResetLinkButton: string;
|
||||
sending: string;
|
||||
backToLogin: string;
|
||||
resendEmail: string;
|
||||
// Success message (uses template with email)
|
||||
successMessage: string;
|
||||
// Error messages
|
||||
emailRequired: string;
|
||||
sendFailed: string;
|
||||
}
|
||||
|
||||
/** Default English translations */
|
||||
const defaultTranslations: ForgotPasswordTranslations = {
|
||||
titleForm: 'Reset Password',
|
||||
titleSuccess: 'Email Sent',
|
||||
description: "Enter your email address and we'll send you a link to reset your password.",
|
||||
emailPlaceholder: 'Email',
|
||||
sendResetLinkButton: 'Send Reset Link',
|
||||
sending: 'Sending...',
|
||||
backToLogin: 'Back to Login',
|
||||
resendEmail: 'Resend Email',
|
||||
successMessage: "We've sent a password reset link to {email}. Please check your inbox.",
|
||||
emailRequired: 'Email is required',
|
||||
sendFailed: 'Failed to send reset email'
|
||||
};
|
||||
|
||||
interface Props {
|
||||
/** App name */
|
||||
appName: string;
|
||||
|
|
@ -24,6 +56,8 @@
|
|||
darkBackground?: string;
|
||||
/** App slider snippet */
|
||||
appSlider?: Snippet;
|
||||
/** Translations for i18n support */
|
||||
translations?: Partial<ForgotPasswordTranslations>;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -35,9 +69,18 @@
|
|||
loginPath = '/login',
|
||||
lightBackground = '#f5f5f5',
|
||||
darkBackground = '#121212',
|
||||
appSlider
|
||||
appSlider,
|
||||
translations = {}
|
||||
}: Props = $props();
|
||||
|
||||
// Merge provided translations with defaults
|
||||
const t = $derived({ ...defaultTranslations, ...translations });
|
||||
|
||||
// Helper to interpolate success message with email
|
||||
function getSuccessMessage(email: string): string {
|
||||
return t.successMessage.replace('{email}', email);
|
||||
}
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let email = $state('');
|
||||
|
|
@ -68,7 +111,7 @@
|
|||
error = null;
|
||||
|
||||
if (!email) {
|
||||
error = 'Email is required';
|
||||
error = t.emailRequired;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -82,7 +125,7 @@
|
|||
email = '';
|
||||
mode = 'success';
|
||||
} else {
|
||||
error = result.error || 'Failed to send reset email';
|
||||
error = result.error || t.sendFailed;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -121,7 +164,7 @@
|
|||
class="mb-6 text-center text-xl font-semibold"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'};"
|
||||
>
|
||||
{mode === 'form' ? 'Reset Password' : 'Email Sent'}
|
||||
{mode === 'form' ? t.titleForm : t.titleSuccess}
|
||||
</h2>
|
||||
|
||||
<!-- Error Messages -->
|
||||
|
|
@ -144,14 +187,14 @@
|
|||
class="mb-4 text-sm"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'};"
|
||||
>
|
||||
Enter your email address and we'll send you a link to reset your password.
|
||||
{t.description}
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<input
|
||||
type="email"
|
||||
bind:value={email}
|
||||
placeholder="Email"
|
||||
placeholder={t.emailPlaceholder}
|
||||
required
|
||||
class="h-14 w-full rounded-xl border px-4 text-lg transition-colors focus:outline-none focus:ring-2"
|
||||
style="background-color: {isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.8)'}; border-color: {isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'}; color: {isDark ? '#ffffff' : '#000000'}; --tw-ring-color: {primaryColor};"
|
||||
|
|
@ -165,7 +208,7 @@
|
|||
style="background-color: {primaryColor}60; border-color: {primaryColor}; color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
<Icon name="key" size={20} />
|
||||
{loading ? 'Sending...' : 'Send Reset Link'}
|
||||
{loading ? t.sending : t.sendResetLinkButton}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -177,7 +220,7 @@
|
|||
style="color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
<Icon name="arrow-left" size={20} />
|
||||
Back to Login
|
||||
{t.backToLogin}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -196,8 +239,7 @@
|
|||
class="text-sm text-center px-2"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'};"
|
||||
>
|
||||
We've sent a password reset link to <strong>{resetEmail}</strong>. Please check your
|
||||
inbox.
|
||||
{@html getSuccessMessage(resetEmail).replace(resetEmail, `<strong>${resetEmail}</strong>`)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -208,7 +250,7 @@
|
|||
style="background-color: {primaryColor}60; border-color: {primaryColor}; color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
<Icon name="sign-in" size={20} />
|
||||
Back to Login
|
||||
{t.backToLogin}
|
||||
</button>
|
||||
|
||||
<button
|
||||
|
|
@ -219,7 +261,7 @@
|
|||
class="flex h-10 items-center justify-center gap-2 rounded-xl font-medium transition-all hover:opacity-80 border"
|
||||
style="background-color: {isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.8)'}; border-color: {isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'}; color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
Resend Email
|
||||
{t.resendEmail}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,60 @@
|
|||
import GoogleSignInButton from '../components/GoogleSignInButton.svelte';
|
||||
import AppleSignInButton from '../components/AppleSignInButton.svelte';
|
||||
|
||||
/** Translation strings for the login page */
|
||||
export interface LoginTranslations {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
emailPlaceholder: string;
|
||||
passwordPlaceholder: string;
|
||||
rememberMe: string;
|
||||
forgotPassword: string;
|
||||
signInButton: string;
|
||||
signingIn: string;
|
||||
success: string;
|
||||
orDivider: string;
|
||||
noAccount: string;
|
||||
createAccount: string;
|
||||
skipToForm: string;
|
||||
showPassword: string;
|
||||
hidePassword: string;
|
||||
// Error messages
|
||||
emailRequired: string;
|
||||
emailInvalid: string;
|
||||
passwordRequired: string;
|
||||
signInFailed: string;
|
||||
googleSignInFailed: string;
|
||||
// Success messages
|
||||
signInSuccess: string;
|
||||
googleSignInSuccess: string;
|
||||
}
|
||||
|
||||
/** Default English translations */
|
||||
const defaultTranslations: LoginTranslations = {
|
||||
title: 'Sign In',
|
||||
subtitle: 'Sign in with your Mana account',
|
||||
emailPlaceholder: 'Email',
|
||||
passwordPlaceholder: 'Password',
|
||||
rememberMe: 'Remember me',
|
||||
forgotPassword: 'Forgot password?',
|
||||
signInButton: 'Sign In',
|
||||
signingIn: 'Signing in...',
|
||||
success: 'Success!',
|
||||
orDivider: 'or',
|
||||
noAccount: "Don't have an account?",
|
||||
createAccount: 'Create one',
|
||||
skipToForm: 'Skip to login form',
|
||||
showPassword: 'Show password',
|
||||
hidePassword: 'Hide password',
|
||||
emailRequired: 'Email is required',
|
||||
emailInvalid: 'Please enter a valid email address',
|
||||
passwordRequired: 'Password is required',
|
||||
signInFailed: 'Sign in failed',
|
||||
googleSignInFailed: 'Google sign in failed',
|
||||
signInSuccess: 'Successfully signed in. Redirecting...',
|
||||
googleSignInSuccess: 'Successfully signed in with Google. Redirecting...'
|
||||
};
|
||||
|
||||
interface Props {
|
||||
/** App name */
|
||||
appName: string;
|
||||
|
|
@ -38,6 +92,8 @@
|
|||
appSlider?: Snippet;
|
||||
/** Header snippet for controls like theme toggle and language selector */
|
||||
headerControls?: Snippet;
|
||||
/** Translations for i18n support */
|
||||
translations?: Partial<LoginTranslations>;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -56,9 +112,13 @@
|
|||
lightBackground = '#f5f5f5',
|
||||
darkBackground = '#121212',
|
||||
appSlider,
|
||||
headerControls
|
||||
headerControls,
|
||||
translations = {}
|
||||
}: Props = $props();
|
||||
|
||||
// Merge provided translations with defaults
|
||||
const t = $derived({ ...defaultTranslations, ...translations });
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let errorField = $state<'email' | 'password' | 'general' | null>(null);
|
||||
|
|
@ -135,19 +195,19 @@
|
|||
clearError();
|
||||
|
||||
if (!email) {
|
||||
setError('Email is required', 'email');
|
||||
setError(t.emailRequired, 'email');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isValidEmail(email)) {
|
||||
setError('Please enter a valid email address', 'email');
|
||||
setError(t.emailInvalid, 'email');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
setError('Password is required', 'password');
|
||||
setError(t.passwordRequired, 'password');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -159,12 +219,12 @@
|
|||
if (result.success) {
|
||||
// Show success feedback before redirect
|
||||
showSuccess = true;
|
||||
successAnnouncement = 'Successfully signed in. Redirecting...';
|
||||
successAnnouncement = t.signInSuccess;
|
||||
setTimeout(() => {
|
||||
goto(successRedirect);
|
||||
}, 600);
|
||||
} else {
|
||||
setError(result.error || 'Sign in failed', 'general');
|
||||
setError(result.error || t.signInFailed, 'general');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,12 +239,12 @@
|
|||
|
||||
if (result.success) {
|
||||
showSuccess = true;
|
||||
successAnnouncement = 'Successfully signed in with Google. Redirecting...';
|
||||
successAnnouncement = t.googleSignInSuccess;
|
||||
setTimeout(() => {
|
||||
goto(successRedirect);
|
||||
}, 600);
|
||||
} else {
|
||||
setError(result.error || 'Google sign in failed', 'general');
|
||||
setError(result.error || t.googleSignInFailed, 'general');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -285,7 +345,7 @@
|
|||
onclick={skipToForm}
|
||||
type="button"
|
||||
>
|
||||
Skip to login form
|
||||
{t.skipToForm}
|
||||
</button>
|
||||
|
||||
<!-- Screen reader announcements -->
|
||||
|
|
@ -340,13 +400,13 @@
|
|||
class="text-center text-xl font-semibold"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'};"
|
||||
>
|
||||
Sign In
|
||||
{t.title}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-sm text-center"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.6)'};"
|
||||
>
|
||||
Sign in with your Mana account
|
||||
{t.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -375,13 +435,13 @@
|
|||
>
|
||||
<!-- Email Field -->
|
||||
<div class="mb-3">
|
||||
<label for="email" class="sr-only">Email address</label>
|
||||
<label for="email" class="sr-only">{t.emailPlaceholder}</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:this={emailInput}
|
||||
bind:value={email}
|
||||
placeholder="Email"
|
||||
placeholder={t.emailPlaceholder}
|
||||
required
|
||||
autocomplete="email"
|
||||
aria-invalid={errorField === 'email'}
|
||||
|
|
@ -393,13 +453,13 @@
|
|||
|
||||
<!-- Password Field -->
|
||||
<div class="mb-3 relative">
|
||||
<label for="password" class="sr-only">Password</label>
|
||||
<label for="password" class="sr-only">{t.passwordPlaceholder}</label>
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
bind:this={passwordInput}
|
||||
bind:value={password}
|
||||
placeholder="Password"
|
||||
placeholder={t.passwordPlaceholder}
|
||||
required
|
||||
autocomplete="current-password"
|
||||
aria-invalid={errorField === 'password'}
|
||||
|
|
@ -411,9 +471,9 @@
|
|||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 transition-colors touch-target flex items-center justify-center"
|
||||
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||
aria-label={showPassword ? t.hidePassword : t.showPassword}
|
||||
aria-pressed={showPassword}
|
||||
title={showPassword ? 'Hide password' : 'Show password'}
|
||||
title={showPassword ? t.hidePassword : t.showPassword}
|
||||
>
|
||||
<Icon
|
||||
name={showPassword ? 'eye-off' : 'eye'}
|
||||
|
|
@ -436,7 +496,7 @@
|
|||
class="text-sm"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'};"
|
||||
>
|
||||
Remember me
|
||||
{t.rememberMe}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -446,7 +506,7 @@
|
|||
class="text-sm font-medium transition-opacity hover:opacity-70 touch-target flex items-center justify-center px-2"
|
||||
style="color: {primaryColor};"
|
||||
>
|
||||
Forgot password?
|
||||
{t.forgotPassword}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -470,13 +530,13 @@
|
|||
<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>Signing in...</span>
|
||||
<span>{t.signingIn}</span>
|
||||
{:else if showSuccess}
|
||||
<Icon name="check" size={20} />
|
||||
<span>Success!</span>
|
||||
<span>{t.success}</span>
|
||||
{:else}
|
||||
<Icon name="sign-in" size={20} />
|
||||
<span>Sign In</span>
|
||||
<span>{t.signInButton}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -485,7 +545,7 @@
|
|||
{#if enableGoogle || enableApple}
|
||||
<div class="my-4 flex items-center gap-3" role="separator" aria-orientation="horizontal">
|
||||
<div class="flex-1 border-t" style="border-color: {isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'};"></div>
|
||||
<span class="text-xs" style="color: {isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'};">or</span>
|
||||
<span class="text-xs" style="color: {isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'};">{t.orDivider}</span>
|
||||
<div class="flex-1 border-t" style="border-color: {isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'};"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -505,14 +565,14 @@
|
|||
class="text-sm"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.6)'};"
|
||||
>
|
||||
Don't have an account?
|
||||
{t.noAccount}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => goto(registerPath)}
|
||||
class="font-medium transition-opacity hover:opacity-70 touch-target inline-flex items-center justify-center px-1"
|
||||
style="color: {primaryColor};"
|
||||
>
|
||||
Create one
|
||||
{t.createAccount}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,52 @@
|
|||
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
/** Translation strings for the register page */
|
||||
export interface RegisterTranslations {
|
||||
title: string;
|
||||
emailPlaceholder: string;
|
||||
passwordPlaceholder: string;
|
||||
confirmPasswordPlaceholder: string;
|
||||
passwordRequirements: string;
|
||||
createAccountButton: string;
|
||||
creatingAccount: string;
|
||||
backToLogin: string;
|
||||
showPassword: string;
|
||||
hidePassword: string;
|
||||
// Error messages
|
||||
emailRequired: string;
|
||||
passwordRequired: string;
|
||||
confirmPasswordRequired: string;
|
||||
passwordsDoNotMatch: string;
|
||||
passwordTooShort: string;
|
||||
passwordStrengthError: string;
|
||||
registrationFailed: string;
|
||||
// Success messages
|
||||
accountCreated: string;
|
||||
}
|
||||
|
||||
/** Default English translations */
|
||||
const defaultTranslations: RegisterTranslations = {
|
||||
title: 'Create Account',
|
||||
emailPlaceholder: 'Email',
|
||||
passwordPlaceholder: 'Password',
|
||||
confirmPasswordPlaceholder: 'Confirm Password',
|
||||
passwordRequirements: 'Password must be at least 8 characters with lowercase, uppercase, number, and special character.',
|
||||
createAccountButton: 'Create Account',
|
||||
creatingAccount: 'Creating Account...',
|
||||
backToLogin: 'Back to Login',
|
||||
showPassword: 'Show password',
|
||||
hidePassword: 'Hide password',
|
||||
emailRequired: 'Email is required',
|
||||
passwordRequired: 'Password is required',
|
||||
confirmPasswordRequired: 'Please confirm your password',
|
||||
passwordsDoNotMatch: 'Passwords do not match',
|
||||
passwordTooShort: 'Password must be at least 8 characters',
|
||||
passwordStrengthError: 'Password must include lowercase, uppercase, number, and special character',
|
||||
registrationFailed: 'Registration failed',
|
||||
accountCreated: 'Account created! Please check your email to verify your account.'
|
||||
};
|
||||
|
||||
interface Props {
|
||||
/** App name */
|
||||
appName: string;
|
||||
|
|
@ -26,6 +72,8 @@
|
|||
darkBackground?: string;
|
||||
/** App slider snippet */
|
||||
appSlider?: Snippet;
|
||||
/** Translations for i18n support */
|
||||
translations?: Partial<RegisterTranslations>;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -38,9 +86,13 @@
|
|||
loginPath = '/login',
|
||||
lightBackground = '#f5f5f5',
|
||||
darkBackground = '#121212',
|
||||
appSlider
|
||||
appSlider,
|
||||
translations = {}
|
||||
}: Props = $props();
|
||||
|
||||
// Merge provided translations with defaults
|
||||
const t = $derived({ ...defaultTranslations, ...translations });
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let success = $state(false);
|
||||
|
|
@ -98,31 +150,31 @@
|
|||
|
||||
// Validation
|
||||
if (!email) {
|
||||
error = 'Email is required';
|
||||
error = t.emailRequired;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
error = 'Password is required';
|
||||
error = t.passwordRequired;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirmPassword) {
|
||||
error = 'Please confirm your password';
|
||||
error = t.confirmPasswordRequired;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
error = 'Passwords do not match';
|
||||
error = t.passwordsDoNotMatch;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
error = 'Password must be at least 8 characters';
|
||||
error = t.passwordTooShort;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -134,7 +186,7 @@
|
|||
const hasSymbol = /[^a-zA-Z0-9]/.test(password);
|
||||
|
||||
if (!hasLowercase || !hasUppercase || !hasDigit || !hasSymbol) {
|
||||
error = 'Password must include lowercase, uppercase, number, and special character';
|
||||
error = t.passwordStrengthError;
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -153,7 +205,7 @@
|
|||
goto(successRedirect);
|
||||
}
|
||||
} else {
|
||||
error = result.error || 'Registration failed';
|
||||
error = result.error || t.registrationFailed;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -192,7 +244,7 @@
|
|||
class="mb-6 text-center text-xl font-semibold"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'};"
|
||||
>
|
||||
Create Account
|
||||
{t.title}
|
||||
</h2>
|
||||
|
||||
<!-- Error Messages -->
|
||||
|
|
@ -206,7 +258,7 @@
|
|||
{#if success && needsVerification}
|
||||
<div class="mb-4 rounded-xl bg-green-500/20 border border-green-500/30 p-3">
|
||||
<p class="text-sm text-green-500">
|
||||
Account created! Please check your email to verify your account.
|
||||
{t.accountCreated}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -223,7 +275,7 @@
|
|||
<input
|
||||
type="email"
|
||||
bind:value={email}
|
||||
placeholder="Email"
|
||||
placeholder={t.emailPlaceholder}
|
||||
required
|
||||
class="h-14 w-full rounded-xl border px-4 text-lg transition-colors focus:outline-none focus:ring-2"
|
||||
style="background-color: {isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.8)'}; border-color: {isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'}; color: {isDark ? '#ffffff' : '#000000'}; --tw-ring-color: {primaryColor};"
|
||||
|
|
@ -234,7 +286,7 @@
|
|||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
bind:value={password}
|
||||
placeholder="Password"
|
||||
placeholder={t.passwordPlaceholder}
|
||||
required
|
||||
minlength={8}
|
||||
class="h-14 w-full rounded-xl border px-4 pr-12 text-lg transition-colors focus:outline-none focus:ring-2"
|
||||
|
|
@ -244,6 +296,7 @@
|
|||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
|
||||
aria-label={showPassword ? t.hidePassword : t.showPassword}
|
||||
>
|
||||
<Icon
|
||||
name={showPassword ? 'eye-off' : 'eye'}
|
||||
|
|
@ -257,7 +310,7 @@
|
|||
<input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
bind:value={confirmPassword}
|
||||
placeholder="Confirm Password"
|
||||
placeholder={t.confirmPasswordPlaceholder}
|
||||
required
|
||||
minlength={8}
|
||||
class="h-14 w-full rounded-xl border px-4 pr-12 text-lg transition-colors focus:outline-none focus:ring-2"
|
||||
|
|
@ -267,6 +320,7 @@
|
|||
type="button"
|
||||
onclick={() => (showConfirmPassword = !showConfirmPassword)}
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
|
||||
aria-label={showConfirmPassword ? t.hidePassword : t.showPassword}
|
||||
>
|
||||
<Icon
|
||||
name={showConfirmPassword ? 'eye-off' : 'eye'}
|
||||
|
|
@ -281,8 +335,7 @@
|
|||
class="mb-4 mt-2 text-xs"
|
||||
style="color: {isDark ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.6)'};"
|
||||
>
|
||||
Password must be at least 8 characters with lowercase, uppercase, number, and special
|
||||
character.
|
||||
{t.passwordRequirements}
|
||||
</p>
|
||||
|
||||
<button
|
||||
|
|
@ -292,7 +345,7 @@
|
|||
style="background-color: {primaryColor}60; border-color: {primaryColor}; color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
<Icon name="user-plus" size={20} />
|
||||
{loading ? 'Creating Account...' : 'Create Account'}
|
||||
{loading ? t.creatingAccount : t.createAccountButton}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -304,7 +357,7 @@
|
|||
style="color: {isDark ? '#ffffff' : '#000000'};"
|
||||
>
|
||||
<Icon name="arrow-left" size={20} />
|
||||
Back to Login
|
||||
{t.backToLogin}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue