waveringana/simplelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

only show register if no users, otherwise show only login

Browse source
This commit is contained in:
Wavering Ana 2025-01-29 20:47:04 -05:00
parent daa1323b88
commit 3585ca70e8
6 changed files with 116 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

144
frontend/src/components/AuthForms.tsx
View file

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
@ -6,7 +6,6 @@ import { useAuth } from '../context/AuthContext'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
Form,
FormControl,
@ -16,17 +15,18 @@ import {
FormMessage,
} from '@/components/ui/form'
import { useToast } from '@/hooks/use-toast'
import { checkFirstUser } from '../api/client'
const formSchema = z.object({
email: z.string().email('Invalid email address'),
password: z.string().min(6, 'Password must be at least 6 characters long'),
adminToken: z.string(),
adminToken: z.string().optional(),
})
type FormValues = z.infer<typeof formSchema>
export function AuthForms() {
const [activeTab, setActiveTab] = useState<'login' | 'register'>('login')
const [isFirstUser, setIsFirstUser] = useState<boolean | null>(null)
const { login, register } = useAuth()
const { toast } = useToast()
@ -39,12 +39,26 @@ export function AuthForms() {
},
})
useEffect(() => {
const init = async () => {
try {
const isFirst = await checkFirstUser()
setIsFirstUser(isFirst)
} catch (err) {
console.error('Error checking first user:', err)
setIsFirstUser(false)
}
}
init()
}, [])
const onSubmit = async (values: FormValues) => {
try {
if (activeTab === 'login') {
await login(values.email, values.password)
if (isFirstUser) {
await register(values.email, values.password, values.adminToken || '')
} else {
await register(values.email, values.password, values.adminToken)
await login(values.email, values.password)
}
form.reset()
} catch (err: any) {
@ -56,68 +70,74 @@ export function AuthForms() {
}
}
if (isFirstUser === null) {
return <div>Loading...</div>
}
return (
<Card className="w-full max-w-md mx-auto p-6">
<Tabs value={activeTab} onValueChange={(value: string) => setActiveTab(value as 'login' | 'register')}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="register">Register</TabsTrigger>
</TabsList>
<div className="mb-6 text-center">
<h2 className="text-2xl font-bold">
{isFirstUser ? 'Create Admin Account' : 'Login'}
</h2>
<p className="text-sm text-muted-foreground mt-1">
{isFirstUser
? 'Set up your admin account to get started'
: 'Welcome back! Please login to your account'}
</p>
</div>
<TabsContent value={activeTab}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{activeTab === 'register' && (
<FormField
control={form.control}
name="adminToken"
render={({ field }) => (
<FormItem>
<FormLabel>Admin Setup Token</FormLabel>
<FormControl>
<Input type="text" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{isFirstUser && (
<FormField
control={form.control}
name="adminToken"
render={({ field }) => (
<FormItem>
<FormLabel>Admin Setup Token</FormLabel>
<FormControl>
<Input type="text" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button type="submit" className="w-full">
{activeTab === 'login' ? 'Sign in' : 'Create account'}
</Button>
</form>
</Form>
</TabsContent>
</Tabs>
<Button type="submit" className="w-full">
{isFirstUser ? 'Create Account' : 'Sign in'}
</Button>
</form>
</Form>
</Card>
)
}