86b1tvmtu

server/src/app/index.css

@@ -1,69 +1,5 @@
+/* Tailwind CSS styles for the login page */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

server/src/app/login/page.tsx

@@ -1,8 +1,10 @@
-import { Button, Input } from "antd";
-import FormItem from "antd/es/form/FormItem";
-import Title from "antd/es/typography/Title";
+import React from 'react';
+import Image from 'next/image';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
 
-export default function LoginPage() {
+const LoginPage = () => {
     return (
         <div className="p-2 w-[500px]">
             <Title level={2}>Login</Title>

server/src/app/page.tsx

@@ -22,4 +22,4 @@ export default async function Home() {
       <TaskCalendar />
     </div>
   );
-}
+}

server/src/app/reset-password/page.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import Image from 'next/image';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'; // Import the back icon
+
+const ResetPasswordPage = () => {
+    return (
+        <div className="h-screen flex flex-col md:flex-row bg-white">
+            {/* Left Column with Image */}
+            <div className="relative w-full md:w-1/2 flex items-center justify-center bg-white p-4 md:p-8">
+                {/* Back Icon */}
+                <div className="absolute top-4 left-4">
+                    <button className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+                        <ChevronLeftIcon className="h-6 w-6 text-gray-800" />
+                    </button>
+                </div>
+
+                <Image
+                    src="/login.png" 
+                    alt="Login"
+                    width={370} 
+                    height={50} 
+                    className="object-cover rounded-lg border border-black"
+                />
+
+                {/* Text Overlay */}
+                <div className="absolute text-center font-bold" style={{ color: '#004AAD', top: '20%', fontSize: '8vw' }}>
+                    <p className="text-lg">
+                        Enhance record-keeping <br />
+                        with the seamless <br />
+                        Modern Digital Logbook.
+                    </p>
+                </div>
+            </div>
+
+            {/* Right Column with Reset Password Form */}
+            <div className="w-full md:w-1/2 flex items-center justify-center bg-white p-4 md:p-8">
+                <Card className="shadow-lg rounded-lg p-6 md:p-8 max-w-md w-full border border-black">
+
+                    <div className="flex justify-center mb-4">
+                        <Image
+                            src="/log-file.png" 
+                            width={40} 
+                            height={40} 
+                        />
+                    </div>
+                    <CardHeader>
+                        <CardTitle className="text-2xl font-semibold text-center">
+                            Reset Password
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form className="flex flex-col" action="/auth/reset-password" method="post">
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    Current Password
+                                </Label>
+                                <Input
+                                    name="currentPassword"
+                                    placeholder="Enter your current password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    New Password
+                                </Label>
+                                <Input
+                                    name="newPassword"
+                                    placeholder="Enter your new password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    Confirm New Password
+                                </Label>
+                                <Input
+                                    name="confirmNewPassword"
+                                    placeholder="Confirm your new password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="flex justify-center">
+                                <Button
+                                    type="submit"
+                                    className="w-full py-2 rounded-md bg-[#0000FF] text-white hover:bg-[#0000CC]"
+                                >
+                                    Reset Password
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default ResetPasswordPage;

server/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

server/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }