fix first online resevation

2026-05-09 20:01:51 -04:00
parent c4a45c8b21
commit 09b0e3b55f
75 changed files with 6394 additions and 2190 deletions
@@ -0,0 +1,152 @@
+'use client'
+
+import Link from 'next/link'
+import { useState, Suspense } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import PublicShell from '@/components/PublicShell'
+
+const API_BASE = '/api/v1'
+
+export default function AdminResetPasswordPage() {
+  return (
+    <Suspense>
+      <AdminResetPasswordContent />
+    </Suspense>
+  )
+}
+
+function AdminResetPasswordContent() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const token = searchParams.get('token')
+
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [done, setDone] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (password.length < 8) { setError('Password must be at least 8 characters.'); return }
+    if (password !== confirm) { setError('Passwords do not match.'); return }
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch(`${API_BASE}/admin/auth/reset-password`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      })
+      const json = await res.json()
+      if (!res.ok) {
+        if (json?.error === 'invalid_token') throw new Error('This reset link is invalid or has expired.')
+        throw new Error('Something went wrong. Please try again.')
+      }
+      setDone(true)
+    } catch (err: any) {
+      setError(err.message ?? 'Something went wrong.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!token) {
+    return (
+      <AdminResetShell>
+        <p className="text-sm text-zinc-400 text-center">No reset token found.</p>
+        <div className="mt-4 text-center">
+          <Link href="/forgot-password" className="text-sm text-emerald-400 hover:text-emerald-300">
+            Request a new reset link
+          </Link>
+        </div>
+      </AdminResetShell>
+    )
+  }
+
+  if (done) {
+    return (
+      <AdminResetShell>
+        <div className="space-y-3 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-emerald-900/40">
+            <svg className="h-6 w-6 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <p className="text-sm text-zinc-300 font-semibold">Password updated</p>
+          <p className="text-xs text-zinc-500">You can now sign in with your new password.</p>
+          <button
+            type="button"
+            onClick={() => router.push('/login')}
+            className="mt-2 w-full py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors"
+          >
+            Sign in
+          </button>
+        </div>
+      </AdminResetShell>
+    )
+  }
+
+  return (
+    <AdminResetShell>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        {error && (
+          <div className="rounded-xl border border-red-900/50 bg-red-950/50 px-4 py-3 text-sm text-red-400">{error}</div>
+        )}
+        <div>
+          <label className="block text-sm font-medium text-zinc-300 mb-1.5">New password</label>
+          <input
+            type="password"
+            required
+            minLength={8}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+            className="w-full px-3 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-zinc-300 mb-1.5">Confirm password</label>
+          <input
+            type="password"
+            required
+            minLength={8}
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="••••••••"
+            className="w-full px-3 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors disabled:opacity-50"
+        >
+          {loading ? 'Resetting…' : 'Reset password'}
+        </button>
+      </form>
+
+      <div className="mt-6 text-center">
+        <Link href="/login" className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
+          Back to sign in
+        </Link>
+      </div>
+    </AdminResetShell>
+  )
+}
+
+function AdminResetShell({ children }: { children: React.ReactNode }) {
+  return (
+    <PublicShell>
+      <main className="flex flex-1 items-center justify-center px-4">
+        <div className="w-full max-w-md">
+          <div className="mb-8 text-center">
+            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-400">RentalDriveGo</Link>
+            <h1 className="mt-3 text-3xl font-black tracking-tight">Reset password</h1>
+          </div>
+          <div className="panel p-8">{children}</div>
+        </div>
+      </main>
+    </PublicShell>
+  )
+}