npx shadcn-ui@latest init

npx shadcn-ui@latest add input

npx shadcn-ui@latest add button

npx shadcn-ui@latest add form

npm i react-hook-form

npm i zod

npm i @hookform/resolvers

"use client"
 
import Link from "next/link"
import { useState } from "react"
 
// npm packages
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
 
// just add icons whatever you wants for your site
import LoginIcon from "@/components/icons/login-icon"
import { Icons } from "@/components/icons/icons"
 
// shadcn ui components
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
 
// form validation using zod
const loginFormSchema = z.object({
  email: z
    .string({
      required_error: "Please enter email address.",
    })
    .email(),
 
  password: z.string({
    required_error: "Please enter password.",
  }),
})
 
type LoginFormValues = z.infer<typeof loginFormSchema>
 
function AuthenticationStrategy() {
  const [isLoading, setIsLoading] = useState<boolean>(false)
  return (
    <>
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with
          </span>
        </div>
      </div>
      <Button variant="outline" type="button" disabled={isLoading}>
        {isLoading ? (
          <Icons.spinner className="mr-2 size-4 animate-spin" />
        ) : (
          <Icons.google className="mr-2 size-4" />
        )}{" "}
        Google
      </Button>
    </>
  )
}
 
function LoginForm() {
  const form = useForm<LoginFormValues>({
    resolver: zodResolver(loginFormSchema),
    mode: "onChange",
  })
 
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const onSubmit = (data: LoginFormValues) => {
    setIsLoading(true)
    console.log(data) // get form all fields
    setTimeout(() => setIsLoading(false), 3000)
  }
 
  return (
    <Form {...form}>
      <form
        className="flex flex-col space-y-6 md:px-0"
        onSubmit={form.handleSubmit(onSubmit)}
      >
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input
                  type="email"
                  placeholder="example@kico.com"
                  className="focus-visible:ring-1"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
 
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input
                  type="password"
                  placeholder="Enter password"
                  className="focus-visible:ring-1"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
 
        <Button type="submit" disabled={isLoading}>
          Login An Account
          {isLoading ? (
            <Icons.spinner className="ml-2 size-4 animate-spin" />
          ) : (
            <Icons.nextBtn className="ml-2 size-4" />
          )}{" "}
        </Button>
      </form>
    </Form>
  )
}
 
function LoginPage() {
  return (
    <div className="flex size-full items-center justify-center">
      <div className="container mx-auto pb-8">
        <div className="container relative flex-col items-center justify-center p-0 md:grid lg:max-w-none lg:grid-cols-2">
          <div className="relative hidden h-full flex-col rounded-l-2xl border-r lg:flex lg:p-5">
            <LoginIcon className="size-full" />
          </div>
          <div className="lg:p-5">
            <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
              <div className="flex flex-col space-y-2 text-center">
                <h1 className="text-2xl font-semibold tracking-tight">
                  Login an account
                </h1>
                <p className="text-sm text-muted-foreground">
                  Enter your email address and password below to login your
                  account
                </p>
              </div>
              <LoginForm />
              <div className="flex items-center justify-between">
                <Link
                  href="/sign-up"
                  className="text-xs text-foreground/60 transition-all hover:text-foreground md:text-sm"
                >
                  Don&apos;t have an acount?
                </Link>
                <Link
                  href="/forgot-password"
                  className="text-xs text-foreground/60 transition-all hover:text-foreground md:text-sm"
                >
                  Forgot Password?
                </Link>
              </div>
              <AuthenticationStrategy />
              <p className="px-4 text-center text-sm text-muted-foreground">
                By clicking continue, you agree to our{" "}
                <Link
                  href="/terms"
                  className="underline underline-offset-4 hover:text-primary"
                >
                  Terms of Service
                </Link>{" "}
                and{" "}
                <Link
                  href="/policy"
                  className="underline underline-offset-4 hover:text-primary"
                >
                  Privacy Policy
                </Link>
                .
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
 
export default LoginPage