parent
bdf2d1dc80
commit
b66da76e39
@ -0,0 +1,177 @@ |
||||
import * as React from 'react' |
||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
||||
import logo from '../../images/GEMCO.png' |
||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||
import ReactCaptchaa from 'react-captchaa' |
||||
import AuthDS from '../../Services/Auth/Auth.Service' |
||||
import 'react-captchaa/dist/index.css' |
||||
import '../../css/reactCaptcha.css' |
||||
import ILogin from '../../Interfaces/Ilogin' |
||||
import { AxiosError } from 'axios' |
||||
import { useNavigate } from 'react-router-dom' |
||||
import { useState } from 'react' |
||||
|
||||
export interface IForgotPasswordProps {} |
||||
|
||||
export default function ForgotPassword(props: IForgotPasswordProps) { |
||||
const navigate = useNavigate() |
||||
const [Usuario, setUsuario] = useState('') |
||||
const [Contrasenia, setContrasenia] = useState('') |
||||
const [Captcha, setCaptcha] = useState('') |
||||
const [CaptchaText, setCaptchaText] = useState('') |
||||
const [show, setShow] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
|
||||
const validateCaptcha = () => { |
||||
if (!Usuario.length) { |
||||
setShow(true) |
||||
setMsg('El campo usuario no puede estar vacio') |
||||
setHeader('Error') |
||||
return |
||||
} |
||||
if (Captcha !== CaptchaText) { |
||||
setShow(true) |
||||
setMsg('Captcha o usuario incorrecto') |
||||
setHeader('Error') |
||||
return |
||||
} |
||||
const data: ILogin = { |
||||
Usuario: Usuario, |
||||
Contrasena: Contrasenia, |
||||
} |
||||
AuthDS.forgotPassword(data) |
||||
.then((response: any) => { |
||||
localStorage.setItem('User', JSON.stringify(Usuario)) |
||||
navigate('/PIN') |
||||
}) |
||||
.catch((e: AxiosError) => { |
||||
setShow(true) |
||||
setMsg('Usuario no existe') |
||||
setHeader('Error') |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Row style={{ paddingTop: '6rem' }}> |
||||
<Col xs={12}></Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={5}> </Col> |
||||
<Col xs={2}> |
||||
<div |
||||
className='shadow-lg bg-white rounded' |
||||
style={{ marginLeft: 'auto', marginRight: 'auto', width:'125%' }} |
||||
> |
||||
<Card className='Color1'> |
||||
<Card.Header> |
||||
<Row> |
||||
<Col xs={4}></Col> |
||||
<Col xs={4}> |
||||
<img |
||||
src={logo} |
||||
alt='GEMCO' |
||||
style={{ width: '80%', textAlign: 'center' }} |
||||
></img> |
||||
</Col> |
||||
<Col xs={4}></Col> |
||||
</Row> |
||||
</Card.Header> |
||||
<Card.Body> |
||||
<Card.Text> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Form id='login-form' className='form'> |
||||
<Row> |
||||
<Col> |
||||
<Form.Control |
||||
id='Usuario' |
||||
className='form-control' |
||||
placeholder='Usuario' |
||||
value={Usuario} |
||||
onChange={(e) => { |
||||
setUsuario(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<ReactCaptchaa |
||||
captchaText={(captchaText: string) => { |
||||
setCaptchaText(captchaText) |
||||
}} |
||||
captchaLength={6} |
||||
captchaButtonClick={(e: any) => {}} |
||||
onCanvasClick={(e: any) => {}} |
||||
height={150} |
||||
width={200} |
||||
iconName={'FiRefreshCw'} |
||||
iconColor={'#fff'} |
||||
fontSize={'3em'} |
||||
iconSize={'1em'} |
||||
containerClassName={'react-captcha'} |
||||
iconWrapperClassName={'react-captcha-icon-wrapper'} |
||||
canvasClassName={'react-captcha-canvas'} |
||||
iconClassName={'react-captcha-icon'} |
||||
charactersInclude={ |
||||
'0123456789abcdefghijklmnopqrstuvwxzABCDEFGHIJKLMNOPQRSTUVWXYZ' |
||||
} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Form.Control |
||||
id='Captcha' |
||||
className='form-control' |
||||
placeholder='Teclee los caracteres de la imagen' |
||||
value={Captcha} |
||||
onChange={(e) => { |
||||
setCaptcha(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
</Form> |
||||
</Card.Text> |
||||
<div className='d-grid gap-1'></div> |
||||
<div className='d-grid gap-1'> |
||||
<Button |
||||
variant='customColor' |
||||
size='lg' |
||||
onClick={() => { |
||||
validateCaptcha() |
||||
}} |
||||
> |
||||
Continuar |
||||
</Button> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
</div> |
||||
</Col> |
||||
<Col xs={5}> </Col> |
||||
</Row> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
time={2000} |
||||
closeToast={function (arg: boolean): void { |
||||
setShow(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,127 @@ |
||||
import * as React from 'react' |
||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
||||
import logo from '../../images/GEMCO_logo_min.png' |
||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||
import AuthDS from '../../Services/Auth/Auth.Service' |
||||
import { useState } from 'react' |
||||
import { DTOPINUsuario } from '../../DTO/DTOPINUsuario' |
||||
import { useNavigate } from 'react-router-dom' |
||||
import { AxiosError } from 'axios' |
||||
|
||||
export interface IPINProps {} |
||||
|
||||
export default function PIN(props: IPINProps) { |
||||
const navigate = useNavigate() |
||||
const [User, setUser] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('User') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||
}) |
||||
const [Usuario, setUsuario] = useState(User) |
||||
const [PIN, setPIN] = useState('') |
||||
const [show, setShow] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
|
||||
const validatePIN = () => { |
||||
if (!PIN.length) { |
||||
setShow(true) |
||||
setMsg('El campo PIN no puede estar vacio') |
||||
setHeader('Error') |
||||
return false |
||||
} |
||||
const data: DTOPINUsuario = { |
||||
pin: parseInt(PIN), |
||||
usuario: Usuario, |
||||
} |
||||
console.log(JSON.stringify(data)) |
||||
AuthDS.validatePIN(data) |
||||
.then((response: any) => { |
||||
localStorage.removeItem('User') |
||||
localStorage.setItem('PIN', PIN) |
||||
navigate('/Reset') |
||||
}) |
||||
.catch((e: any) => { |
||||
setShow(true) |
||||
setMsg('PIN invalido!') |
||||
setHeader('Error') |
||||
return false |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Row style={{ paddingTop: '6rem' }}> |
||||
<Col xs={12}></Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={5}> </Col> |
||||
<Col xs={2}> |
||||
<div className='shadow-lg bg-white rounded'> |
||||
<Card style={{ width: '135%' }} className='Color1'> |
||||
<Card.Header> |
||||
<Row style={{ backgroundColor: '#002f87' }}> |
||||
<Col xs={12}> |
||||
<img |
||||
src={logo} |
||||
alt='ZINC Internacional' |
||||
style={{ width: '70%' }} |
||||
></img> |
||||
</Col> |
||||
</Row> |
||||
</Card.Header> |
||||
<Card.Body> |
||||
<Card.Text> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Form id='login-form' className='form'> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Form.Control |
||||
id='PIN' |
||||
className='form-control' |
||||
placeholder='PIN' |
||||
value={PIN} |
||||
onChange={(e) => { |
||||
setPIN(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
</Form> |
||||
</Card.Text> |
||||
<div className='d-grid gap-1'></div> |
||||
<div className='d-grid gap-1'> |
||||
<Button |
||||
variant='customColor' |
||||
size='lg' |
||||
onClick={() => { |
||||
validatePIN() |
||||
}} |
||||
> |
||||
Continuar |
||||
</Button> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
</div> |
||||
</Col> |
||||
<Col xs={5}> </Col> |
||||
</Row> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
time={2000} |
||||
closeToast={function (arg: boolean): void { |
||||
setShow(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,197 @@ |
||||
import React, { FC, useState } from 'react' |
||||
import { |
||||
Button, |
||||
Card, |
||||
Col, |
||||
Form, |
||||
Row, |
||||
Toast, |
||||
ToastContainer, |
||||
} from 'react-bootstrap' |
||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||
import DTOUsuario from '../../DTO/DTOUsuario' |
||||
import logo from '../../images/grupo-promax-b.png' |
||||
import AuthDS from '../../Services/Auth/Auth.Service' |
||||
import { DTOResetPassword } from '../../DTO/DTOResetPassword' |
||||
|
||||
interface IProps {} |
||||
|
||||
export default function ResetCredentials(props: IProps) { |
||||
const [User, setUser] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('User') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||
}) |
||||
const [PIN, setPIN] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('PIN') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||
}) |
||||
const [header, setHeader] = useState('Error!') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
const [showMsg, setShowMsg] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const [Usuario, setUsuario] = useState(User) |
||||
const [Contrasena, setContrasena] = useState('') |
||||
const [ConfirmaContrasena, setConfirmaContrasena] = useState('') |
||||
const [show, setShow] = useState(false) |
||||
|
||||
const validaFormulario = () => { |
||||
if (Contrasena.length===0 || ConfirmaContrasena.length===0) { |
||||
setShow(true) |
||||
setMsg('La contraseña no puede estar vacia!') |
||||
setHeader('Error') |
||||
return |
||||
} |
||||
if (Contrasena !== ConfirmaContrasena) { |
||||
setShow(true) |
||||
setMsg('Contraseña no coincide con la confirmacion!') |
||||
setHeader('Error') |
||||
return |
||||
} |
||||
const data: DTOResetPassword = { |
||||
pin: PIN, |
||||
contrasena: Contrasena, |
||||
} |
||||
AuthDS.resetPassword(data) |
||||
.then((response) => { |
||||
if (response.status == 200) { |
||||
setShow(true) |
||||
setMsg('La contraseña se cambio exitosamente!') |
||||
setHeader('Confirmacion') |
||||
return false |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
setShow(true) |
||||
setMsg('Ocurrio un error') |
||||
setHeader('Error') |
||||
return false |
||||
}) |
||||
} |
||||
|
||||
const closeToast = (show: boolean): void => { |
||||
setShowMsg(false) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div> |
||||
<Row style={{ paddingTop: '6rem' }}> |
||||
<Col xs={12}></Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={5}> </Col> |
||||
<Col xs={2}> |
||||
<div className='shadow-lg bg-white rounded'> |
||||
<Card style={{ width: '100%' }} className='Color1'> |
||||
<Card.Header> |
||||
<Row style={{ backgroundColor: '#002f87' }}> |
||||
<Col xs={12}> |
||||
<img |
||||
src={logo} |
||||
alt='ZINC Internacional' |
||||
style={{ width: '70%' }} |
||||
></img> |
||||
</Col> |
||||
</Row> |
||||
</Card.Header> |
||||
<Card.Body> |
||||
<Card.Text> |
||||
<Row |
||||
style={{ |
||||
backgroundColor: '#002f87', |
||||
color: '#ffffff', |
||||
fontSize: '19px', |
||||
}} |
||||
> |
||||
<Col xs={12}>Proporcione su nueva contraseña?</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Form id='login-form' className='form'> |
||||
<Row style={{ height: '0px' }}> |
||||
<Col> |
||||
<Form.Control |
||||
style={{ visibility: 'hidden' }} |
||||
id='PIN' |
||||
className='form-control' |
||||
placeholder='PIN' |
||||
value={PIN} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Form.Control |
||||
id='Contrasena' |
||||
className='form-control' |
||||
placeholder='Contraseña' |
||||
type='password' |
||||
value={Contrasena} |
||||
onChange={(e) => { |
||||
setContrasena(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Form.Control |
||||
id='Contrasena' |
||||
className='form-control' |
||||
placeholder='Confirme contraseña' |
||||
type='password' |
||||
value={ConfirmaContrasena} |
||||
onChange={(e) => { |
||||
setConfirmaContrasena(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
</Form> |
||||
</Card.Text> |
||||
<div className='d-grid gap-2'> |
||||
<Button |
||||
variant='customColor' |
||||
size='lg' |
||||
onClick={() => { |
||||
validaFormulario() |
||||
}} |
||||
> |
||||
reset |
||||
</Button> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
</div> |
||||
</Col> |
||||
<Col xs={5}> </Col> |
||||
</Row> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
time={2000} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={function (arg: boolean): void { |
||||
setShow(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
{/* <MsgInformativo |
||||
show={showMsg} |
||||
time={2000} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={closeToast} |
||||
/> */} |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export interface DTOPINUsuario { |
||||
pin: number, |
||||
usuario: string |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export interface DTOResetPassword { |
||||
pin: number, |
||||
contrasena: string |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
/* .react-captcha { |
||||
background-color: #000000; |
||||
} |
||||
*/ |
||||
/* .react-captcha-icon-wrapper { |
||||
} |
||||
*/ |
||||
|
||||
.react-captcha-canvas{ |
||||
background-color: rgb(242, 242, 248); |
||||
color: #fff; |
||||
} |
||||
Loading…
Reference in new issue