victorAnumudu
231 lines
17 KiB
React
231 lines
17 KiB
React
import React, {useState} from 'react'
|
|
import {Form, Formik} from "formik";
|
|
import { Turnstile } from '@marsidev/react-turnstile'
|
|
import * as Yup from "yup";
|
|
|
|
// import LoginImg from '../../assets/bg/login.svg'
|
|
|
|
import {Link} from 'react-router-dom'
|
|
import siteLinks from '../../links/siteLinks'
|
|
import {useMutation} from '@tanstack/react-query';
|
|
import {signUpUser} from '../../services/services';
|
|
import getImage from '../../utils/getImage';
|
|
import AuthFooter from './AuthFooter';
|
|
|
|
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"),
|
|
firstname: Yup.string().required("Firstname is required"),
|
|
lastname: Yup.string().required("Lastname is required"),
|
|
isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
|
|
// username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
|
// password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
|
})
|
|
|
|
const initialValues = {
|
|
email: '',
|
|
firstname: '',
|
|
lastname: '',
|
|
isChecked: false,
|
|
turnstileToken: '',
|
|
// username: '',
|
|
// password: ''
|
|
};
|
|
|
|
export default function Signup2() {
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (fields) => {
|
|
return signUpUser(fields)
|
|
},
|
|
onSuccess: (res) => {
|
|
console.log('res', res)
|
|
}
|
|
})
|
|
|
|
const signUp = (values) => {
|
|
// helpers.resetForm()
|
|
// console.log('values', values, helpers)
|
|
delete values.isChecked
|
|
mutation.mutate(values)
|
|
}
|
|
|
|
return (
|
|
<div className="app">
|
|
<div className="app-wrap">
|
|
<div className="app-contant">
|
|
<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-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1"
|
|
style={{maxWidth: '520px'}}>
|
|
<div className="mt-5 d-flex">
|
|
<div className="bg-white register px-5 pt-5 pb-3">
|
|
<h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</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 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 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{" "}
|
|
<a
|
|
href={process.env.REACT_APP_TERMS_LINK}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
terms & policy
|
|
</a>
|
|
</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="text-center col-12 mt-3">
|
|
<Turnstile
|
|
siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}
|
|
onSuccess={(token) => props.setFieldValue('turnstileToken', token)}
|
|
onExpire={() => props.setFieldValue('turnstileToken', null)}
|
|
onError={() => props.setFieldValue('turnstileToken', null)}
|
|
/>
|
|
</div>
|
|
<div className="col-12 mt-3 text-end">
|
|
<button type='submit'
|
|
disabled={!props.values.turnstileToken || mutation.isPending}
|
|
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={{backgroundColor: '#F2FAF7'}}>
|
|
<h4 className='p-4 text-black'
|
|
style={{marginBottom: '-30px'}}>Check
|
|
your email to continue.</h4>
|
|
<img className='' style={{width: '200px'}}
|
|
src={getImage('check-mail.png')}
|
|
alt='mail-alert'/>
|
|
<Link to={siteLinks.login}
|
|
className='p-2 text-primary'
|
|
style={{color: '#6FCAEF'}}>Home</Link>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div className="col-12 mt-3">
|
|
<p>
|
|
<span style={{paddingLeft: '5px' , fontWeight: 'bolder'}}>Already have an account? </span>
|
|
<Link
|
|
to={siteLinks.login}>
|
|
<button
|
|
className="btn btn-warning text-uppercase">
|
|
Sign In
|
|
</button>
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
<AuthFooter />
|
|
</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>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|