initialize

modules/auth/auth.actions.ts

@@ -0,0 +1,55 @@
+"use server"
+
+import { cookies } from "next/headers"
+import type { AuthUser } from "@repo/api"
+
+const TOKEN_COOKIE = "auth_token"
+const USER_COOKIE = "auth_user"
+const DEFAULT_EXPIRES_IN = 60 * 60 * 24 * 7 // 7 days in seconds
+
+export async function setAuthCookies(
+    token: string,
+    user: AuthUser,
+    expiresIn: number = DEFAULT_EXPIRES_IN,
+) {
+    const cookieStore = await cookies()
+    const expires = new Date(Date.now() + expiresIn * 1000)
+
+    cookieStore.set(TOKEN_COOKIE, token, {
+        expires,
+        path: "/",
+        sameSite: "strict",
+    })
+
+    cookieStore.set(USER_COOKIE, JSON.stringify(user), {
+        expires,
+        path: "/",
+        sameSite: "strict",
+    })
+}
+
+export async function clearAuthCookies() {
+    const cookieStore = await cookies()
+    cookieStore.delete(TOKEN_COOKIE)
+    cookieStore.delete(USER_COOKIE)
+}
+
+export async function getAuthCookies(): Promise<{
+    token: string | undefined
+    user: AuthUser | undefined
+}> {
+    const cookieStore = await cookies()
+    const token = cookieStore.get(TOKEN_COOKIE)?.value
+    const rawUser = cookieStore.get(USER_COOKIE)?.value
+
+    let user: AuthUser | undefined
+    if (rawUser) {
+        try {
+            user = JSON.parse(rawUser) as AuthUser
+        } catch {
+            user = undefined
+        }
+    }
+
+    return { token, user }
+}

modules/auth/login-form.schema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod"
+
+const loginFormSchema = z.object({
+  email: z.string().trim().email("Enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+})
+
+type LoginFormValues = z.infer<typeof loginFormSchema>
+
+export { loginFormSchema }
+export type { LoginFormValues }

modules/auth/login-form.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/shared/components/ui/button"
+import { api } from '@repo/api'
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import {
+    Field,
+    FieldDescription,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+} from "@/shared/components/ui/field"
+import { Input } from "@/shared/components/ui/input"
+import { useAppStore } from "@/shared/stores/app-store"
+import { useAuthStore } from "@/shared/stores/auth-store"
+import { cn } from "@/shared/lib/utils"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+
+import { loginFormSchema, type LoginFormValues } from "./login-form.schema"
+import { useMutation } from "@tanstack/react-query"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { AlertTriangle } from "lucide-react"
+
+export function LoginForm({
+    className,
+    ...props
+}: React.ComponentProps<"div">) {
+    const lastLoginEmail = useAppStore((state) => state.lastLoginEmail)
+    const setLastLoginEmail = useAppStore((state) => state.setLastLoginEmail)
+    const login = useAuthStore((state) => state.login)
+    const router = useRouter()
+    const {
+        handleSubmit,
+        register,
+        formState: { errors, },
+    } = useForm<LoginFormValues>({
+        resolver: zodResolver(loginFormSchema),
+        defaultValues: process.env.NODE_ENV === "development" ? {
+            "email": "admin@admin.com",
+            "password": "12345678"
+        } : {
+            email: lastLoginEmail,
+            password: "",
+        },
+    })
+
+    const { mutate, error, isPending: isSubmitting } = useMutation({
+        mutationFn: (values: LoginFormValues) => api.auth.login(values),
+        onSuccess: async (data) => {
+            if (data.token && data.user) {
+                await login(data.token, data.user as Parameters<typeof login>[1])
+                router.push("/")
+            }
+        },
+    })
+
+
+    async function onSubmit(values: LoginFormValues) {
+        setLastLoginEmail(values.email)
+        mutate(values)
+    }
+
+    return (
+        <div className={cn("flex flex-col gap-6", className)} {...props}>
+            <Card>
+                <CardHeader>
+                    <Image
+                        className="mx-auto mb-8 h-20 w-48"
+                        alt="Logo"
+                        src="/assets/logo.png"
+                        height={200}
+                        width={200}
+                    />
+                    <CardTitle>Login to your account</CardTitle>
+                    <CardDescription>
+                        Enter your email below to login to your account
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    {error ? (
+                        <Alert variant='destructive' className="mb-4">
+                            <AlertTriangle className="me-2 h-4 w-4" />
+                            <AlertTitle>Login failed</AlertTitle>
+                            {error.message}
+                        </Alert>
+                    ) : null}
+
+                    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+                        <FieldGroup>
+                            <Field>
+                                <FieldLabel htmlFor="email">Email</FieldLabel>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    placeholder="m@example.com"
+                                    aria-invalid={!!errors.email}
+                                    {...register("email")}
+                                />
+                                <FieldError errors={[errors.email]} />
+                            </Field>
+                            <Field>
+                                <div className="flex items-center">
+                                    <FieldLabel htmlFor="password">Password</FieldLabel>
+                                    <a
+                                        href="#"
+                                        className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                                    >
+                                        Forgot your password?
+                                    </a>
+                                </div>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    aria-invalid={!!errors.password}
+                                    {...register("password")}
+                                />
+                                <FieldError errors={[errors.password]} />
+                            </Field>
+                            <Field>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? "Logging in..." : "Login"}
+                                </Button>
+
+                                {lastLoginEmail ? (
+                                    <FieldDescription className="text-center">
+                                        Last email used: {lastLoginEmail}
+                                    </FieldDescription>
+                                ) : null}
+                                {/* <FieldDescription className="text-center">
+                                    Don&apos;t have an account? <a href="#">Sign up</a>
+                                </FieldDescription> */}
+                            </Field>
+                        </FieldGroup>
+                    </form>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}