first commit

2026-07-08 11:08:24 +05:30
parent a5c745ba9f
commit 7dc984ebb9
44 changed files with 7870 additions and 192 deletions
@@ -0,0 +1,207 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Controller, useForm } from "react-hook-form"
+import { z } from "zod"
+import { ArrowLeft, Eye, EyeOff } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+const loginSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Enter a valid email"),
+  password: z.string().min(1, "Password is required"),
+  agreeToTerms: z.literal(true, {
+    error: "You must agree to the Terms & Condition",
+  }),
+})
+
+type LoginValues = z.infer<typeof loginSchema>
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-4">
+      <path
+        fill="#4285F4"
+        d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.89c2.27-2.09 3.56-5.17 3.56-8.82Z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 24c3.24 0 5.95-1.07 7.93-2.91l-3.89-3c-1.08.73-2.46 1.15-4.04 1.15-3.1 0-5.73-2.09-6.67-4.9H1.32v3.09A12 12 0 0 0 12 24Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.33 14.34a7.2 7.2 0 0 1 0-4.68V6.57H1.32a12 12 0 0 0 0 10.86l4.01-3.09Z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 4.77c1.76 0 3.35.6 4.6 1.79l3.45-3.45C17.94 1.19 15.23 0 12 0A12 12 0 0 0 1.32 6.57l4.01 3.09C6.27 6.86 8.9 4.77 12 4.77Z"
+      />
+    </svg>
+  )
+}
+
+function FacebookIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-4" fill="#1877F2">
+      <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.09 24 18.1 24 12.07Z" />
+    </svg>
+  )
+}
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [showPassword, setShowPassword] = useState(false)
+  const form = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { email: "", password: "", agreeToTerms: true },
+  })
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    // TODO: wire up to the auth API once it exists
+    console.log(values)
+    router.push("/dashboard")
+  })
+
+  return (
+    <div className="grid min-h-screen bg-white md:grid-cols-[60%_40%]">
+      <div className="relative hidden flex-col justify-between overflow-hidden bg-[radial-gradient(ellipse_at_bottom_right,var(--color-orange-600),var(--color-rose-950)_60%,var(--color-slate-950))] p-8 md:flex">
+        <svg viewBox="0 0 48 32" className="h-10 w-16 fill-white">
+          <path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
+        </svg>
+      </div>
+
+        <div className="flex flex-col justify-center p-8 sm:p-12">
+          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              aria-label="Go back"
+              className="flex size-10 shrink-0 items-center justify-center text-foreground"
+            >
+              <ArrowLeft className="size-6" />
+            </button>
+
+            <h1 className="text-5xl font-bold tracking-tighter md:text-6xl">Log in</h1>
+          </div>
+          <p className="mt-4 text-lg text-muted-foreground">
+            Don&apos;t have an account?{" "}
+            <Link href="#" className="font-semibold text-foreground underline underline-offset-2">
+              Create an Account
+            </Link>
+          </p>
+
+          <form onSubmit={onSubmit} noValidate className="mt-8">
+            <FieldGroup>
+              <Field data-invalid={!!form.formState.errors.email}>
+                <FieldLabel htmlFor="email" className="text-lg font-semibold">
+                  Email Address
+                </FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  className="h-14 rounded-full px-5 text-lg"
+                  placeholder="john52martinez@gmail.com"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register("email")}
+                />
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
+
+              <Field data-invalid={!!form.formState.errors.password}>
+                <FieldLabel htmlFor="password" className="text-lg font-semibold">
+                  Password
+                </FieldLabel>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    autoComplete="current-password"
+                    className="h-14 rounded-full px-5 pr-12 text-lg"
+                    placeholder="Password"
+                    aria-invalid={!!form.formState.errors.password}
+                    {...form.register("password")}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    aria-label={showPassword ? "Hide password" : "Show password"}
+                    className="absolute inset-y-0 right-5 flex items-center text-muted-foreground"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="size-5" />
+                    ) : (
+                      <Eye className="size-5" />
+                    )}
+                  </button>
+                </div>
+                <FieldError errors={[form.formState.errors.password]} />
+                <div className="flex justify-end">
+                  <Link href="#" className="text-lg font-semibold underline underline-offset-2">
+                    Forgot Password?
+                  </Link>
+                </div>
+              </Field>
+
+              <div className="flex justify-center">
+                <Button
+                  type="submit"
+                  size="lg"
+                  className="h-14 w-72 rounded-full text-lg"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? "Logging in…" : "Log in"}
+                </Button>
+              </div>
+
+              <Field data-invalid={!!form.formState.errors.agreeToTerms}>
+                <Controller
+                  control={form.control}
+                  name="agreeToTerms"
+                  render={({ field }) => (
+                    <label className="flex items-center gap-2 text-lg">
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={(checked) => field.onChange(checked === true)}
+                      />
+                      <span>
+                        I agree to the{" "}
+                        <Link href="#" className="font-semibold underline underline-offset-2">
+                          Terms &amp; Condition
+                        </Link>
+                      </span>
+                    </label>
+                  )}
+                />
+                <FieldError errors={[form.formState.errors.agreeToTerms]} />
+              </Field>
+            </FieldGroup>
+          </form>
+
+          <div className="my-6 flex items-center gap-3 text-lg text-muted-foreground">
+            <div className="h-px flex-1 bg-border" />
+            or
+            <div className="h-px flex-1 bg-border" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Button variant="outline" className="h-13 rounded-full text-lg">
+              <GoogleIcon />
+              Continue with Google
+            </Button>
+            <Button variant="outline" className="h-13 rounded-full text-lg">
+              <FacebookIcon />
+              Continue with Facebook
+            </Button>
+          </div>
+        </div>
+      </div>
+  )
+}
+
+