little FE change

This commit is contained in:
2025-06-08 18:55:46 +05:30
parent b960e37624
commit d98c3720e8

View File

@@ -21,7 +21,9 @@ import { Card, CardContent } from "@/components/ui/card";
import { BriefcaseMedical, CheckCircle, Torus } from "lucide-react"; import { BriefcaseMedical, CheckCircle, Torus } from "lucide-react";
import { CheckedState } from "@radix-ui/react-checkbox"; import { CheckedState } from "@radix-ui/react-checkbox";
const insertUserSchema = (UserUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>).pick({ const insertUserSchema = (
UserUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
).pick({
username: true, username: true,
password: true, password: true,
}); });
@@ -30,18 +32,21 @@ const loginSchema = (insertUserSchema as unknown as z.ZodObject<any>).extend({
rememberMe: z.boolean().optional(), rememberMe: z.boolean().optional(),
}); });
const registerSchema = (insertUserSchema as unknown as z.ZodObject<any>)
const registerSchema = (insertUserSchema as unknown as z.ZodObject<any>).extend({ .extend({
confirmPassword: z.string().min(6, { confirmPassword: z.string().min(6, {
message: "Password must be at least 6 characters long", message: "Password must be at least 6 characters long",
}), }),
agreeTerms: z.literal(true, { agreeTerms: z.literal(true, {
errorMap: () => ({ message: "You must agree to the terms and conditions" }), errorMap: () => ({
}), message: "You must agree to the terms and conditions",
}).refine((data:any) => data.password === data.confirmPassword, { }),
message: "Passwords don't match", }),
path: ["confirmPassword"], })
}); .refine((data: any) => data.password === data.confirmPassword, {
message: "Passwords don't match",
path: ["confirmPassword"],
});
type LoginFormValues = z.infer<typeof loginSchema>; type LoginFormValues = z.infer<typeof loginSchema>;
type RegisterFormValues = z.infer<typeof registerSchema>; type RegisterFormValues = z.infer<typeof registerSchema>;
@@ -94,11 +99,17 @@ export default function AuthPage() {
{/* Auth Forms */} {/* Auth Forms */}
<Card className="p-6 bg-white"> <Card className="p-6 bg-white">
<div className="mb-10 text-center"> <div className="mb-10 text-center">
<h1 className="text-3xl font-medium text-primary mb-2">DentalConnect</h1> <h1 className="text-3xl font-medium text-primary mb-2">
DentalConnect
</h1>
<p className="text-gray-600">Patient Management System</p> <p className="text-gray-600">Patient Management System</p>
</div> </div>
<Tabs defaultValue="login" value={activeTab} onValueChange={setActiveTab}> <Tabs
defaultValue="login"
value={activeTab}
onValueChange={setActiveTab}
>
<TabsList className="grid w-full grid-cols-2 mb-6"> <TabsList className="grid w-full grid-cols-2 mb-6">
<TabsTrigger value="login">Login</TabsTrigger> <TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="register">Register</TabsTrigger> <TabsTrigger value="register">Register</TabsTrigger>
@@ -106,7 +117,10 @@ export default function AuthPage() {
<TabsContent value="login"> <TabsContent value="login">
<Form {...loginForm}> <Form {...loginForm}>
<form onSubmit={loginForm.handleSubmit(onLoginSubmit)} className="space-y-4"> <form
onSubmit={loginForm.handleSubmit(onLoginSubmit)}
className="space-y-4"
>
<FormField <FormField
control={loginForm.control} control={loginForm.control}
name="username" name="username"
@@ -114,10 +128,7 @@ export default function AuthPage() {
<FormItem> <FormItem>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<FormControl> <FormControl>
<Input <Input placeholder="Enter your username" {...field} />
placeholder="Enter your username"
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -162,12 +173,19 @@ export default function AuthPage() {
</div> </div>
)} )}
/> />
<a href="#" className="text-sm font-medium text-primary hover:text-primary/80"> <a
href="#"
className="text-sm font-medium text-primary hover:text-primary/80"
>
Forgot password? Forgot password?
</a> </a>
</div> </div>
<Button type="submit" className="w-full" disabled={loginMutation.isPending}> <Button
type="submit"
className="w-full"
disabled={loginMutation.isPending}
>
{loginMutation.isPending ? "Signing in..." : "Sign in"} {loginMutation.isPending ? "Signing in..." : "Sign in"}
</Button> </Button>
</form> </form>
@@ -176,7 +194,10 @@ export default function AuthPage() {
<TabsContent value="register"> <TabsContent value="register">
<Form {...registerForm}> <Form {...registerForm}>
<form onSubmit={registerForm.handleSubmit(onRegisterSubmit)} className="space-y-4"> <form
onSubmit={registerForm.handleSubmit(onRegisterSubmit)}
className="space-y-4"
>
<FormField <FormField
control={registerForm.control} control={registerForm.control}
name="username" name="username"
@@ -184,10 +205,7 @@ export default function AuthPage() {
<FormItem> <FormItem>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<FormControl> <FormControl>
<Input <Input placeholder="Choose a username" {...field} />
placeholder="Choose a username"
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -223,8 +241,9 @@ export default function AuthPage() {
placeholder="••••••••" placeholder="••••••••"
type="password" type="password"
{...field} {...field}
value={typeof field.value === 'string' ? field.value : ''} value={
typeof field.value === "string" ? field.value : ""
}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -236,16 +255,20 @@ export default function AuthPage() {
control={registerForm.control} control={registerForm.control}
name="agreeTerms" name="agreeTerms"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-start space-x-2 mt-4"> <FormItem className="flex space-x-2 items-center">
<FormControl> <FormControl>
<Checkbox <Checkbox
checked={field.value as CheckedState} checked={field.value as CheckedState}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
className="mt-2.5"
/> />
</FormControl> </FormControl>
<div className="space-y-1 leading-none"> <div className="">
<FormLabel> <FormLabel className="text-sm font-bold leading-tight">
I agree to the <a href="#" className="text-primary">Terms and Conditions</a> I agree to the{" "}
<a href="#" className="text-primary underline">
Terms and Conditions
</a>
</FormLabel> </FormLabel>
<FormMessage /> <FormMessage />
</div> </div>
@@ -253,8 +276,14 @@ export default function AuthPage() {
)} )}
/> />
<Button type="submit" className="w-full" disabled={registerMutation.isPending}> <Button
{registerMutation.isPending ? "Creating Account..." : "Create Account"} type="submit"
className="w-full"
disabled={registerMutation.isPending}
>
{registerMutation.isPending
? "Creating Account..."
: "Create Account"}
</Button> </Button>
</form> </form>
</Form> </Form>
@@ -269,9 +298,12 @@ export default function AuthPage() {
<Torus className="h-8 w-8" /> <Torus className="h-8 w-8" />
</div> </div>
</div> </div>
<h2 className="text-2xl font-bold mb-4 text-center">Welcome to DentalConnect</h2> <h2 className="text-2xl font-bold mb-4 text-center">
Welcome to DentalConnect
</h2>
<p className="mb-6 text-center text-white text-opacity-80"> <p className="mb-6 text-center text-white text-opacity-80">
The complete solution for dental practice management. Streamline your patient records, appointments, and more. The complete solution for dental practice management. Streamline
your patient records, appointments, and more.
</p> </p>
<ul className="space-y-4"> <ul className="space-y-4">
<li className="flex items-center"> <li className="flex items-center">