create: Slicing for Login Page

apps/frontend/src/routes/login/index.lazy.tsx

@@ -1,21 +1,24 @@
 import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMutation } from "@tanstack/react-query";
-import {
-	Paper,
-	PasswordInput,
-	Stack,
-	Text,
-	TextInput,
-	Group,
-	Button,
-	Alert,
-} from "@mantine/core";
+import { Input } from '@/shadcn/components/ui/input.tsx';
+import { Button } from '@/shadcn/components/ui/button.tsx';
+import { Alert } from '@/shadcn/components/ui/alert.tsx';
+import { Card } from '@/shadcn/components/ui/card.tsx';
+import { 
+	Form, 
+	FormControl, 
+	FormField, 
+	FormItem, 
+	FormLabel, 
+	FormMessage 
+} from '@/shadcn/components/ui/form.tsx';
 import client from "../../honoClient";
-import { useForm } from "@mantine/form";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import useAuth from "@/hooks/useAuth";
+import { TbArrowNarrowRight } from "react-icons/tb";
 
 export const Route = createLazyFileRoute("/login/")({
 	component: LoginPage,
@@ -38,11 +41,11 @@ export default function LoginPage() {
 	const { isAuthenticated, saveAuthData } = useAuth();
 
 	const form = useForm<FormSchema>({
-		initialValues: {
+		resolver: zodResolver(formSchema),
+		defaultValues: {
 			username: "",
 			password: "",
 		},
-		validate: zodResolver(formSchema),
 	});
 
 	useEffect(() => {
@@ -94,63 +97,94 @@ export default function LoginPage() {
 	};
 
 	return (
-		<div className="w-screen h-screen flex items-center justify-center">
-			<Paper radius="md" p="xl" withBorder w={400}>
-				<Text size="lg" fw={500} mb={30}>
-					Welcome
-				</Text>
-				<form onSubmit={form.onSubmit(handleSubmit)}>
-					<Stack>
-						{errorMessage ? (
-							<Alert
-								variant="filled"
-								color="pink"
-								title=""
-								// icon={icon}
-							>
-								{errorMessage}
-							</Alert>
-						) : null}
-						<TextInput
-							label="Username or Email"
-							placeholder="Enter your username or email"
-							name="username"
-							autoComplete="username"
-							disabled={loginMutation.isPending}
-							{...form.getInputProps("username")}
-						/>
-						<PasswordInput
-							label="Password"
-							placeholder="Your password"
-							name="password"
-							autoComplete="password"
-							disabled={loginMutation.isPending}
-							{...form.getInputProps("password")}
-						/>
-					</Stack>
-
-					<Group justify="space-between" mt="xl">
-						{/* <Anchor
-							component="a"
-							type="button"
-							c="dimmed"
-							size="xs"
+		<div
+            className="flex items-center justify-center bg-contain bg-top lg:bg-right 
+				bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')] 
+                lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
+        >
+			<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
+				Amati
+			</div>
+			<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> 
+				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
+					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1>
+					<p className="text-sm mb-10 leading-[1.059rem]">
+						New to this app?{' '}
+						<a
 							href="/register"
+							className="text-blue-500 font-bold hover:text-blue-800"
 						>
-							Don&apos;t have an account? Register
-						</Anchor> */}
-						<div />
-
-						<Button
-							type="submit"
-							radius="xl"
-							disabled={loginMutation.isPending}
-						>
-							Login
-						</Button>
-					</Group>
-				</form>
-			</Paper>
+							Register now
+						</a>
+					</p>
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(handleSubmit)}>
+							<div className="space-y-5">
+								{errorMessage && (
+									<Alert variant="destructive">
+										<p>{errorMessage}</p>
+									</Alert>
+								)}
+								<FormField
+									name="username"
+									render={({ field }) => (
+										<FormItem className="text-sm">
+											<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="eg; user@mail.com"
+													disabled={loginMutation.isPending}
+													className={form.formState.errors.username ? "border-red-500" : ""}
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									name="password"
+									render={({ field }) => (
+										<FormItem className="text-sm">
+											<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="*****"
+													disabled={loginMutation.isPending}
+													className={form.formState.errors.password ? "border-red-500" : ""}
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<p className="text-sm">
+									<a
+										href="/forgot-password"
+										className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
+									>
+										Forgot Password?
+									</a>
+								</p>
+							</div>
+							<div className="flex justify-between mt-10">
+								<Button
+									type="submit"
+									disabled={loginMutation.isPending}
+									variant="default"
+									className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] 
+										lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
+								>
+									<span className="leading-[1.25rem]">Sign In</span>
+									<TbArrowNarrowRight className="h-5 w-5" />
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</Card>
+			</div>
 		</div>
 	);
 }

apps/frontend/src/shadcn/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

apps/frontend/src/shadcn/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 }

apps/frontend/src/shadcn/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/shadcn/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

apps/frontend/src/shadcn/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

apps/frontend/src/shadcn/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 }

apps/frontend/tailwind.config.js

@@ -72,6 +72,16 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
+    letterSpacing: {
+      tightest: '-.075em',
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+      widest: '.25em',
+    },
   },
   plugins: [require("tailwindcss-animate")],
 }