MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

signup api added

Browse Source
This commit is contained in:
victorAnumudu
2024-12-17 13:56:00 +01:00
parent f6e714ed4b
commit a364269547
2 changed files with 81 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/auth/Signup2.jsx
+71 -45
View File
@@ -6,6 +6,8 @@ import LoginImg from '../../assets/bg/login.svg'
import { Link, useNavigate } from 'react-router-dom' import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks' import siteLinks from '../../links/siteLinks'
import { useMutation } from '@tanstack/react-query';
import { signUpUser } from '../../services/services';
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
email: Yup.string() email: Yup.string()
@@ -35,9 +37,22 @@ export default function Signup2() {
const navigate = useNavigate() 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() // helpers.resetForm()
console.log('values', values, helpers) // console.log('values', values, helpers)
mutation.mutate(values)
} }
return ( return (
@@ -61,56 +76,67 @@ export default function Signup2() {
return ( return (
<Form className='mt-2 mt-sm-5'> <Form className='mt-2 mt-sm-5'>
<div className="row"> <div className="row">
<> {!mutation.isSuccess ?
<div className="col-12 col-sm-6"> <>
<div className="form-group"> <div className="col-12 col-sm-6">
<label className={`text-black control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label> <div className="form-group">
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} /> <label className={`text-black 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> <div className="col-12 col-sm-6">
<div className="col-12 col-sm-6"> <div className="form-group">
<div className="form-group"> <label className={`text-black control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
<label className={`text-black 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} />
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} /> </div>
</div> </div>
</div> <div className="col-12">
<div className="col-12"> <div className="form-group">
<div className="form-group"> <label className={`text-black control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
<label className={`text-black 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} />
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} /> </div>
</div> </div>
</div> {/* <div className="col-12">
{/* <div className="col-12"> <div className="form-group">
<div className="form-group"> <label className={`text-black control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
<label className={`text-black 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} />
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} /> </div>
</div> </div>
</div> <div className="col-12">
<div className="col-12"> <div className="form-group">
<div className="form-group"> <label className={`control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
<label className={`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} />
<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 className="form-check-input" type="checkbox" id="gridCheck" />
<label className="form-check-label" htmlFor="gridCheck">
I accept terms & policy
</label>
</div>
</div> </div>
</div> */}
<div className="col-12">
<div className="form-check">
<input className="form-check-input" type="checkbox" id="gridCheck" />
<label className="form-check-label" htmlFor="gridCheck">
I accept terms & policy
</label>
</div>
</div>
<div className="col-12 mt-3 text-end">
<button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
</div>
</>
<div className='col-12'> {mutation.error &&
<div className="card w-100 justify-content-between align-items-center" style={{height: '200px'}}> <>
<p className='p-2 text-black'>Check your email to continue.</p> <div className="col-12">
<p className='p-2 text-primary'>Home</p> <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="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>
<p className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</p>
</div>
</div> </div>
</div> }
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
src/services/services.js
+8
View File
@@ -50,6 +50,14 @@ export const loginUser = (reqData) => {
return postAuxEnd('/panel/auth/login', postData, false) 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 // FUNCTION TO GET DASHBOARD DATA
export const accountDashboard = () => { export const accountDashboard = () => {