redesign the homepage

2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
@@ -0,0 +1,189 @@
+'use client'
+
+import { Button } from '@/components/actions/Button'
+import { TextInput } from '@/components/forms/TextInput'
+import { FormField } from '@/components/forms/FormField'
+import { AuthShell } from '@/components/auth/AuthShell'
+import { API_BASE } from '@/lib/api'
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import { useState } from 'react'
+
+interface Dict {
+  title: string
+  subtitle: string
+  email: string
+  emailPlaceholder: string
+  submit: string
+  submitting: string
+  backToLogin: string
+  successTitle: string
+  successBody: string
+  error: string
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Forgot your password?',
+    subtitle: "Enter your work email and we'll send you a reset link.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Send reset link',
+    submitting: 'Sending…',
+    backToLogin: 'Back to sign in',
+    successTitle: 'Check your email',
+    successBody: 'If that email is registered, a reset link has been sent. It expires in 60 minutes.',
+    error: 'Something went wrong. Please try again.',
+  },
+  fr: {
+    title: 'Mot de passe oublié ?',
+    subtitle: "Entrez votre email professionnel et nous vous enverrons un lien de réinitialisation.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Envoyer le lien',
+    submitting: 'Envoi…',
+    backToLogin: 'Retour à la connexion',
+    successTitle: 'Vérifiez votre email',
+    successBody: "Si cet email est enregistré, un lien de réinitialisation a été envoyé. Il expire dans 60 minutes.",
+    error: 'Une erreur est survenue. Veuillez réessayer.',
+  },
+  ar: {
+    title: 'نسيت كلمة المرور؟',
+    subtitle: 'أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.',
+    email: 'البريد الإلكتروني',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'إرسال رابط إعادة التعيين',
+    submitting: 'جارٍ الإرسال…',
+    backToLogin: 'العودة إلى تسجيل الدخول',
+    successTitle: 'تحقق من بريدك الإلكتروني',
+    successBody: 'إذا كان البريد الإلكتروني مسجلاً، فقد تم إرسال رابط إعادة التعيين. تنتهي صلاحيته خلال 60 دقيقة.',
+    error: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+  },
+}
+
+export function ForgotPasswordForm({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      const [empRes, adminRes] = await Promise.all([
+        fetch(`${API_BASE}/auth/employee/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+        fetch(`${API_BASE}/admin/auth/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+      ])
+      if (!empRes.ok && !adminRes.ok) throw new Error()
+      setSent(true)
+    } catch {
+      setError(dict.error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const signInHref = localizedPath('sign-in', locale)
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      {sent ? (
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              margin: '0 auto 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '3.5rem',
+              height: '3.5rem',
+              borderRadius: '50%',
+              background: 'var(--color-success-bg, #ecfdf5)',
+            }}
+          >
+            <svg
+              style={{ width: '1.75rem', height: '1.75rem', color: 'var(--color-success-text, #059669)' }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+            {dict.successTitle}
+          </h2>
+          <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+            {dict.successBody}
+          </p>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          {error ? (
+            <div
+              style={{
+                borderRadius: '1.5rem',
+                border: '1px solid var(--color-error-border, #fecaca)',
+                background: 'var(--color-error-bg, #fef2f2)',
+                padding: '0.75rem 1rem',
+                fontSize: '0.875rem',
+                color: 'var(--color-error-text, #b91c1c)',
+              }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <FormField id="forgot-email" label={dict.email} required>
+            <TextInput
+              id="forgot-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={dict.emailPlaceholder}
+              autoComplete="email"
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.submitting : dict.submit}
+          </Button>
+        </form>
+      )}
+
+      <div
+        style={{
+          marginTop: '1.5rem',
+          borderTop: '1px solid var(--color-border)',
+          paddingTop: '1.5rem',
+          textAlign: 'center',
+          fontSize: '0.875rem',
+        }}
+      >
+        <a
+          href={signInHref}
+          style={{
+            fontWeight: 600,
+            color: 'var(--color-heading)',
+            textDecoration: 'underline',
+            textUnderlineOffset: '4px',
+          }}
+        >
+          {dict.backToLogin}
+        </a>
+      </div>
+    </AuthShell>
+  )
+}