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