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

Merge branch 'master-bootstrap' of https://gitlab.chiefsoft.net/MERMS/MermsPanelReactJS into master-bootstrap

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2024-12-18 03:25:52 -05:00
parent 30b7648ae0 e640b6686e
commit c32dfc7b6b
4 changed files with 92 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/auth/Forgetpwd2.jsx
+74 -48
View File
@@ -1,39 +1,44 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import LoginImg from '../../assets/bg/login.svg' import { Form, Formik } from "formik";
import * as Yup from "yup";
// import LoginImg from '../../assets/bg/login.svg'
import { Link, useNavigate } from 'react-router-dom' import { Link } 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 { recoverPWD } from '../../services/services';
const validationSchema = Yup.object().shape({
username: 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"),
})
const initialValues = {
username: ''
};
export default function Forgetpwd2() { export default function Forgetpwd2() {
const navigate = useNavigate() const mutation = useMutation({
mutationFn: (fields) => {
const [email, setEmail] = useState('') return recoverPWD(fields)
const handleChange = ({target:{value}}) => {
setEmail(value)
}
const forgetPwd = useMutation({
mutationFn: (email) => {
// if(!email.username || !email.password){
// throw new Error('Please provide all email marked *')
// }
// return loginUser('panel/auth/login', {email})
throw new Error('Unable to complete, try again later!')
}, },
onError: (error) => { // onSuccess: (res) => {
console.log(error) // console.log('res', res)
}, // }
onSuccess: (res) => {
// const {token} = res?.data?.data
// if(token){
// navigate('/dash') // later add redux to dispatch state
// }
}
}) })
const recoverPWDSubmit = (values) => {
mutation.mutate(values)
}
return ( return (
<div className="app"> <div className="app">
<div className="app-wrap"> <div className="app-wrap">
@@ -46,29 +51,50 @@ export default function Forgetpwd2() {
<div className="login p-50"> <div className="login p-50">
<h1 className="mb-2">Recover Password</h1> <h1 className="mb-2">Recover Password</h1>
<p>Please enter your email.</p> <p>Please enter your email.</p>
<form className="mt-3 mt-sm-5"> <Formik
<div className="row"> initialValues={initialValues}
<div className="col-12"> validationSchema={validationSchema}
<div className="form-group"> onSubmit={recoverPWDSubmit}
<label className="control-label text-black fw-bold">Email*</label> >
<input name='email' type="text" onChange={handleChange} value={email} className="form-control" placeholder="Email" /> {(props) => {
return (
<Form className='mt-2 mt-sm-5'>
<div className="row">
{!mutation.isSuccess ?
<>
<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} />
</div>
</div>
{mutation.error &&
<>
<div className="col-12 mt-3">
<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...' : 'Send'}</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 password reset.</h4>
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
</div>
</div> </div>
</div> }
{forgetPwd.error && <div className="col-12 mt-3">
<> <p>Go <Link to={siteLinks.home}> Back</Link></p>
<div className="col-12 mt-3"> </div>
<p className='text-danger'>{forgetPwd.error.message}</p> </div>
</div> </Form>
</> );
} }}
<div className="col-12 mt-3 text-end"> </Formik>
<button type='button' onClick={()=>{forgetPwd.mutate(email)}} className="btn btn-primary text-uppercase">Send</button>
</div>
<div className="col-12 mt-3">
<p>Go <Link to={siteLinks.home}> Back</Link></p>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
src/component/auth/Login2.jsx
+1 -1
View File
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
import { useMutation } from '@tanstack/react-query' import { useMutation } from '@tanstack/react-query'
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
import LoginImg from '../../assets/bg/login.svg' // 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'
src/component/auth/Signup2.jsx
+8 -13
View File
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react' import React, { 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 LoginImg from '../../assets/bg/login.svg'
import { Link, useNavigate } from 'react-router-dom' import { Link } 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 { signUpUser } from '../../services/services';
@@ -12,10 +12,10 @@ import { signUpUser } from '../../services/services';
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
email: Yup.string() email: Yup.string()
.email("Wrong email format") .email("Wrong email format")
.matches( // .matches(
/^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/, // /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
"Invalid email format" // "Invalid email format"
) // )
.min(3, "Minimum 3 characters") .min(3, "Minimum 3 characters")
.max(50, "Maximum 50 characters") .max(50, "Maximum 50 characters")
.required("Email is required"), .required("Email is required"),
@@ -37,17 +37,12 @@ const validationSchema = Yup.object().shape({
export default function Signup2() { export default function Signup2() {
const navigate = useNavigate()
const [successBox, setSuccessBox] = useState(false)
const mutation = useMutation({ const mutation = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
return signUpUser(fields) return signUpUser(fields)
}, },
onSuccess: (res) => { onSuccess: (res) => {
console.log('res', res) console.log('res', res)
setSuccessBox(true)
} }
}) })
src/services/services.js
+9 -1
View File
@@ -50,7 +50,7 @@ export const loginUser = (reqData) => {
return postAuxEnd('/panel/auth/login', postData, false) return postAuxEnd('/panel/auth/login', postData, false)
} }
// FUNCTION TO LOGIN USER IN // FUNCTION TO REGISTER USER
export const signUpUser = (reqData) => { export const signUpUser = (reqData) => {
let postData = { let postData = {
...reqData ...reqData
@@ -59,6 +59,14 @@ export const signUpUser = (reqData) => {
} }
// FUNCTION TO RESET USER PASSWORD
export const recoverPWD = (reqData) => {
let postData = {
...reqData
}
return postAuxEnd('/panel/auth/reset', postData, false)
}
// FUNCTION TO GET DASHBOARD DATA // FUNCTION TO GET DASHBOARD DATA
export const accountDashboard = () => { export const accountDashboard = () => {
return getAuxEnd(`/panel/account/dash`) return getAuxEnd(`/panel/account/dash`)