From fa234a7fae3c039cbc560edcc71346078050c730 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 20 Jan 2025 18:46:36 +0100
Subject: [PATCH] auth page centralized

---
 src/component/auth/CSignup.jsx    |   4 +-
 src/component/auth/Forgetpwd2.jsx |  26 ++---
 src/component/auth/Login2.jsx     |  16 +--
 src/component/auth/Signup2.jsx    | 172 +++++++++++++++---------------
 4 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/src/component/auth/CSignup.jsx b/src/component/auth/CSignup.jsx
index 9fa2746..5906a4c 100644
--- a/src/component/auth/CSignup.jsx
+++ b/src/component/auth/CSignup.jsx
@@ -86,10 +86,10 @@ export default function CSignup() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white custom-bg">
+                <div className="vh-100 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="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
                             <div className="mt-5 d-flex">
                                 <div className="bg-white register p-5">
                                     <h1 className="mb-2">MERMS Panel</h1>
diff --git a/src/component/auth/Forgetpwd2.jsx b/src/component/auth/Forgetpwd2.jsx
index ccdb727..377df22 100644
--- a/src/component/auth/Forgetpwd2.jsx
+++ b/src/component/auth/Forgetpwd2.jsx
@@ -10,7 +10,7 @@ import { recoverPWD } from '../../services/services';
 
 const validationSchema = Yup.object().shape({
     username: Yup.string()
-      .email("Wrong email format")
+    //   .email("Wrong email format")
     //   .matches(
     //     /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
     //     "Invalid email format"
@@ -43,14 +43,14 @@ export default function Forgetpwd2() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
-                            <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
-                                <div className="d-flex align-items-center h-100-vh">
-                                    <div className="login p-50">
-                                        <h1 className="mb-2">Recover Password</h1>
-                                        <p>Please enter your email.</p>
+                        <div className="row no-gutters justify-content-center">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
+                                <div className="mt-5 d-flex">
+                                    <div className="bg-white register p-5">
+                                        <h1 className="mb-2">MERMS Panel</h1>
+                                        <p>Please enter your username.</p>
                                         <Formik
                                         initialValues={initialValues}
                                         validationSchema={validationSchema}
@@ -64,8 +64,8 @@ export default function Forgetpwd2() {
                                                         <>
                                                             <div className="col-12">
                                                                 <div className="form-group">
-                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Email*</label>
-                                                                    <input type="email" name='username' className="form-control" placeholder="Email" value={props.values.username} onChange={props.handleChange} />
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                                 </div>
                                                             </div>
                                                             {mutation.error &&
@@ -98,13 +98,13 @@ export default function Forgetpwd2() {
                                     </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="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="" /> */}
+                                        <img className="img-fluid" src={LoginImg} alt="" />
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>
diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx
index ce99323..597a2c9 100644
--- a/src/component/auth/Login2.jsx
+++ b/src/component/auth/Login2.jsx
@@ -66,12 +66,12 @@ export default function Login() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
-                            <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
-                                <div className="d-flex align-items-center h-100-vh">
-                                    <div className="login p-50">
+                        <div className="row no-gutters justify-content-center">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                                <div className="mt-5 d-flex">
+                                    <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
                                         <p>Welcome back, please login to your account.</p>
                                         <form className="mt-3 mt-sm-5">
@@ -135,13 +135,13 @@ export default function Login() {
                                     </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="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="" /> */}
+                                        <img className="img-fluid" src={LoginImg} alt="" />
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>
diff --git a/src/component/auth/Signup2.jsx b/src/component/auth/Signup2.jsx
index 6aa786b..c0953b2 100644
--- a/src/component/auth/Signup2.jsx
+++ b/src/component/auth/Signup2.jsx
@@ -56,104 +56,104 @@ export default function Signup2() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
-                        <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
-                            <div className="d-flex align-items-center h-100-vh">
-                                <div className="register p-5">
-                                    <h1 className="mb-2">MERMS Panel</h1>
-                                    <p>Welcome, Please create your account.</p>
-                                    <Formik
-                                        initialValues={initialValues}
-                                        validationSchema={validationSchema}
-                                        onSubmit={signUp}
-                                    >
-                                        {(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 className="row no-gutters justify-content-center">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                                <div className="mt-5 d-flex">
+                                    <div className="bg-white register p-5">
+                                        <h1 className="mb-2">MERMS Panel</h1>
+                                        <p>Welcome, Please create your account.</p>
+                                        <Formik
+                                            initialValues={initialValues}
+                                            validationSchema={validationSchema}
+                                            onSubmit={signUp}
+                                        >
+                                            {(props) => {
+                                            return (
+                                                <Form className='mt-2 mt-sm-5'>
+                                                    <div className="row">
+                                                        {!mutation.isSuccess ?
+                                                            <>
+                                                                <div className="col-12 col-md-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>
-                                                            <div className="col-12 col-sm-6">
-                                                                <div className="form-group">
-                                                                    <label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
-                                                                    <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                                <div className="col-12 col-md-6">
+                                                                    <div className="form-group">
+                                                                        <label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
+                                                                        <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                                    </div>
                                                                 </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.username && props.touched.username) && 'text-danger'}`}>Username*</label>
-                                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} 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-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 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.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                                        <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} 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-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>
-                                                                </>
-                                                            }
 
-                                                            <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="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>
+                                                                {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="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">
+                                                            <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                         </div>
-                                                    }
-                                                    
-                                                    <div className="col-12 mt-3">
-                                                        <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                     </div>
-                                                </div>
-                                            </Form>
-                                        );
-                                        }}
-                                    </Formik>
-                                </div>
-                            </div>
-                        </div>
-                            <div className="signup-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="" /> */}
+                                                </Form>
+                                            );
+                                            }}
+                                        </Formik>
                                     </div>
                                 </div>
                             </div>
+                            {/* <div className="signup-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>