parent
c2edebb99a
commit
8507a9b3ed
@ -1,2 +1,2 @@ |
|||||||
REACT_APP_ENVIRONMENT=development |
REACT_APP_ENVIRONMENT=development |
||||||
REACT_APP_API=https://localhost:5041/api |
REACT_APP_API=https://localhost:5051/api |
||||||
@ -1,2 +1,2 @@ |
|||||||
REACT_APP_ENVIRONMENT=production |
REACT_APP_ENVIRONMENT=production |
||||||
REACT_APP_API=https://www.gemcousa.mx/CORRESPONSALBackend/api |
REACT_APP_API=https://corresponsal.gemcousa.mx/CORRESPONSALBackend/api |
||||||
|
|||||||
@ -1,2 +1,2 @@ |
|||||||
REACT_APP_ENVIRONMENT=qa |
REACT_APP_ENVIRONMENT=qa |
||||||
REACT_APP_API=https://www.gemcousa.solutions/CORRESPONSALBackend/api |
REACT_APP_API=https://corresponsal.gemcousa.solutions/CORRESPONSALBackend/api |
||||||
@ -1,113 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Card, Col, ProgressBar, Row } from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { FaAmazon } from 'react-icons/fa' |
|
||||||
import { Link } from 'react-router-dom' |
|
||||||
import '../../css/generic01.css' |
|
||||||
import DashboardDataService from '../../Services/Dashboard/Dashboard.Clasificacion.Services' |
|
||||||
|
|
||||||
export interface IDashboardTraficoProps { |
|
||||||
} |
|
||||||
|
|
||||||
export default function DashboardTrafico (props: IDashboardTraficoProps) { |
|
||||||
const [Terminadas, setTerminadas] = useState(0) |
|
||||||
const [Pendientes, setPendientes] = useState(0) |
|
||||||
const [Total, setTotal] = useState(0) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDataService.DashboardInvoices(3) |
|
||||||
.then((response) => { |
|
||||||
setPendientes(response.data.total) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
DashboardDataService.DashboardInvoices(4) |
|
||||||
.then((response) => { |
|
||||||
setTerminadas(response.data.total) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setTotal(Pendientes + Terminadas) |
|
||||||
}, [Pendientes, Terminadas]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className='blueCardBorder dashboardComponentFont'> |
|
||||||
<Card.Header style={{backgroundColor: '#1D6DC2', color: '#ffffff'}}>Trafico</Card.Header> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
Facturas {' '} |
|
||||||
<IconContext.Provider value={{ color: '#F6C34F', size:'30%' }}> |
|
||||||
<FaAmazon /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Card.Title> |
|
||||||
<Row > |
|
||||||
<Col xs={6} style={{}}> |
|
||||||
<Link |
|
||||||
to="../RptAmazonLinkInvoice2Traffic" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'left', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Terminadas |
|
||||||
</Link> |
|
||||||
</Col> |
|
||||||
<Col xs={6} className="text-center"> |
|
||||||
<Link |
|
||||||
to="../RptAmazonPendingTraficInvoice" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Pendientes |
|
||||||
</Link> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<ProgressBar style={{ height: '25px' }}> |
|
||||||
<ProgressBar |
|
||||||
striped |
|
||||||
animated |
|
||||||
variant="success" |
|
||||||
now={(Terminadas / Total) * 100} |
|
||||||
key={1} |
|
||||||
/> |
|
||||||
<ProgressBar |
|
||||||
striped |
|
||||||
variant="warning" |
|
||||||
now={(Pendientes / Total) * 100} |
|
||||||
key={2} |
|
||||||
/> |
|
||||||
</ProgressBar> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
{Terminadas} |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
{Pendientes} |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer |
|
||||||
style={{ paddingRight: '5px', paddingBottom: '5px' }} |
|
||||||
></Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -0,0 +1,176 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
||||||
|
import logo from '../../images/GEMCO_login.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 '../../css/customerColors.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 className='Color2' style={{textAlign:'center'}}> |
||||||
|
<Col xs={12}> |
||||||
|
<img |
||||||
|
src={logo} |
||||||
|
alt='Corresponal' |
||||||
|
style={{ width: '40%' }} |
||||||
|
></img> |
||||||
|
</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,126 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
||||||
|
import logo from '../../images/GEMCO_login.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' |
||||||
|
|
||||||
|
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 className='Color2' style={{textAlign:'center'}}> |
||||||
|
<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,190 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { |
||||||
|
Button, |
||||||
|
Card, |
||||||
|
Col, |
||||||
|
Form, |
||||||
|
Row, |
||||||
|
Toast, |
||||||
|
ToastContainer, |
||||||
|
} from 'react-bootstrap' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import logo from '../../images/GEMCO_login.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 className='Color2' style={{ textAlign: 'center' }}> |
||||||
|
<Col xs={12}> |
||||||
|
<img |
||||||
|
src={logo} |
||||||
|
alt='ZINC Internacional' |
||||||
|
style={{ width: '70%' }} |
||||||
|
></img> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Card.Text> |
||||||
|
<Row className='btn-customColor' style={{textAlign:'center'}}> |
||||||
|
<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,258 @@ |
|||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import UsuariosDS from '../../Services/Catalogos/Usuarios.Services' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import DTOUsuariosShort from '../../DTO/DTOUsuariosShort' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { |
||||||
|
BsCheckCircleFill, |
||||||
|
BsFillPencilFill, |
||||||
|
BsFillXCircleFill, |
||||||
|
} from 'react-icons/bs' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IUsuario } from '../../Interfaces/IUsuario' |
||||||
|
|
||||||
|
export interface IUserControlProps {} |
||||||
|
|
||||||
|
export default function UserControl(props: IUserControlProps) { |
||||||
|
const [Usuario, setUsuario] = useState('') |
||||||
|
const [IDEstatus, setIDEstatus] = useState(false) |
||||||
|
const [IDUser, setIDUser] = useState(0) |
||||||
|
const [header, setHerader] = useState('Error!') |
||||||
|
const [msgColor, setMsgColor] = useState('Primary') |
||||||
|
const [showMsg, setShowMsg] = useState(false) |
||||||
|
const [ModalDisableUser, setModalDisableUser] = useState(false) |
||||||
|
const [UsersData, setUsersData] = useState<DTOUsuariosShort[]>([]) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const colData = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '100px', |
||||||
|
selector: (row: DTOUsuariosShort) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Usuario', |
||||||
|
selector: (row: DTOUsuariosShort) => row.usuario, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
width: '80px', |
||||||
|
cell: (row: DTOUsuariosShort) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setIDUser(row.id) |
||||||
|
setIDEstatus(row.activo) |
||||||
|
setUsuario(row.usuario) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<BsFillPencilFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Activo', |
||||||
|
width: '80px', |
||||||
|
cell: (row: DTOUsuariosShort) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setIDUser(row.id) |
||||||
|
setIDEstatus(row.activo) |
||||||
|
setUsuario(row.usuario) |
||||||
|
setModalDisableUser(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.activo ? ( |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
|
||||||
|
] |
||||||
|
|
||||||
|
const loadUsers = () => { |
||||||
|
UsuariosDS.getAllUsuariosShort() |
||||||
|
.then((response) => { |
||||||
|
//console.log(response.data)
|
||||||
|
setUsersData(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setMsg('Ocurrio un error: ' + e.toString()) |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadUsers() |
||||||
|
}, []) |
||||||
|
|
||||||
|
const disableUser = () => { |
||||||
|
UsuariosDS.disableUser(IDUser) |
||||||
|
.then((response) => { |
||||||
|
setModalDisableUser(false) |
||||||
|
loadUsers() |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setMsg('Ocurrio un error: ' + e.toString()) |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const createUser = () => { |
||||||
|
const data: IUsuario = { |
||||||
|
id: IDUser, |
||||||
|
usuario: Usuario, |
||||||
|
nombre: Usuario, |
||||||
|
correo: Usuario
|
||||||
|
} |
||||||
|
UsuariosDS.create(data) |
||||||
|
.then((response) => { |
||||||
|
setModalDisableUser(false) |
||||||
|
loadUsers() |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setMsg('Ocurrio un error: ' + e.toString()) |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function closeToast(arg: boolean): void { |
||||||
|
throw new Error('Function not implemented.') |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> </Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col></Col> |
||||||
|
<Col xs={4}> |
||||||
|
<Card> |
||||||
|
<Card.Header style={{ fontWeight: 'bold', fontSize: '20px' }}> |
||||||
|
Control de usuarios |
||||||
|
</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Card.Text> |
||||||
|
<Row> |
||||||
|
<Col xs={2}>Usuario</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
id='Usuario' |
||||||
|
className='form-control' |
||||||
|
placeholder='Usuario' |
||||||
|
value={Usuario} |
||||||
|
onChange={(e) => { |
||||||
|
setUsuario(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Text> |
||||||
|
<Row> |
||||||
|
<Col xs={10}></Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Button variant='primary' onClick={()=>{createUser()}}>Guarda</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col xs={3}></Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Card> |
||||||
|
<Card.Header style={{ fontWeight: 'bold', fontSize: '20px' }}> |
||||||
|
Lista de usuarios |
||||||
|
</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Card.Text> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={colData} |
||||||
|
data={UsersData.filter(function (row) { |
||||||
|
return row |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Text> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col></Col> |
||||||
|
</Row> |
||||||
|
<Modal |
||||||
|
show={ModalDisableUser} |
||||||
|
onHide={() => setModalDisableUser(false)} |
||||||
|
size='lg' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Card className='labelSize13px'> |
||||||
|
<Card.Body> |
||||||
|
<Card> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<Alert variant='warning' style={{ textAlign: 'center' }}> |
||||||
|
<h6> |
||||||
|
Esta seguro de { IDEstatus ? 'deshabilitar' : 'habilitar'} este este usuario ({Usuario})? |
||||||
|
<br /> |
||||||
|
</h6> |
||||||
|
</Alert> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '10px', paddingBottom: '10px' }}> |
||||||
|
<Col></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
style={{ textAlign: 'right' }} |
||||||
|
onClick={() => { |
||||||
|
setModalDisableUser(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={7}></Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Button |
||||||
|
variant={IDEstatus ? 'danger' : 'primary'} |
||||||
|
onClick={() => { |
||||||
|
disableUser() |
||||||
|
}} |
||||||
|
> |
||||||
|
{ IDEstatus ? 'Deshabilitar' : 'Habilitar'} |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={showMsg} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} closeToast={()=> {}} /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,99 +0,0 @@ |
|||||||
import React, { FC } from 'react' |
|
||||||
import { Button, Form, Toast, ToastContainer } from 'react-bootstrap' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import DTOUsuario from '../../DTO/DTOUsuario' |
|
||||||
import usuariosServices from '../../Services/Catalogos/Usuarios.Services' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
export default function ResetCredentials(props: IProps) { |
|
||||||
const [header, setHerader] = React.useState('Error!') |
|
||||||
const [msgColor, setMsgColor] = React.useState('Primary') |
|
||||||
const [showMsg, setShowMsg] = React.useState(false) |
|
||||||
const [msg, setMsg] = React.useState('') |
|
||||||
const [usuario, setUsuario] = React.useState('') |
|
||||||
const [contrasena, setContrasena] = React.useState('') |
|
||||||
const [confirmaContrasena, setConfirmaContrasena] = React.useState('') |
|
||||||
|
|
||||||
const validaFormulario = () => { |
|
||||||
if (contrasena != confirmaContrasena) { |
|
||||||
setMsg('Contrasena no coincide con su confirmacion!') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const data: DTOUsuario = { |
|
||||||
Usuario: usuario, |
|
||||||
Contrasena: contrasena, |
|
||||||
} |
|
||||||
|
|
||||||
usuariosServices |
|
||||||
.resetPassword(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) alert('La contrasena se reseteo exisosamente') |
|
||||||
if (response.status == 204) alert('Usuario no existe') |
|
||||||
|
|
||||||
console.log(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
console.log(e) |
|
||||||
//alert(e);
|
|
||||||
let message = e.message |
|
||||||
setMsg(message) |
|
||||||
if (message.includes('400')) setMsg('Usuario no encontrado') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
{' '} |
|
||||||
<div id='login'> |
|
||||||
<div className='container'> |
|
||||||
<div id='login-row' className='row justify-content-center align-items-center'> |
|
||||||
<div id='login-column' className='col-md-4'> |
|
||||||
<div id='login-box' className='col-md-12'> |
|
||||||
<Form id='login-form' className='form'> |
|
||||||
<h3 className='text-center text-info'>Olvido su contraseña</h3> |
|
||||||
<Form.Group className='mb-3 control-label' controlId='formBasicEmail'> |
|
||||||
<Form.Label>Usuario</Form.Label> |
|
||||||
<Form.Control placeholder='Usuario' onChange={(e) => setUsuario(e.currentTarget.value)} /> |
|
||||||
</Form.Group> |
|
||||||
<Form.Group className='mb-3 control-label' controlId='formBasicPassword'> |
|
||||||
<Form.Label>Nueva contraseña</Form.Label> |
|
||||||
<Form.Control |
|
||||||
type='password' |
|
||||||
placeholder='Contraseña' |
|
||||||
onChange={(e) => setContrasena(e.currentTarget.value)} |
|
||||||
/> |
|
||||||
</Form.Group> |
|
||||||
<Form.Group className='mb-3 control-label' controlId='formBasicPassword'> |
|
||||||
<Form.Label>Confirme su nueva contraseña</Form.Label> |
|
||||||
<Form.Control |
|
||||||
type='password' |
|
||||||
placeholder='Confirme su contraseña' |
|
||||||
onChange={(e) => setConfirmaContrasena(e.currentTarget.value)} |
|
||||||
/> |
|
||||||
</Form.Group> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
onClick={() => { |
|
||||||
validaFormulario() |
|
||||||
}} |
|
||||||
> |
|
||||||
Submit |
|
||||||
</Button> |
|
||||||
</Form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<MsgInformativo show={showMsg} msg={msg} header={header} msgColor={msgColor} closeToast={closeToast} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export interface DTOPINUsuario { |
||||||
|
pin: number, |
||||||
|
usuario: string |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export interface DTOResetPassword { |
||||||
|
pin: number, |
||||||
|
contrasena: string |
||||||
|
} |
||||||
@ -1,4 +1,5 @@ |
|||||||
export default interface DTOUsuariosShort { |
export default interface DTOUsuariosShort { |
||||||
id: number; |
id: number, |
||||||
usuario: string; |
usuario: string, |
||||||
|
activo: boolean |
||||||
} |
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export interface IUsuario { |
||||||
|
id: number, |
||||||
|
usuario: string, |
||||||
|
nombre: string, |
||||||
|
correo: string
|
||||||
|
} |
||||||
@ -1,54 +0,0 @@ |
|||||||
.mainDiv { |
|
||||||
/* padding-top: 50px; */ |
|
||||||
font-family: sans-serif; |
|
||||||
text-align: left; |
|
||||||
/*width: 300px;*/ |
|
||||||
/*margin: 0 auto;*/ |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-form-group { |
|
||||||
position: relative; |
|
||||||
z-index: 1000; |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-form-group1 { |
|
||||||
position: relative; |
|
||||||
z-index: 999; |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-form-group2 { |
|
||||||
position: relative; |
|
||||||
z-index: 998; |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-form-group3 { |
|
||||||
position: relative; |
|
||||||
z-index: 998; |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-list-group4 { |
|
||||||
position: absolute; |
|
||||||
width: 100%; |
|
||||||
top: 38px; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-list-group-item { |
|
||||||
/* padding: 0.3rem 1.3rem; */ |
|
||||||
background-color: rgb(228, 243, 240); |
|
||||||
} |
|
||||||
|
|
||||||
.typeahead-list-group-item:hover { |
|
||||||
cursor: pointer; |
|
||||||
background: #2d4ddc; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.textBoxViaje { |
|
||||||
z-index: 100; |
|
||||||
} |
|
||||||
|
|
||||||
.textField { |
|
||||||
margin-right: 0px !important; |
|
||||||
padding-right: 0px; |
|
||||||
} |
|
||||||
@ -0,0 +1,130 @@ |
|||||||
|
.MDTable { |
||||||
|
width: 3500px; |
||||||
|
font-size: 0.8em; |
||||||
|
font-family: Verdana, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, |
||||||
|
sans-serif; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.MDHeaderSticky { |
||||||
|
position: 'sticky'; |
||||||
|
top: '0'; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable th, |
||||||
|
.MDTable td { |
||||||
|
padding: 0px 0px 0px 0px; |
||||||
|
border: none; |
||||||
|
/* padding-top: 5px; */ |
||||||
|
background-color: #ebecfa; |
||||||
|
} |
||||||
|
.MDTable tr { |
||||||
|
background-color: #dddcdc; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable thead tr th { |
||||||
|
/* text-shadow: 1px 1px 1px #ccc; */ |
||||||
|
font-weight: normal; |
||||||
|
font-size: 1.1em; |
||||||
|
background-color: #0f5129; |
||||||
|
color: #ffffff; |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr td { |
||||||
|
border-top: solid 1px #c8cacd; |
||||||
|
/* border-bottom: solid 1px #092a84; */ |
||||||
|
font-size: 1.2em; |
||||||
|
background-color: #ffffff; |
||||||
|
/* height: 25px; */ |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr:nth-of-type(even) { |
||||||
|
background-color: #c2bfbf; |
||||||
|
} |
||||||
|
|
||||||
|
.MDTable tbody tr:nth-of-type(odd) { |
||||||
|
background-color: #c0bdbd; |
||||||
|
} |
||||||
|
|
||||||
|
.MDcontainer { |
||||||
|
width: 100%; |
||||||
|
height: 600px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table { |
||||||
|
border: solid 1px #ddeeee; |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
font: normal 11px Arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table thead tr th { |
||||||
|
background-color: #ddefef; |
||||||
|
border: solid 1px #ddeeee; |
||||||
|
color: #336b6b; |
||||||
|
padding: 5px; |
||||||
|
text-align: left; |
||||||
|
text-shadow: 1px 1px 1px #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table tbody td { |
||||||
|
border: dotted 1px #ddeeee; |
||||||
|
color: #333; |
||||||
|
padding: 0px; |
||||||
|
text-shadow: 1px 1px 1px #fff; |
||||||
|
border-bottom: none; |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th { |
||||||
|
background-color: #cfad70; |
||||||
|
border: none; |
||||||
|
text-shadow: 1px 1px 1px #ccc; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th:first-child { |
||||||
|
border-radius: 10px 0 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded thead th:last-child { |
||||||
|
border-radius: 0 10px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr td { |
||||||
|
border: none; |
||||||
|
border-top: dotted 1px #09840f; |
||||||
|
background-color: #eed592; |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr:last-child td:first-child { |
||||||
|
border-radius: 0 0 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-rounded tbody tr:last-child td:last-child { |
||||||
|
border-radius: 0 0 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.zui-table-min { |
||||||
|
height: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.Color1 { |
||||||
|
border-color: #E8E9F0; |
||||||
|
} |
||||||
|
|
||||||
|
.Color2 { |
||||||
|
background-color: #E8E9F0; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-customColor { |
||||||
|
background-color: blue; |
||||||
|
color: white; |
||||||
|
} |
||||||
@ -1,101 +0,0 @@ |
|||||||
body { |
|
||||||
width: 100% !important; |
|
||||||
font-family: Verdana, 'Flamenco', serif; |
|
||||||
} |
|
||||||
|
|
||||||
h1 { |
|
||||||
color: #fff; |
|
||||||
font-weight: normal; |
|
||||||
font-size: 1rem; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/*_________________ Accordion |
|
||||||
________________________________________*/ |
|
||||||
.accordion { |
|
||||||
position: relative; |
|
||||||
margin: 60px auto; |
|
||||||
width: 250px; |
|
||||||
} |
|
||||||
|
|
||||||
[id*="open-accordion"], |
|
||||||
[id*="close-accordion"] { |
|
||||||
background: #153f8e; |
|
||||||
border-bottom: 1px solid #fff; |
|
||||||
line-height: 40px; |
|
||||||
height: 40px; |
|
||||||
display: block; |
|
||||||
margin: 0 auto; |
|
||||||
position: relative; |
|
||||||
width: 99%; |
|
||||||
} |
|
||||||
|
|
||||||
[id*="close-accordion"] { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion a { |
|
||||||
color: #d8f0ef; |
|
||||||
font-size: 1em; |
|
||||||
font-weight: normal; |
|
||||||
padding-left: 2%; |
|
||||||
text-decoration: none; |
|
||||||
text-shadow: none; |
|
||||||
background-color: #153f8e; |
|
||||||
} |
|
||||||
|
|
||||||
[id*="open-accordion"]:after, |
|
||||||
[id*="close-accordion"]:after { |
|
||||||
/* content: ""; |
|
||||||
border-left: 10px solid transparent; |
|
||||||
border-right: 10px solid transparent; |
|
||||||
border-top: 10px solid rgba(255, 255, 255, 0.6);*/ |
|
||||||
position: absolute; |
|
||||||
right: 5px; |
|
||||||
top: 15px; |
|
||||||
z-index: 999; |
|
||||||
transform: rotate(-90deg); |
|
||||||
-webkit-transform: rotate(-90deg); |
|
||||||
} |
|
||||||
|
|
||||||
.target-fix { |
|
||||||
display: block; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
position: fixed; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion-content { |
|
||||||
color: #000000; |
|
||||||
background: #153f8e; |
|
||||||
height: 0; |
|
||||||
margin: -1px auto 0; |
|
||||||
/* padding: 0 2.5%; */ |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
width: 90%; |
|
||||||
transition: all 0.1s ease; |
|
||||||
-webkit-transition: all 0.1s ease; |
|
||||||
-moz-transition: all 0.1s ease; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion span:target~.accordion-content { |
|
||||||
display: block; |
|
||||||
height: auto; |
|
||||||
padding-bottom: 25px; |
|
||||||
padding-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion span:target~[id*="close-accordion"] { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion span:target~[id*="open-accordion"] { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.accordion span:target~[id*="close-accordion"]:after { |
|
||||||
border-top: 10px solid #333; |
|
||||||
transform: rotate(0deg); |
|
||||||
-webkit-transform: rotate(0deg); |
|
||||||
} |
|
||||||
@ -1,91 +0,0 @@ |
|||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
font-family: sans-serif; |
|
||||||
font-size: 13px; |
|
||||||
list-style: none; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
body {} |
|
||||||
|
|
||||||
.middle { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
/* left: 50%; */ |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
|
|
||||||
.menu { |
|
||||||
width: 200px; |
|
||||||
border-radius: 8px; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
border-top: 1px solid #2980b9; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
/* .btn { |
|
||||||
display: block; |
|
||||||
padding: 16px 20px; |
|
||||||
background: #3498db; |
|
||||||
color: white; |
|
||||||
position: relative; |
|
||||||
} */ |
|
||||||
|
|
||||||
/* .btn:before { |
|
||||||
content: ""; |
|
||||||
position: absolute; |
|
||||||
width: 14px; |
|
||||||
height: 14px; |
|
||||||
background-color: #3498db; |
|
||||||
left: 20px; |
|
||||||
bottom: -7px; |
|
||||||
transform: rotate(45deg); |
|
||||||
} */ |
|
||||||
|
|
||||||
.btn i { |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.smenu { |
|
||||||
background: #333; |
|
||||||
overflow: hidden; |
|
||||||
transition: max-height 0.3s; |
|
||||||
max-height: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.smenu a { |
|
||||||
display: block; |
|
||||||
padding: 16px 26px; |
|
||||||
color: #fff; |
|
||||||
font-size: 13px; |
|
||||||
/* margin: 4px 0; */ |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.smenu a:before { |
|
||||||
content: ""; |
|
||||||
position: absolute; |
|
||||||
width: 4px; |
|
||||||
height: 100%; |
|
||||||
background: #3498db; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
transition: 0.3s; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.smenu a:hover:before { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.item:target .smenu { |
|
||||||
max-height: 15em; |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
.printableDiv { |
|
||||||
background-color: #ffffff; |
|
||||||
width: 100%; |
|
||||||
height: calc(100vh); |
|
||||||
border: none !important; |
|
||||||
border-radius: 5px; |
|
||||||
margin: auto; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
table { |
|
||||||
background-color: #ffffff; |
|
||||||
border: none !important; |
|
||||||
display: inline-table; |
|
||||||
} |
|
||||||
|
|
||||||
.noneBorder { |
|
||||||
border-top: 2 px solid #ffffff !important; |
|
||||||
border-bottom: 2 px solid #ffffff !important; |
|
||||||
} |
|
||||||
|
|
||||||
td:nth-child(odd) { |
|
||||||
background-color: #ffffff; |
|
||||||
} |
|
||||||
@ -0,0 +1,12 @@ |
|||||||
|
/* .react-captcha { |
||||||
|
background-color: #000000; |
||||||
|
} |
||||||
|
*/ |
||||||
|
/* .react-captcha-icon-wrapper { |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
.react-captcha-canvas{ |
||||||
|
background-color: rgb(242, 242, 248); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 508 B |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 378 B |
Loading…
Reference in new issue