chore: bulk commit of pre-existing changes

Includes: - Admin dashboard layout and page updates - API account auth module (routes, schemas, service) - Dashboard sign-up form extraction, middleware refactor - Marketplace proxy and middleware updates - CORS origins expansion for dev environment - Seed email domain correction (.com → .ma) - Docs: create-account guide, fleet page, signup plan - Various UI component and layout refinements
2026-06-25 00:57:59 -04:00
parent 572d115003
commit 3b142ca4c7
36 changed files with 2987 additions and 1156 deletions
@@ -0,0 +1,199 @@
+'use client'
+
+import Image from 'next/image'
+import { useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import PublicShell from '@/components/layout/PublicShell'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+import { toPublicDashboardPath } from '@/lib/dashboardPaths'
+
+export default function SignUpForm() {
+  const { language, setLanguage } = useDashboardI18n()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [preferredLanguage, setPreferredLanguage] = useState<'en' | 'fr' | 'ar'>(language)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const dict = {
+    en: {
+      title: 'Create your workspace',
+      subtitle: 'Enter your email and password to get started. You can complete your profile after signing in.',
+      email: 'Email',
+      password: 'Password',
+      languageLabel: 'Preferred language',
+      create: 'Create workspace',
+      creating: 'Creating\u2026',
+      alreadyHave: 'Already have an account?',
+      signIn: 'Sign in',
+      errorEmailTaken: 'An account with this email already exists.',
+      errorGeneric: 'Something went wrong. Please try again.',
+    },
+    fr: {
+      title: 'Cr\u00e9ez votre espace',
+      subtitle: 'Saisissez votre email et mot de passe pour commencer. Vous pourrez compl\u00e9ter votre profil apr\u00e8s la connexion.',
+      email: 'Email',
+      password: 'Mot de passe',
+      languageLabel: 'Langue pr\u00e9f\u00e9r\u00e9e',
+      create: 'Cr\u00e9er mon espace',
+      creating: 'Cr\u00e9ation\u2026',
+      alreadyHave: 'Vous avez d\u00e9j\u00e0 un compte ?',
+      signIn: 'Se connecter',
+      errorEmailTaken: 'Un compte avec cet email existe d\u00e9j\u00e0.',
+      errorGeneric: 'Une erreur est survenue. Veuillez r\u00e9essayer.',
+    },
+    ar: {
+      title: '\u0623\u0646\u0634\u0626 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0644\u0643',
+      subtitle: '\u0623\u062f\u062e\u0644 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u0644\u0644\u0628\u062f\u0621. \u064a\u0645\u0643\u0646\u0643 \u0625\u0643\u0645\u0627\u0644 \u0645\u0644\u0641\u0643 \u0627\u0644\u0634\u062e\u0635\u064a \u0628\u0639\u062f \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644.',
+      email: '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',
+      password: '\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631',
+      languageLabel: '\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629',
+      create: '\u0623\u0646\u0634\u0626 \u0627\u0644\u0645\u0633\u0627\u062d\u0629',
+      creating: '\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0646\u0634\u0627\u0621\u2026',
+      alreadyHave: '\u0647\u0644 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628 \u0628\u0627\u0644\u0641\u0639\u0644\u061f',
+      signIn: '\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644',
+      errorEmailTaken: '\u064a\u0648\u062c\u062f \u062d\u0633\u0627\u0628 \u0628\u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0627\u0644\u0641\u0639\u0644.',
+      errorGeneric: '\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.',
+    },
+  }[preferredLanguage]
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      const res = await apiFetch<{ token: string }>('/auth/account/start', {
+        method: 'POST',
+        body: JSON.stringify({ email, password, preferredLanguage }),
+      })
+
+      setLanguage(preferredLanguage)
+      document.cookie = `rentaldrivego-language=${preferredLanguage}; path=/; max-age=31536000; samesite=lax`
+
+      if (typeof window !== 'undefined' && res.token) {
+        window.location.href = toPublicDashboardPath('/')
+      }
+    } catch (err: any) {
+      if (err?.message?.includes('email_taken') || err?.code === 'email_taken') {
+        setError(dict.errorEmailTaken)
+      } else {
+        setError(dict.errorGeneric)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <PublicShell>
+      <main className="flex flex-1 items-center justify-center px-4 py-16">
+        <div className="w-full max-w-md">
+          <div className="mb-8 text-center">
+            <div className="flex justify-center">
+              <a href={marketplaceUrl} target="_top">
+                <Image
+                  src="/dashboard/rentalcardrive.png"
+                  alt="RentalDriveGo"
+                  width={80}
+                  height={80}
+                  priority
+                  className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+                />
+              </a>
+            </div>
+            <h1 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">
+              {dict.title}
+            </h1>
+            <p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
+              {dict.subtitle}
+            </p>
+          </div>
+
+          <section className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/78 dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)]">
+            {error ? (
+              <div className="mb-5 rounded-[1.5rem] border border-red-200/80 bg-red-50/90 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
+                {error}
+              </div>
+            ) : null}
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.email} <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@company.com"
+                  autoFocus
+                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                />
+              </div>
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.password} <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="password"
+                  required
+                  minLength={8}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                />
+                <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">Minimum 8 characters</p>
+              </div>
+
+              <div>
+                <span className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.languageLabel} <span className="text-red-500">*</span>
+                </span>
+                <div className="grid grid-cols-3 gap-2">
+                  {(['en', 'fr', 'ar'] as const).map((lang) => (
+                    <button
+                      key={lang}
+                      type="button"
+                      onClick={() => setPreferredLanguage(lang)}
+                      className={`rounded-2xl border py-3 text-sm font-semibold transition ${
+                        preferredLanguage === lang
+                          ? 'border-blue-900 bg-blue-900 text-white dark:bg-orange-500 dark:border-orange-400'
+                          : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300 dark:hover:border-blue-600'
+                      }`}
+                    >
+                      {lang === 'en' ? 'English' : lang === 'fr' ? 'Fran\u00e7ais' : '\u0627\u0644\u0639\u0631\u0628\u064a\u0629'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="inline-flex w-full justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
+              >
+                {loading ? dict.creating : dict.create}
+              </button>
+            </form>
+
+            <p className="mt-6 text-center text-sm text-stone-500 dark:text-stone-400">
+              {dict.alreadyHave}{' '}
+              <a
+                href="/sign-in"
+                className="font-semibold text-orange-700 hover:text-orange-800 dark:text-orange-300 dark:hover:text-orange-200"
+              >
+                {dict.signIn}
+              </a>
+            </p>
+          </section>
+        </div>
+      </main>
+    </PublicShell>
+  )
+}