officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth: single-step super-admin bootstrap (no verification email)

Browse Source 
Collapse the two-phase bootstrap (email a verification link → verify screen) into
one direct step: the Bootstrap form collects name/email/username/password and posts
once to /bootstrap, which creates the first user directly as an active Super Admin
(+ provisions DATA_PATH/<email>). Still gated to an empty user table.

The invite flow (/verify, /verify-token) is untouched.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-25 16:11:37 +00:00
co-authored by Claude Opus 4.8
parent d604b1e722
commit 97f6d7fecc
2 changed files with 100 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Authentication/LandingPage/Bootstrap.tsx
+91 -35
View File
@@ -1,25 +1,37 @@
import { useState } from 'react';
import { toast } from 'sonner';
import { useNavigate } from 'react-router';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card } from '@/components/Card';
import { useForm } from 'hooks/useForm';
export function Bootstrap() {
const authClient = useClient('/api/auth');
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [done, setDone] = useState(false);
const { formRef, state, isValid } = useForm({}, (state) => !!state.email);
const { formRef, state, isValid } = useForm(
{},
(s) => !!s.email && !!s.name && !!s.username && !!s.password && s.password === s.confirmPassword,
);
const handleBootstrap = async () => {
const trimmed = state.email.trim();
if (!trimmed || isSubmitting) return;
const handleBootstrap = async (ev: React.FormEvent) => {
ev.preventDefault();
if (!isValid || isSubmitting) return;
setIsSubmitting(true);
try {
await authClient.post('/bootstrap', { email: trimmed });
setDone(true);
await authClient.post('/bootstrap', {
email: state.email.trim(),
name: state.name.trim(),
username: state.username.trim(),
password: state.password,
confirmPassword: state.confirmPassword,
});
toast.success('Administrator account created. Please sign in.');
navigate('/');
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Bootstrap failed. Please try again.');
@@ -29,36 +41,80 @@ export function Bootstrap() {
};
return (
<Card className="md:min-w-[480px]">
{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">
<Card className="md:min-w-[480px] flex flex-col gap-6">
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Welcome, Admin</div>
<div className="text-duck-dark/60">Create your administrator account</div>
</div>
<form ref={formRef} onSubmit={handleBootstrap} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70">Name</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="text"
name="name"
placeholder="Your name"
autoComplete="name"
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70">Email</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="email"
name="email"
placeholder="admin@example.com"
autoComplete="email"
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70">Username</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="text"
name="username"
placeholder="your-username"
autoComplete="username"
/>
</Label>
<div className="grid md:flex gap-4">
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Password</span>
<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 focus:outline-none focus:border-duck-teal/50"
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="password"
placeholder="Min 12 characters"
autoComplete="new-password"
/>
<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>
</>
)}
</Label>
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Confirm Password</span>
<Input
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="confirmPassword"
placeholder="Confirm your password"
autoComplete="new-password"
/>
</Label>
</div>
<div className="pt-2">
<Button
type="submit"
disabled={!isValid || isSubmitting}
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
{isSubmitting ? 'Creating account...' : 'Create Account'}
</Button>
</div>
</form>
</Card>
);
}