signup api added

src/component/auth/Signup2.jsx

@@ -6,6 +6,8 @@ import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
+import { useMutation } from '@tanstack/react-query';
+import { signUpUser } from '../../services/services';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -35,9 +37,22 @@ export default function Signup2() {
 
   const navigate = useNavigate()
 
-  const signUp = (values, helpers) => {
+  const [successBox, setSuccessBox] = useState(false)
+
+  const mutation = useMutation({
+    mutationFn: (fields) => {
+        return signUpUser(fields)
+    },
+    onSuccess: (res) => {
+          console.log('res', res)
+          setSuccessBox(true)
+    }
+  })
+
+  const signUp = (values) => {
     // helpers.resetForm()
-    console.log('values', values, helpers)
+    // console.log('values', values, helpers)
+    mutation.mutate(values)
   }
 
   return (
@@ -61,6 +76,7 @@ export default function Signup2() {
                                         return (
                                             <Form className='mt-2 mt-sm-5'>
                                                 <div className="row">
+                                                    {!mutation.isSuccess ?
                                                         <>
                                                             <div className="col-12 col-sm-6">
                                                                 <div className="form-group">
@@ -100,17 +116,27 @@ export default function Signup2() {
                                                                     </label>
                                                                 </div>
                                                             </div>
-                                                        <div className="col-12 mt-3 text-end">
+
-                                                            <button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
+                                                            {mutation.error &&
+                                                                <>
+                                                                <div className="col-12">
+                                                                    <p className='text-danger'>{mutation.error.message}</p>
                                                                 </div>
                                                                 </>
+                                                            }
 
+                                                            <div className="col-12 mt-3 text-end">
+                                                                <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
+                                                            </div>
+                                                        </>
+                                                        :
                                                         <div className='col-12'>
-                                                        <div className="card w-100 justify-content-between align-items-center" style={{height: '200px'}}>
+                                                            <div className="d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
-                                                            <p className='p-2 text-black'>Check your email to continue.</p>
+                                                                <h4 className='p-4 text-black'>Check your email to continue.</h4>
-                                                            <p className='p-2 text-primary'>Home</p>
+                                                                <p className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</p>
                                                             </div>
                                                         </div>
+                                                    }
                                                     
                                                     <div className="col-12 mt-3">
                                                         <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>

src/services/services.js

@@ -50,6 +50,14 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/panel/auth/login', postData, false)
 }
 
+// FUNCTION TO LOGIN USER IN
+export const signUpUser = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/register', postData, false)
+}
+
 
 // FUNCTION TO GET DASHBOARD DATA
 export const accountDashboard = () => {