Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : SignInForm.tsx
back
"use client"
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useRouter } from "next/navigation"; // Updated import path
import { loginValidator } from "@/lib/validators/loginValidator";
import { useMutation } from '@tanstack/react-query'
import Link from "next/link";
import { SubmitHandler, useForm } from "react-hook-form";
import * as z from "zod";
import axios, { AxiosError } from "axios";
import { toast } from "./ui/use-toast";
import { ReloadIcon } from "@radix-ui/react-icons";
import Image from 'next/image';
import sclogo from '../../public/sc-logo-3.svg';
import signSVG from '../../public/sign-svg.svg';
import TermsAndConditions from "@/components/Policy/TermsAndConditions";
import PrivacyPolicy from "@/components/Policy/PrivacyPolicy";
import RequestOTP from "./RequestOTP";

type ValidationSchema = z.infer<typeof loginValidator>;

export default function LoginAccount() {
  const [view, setView] = useState<"login" | "terms" | "privacy" | "forgot-password">("login");

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ValidationSchema>({
    resolver: zodResolver(loginValidator),
  });

  const router = useRouter();

  const { mutate: onSubmit, isLoading } = useMutation({
    mutationFn: async (data: ValidationSchema) => {
      const response = await axios.post("/api/signin", data);
      return response.data;
    },
    onSuccess: (data) => {
      console.log(`You've been logged in `);
      toast({
        description: 'You have been logged in.',
        variant:"success"
      });
      router.push('/dashboard');
    },
    onError: (err) => {
      if (err instanceof AxiosError) {
        if (err.response?.status === 400) {
          return toast({
            title: 'Incorrect details',
            description: 'Incorrect email or password',
            variant: 'destructive',
          });
        }
      }
      return toast({
        title: 'Error logging in',
        description: 'Your account could not be logged in. Please try again.',
        variant: 'destructive',
      });
    },
  });

  return (
    <div className="flex lg:flex-row flex-col h-screen">
      <div className="lg:w-[400px] w-full flex flex-col justify-between h-screen sticky z-30">
        <form onSubmit={handleSubmit((e) => onSubmit(e))}>
          <Card className="bg-transparent flex flex-col gap-10 border-0 p-10 sm:p-8 text-white ">
            <div className=" mt-8">
              <Image src={sclogo} alt="Logo" width={200} height={150} />
            </div>
            <CardHeader className=" p-0">
              <CardTitle className="text-2xl p-0">Log in to your account</CardTitle>
            </CardHeader>
            <CardContent className="grid gap-6 p-0 text-white">
              <div className="grid gap-4">
                <Label htmlFor="email">Email Address <span className="text-red-600">*</span></Label>
                <Input
                  className={`${errors.email && "border-red-500"} appearance-none focus:outline-none focus:shadow-outline`}
                  id="email"
                  type="text"
                  placeholder="ex: john@example.com"
                  {...register("email")}
                />
                {errors.email && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.email?.message?.toString()}
                  </p>
                )}
              </div>
              <div className="grid gap-4">
                <Label htmlFor="password">Password<span className="text-red-600"> *</span></Label>
                <Input
                  className={`${errors.password && "border-red-500"} appearance-none focus:outline-none focus:shadow-outline`}
                  id="password"
                  type="password"
                  placeholder="*****************"
                  {...register("password")}
                />
                {errors.password && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.password?.message?.toString()}
                  </p>
                )}
              </div>
            </CardContent>
            <CardFooter className="flex p-0 flex-col">
              <Button className="w-full h-10 p-0 rounded-xl" variant={"gradient"}>
                {isLoading && <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />}
                Login
              </Button>
              <p className="mt-4 text-xs flex w-full p-0 justify-between items-center text-gray-700">
                <Link href='/signup' className="font-bold text-gray-400 hover:underline">Create an Account</Link>
                <Link href='/forgot-password' className="font-bold text-gray-400 hover:underline">Forgot Password?</Link>
              </p>
            </CardFooter>
          </Card>
        </form>
        <p className="mt-8 pb-8 flex gap-2 justify-center no-underline items-center w-full text-center text-gray-700">
          <Button variant={'link'} className="text-xs font-bold p-0 text-gray-400 hover:underline" onClick={() => setView("terms")}>Terms & Conditions</Button>
          <span className="text-gray-400 text-2xl">·</span>
          <Button variant={'link'} className="font-bold text-xs p-0 text-gray-400 hover:underline" onClick={() => setView("privacy")}>Privacy Policy</Button>
        </p>
      </div>
      <div className="flex w-full relative h-screen overflow-visible">
        {view === "login" && (
            <div className="flex w-full bg-gold relative ">
                <div className="flex flex-col px-12 py-16 z-40">
                  <div className="text-white text-2xl lg:text-4xl">AI to Craft SEO-Optimized</div>
                  <div className="text-white  text-3xl lg:text-5xl font-bold">Content in Seconds</div>
                  <div className="lg:h-28 text-justify pt-6 w-full lg:w-[500px] text-gray-200 text-base font-normal">
                    Silent Content transforms content creation with AI, enabling you to generate SEO-optimized articles effortlessly. From keyword-rich headlines to engaging body text, our AI-powered platform ensures your content ranks higher and performs better. Say goodbye to writer’s block and hello to efficient, high-quality content creation.
                  </div>
                </div>
                <div className="absolute bottom-0 right-0 -z-50 lg:z-0 ">
                  <Image src={signSVG} alt="Logo" width={650} height={350} />
                </div>
            </div>
        )}
        {view === "terms" && (
          <div className="flex w-full relative  px-8 py-8  md:px-12 md:py-8 lg:px-20 lg:py-12">
            <TermsAndConditions />
          </div>
        )}
        {view === "privacy" && (
          <div className="flex w-full relative px-8 py-8  md:px-12 md:py-8 lg:px-20 lg:py-12">
            <PrivacyPolicy />
          </div>
        )}

        {/* { view ==="forgot-password" && (
            <div className="flex w-full relative px-8 py-8  md:px-12 md:py-8 lg:px-20 lg:py-12">
                <RequestOTP/>
            </div>
        )} */}
      </div>
    </div>
  );
}