refactored Authentication

2026-02-17 16:51:47 +00:00
parent 13e8866875
commit d32d0f5c03
45 changed files with 1322 additions and 66 deletions
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useClient } from 'hooks/useClient';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+import { useForm } from 'hooks/useForm';
+
+export function Bootstrap() {
+  const authClient = useClient('/api/auth');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const { formRef, state, isValid } = useForm({}, (state) => !!state.email);
+
+  const handleBootstrap = async () => {
+    const trimmed = state.email.trim();
+    if (!trimmed || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await authClient.post('/bootstrap', { email: trimmed });
+      setDone(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Bootstrap failed. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      {done ? (
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-duck-dark mb-2">Check your email</h2>
+          <div className="text-sm text-duck-dark/60">
+            <p>A verification link has been sent to <strong>{state.email}</strong>.</p>
+            <p>Click it to activate your account.</p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <h2 className="text-2xl font-bold text-duck-dark mb-2">Welcome, Admin</h2>
+          <p className="text-sm text-duck-dark/60 mb-6">Enter your email to create your administrator account.</p>
+          <form ref={formRef} className="flex gap-2">
+            <input
+              type="email"
+              name="email"
+              placeholder="admin@example.com"
+              className="flex-1 px-4 py-2.5 rounded-lg border-2 border-duck-dark/20 text-sm text-duck-dark placeholder:!text-duck-dark/30 focus:outline-none focus:border-duck-teal/50"
+            />
+            <Button
+              onClick={handleBootstrap}
+              disabled={!isValid || isSubmitting}
+              className="bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-6 py-2.5 rounded-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? 'Sending...' : 'Bootstrap'}
+            </Button>
+          </form>
+        </>
+      )}
+    </Card>
+  );
+}