From b66da76e393e3efdbf485d314acfb8b514671371 Mon Sep 17 00:00:00 2001
From: unknown <agarcia@gemcousa.com>
Date: Tue, 20 Jun 2023 17:58:08 -0500
Subject: [PATCH] Codigo falarta terminar de implementar proceso de validacion
 PIN

---
 package.json                              |   1 +
 src/App.tsx                               |   2 +-
 src/Components/Login/ForgotPassword.tsx   | 177 +++++++++++++++++++
 src/Components/Login/PIN.tsx              | 127 ++++++++++++++
 src/Components/Login/ResetCredentials.tsx | 197 ++++++++++++++++++++++
 src/Components/Login/login.tsx            |   9 +-
 src/DTO/DTOPINUsuario.ts                  |   4 +
 src/DTO/DTOResetPassword.ts               |   4 +
 src/Services/Auth/Auth.Service.ts         |  26 ++-
 src/Services/common/http-common.ts        |  26 ++-
 src/css/reactCaptcha.css                  |  12 ++
 src/index.tsx                             |   4 +
 yarn.lock                                 |  23 ++-
 13 files changed, 582 insertions(+), 30 deletions(-)
 create mode 100644 src/Components/Login/ForgotPassword.tsx
 create mode 100644 src/Components/Login/PIN.tsx
 create mode 100644 src/Components/Login/ResetCredentials.tsx
 create mode 100644 src/DTO/DTOPINUsuario.ts
 create mode 100644 src/DTO/DTOResetPassword.ts
 create mode 100644 src/css/reactCaptcha.css

diff --git a/package.json b/package.json
index 7bd717d..a235a81 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react": "^17.0.2",
     "react-apexcharts": "^1.4.0",
     "react-bootstrap": "^2.2.0",
+    "react-captchaa": "^1.0.13",
     "react-currency-format": "^1.1.0",
     "react-data-export": "^0.6.0",
     "react-data-table-component": "^7.5.2",
diff --git a/src/App.tsx b/src/App.tsx
index f93b08a..bd935d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -96,7 +96,7 @@ function App() {
               {!userLogued ? (
                 <>
                   <Nav.Link href="/#/login">Login</Nav.Link>
-                  <Nav.Link href="/#/reset">Reset</Nav.Link>
+                  {/* <Nav.Link href="/#/reset">Reset</Nav.Link> */}
                 </>
               ) : (
                 <>
diff --git a/src/Components/Login/ForgotPassword.tsx b/src/Components/Login/ForgotPassword.tsx
new file mode 100644
index 0000000..cb70f55
--- /dev/null
+++ b/src/Components/Login/ForgotPassword.tsx
@@ -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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</Col>
+      </Row>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        time={2000}
+        closeToast={function (arg: boolean): void {
+          setShow(false)
+        }}
+      />
+    </div>
+  )
+}
diff --git a/src/Components/Login/PIN.tsx b/src/Components/Login/PIN.tsx
new file mode 100644
index 0000000..29e5cf7
--- /dev/null
+++ b/src/Components/Login/PIN.tsx
@@ -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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</Col>
+      </Row>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        time={2000}
+        closeToast={function (arg: boolean): void {
+          setShow(false)
+        }}
+      />
+    </div>
+  )
+}
diff --git a/src/Components/Login/ResetCredentials.tsx b/src/Components/Login/ResetCredentials.tsx
new file mode 100644
index 0000000..7ee7f03
--- /dev/null
+++ b/src/Components/Login/ResetCredentials.tsx
@@ -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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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>
+  )
+}
diff --git a/src/Components/Login/login.tsx b/src/Components/Login/login.tsx
index 1c126f9..5760621 100644
--- a/src/Components/Login/login.tsx
+++ b/src/Components/Login/login.tsx
@@ -14,7 +14,7 @@ import { AxiosError } from 'axios'
 import { MsgInformativo } from '../Utils/Toast/msgInformativo'
 import logo from '../../images/GEMCO_mini.png'
 import Dashboard from '../Dashboard/Dashboard'
