From d98c3720e804fd53bb53ec75200d41b1db6f043e Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu10kumar11@gmail.com>
Date: Sun, 8 Jun 2025 18:55:46 +0530
Subject: [PATCH] little FE change

---
 apps/Frontend/src/pages/auth-page.tsx | 108 +++++++++++++++++---------
 1 file changed, 70 insertions(+), 38 deletions(-)

diff --git a/apps/Frontend/src/pages/auth-page.tsx b/apps/Frontend/src/pages/auth-page.tsx
index 13fdb3e..b30c523 100644
--- a/apps/Frontend/src/pages/auth-page.tsx
+++ b/apps/Frontend/src/pages/auth-page.tsx
@@ -21,7 +21,9 @@ import { Card, CardContent } from "@/components/ui/card";
 import { BriefcaseMedical, CheckCircle, Torus } from "lucide-react";
 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,
   password: true,
 });
@@ -30,18 +32,21 @@ const loginSchema = (insertUserSchema as unknown as z.ZodObject<any>).extend({
   rememberMe: z.boolean().optional(),
 });
 
-
-const registerSchema = (insertUserSchema as unknown as z.ZodObject<any>).extend({
-  confirmPassword: z.string().min(6, {
-    message: "Password must be at least 6 characters long",
-  }),
-  agreeTerms: z.literal(true, {
-    errorMap: () => ({ message: "You must agree to the terms and conditions" }),
-  }),
-}).refine((data:any) => data.password === data.confirmPassword, {
-  message: "Passwords don't match",
-  path: ["confirmPassword"],
-});
+const registerSchema = (insertUserSchema as unknown as z.ZodObject<any>)
+  .extend({
+    confirmPassword: z.string().min(6, {
+      message: "Password must be at least 6 characters long",
+    }),
+    agreeTerms: z.literal(true, {
+      errorMap: () => ({
+        message: "You must agree to the terms and conditions",
+      }),
+    }),
+  })
+  .refine((data: any) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
 
 type LoginFormValues = z.infer<typeof loginSchema>;
 type RegisterFormValues = z.infer<typeof registerSchema>;
@@ -49,7 +54,7 @@ type RegisterFormValues = z.infer<typeof registerSchema>;
 export default function AuthPage() {
   const [activeTab, setActiveTab] = useState<string>("login");
   const { user, loginMutation, registerMutation } = useAuth();
-  
+
   const loginForm = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
@@ -94,11 +99,17 @@ export default function AuthPage() {
         {/* Auth Forms */}
         <Card className="p-6 bg-white">
           <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>
           </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">
               <TabsTrigger value="login">Login</TabsTrigger>
               <TabsTrigger value="register">Register</TabsTrigger>
@@ -106,7 +117,10 @@ export default function AuthPage() {
 
             <TabsContent value="login">
               <Form {...loginForm}>
-                <form onSubmit={loginForm.handleSubmit(onLoginSubmit)} className="space-y-4">
+                <form
+                  onSubmit={loginForm.handleSubmit(onLoginSubmit)}
+                  className="space-y-4"
+                >
                   <FormField
                     control={loginForm.control}
                     name="username"
@@ -114,10 +128,7 @@ export default function AuthPage() {
                       <FormItem>
                         <FormLabel>Username</FormLabel>
                         <FormControl>
-                          <Input
-                            placeholder="Enter your username"
-                            {...field}
-                          />
+                          <Input placeholder="Enter your username" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -162,12 +173,19 @@ export default function AuthPage() {
                         </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?
                     </a>
                   </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"}
                   </Button>
                 </form>
@@ -176,7 +194,10 @@ export default function AuthPage() {
 
             <TabsContent value="register">
               <Form {...registerForm}>
-                <form onSubmit={registerForm.handleSubmit(onRegisterSubmit)} className="space-y-4">
+                <form
+                  onSubmit={registerForm.handleSubmit(onRegisterSubmit)}
+                  className="space-y-4"
+                >
                   <FormField
                     control={registerForm.control}
                     name="username"
@@ -184,10 +205,7 @@ export default function AuthPage() {
                       <FormItem>
                         <FormLabel>Username</FormLabel>
                         <FormControl>
-                          <Input
-                            placeholder="Choose a username"
-                            {...field}
-                          />
+                          <Input placeholder="Choose a username" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -223,8 +241,9 @@ export default function AuthPage() {
                             placeholder="••••••••"
                             type="password"
                             {...field}
-                            value={typeof field.value === 'string' ? field.value : ''}
-
+                            value={
+                              typeof field.value === "string" ? field.value : ""
+                            }
                           />
                         </FormControl>
                         <FormMessage />
@@ -236,16 +255,20 @@ export default function AuthPage() {
                     control={registerForm.control}
                     name="agreeTerms"
                     render={({ field }) => (
-                      <FormItem className="flex items-start space-x-2 mt-4">
+                      <FormItem className="flex space-x-2 items-center">
                         <FormControl>
                           <Checkbox
                             checked={field.value as CheckedState}
                             onCheckedChange={field.onChange}
+                            className="mt-2.5"
                           />
                         </FormControl>
-                        <div className="space-y-1 leading-none">
-                          <FormLabel>
-                            I agree to the <a href="#" className="text-primary">Terms and Conditions</a>
+                        <div className="">
+                          <FormLabel className="text-sm font-bold leading-tight">
+                            I agree to the{" "}
+                            <a href="#" className="text-primary underline">
+                              Terms and Conditions
+                            </a>
                           </FormLabel>
                           <FormMessage />
                         </div>
@@ -253,8 +276,14 @@ export default function AuthPage() {
                     )}
                   />
 
-                  <Button type="submit" className="w-full" disabled={registerMutation.isPending}>
-                    {registerMutation.isPending ? "Creating Account..." : "Create Account"}
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    disabled={registerMutation.isPending}
+                  >
+                    {registerMutation.isPending
+                      ? "Creating Account..."
+                      : "Create Account"}
                   </Button>
                 </form>
               </Form>
@@ -269,9 +298,12 @@ export default function AuthPage() {
               <Torus className="h-8 w-8" />
             </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">
-            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>
           <ul className="space-y-4">
             <li className="flex items-center">