Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : ChangeUserDetails.tsx
back
"use client";

import { FaUserCircle } from 'react-icons/fa';

import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { useMutation, useQuery } from "@tanstack/react-query";
import axios, { AxiosError } from "axios";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "./ui/card";
import { useState } from "react";
import * as z from "zod";
import { passwordValidator } from "@/lib/validators/passwordValidator";
import { zodResolver } from "@hookform/resolvers/zod";
import LoadingSpinner from './LoadingSpinner';

type PasswordValidator = z.infer<typeof passwordValidator>;

export default function ChangeUserDetails() {
  const {
    handleSubmit,
    getValues,
    register,
    formState: { errors },
    ...form
  } = useForm<PasswordValidator>({
    resolver: zodResolver(passwordValidator),
  });

  // const [userData, setUserData] = useState<any>('');

  // const userDetails = useQuery(["user"], async () => {
  //   const response = await axios.get("/api/setting");
  //   setUserData(response.data.user);
  //   return response.data;
  // });

  const { mutate: onSubmit, isLoading } = useMutation({
    mutationFn: async (data: PasswordValidator) => {
      const response = await axios.patch("/api/signin", data);
      return response.data;
    },
    onSuccess: (data) => {
      toast({
        description: "Your password has been updated.",
      });
      form.reset();
    },
    onError: (err) => {
      if (err instanceof AxiosError) {
        return toast({
          title: "Password updation failed",
          description: "Please input the correct password.",
          variant: "destructive",
        });
      }
    },
  });

  if (isLoading) 
  {
    return <LoadingSpinner message='Loading User Details...'  />
  }

  return (
    <>
      <form onSubmit={handleSubmit((e) => onSubmit(e))}>
        <Card className="mb-4 flex-col md:flex-row flex gap-16">
          <div className="flex flex-col items-center mb-4 p-4">
            <FaUserCircle size={130} color="#B16C18" />
            {/* <p className="mt-2 text-xl font-semibold">{userData.username}</p> */}
          </div>
          <div>
            <CardHeader>
              <CardTitle className="text-2xl">Change Password</CardTitle>
            </CardHeader>
        
            <CardContent className='flex flex-col gap-6'>
            <div>
                <CardDescription className="text-md mb-2">
                    Current Password
                </CardDescription>
                <Input
                  id="oldPassword"
                  type="password"
                  className= " w-full lg:w-[400px]  inline-block"
                  size={32}
                  placeholder="***********"
                  {...register("oldPassword")}
                />
                
                {errors.oldPassword && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.oldPassword?.message?.toString()}
                  </p>
                )}
            </div>
             
            <div>
               <CardDescription className="text-md mb-2 ">
                    New Password    
                </CardDescription>
                <Input
                  id="password"
                  type="password"
                  className=" w-full lg:w-[400px]  inline-block"
                  size={32}
                  placeholder="***********"
                  {...register("password")}
                />
                {errors.password && (
                  <p className="text-xs text-red-500 mt-2">
                    {errors.password?.message?.toString()}
                  </p>
                )}
            </div>
             
             <div>
              <CardDescription className="text-md mb-2">
                   Confirm New Password    
               </CardDescription>
               <Input
                 id="confirmPassword"
                 type="password"
                 className="w-full lg:w-[400px] inline-block"
                 size={32}
                 placeholder="***********"
                 {...register("confirmPassword")}
               />
               {errors.confirmPassword && (
                 <p className="text-xs text-red-500 mt-2">
                   {errors.confirmPassword?.message?.toString()}
                 </p>
               )}
             </div>
              <Button variant="gradient" size={'lg'} type="submit" className=" w-48  mt-6">Submit</Button>
            </CardContent>
          </div>
          
        </Card>
      </form>
    </>
  );
}