-import { Alert, Card } from 'react-bootstrap'
+import { Alert, Card, Nav } from 'react-bootstrap'
 
 export const Login: React.FC<{}> = () => {
   const dispatch = useDispatch()
@@ -30,12 +30,6 @@ export const Login: React.FC<{}> = () => {
     <div>
       {!userLogued ? (
         <div>
-{/*           <div> <Alert variant="warning">
-        <Alert.Heading>Aviso importante!</Alert.Heading>
-        <p>
-          Proximanate esteremos reunicando el contenido  de este servidor de aplicaciones, al nuevo dominio  de aplicaciones: https://www.gemcousa.mx  
-        </p>
-      </Alert></div> */}
         <div id='login'>
           <div className='container'>
             <div
@@ -129,6 +123,7 @@ export const Login: React.FC<{}> = () => {
                           type='password'
                         />
                       </div>
+                      <span style={{textAlign:'center'}}><Nav.Link style={{color: '#002f87'}}  href='/#/forgotPassword'>¿Olvido contraseña?</Nav.Link></span>
                       <br />
                       <div className='text-center'>
                         <button
diff --git a/src/DTO/DTOPINUsuario.ts b/src/DTO/DTOPINUsuario.ts
new file mode 100644
index 0000000..5e50d94
--- /dev/null
+++ b/src/DTO/DTOPINUsuario.ts
@@ -0,0 +1,4 @@
+export interface DTOPINUsuario {
+    pin: number,
+    usuario: string
+}
\ No newline at end of file
diff --git a/src/DTO/DTOResetPassword.ts b/src/DTO/DTOResetPassword.ts
new file mode 100644
index 0000000..8d27345
--- /dev/null
+++ b/src/DTO/DTOResetPassword.ts
@@ -0,0 +1,4 @@
+export interface DTOResetPassword {
+    pin: number,
+    contrasena: string
+}
\ No newline at end of file
diff --git a/src/Services/Auth/Auth.Service.ts b/src/Services/Auth/Auth.Service.ts
index 19b62cb..40d1a79 100644
--- a/src/Services/Auth/Auth.Service.ts
+++ b/src/Services/Auth/Auth.Service.ts
@@ -2,6 +2,10 @@ import http from "../common/http-common";
 import ILogin from "../../Interfaces/Ilogin"
 import ItemMenuData  from "../../Interfaces/Catalogos/IItemMenu";
 import Token from '../../Interfaces/token'
+import IRespuesta from "../../Interfaces/IRespuesta";
+import { DTOPINUsuario } from "../../DTO/DTOPINUsuario";
+import DTOUsuario from "../../DTO/DTOUsuario";
+import { DTOResetPassword } from "../../DTO/DTOResetPassword";
 
 class authDataService {
   /**
@@ -13,27 +17,17 @@ class authDataService {
     type returnData = [ItemMenuData[], Token]    
   }
 
-  /*getAll() {
-    return http.get<Array<ILogin>>("/tutorials");
-  }
-  get(id: string) {
-    return http.get<ITutorialData>(`/tutorials/${id}`);
-  }*/
   create(data: ILogin) {
     return http.post<[ItemMenuData[], Token]>("/Auth", data);
   }
-  /*
-  update(data: ITutorialData, id: any) {
-    return http.put<any>(`/tutorials/${id}`, data);
+  forgotPassword(data: ILogin) {
+    return http.post<IRespuesta>("/Auth/forgotPassword", data);
   }
-  delete(id: any) {
-    return http.delete<any>(`/tutorials/${id}`);
+  validatePIN(data: DTOPINUsuario) {
+    return http.post<IRespuesta>("/Auth/validatePIN", data);
   }
-  deleteAll() {
-    return http.delete<any>(`/tutorials`);
+  resetPassword(data: DTOResetPassword) {
+    return http.post<DTOUsuario>("/Auth/resetPassword", data);
   }
-  findByTitle(title: string) {
-    return http.get<Array<ITutorialData>>(`/tutorials?title=${title}`);
-  }*/
 }
 export default new authDataService();
\ No newline at end of file
diff --git a/src/Services/common/http-common.ts b/src/Services/common/http-common.ts
index 4679c04..23043c8 100644
--- a/src/Services/common/http-common.ts
+++ b/src/Services/common/http-common.ts
@@ -11,10 +11,8 @@ const instance = axios.create({
   },
 })
 
-instance.interceptors.response.use(
+/* instance.interceptors.response.use(
   function (response) {
-    /*  if (process.env.NODE_ENV === 'development')
-      console.log('log: ' + JSON.stringify(response)) */
     return response
   },
   function (error) {
@@ -24,13 +22,11 @@ instance.interceptors.response.use(
     ) {
       return Promise.reject(error)
     } else if (401 === error.response.status) {
-      /* localStorage.clear();*/
       window.location.href = '/#/login'
     } else if (
       409 === error.response.status &&
       error.response.data.respuesta.indexOf('factura')
     ) {
-      //console.log(JSON.stringify(error.response))
       if (error.response.data.registro.factura) {
         error.response.data.registro.id === -1
           ? alert(
@@ -46,8 +42,28 @@ instance.interceptors.response.use(
       return Promise.reject(error)
     }
   }
+) */
+
+instance.interceptors.response.use(
+  function (response) {
+    /*  if (process.env.NODE_ENV === 'development')
+      console.log('log: ' + JSON.stringify(response)) */
+    return response
+  },
+  function (error) {
+    const Excluded = ["login", "Reset","forgotPassword", "PIN"]
+    const currentUrl = window.location.href;
+    var urlExceptuado = new RegExp(Excluded.join('|')).test(currentUrl);
+    if (401 === error.response.status && !urlExceptuado) {
+      window.location.href = '/#/login'
+    } else {
+      return Promise.reject(error)
+    }
+    return Promise.reject(error)
+  }
 )
 
+
 /* instance.interceptors.request.use(
   function (config) {
     if (process.env.NODE_ENV === 'development')
diff --git a/src/css/reactCaptcha.css b/src/css/reactCaptcha.css
new file mode 100644
index 0000000..1598ea9
--- /dev/null
+++ b/src/css/reactCaptcha.css
@@ -0,0 +1,12 @@
+/* .react-captcha {
+    background-color: #000000;
+}
+ */
+/* .react-captcha-icon-wrapper {
+}
+ */
+
+.react-captcha-canvas{
+    background-color: rgb(242, 242, 248);
+    color: #fff;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index a38ef0d..78b5544 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -51,6 +51,8 @@ import RptRelacionMission from './Components/GEMCO/Facturacion/Anexo/RptRelacion
 import RptRelacionAlen from './Components/GEMCO/Facturacion/Anexo/RptRelacionAlen'
 import RptCasaCuervoCOVEs from './Components/Clientes/CasaCuervo/Reportes/RptCasaCuervoCOVEs'
 import RptAmazonInvoiceStatus from './Components/Clientes/Amazon/Reportes/Estatus/RtpAmazonInvoiceStatus'
+import ForgotPassword from './Components/Login/ForgotPassword'
+import PIN from './Components/Login/PIN'
 require (`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
 
 function PageNotFound() {
@@ -69,6 +71,8 @@ ReactDOM.render(
           <Route path="/" element={<App />}>
             <Route path="/" element={<Dashboard />}></Route>
             <Route path="/login" element={<Login />} />
+            <Route path='/forgotPassword' element={<ForgotPassword />} />
+            <Route path='/PIN' element={<PIN />} />
             <Route path="/logout" element={<Logout />} />
             <Route path="/reset" element={<ResetCredentials />} />
             <Route path="/register" element={<Register />} />
diff --git a/yarn.lock b/yarn.lock
index 11f3e2f..9de0638 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3887,7 +3887,7 @@ camelcase-css@^2.0.1:
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase@^5.3.1:
+camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@@ -8906,6 +8906,13 @@ react-bootstrap@^2.2.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-captchaa@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/react-captchaa/-/react-captchaa-1.0.13.tgz#ee1d95e4d2ed11481c11c462881a897820b6fe0f"
+  integrity sha512-3z/734oX4PzCs9DlNbkroaFlPGTI0skPSFW2HrM+5I5wS0Mjo3nbDMxuFy/YjUXIuqV0C/Lgdfb0saGkkMnUgg==
+  dependencies:
+    react-icons-wrapper "^1.0.8"
+
 react-currency-format@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-currency-format/-/react-currency-format-1.1.0.tgz#efef7f18045fc09a987de270b144f5eec8801dab"
@@ -9061,6 +9068,20 @@ react-grid-data@^1.1.5:
     redux-thunk "^2.3.0"
     whatwg-fetch "^3.0.0"
 
+react-icons-wrapper@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/react-icons-wrapper/-/react-icons-wrapper-1.0.8.tgz#5d2a9447bc13fcdef405a84ef622b04daf697a37"
+  integrity sha512-6nO/Z5+l/5MxXS6LeMKNoaYBo8MFKg+mC4/ZAJ6q2EGfTg6LoOarcOWHyYF7oNbGPG3jv0/UyA2CkwfpT7eqpw==
+  dependencies:
+    react-icons "^3.10.0"
+
+react-icons@^3.10.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
+  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-icons@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"