Sign-in Forms

"use client";

import type React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import Link from "next/link";
import { GithubIcon, TwitterIcon } from "lucide-react";
import { Divider } from "@/components/ui/divider";
import { Card, CardContent } from "@/components/ui/card";

const formSchema = z.object({
  email: z.email(),
  password: z.string().min(8, { message: "Password must be at least 8 characters" })
});

export default function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: ""
    }
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[url('https://images.unsplash.com/photo-1755593574938-6d66d28f8e57?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1080')] bg-cover bg-center bg-no-repeat lg:grid-cols-2">
      <Card className="mx-auto flex w-full max-w-sm flex-col items-center gap-8 border-0 shadow-none">
        <CardContent className="space-y-8 text-center">
          {/* Logo */}
          <div className="mb-10 flex flex-col items-center justify-center gap-4 text-center">
            <img src="/logo.svg" className="size-8" alt="" />
            <h1 className="font-heading text-center text-3xl">Sign in to your account</h1>
          </div>

          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input type="email" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="flex justify-between">
                      Password{" "}
                      <Link href="#" className="text-muted-foreground text-sm underline">
                        Forgot password?
                      </Link>
                    </FormLabel>

                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">
                Sign in
              </Button>

              <p className="text-muted-foreground text-sm">
                Not a member?{" "}
                <Link href="#" className="underline">
                  Start a 14 day free trial
                </Link>
              </p>
            </form>
          </Form>

          <Divider>or continue with</Divider>

          <div className="mt-6 flex w-full flex-col gap-3">
            <Button variant="outline">
              <GithubIcon />
              <span className="sr-only">GitHub</span>
              Continue with GitHub
            </Button>
            <Button variant="outline">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                width="24"
                height="24">
                <path d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"></path>
              </svg>
              <span className="sr-only">Google</span>
              Continue with Google
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}