From caa60f541d66faa41e389228def237643c8a8457 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 26 Dec 2024 19:52:16 +0100
Subject: [PATCH] complete signup dummy page added

---
 src/AppRouters.jsx             |   4 +-
 src/component/auth/CSignup.jsx | 174 +++++++++++++++++++++++++++++++++
 src/links/siteLinks.js         |   3 +-
 src/views/CSignupPage.jsx      |   8 ++
 4 files changed, 187 insertions(+), 2 deletions(-)
 create mode 100644 src/component/auth/CSignup.jsx
 create mode 100644 src/views/CSignupPage.jsx

diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx
index 8b51e72..268a456 100644
--- a/src/AppRouters.jsx
+++ b/src/AppRouters.jsx
@@ -16,6 +16,7 @@ import CalendarPage from './views/CalendarPage'
 import SettingsPage from './views/SettingsPage'
 import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
+import CSignupPage from './views/CSignupPage';
 
 function AppRouters() {
   return (
@@ -27,7 +28,8 @@ function AppRouters() {
           <Route path={siteLinks.login} element={<LoginPage />} />
           <Route path={siteLinks.signup} element={<SignupPage />} />
           <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
-          <Route path={siteLinks.error} element={<ForgetpwdPage />} />
+          <Route path={siteLinks.csignup} element={<CSignupPage />} />
+          <Route path={siteLinks.error} element={<LoginPage />} />
         </Route>
 
         {/* protected routes */}
diff --git a/src/component/auth/CSignup.jsx b/src/component/auth/CSignup.jsx
new file mode 100644
index 0000000..c38db83
--- /dev/null
+++ b/src/component/auth/CSignup.jsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+// import LoginImg from '../../assets/bg/login.svg'
+
+import { Link, useNavigate, useParams, useSearchParams } 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()
+      .email("Wrong email format")
+    //   .matches(
+    //     /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
+    //     "Invalid email format"
+    //   )
+      .min(3, "Minimum 3 characters")
+      .max(50, "Maximum 50 characters")
+      .required("Email is required"),
+      password: Yup.string().required("Password is required"),
+      confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
+    // lastname: Yup.string().required("Lastname is required"),
+    // isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
+  })
+
+  const initialValues = {
+    email: '',
+    password: '',
+    confirmpassword: '',
+    // lastname: '',
+    // isChecked: false,
+  };
+
+export default function CSignup() {
+
+    const {jwt} = useParams()
+
+    const navigate = useNavigate()
+
+  const mutation = useMutation({
+    mutationFn: (fields) => {
+        return signUpUser(fields)
+    },
+    onSuccess: (res) => {
+        console.log('res', res)
+    }
+  })
+
+  const CSignUp = (values) => {
+    // helpers.resetForm()
+    // console.log('values', values, helpers)
+    // mutation.mutate(values)
+    console.log('values', values)
+  }
+
+  useEffect(()=>{
+    if(!jwt){
+        return navigate(siteLinks.login, {replace: true})
+    }
+  })
+
+  return (
+    <div className="app">
+        <div className="app-wrap">
+            <div className="app-contant">
+                <div className="bg-white custom-bg">
+                    <div className="container-fluid p-0">
+                        <div className="row no-gutters justify-content-center">
+                        <div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1 h-100-vh">
+                            <div className="mt-5 d-flex">
+                                <div className="bg-white register p-5">
+                                    <h1 className="mb-2">MERMS Panel</h1>
+                                    <p>Welcome, Enter your password.</p>
+                                    <Formik
+                                        initialValues={initialValues}
+                                        validationSchema={validationSchema}
+                                        onSubmit={CSignUp}
+                                    >
+                                        {(props) => {
+                                        return (
+                                            <Form className='mt-2 mt-sm-5'>
+                                                <div className="row">
+                                                    {!mutation.isSuccess ?
+                                                        <>
+                                                            {/* <div className="col-12 col-sm-6">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
+                                                                    <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div> */}
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
+                                                                    <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
+                                                                    <input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
+                                                                    <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div>
+                                                            
+                                                            {/* <div className="col-12">
+                                                                <div className="form-check">
+                                                                    <input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
+                                                                    <label className="form-check-label" htmlFor="gridCheck">
+                                                                        I accept terms & policy
+                                                                    </label>
+                                                                </div>
+                                                                <span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
+                                                            </div> */}
+
+                                                            {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...' : 'Continue'}</button>
+                                                            </div>
+                                                        </>
+                                                        :
+                                                        <div className='col-12'>
+                                                            <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                <h4 className='p-4 text-black'>Check your email to continue.</h4>
+                                                                <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                            </div>
+                                                        </div>
+                                                    }
+
+                                                    <div className="col-12 mt-3 text-center">
+                                                        <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
+                                                    </div>
+                                                    
+                                                    <div className="col-12 mt-3 text-center">
+                                                        {/* <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> */}
+                                                        <p>Ready our Privacy Statement</p>
+                                                    </div>
+                                                </div>
+                                            </Form>
+                                        );
+                                        }}
+                                    </Formik>
+                                </div>
+                            </div>
+                        </div>
+                        {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            <div className="row align-items-center h-100">
+                                <div className="col-7 mx-auto ">
+                                    <img className="img-fluid" src={LoginImg} alt="" />
+                                </div>
+                            </div>
+                        </div> */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+  )
+}
diff --git a/src/links/siteLinks.js b/src/links/siteLinks.js
index 952d319..5bd0e20 100644
--- a/src/links/siteLinks.js
+++ b/src/links/siteLinks.js
@@ -11,7 +11,8 @@ const siteLinks = {
     settings: '/settings',
     login: '/auth/login',
     signup: '/auth/signup',
-    forgetpwd: '/auth/forgetpwd'
+    forgetpwd: '/auth/forgetpwd',
+    csignup: '/csignup/:jwt'
 }
 
 export default siteLinks
\ No newline at end of file
diff --git a/src/views/CSignupPage.jsx b/src/views/CSignupPage.jsx
new file mode 100644
index 0000000..c4a96c2
--- /dev/null
+++ b/src/views/CSignupPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import CSignup from '../component/auth/CSignup'
+
+export default function CSignupPage() {
+    return (
+      <CSignup />
+    )
+}