added select country in complete signup page
This commit is contained in:
victorAnumudu
+136
-99
@@ -2,35 +2,27 @@ import React, { useEffect, useState } from 'react'
|
|||||||
import { Form, Formik } from "formik";
|
import { Form, Formik } from "formik";
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
|
|
||||||
// import LoginImg from '../../assets/bg/login.svg'
|
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||||
|
|
||||||
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
|
|
||||||
import siteLinks from '../../links/siteLinks'
|
import siteLinks from '../../links/siteLinks'
|
||||||
import { useMutation } from '@tanstack/react-query';
|
import { useMutation } from '@tanstack/react-query';
|
||||||
import { signUpUser } from '../../services/services';
|
import { verifyEmail } from '../../services/services';
|
||||||
|
|
||||||
|
import { IoMdArrowDropdown } from "react-icons/io";
|
||||||
|
|
||||||
const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
email: Yup.string()
|
country: Yup.string().required("Username is required"),
|
||||||
.email("Wrong email format")
|
username: Yup.string().min(3, "Minimum 3 characters")
|
||||||
// .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")
|
.max(50, "Maximum 50 characters")
|
||||||
.required("Email is required"),
|
.required("Username is required"),
|
||||||
password: Yup.string().required("Password is required"),
|
password: Yup.string().required("Password is required"),
|
||||||
confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
|
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 = {
|
const initialValues = {
|
||||||
email: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
|
country: '',
|
||||||
confirmpassword: '',
|
confirmpassword: '',
|
||||||
// lastname: '',
|
|
||||||
// isChecked: false,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function CSignup() {
|
export default function CSignup() {
|
||||||
@@ -39,19 +31,33 @@ export default function CSignup() {
|
|||||||
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
const mutation = useMutation({
|
// API to verify email link
|
||||||
|
const verifyLink = useMutation({
|
||||||
mutationFn: (fields) => {
|
mutationFn: (fields) => {
|
||||||
return signUpUser(fields)
|
return verifyEmail(fields)
|
||||||
},
|
},
|
||||||
onSuccess: (res) => {
|
onSuccess: (res) => {
|
||||||
console.log('res', res)
|
console.log('res', res)
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
console.log('err', err)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const CSignUp = (values) => {
|
const cSignup = useMutation({
|
||||||
// helpers.resetForm()
|
mutationFn: (fields) => {
|
||||||
// console.log('values', values, helpers)
|
return null
|
||||||
// mutation.mutate(values)
|
},
|
||||||
|
onSuccess: (res) => {
|
||||||
|
console.log('res', res)
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
console.log('err', err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const completeSignup = (values) => {
|
||||||
|
// cSignup()
|
||||||
console.log('values', values)
|
console.log('values', values)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -59,7 +65,8 @@ export default function CSignup() {
|
|||||||
if(!jwt){
|
if(!jwt){
|
||||||
return navigate(siteLinks.login, {replace: true})
|
return navigate(siteLinks.login, {replace: true})
|
||||||
}
|
}
|
||||||
})
|
verifyLink.mutate({verify_link: jwt})
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
@@ -72,87 +79,117 @@ export default function CSignup() {
|
|||||||
<div className="mt-5 d-flex">
|
<div className="mt-5 d-flex">
|
||||||
<div className="bg-white register p-5">
|
<div className="bg-white register p-5">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">MERMS Panel</h1>
|
||||||
<p>Welcome, Enter your password.</p>
|
{/* <p>Welcome, Enter your password.</p> */}
|
||||||
<Formik
|
<div
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema}
|
|
||||||
onSubmit={CSignUp}
|
|
||||||
>
|
>
|
||||||
{(props) => {
|
<div className='mt-2'>
|
||||||
return (
|
<div className="row">
|
||||||
<Form className='mt-2 mt-sm-5'>
|
{verifyLink.isPending ?
|
||||||
<div className="row">
|
<div className='col-12'>
|
||||||
{!mutation.isSuccess ?
|
<div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||||
<>
|
<div className="col-12 d-flex flex-column justify-content-center align-items-center">
|
||||||
{/* <div className="col-12 col-sm-6">
|
<p className='text-black'>loading...</p>
|
||||||
<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>
|
</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>
|
||||||
|
: verifyLink.isSuccess ?
|
||||||
|
<div className='col-12'>
|
||||||
|
<Formik
|
||||||
|
initialValues={initialValues}
|
||||||
|
validationSchema={validationSchema}
|
||||||
|
onSubmit={completeSignup}
|
||||||
|
>
|
||||||
|
{(props) => {
|
||||||
|
return (
|
||||||
|
<Form className='mt-2'>
|
||||||
|
<div className="row">
|
||||||
|
<>
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="form-group">
|
||||||
|
<label className={`text-black fw-bold control-label`}>Email:</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 class="form-group" data-select2-id="7">
|
||||||
|
<label className={`text-black fw-bold control-label ${(props.errors.country && props.touched.country) && 'text-danger'}`}>Country*</label>
|
||||||
|
<div className='position-relative'>
|
||||||
|
<select class="js-basic-single form-control select2-hidden-accessible" name="country" data-select2-id="1" tabindex="-1" aria-hidden="true" value={props.values.country} onChange={props.handleChange}>
|
||||||
|
<option value="" data-select2-id="3">Select</option>
|
||||||
|
<option value="AK" data-select2-id="3">Alaska</option>
|
||||||
|
</select>
|
||||||
|
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
|
||||||
|
</div>
|
||||||
|
{/* <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="2" style="width: 1570px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-state-g2-container"><span class="select2-selection__rendered" id="select2-state-g2-container" role="textbox" aria-readonly="true" title="Alaska">Alaska</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> */}
|
||||||
|
</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="username" 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-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 mt-3 text-center">
|
{/* <div className="col-12">
|
||||||
{/* <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> */}
|
<div className="form-check">
|
||||||
<p>Ready our Privacy Statement</p>
|
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||||
</div>
|
<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> */}
|
||||||
|
|
||||||
|
{cSignup.error &&
|
||||||
|
<>
|
||||||
|
<div className="col-12">
|
||||||
|
<p className='text-danger'>{cSignup.error.message}</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="col-12 mt-3 text-end">
|
||||||
|
<button type='submit' className="btn btn-primary text-uppercase">{cSignup.isPending ? 'loading...' : 'Continue'}</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Formik>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className='col-12'>
|
||||||
|
<div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||||
|
<div className="col-12 d-flex flex-column justify-content-center align-items-center">
|
||||||
|
<p className='text-danger'>{verifyLink?.error?.message}</p>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
</Form>
|
|
||||||
);
|
<div className="col-12 mt-3 text-center">
|
||||||
}}
|
<p>Read our Privacy Statement</p>
|
||||||
</Formik>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -58,6 +58,14 @@ export const signUpUser = (reqData) => {
|
|||||||
return postAuxEnd('/panel/auth/register', postData, false)
|
return postAuxEnd('/panel/auth/register', postData, false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// FUNCTION TO VERIFY EMAIL
|
||||||
|
export const verifyEmail = (reqData) => {
|
||||||
|
let postData = {
|
||||||
|
...reqData
|
||||||
|
}
|
||||||
|
return postAuxEnd('/panel/auth/register/verify', postData, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// FUNCTION TO RESET USER PASSWORD
|
// FUNCTION TO RESET USER PASSWORD
|
||||||
export const recoverPWD = (reqData) => {
|
export const recoverPWD = (reqData) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user