Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : SignUpForm2.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 { useMutation } from '@tanstack/react-query'
import { validationSchema } from "@/lib/validators/formValidator";
import Link from "next/link";
import { 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";

type ValidationSchema = z.infer<typeof validationSchema>;

export default function CreateAccount2() {
  const [view, setView] = useState<"signup" | "terms" | "privacy">("signup");

  const router = useRouter();

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

  const { mutate: onSubmit, isLoading } = useMutation({
    mutationFn: async (data: ValidationSchema) => {
      const response = await axios.post("/api/signup", data);
      return response.data;
    },
    onSuccess: () => {
      console.log(`Your account has been registered`);
      toast({
        description: 'Your account has been registered.'
      });
      //router.refresh()
      router.push('/signin');
    },
    onError: (err) => {
      if (err instanceof AxiosError) {
        if (err.response?.status === 409) {
          return toast({
            title: 'Username already taken',
            description: 'Please try another username',
            variant: 'destructive'
          });
        }
      }
      return toast({
        title: 'Something went wrong',
        description: 'Your account was not registered. Please try again.',
        variant: 'destructive',
      });
    }
  });

  return (
    <div className="flex lg:flex-row flex-col h-full">
      <div className="lg:w-[400px] w-full m-auto flex flex-col justify-between h-screen ">
        <form onSubmit={handleSubmit((e) => onSubmit(e))}>
          <Card className="bg-transparent border-0 p-10 sm:p-8 text-white">
            <div className="p-0 mt-8">
              <Image src={sclogo} alt="Logo" width={200} height={150} />
            </div>
            <CardHeader className="space-y-1 mt-4 p-0 mb-4">
              <CardTitle className="text-2xl ">Sign up your account</CardTitle>
            </CardHeader>
            <CardContent className="grid p-0 gap-6 text-white">
              <div className="grid gap-4 ">
                <Label htmlFor="email">Username <span className="text-red-600">*</span></Label>
                <Input
                  className={`${errors.username && "border-red-500"} appearance-none focus:outline-none focus:shadow-outline`}
                  id="username"
                  type="text"
                  placeholder="tabswitcher"
                  {...register("username")}
                />
                {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">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="abc@gmail.com"
                  {...register("email")}
                />
                {errors.password && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.password?.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>
              <div className="grid gap-4">
                <Label htmlFor="password">Confirm Password<span className="text-red-600"> *</span></Label>
                <Input
                  className={`${errors.confirmPassword && "border-red-500"} appearance-none focus:outline-none focus:shadow-outline`}
                  id="confirmPassword"
                  type="password"
                  placeholder="******"
                  {...register("confirmPassword")}
                />
                {errors.password && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.password?.message?.toString()}
                  </p>
                )}
              </div>
            </CardContent>
            <CardFooter className="flex p-0 mt-8 flex-col w-full">
              <Button className="w-full h-10 rounded-xl" variant={"gradient"}>
                {isLoading && <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />}
                Sign Up
              </Button>
              <p className="mt-8 text-xs flex w-full p-0 justify-center text-gray-700">
                <Link href='/signin' className="font-bold text-gray-400 hover:underline">Sign in to your Account</Link>
              </p>
            </CardFooter>
          </Card>
        </form>
        <p className="mt-8 pb-8 text-xs flex gap-2 underline justify-center items-center w-full text-center text-gray-700">
          <Button variant={'link'} className="p-0 text-xs font-bold text-gray-400 hover:underline" onClick={() => setView("terms")}>Terms & Conditions</Button>
          <span className="text-gray-400 text-2xl">·</span>
          <Button variant={'link'} className="p-0 font-bold text-xs text-gray-400 hover:underline" onClick={() => setView("privacy")}>Privacy Policy</Button>
        </p>
      </div>
      <div className="flex w-full relative">
        {view === "signup" && (
          <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>
        )}
      </div>
    </div>
  );
}