Procesos como autenticacion, reset password, accept reset password ahora estaran en el controller Auth
parent
be52fe1147
commit
9bd5fc4ec1
@ -0,0 +1,123 @@ |
||||
import { FC, useEffect, useState } from 'react' |
||||
import { Link, Navigate, useNavigate } from 'react-router-dom' |
||||
import IAuth from '../../Interfaces/Auth/IAuth' |
||||
import DSAuth from '../../Services/Auth/Auth.Services' |
||||
import DSUsers from '../../Services/Catalogos/CatUsuarios.Services' |
||||
import { useDispatch, useSelector } from 'react-redux' |
||||
import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice' |
||||
import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice' |
||||
import { RootState } from '../../store/store' |
||||
import Leyend from '../../images/leyend.png' |
||||
import jwt_decode from 'jwt-decode' |
||||
|
||||
interface IProps {} |
||||
|
||||
export const ResetAccount: FC<IProps> = (props) => { |
||||
const navigate = useNavigate() |
||||
const dispatch = useDispatch() |
||||
const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado) |
||||
const [Usuario, setUsuario] = useState('') |
||||
const [Contrasena, setContrasena] = useState('') |
||||
const [Contrasena2, setContrasena2] = useState('') |
||||
const [token, setToken] = useState<string>( |
||||
(window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')! |
||||
) |
||||
const [menuStr, setMenuStr] = useState<string>( |
||||
(window.localStorage.getItem('menu') ? window.localStorage.getItem('menu') : '')! |
||||
) |
||||
|
||||
const Reset = async () => { |
||||
if (Contrasena !== Contrasena2) { |
||||
alert('Las contraseñas no coinciden entre si') |
||||
return false |
||||
} |
||||
const data: IAuth = { |
||||
usuario: Usuario, |
||||
contrasena: Contrasena, |
||||
} |
||||
DSAuth.ResetPassword(data) |
||||
.then((response) => { |
||||
console.log(response.data) |
||||
alert('El cambio de contraseña se realizo exitosamente!') |
||||
navigate('/', { replace: true }) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Credenciales invalidas! ') |
||||
}) |
||||
} |
||||
|
||||
const validateToken = () => { |
||||
DSAuth.Validate() |
||||
.then((response) => { |
||||
navigate('/login', { replace: true }) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error!') |
||||
}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (token.length > 5) { |
||||
validateToken() |
||||
} |
||||
}, [token]) |
||||
|
||||
return ( |
||||
<div hidden={token ? true : false}> |
||||
<div className='Auth-form-container'> |
||||
<form className='Auth-form'> |
||||
<div className='Auth-form-content'> |
||||
<h3 className='Auth-form-title'> |
||||
<img src={Leyend} alt='' height='50' /> |
||||
</h3> |
||||
<div className='form-group mt-3'> |
||||
<label style={{ color: '#00719F', paddingLeft: '5px' }}>Usuario</label> |
||||
<input |
||||
type='email' |
||||
className='form-control mt-1' |
||||
placeholder='Usuario' |
||||
onChange={(e) => { |
||||
setUsuario(e.target.value) |
||||
}} |
||||
/> |
||||
</div> |
||||
<div className='form-group mt-3'> |
||||
<label style={{ color: '#00719F' }}>Nueva contraseña</label> |
||||
<input |
||||
type='password' |
||||
className='form-control mt-1' |
||||
placeholder='Contraseña' |
||||
onChange={(e) => { |
||||
setContrasena(e.target.value) |
||||
}} |
||||
/> |
||||
</div> |
||||
<div className='form-group mt-3'> |
||||
<label style={{ color: '#00719F' }}>Confirme nueva contraseña</label> |
||||
<input |
||||
type='password' |
||||
className='form-control mt-1' |
||||
placeholder='Contraseña' |
||||
onChange={(e) => { |
||||
setContrasena2(e.target.value) |
||||
}} |
||||
/> |
||||
</div> |
||||
<div className='d-grid gap-2 mt-3'> |
||||
<button |
||||
type='button' |
||||
className='btn' |
||||
style={{ backgroundColor: '#00719F', color: '#FFFFFF' }} |
||||
onClick={() => { |
||||
Reset() |
||||
}} |
||||
> |
||||
reset password |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
@ -0,0 +1,333 @@ |
||||
import React, { FC, useEffect, useState } from 'react' |
||||
import MFileManagerDS from '../../../Services/Utils/MFileManager.Service' |
||||
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
||||
import { Alert, Button, Card, Col, ListGroup, Modal, Row } from 'react-bootstrap' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsFillXCircleFill } from 'react-icons/bs' |
||||
import { MsgInformativo } from '../Toast/MsgInformativo' |
||||
import { TargetURL } from '../../../Constants/TargetURL' |
||||
|
||||
interface IProps { |
||||
IDTrafico: number |
||||
Proceso: number |
||||
Leyenda?: string |
||||
showPreview: number |
||||
fileType: string |
||||
canEdit: boolean |
||||
} |
||||
|
||||
export const MFileManager: FC<IProps> = (props) => { |
||||
const [UserId, setUserId] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('UserId') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||
}) |
||||
const [IDTrafico, setIDTrafico] = useState<number>(props.IDTrafico ? props.IDTrafico : 0) |
||||
const [Proceso, setProceso] = useState<number>(props.Proceso ? props.Proceso : 0) |
||||
const [ListaArchivos, setListaArchivos] = useState<IFileManager[]>() |
||||
const [NombreArchivo, setNombreArchivo] = useState('') |
||||
const [MsgDialogDelete, setMsgDialogDelete] = useState(false) |
||||
const [IDArchivo, setIDArchivo] = useState(0) |
||||
const [header, setHeader] = useState('') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const URL = new TargetURL() |
||||
const msgColor = 'primary' |
||||
|
||||
const selectedFiles = (selectorFiles: any) => { |
||||
var formData = new FormData() |
||||
for (let i = 0; i < selectorFiles.files.length; i++) { |
||||
formData.append('FileList', selectorFiles.files[i]) |
||||
} |
||||
MFileManagerDS.Append(formData, IDTrafico, Proceso, UserId) |
||||
.then((response) => { |
||||
setListaArchivos(response.data) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error: ' + e) |
||||
return |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
useEffect(() => { |
||||
setIDTrafico(props.IDTrafico) |
||||
setProceso(props.Proceso) |
||||
MFileManagerDS.Get(props.IDTrafico, props.Proceso) |
||||
.then((response) => { |
||||
setListaArchivos(response.data) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error: ' + e) |
||||
return |
||||
}) |
||||
}, [props.IDTrafico, props.Proceso]) |
||||
|
||||
const confirmDelete = (row: IFileManager) => { |
||||
setIDArchivo(row.id) |
||||
setNombreArchivo(row.nombreArchivo) |
||||
setMsgDialogDelete(true) |
||||
} |
||||
|
||||
const deleteItem = () => { |
||||
MFileManagerDS.DeleteFile(IDArchivo) |
||||
.then((response) => { |
||||
var arrArchivos = ListaArchivos!.filter(function (el) { |
||||
return el.id !== IDArchivo |
||||
}) |
||||
setListaArchivos(arrArchivos) |
||||
setHeader('Informtivo') |
||||
setMsg(response.data.Respuesta) |
||||
setMsgDialogDelete(false) |
||||
setShowMsg(false) |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error, no se elimino el archivo') |
||||
setMsgDialogDelete(false) |
||||
setShowMsg(false) |
||||
return |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
const getFileContent = (row: IFileManager) => { |
||||
MFileManagerDS.getFileContentById(row.id, row.proceso) |
||||
.then((response: any) => { |
||||
if (response.status === 200) { |
||||
if (row.nombreArchivo.toLowerCase().endsWith('.pdf')) { |
||||
// console.log(response.data)
|
||||
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||
const url = window.URL.createObjectURL(blob) |
||||
window.open(url) |
||||
} else if ( |
||||
row.nombreArchivo.toLowerCase().endsWith('.png') || |
||||
row.nombreArchivo.toLowerCase().endsWith('.jpg') |
||||
) { |
||||
const blob = new Blob([response.data], { type: 'image/png' }) |
||||
const url = window.URL.createObjectURL(blob) |
||||
window.open(url) |
||||
} else { |
||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', NombreArchivo ? NombreArchivo : 'Archivo.zip') |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
} |
||||
} else { |
||||
setHeader('Error') |
||||
setMsg('A este concepto no se le ha anexado PDF') |
||||
setShowMsg(true) |
||||
return |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('A este concepto no se le ha anexado PDF') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<br /> |
||||
<Card> |
||||
<Card.Body> |
||||
<Card.Title style={{ fontSize: '15px' }}> |
||||
{props.Leyenda ? props.Leyenda : ''} |
||||
{props.canEdit ? ( |
||||
<input |
||||
type='file' |
||||
multiple |
||||
name='FileList' |
||||
accept={props.fileType} |
||||
onChange={(e) => selectedFiles(e.target)} |
||||
/> |
||||
) : ( |
||||
'' |
||||
)} |
||||
</Card.Title> |
||||
{ListaArchivos && props.showPreview === 1 ? ( |
||||
<div> |
||||
<Row xs={1} md={3} className='g-1'> |
||||
{ListaArchivos |
||||
? ListaArchivos.map((rec) => { |
||||
return ( |
||||
<Col key={rec.id}> |
||||
<Card style={{ width: '28rem', textAlign: 'center' }}> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={3}></Col> |
||||
<Col xs={5}> |
||||
<img |
||||
src={`${URL.get()}/Utils/MFileManager/GetFileContentById?id=${rec.id}&Proceso=${ |
||||
rec.proceso |
||||
}`}
|
||||
width={150} |
||||
height={200} |
||||
alt={'Imagen'} |
||||
onClick={() => { |
||||
getFileContent(rec) |
||||
}} |
||||
/> |
||||
</Col> |
||||
<Col |
||||
xs={1} |
||||
alt='De un click aqui para eliminar' |
||||
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
||||
> |
||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||
<BsFillXCircleFill |
||||
onClick={() => { |
||||
confirmDelete(rec) |
||||
}} |
||||
style={{ cursor: 'pointer' }} |
||||
/> |
||||
</IconContext.Provider> |
||||
</Col> |
||||
<Col xs={3}></Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={12}>{rec.nombreArchivo}</Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
</Col> |
||||
) |
||||
}) |
||||
: ''} |
||||
</Row> |
||||
</div> |
||||
) : ListaArchivos && props.showPreview === 2 ? ( |
||||
<div> |
||||
<Row xs={1} md={3} className='g-1'> |
||||
{ListaArchivos |
||||
? ListaArchivos.map((rec) => { |
||||
return ( |
||||
<Col key={rec.id}> |
||||
<Card style={{ width: '28rem', textAlign: 'center' }}> |
||||
<Card.Body> |
||||
<Alert variant='primary'> |
||||
<Row> |
||||
<Col xs={11}>{rec.nombreArchivo}</Col> |
||||
<Col |
||||
xs={1} |
||||
alt='De un click aqui para eliminar' |
||||
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
||||
> |
||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||
<BsFillXCircleFill |
||||
onClick={() => { |
||||
confirmDelete(rec) |
||||
}} |
||||
style={{ cursor: 'pointer' }} |
||||
/> |
||||
</IconContext.Provider> |
||||
</Col> |
||||
</Row> |
||||
</Alert> |
||||
</Card.Body> |
||||
</Card> |
||||
</Col> |
||||
) |
||||
}) |
||||
: ''} |
||||
</Row> |
||||
</div> |
||||
) : ListaArchivos && props.showPreview === 3 ? ( |
||||
<div> |
||||
{ListaArchivos |
||||
? ListaArchivos.map((rec) => { |
||||
return ( |
||||
<ListGroup style={{ width: '380px' }}> |
||||
<ListGroup.Item |
||||
key={rec.id} |
||||
style={{ |
||||
paddingLeft: '5px', |
||||
backgroundColor: '#CFE2FF', |
||||
color: '#314EFA', |
||||
}} |
||||
> |
||||
<Row> |
||||
<Col> |
||||
<span |
||||
style={{ cursor: 'pointer' }} |
||||
onClick={() => { |
||||
getFileContent(rec) |
||||
}} |
||||
> |
||||
{rec.nombreArchivo.substring(0, 40)} |
||||
</span> |
||||
</Col> |
||||
<Col xs={1} style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}> |
||||
<span> |
||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||
<BsFillXCircleFill |
||||
onClick={() => { |
||||
confirmDelete(rec) |
||||
}} |
||||
style={{ cursor: 'pointer' }} |
||||
/> |
||||
</IconContext.Provider> |
||||
</span> |
||||
</Col> |
||||
</Row> |
||||
</ListGroup.Item> |
||||
</ListGroup> |
||||
) |
||||
}) |
||||
: ''} |
||||
</div> |
||||
) : ( |
||||
'' |
||||
)} |
||||
</Card.Body> |
||||
</Card> |
||||
<Modal show={MsgDialogDelete} onHide={() => setMsgDialogDelete(false)} size='lg'> |
||||
<Modal.Body> |
||||
<h5> |
||||
Favor de confirmar |
||||
<Row> |
||||
<Col xs={12}> </Col> |
||||
</Row> |
||||
<Alert variant='primary'> |
||||
¿Esta seguro de eliminar el archivo: <br /> |
||||
<br /> {NombreArchivo}? |
||||
</Alert> |
||||
</h5> |
||||
</Modal.Body> |
||||
<Modal.Footer> |
||||
<Row> |
||||
<Col xs={1}> |
||||
<Button variant='secondary' onClick={() => setMsgDialogDelete(false)} size='sm'> |
||||
Cerrar |
||||
</Button> |
||||
</Col> |
||||
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
||||
|
||||
</Col> |
||||
<Col xs={1}> |
||||
<Button variant='danger' onClick={() => deleteItem()} size='sm'> |
||||
Eliminar |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</Modal.Footer> |
||||
</Modal> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
@ -0,0 +1,51 @@ |
||||
import React, { FC } from 'react' |
||||
import { Toast, ToastContainer } from 'react-bootstrap' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsFillExclamationSquareFill, BsXOctagonFill } from 'react-icons/bs' |
||||
|
||||
interface IProps { |
||||
show: boolean |
||||
msg: string |
||||
header: string |
||||
msgColor: string |
||||
time?: number |
||||
closeToast: (arg: boolean) => void |
||||
} |
||||
|
||||
export const MsgInformativo: FC<IProps> = (props) => { |
||||
return ( |
||||
<div> |
||||
<ToastContainer position={'middle-center'}> |
||||
<Toast |
||||
show={props.show} |
||||
delay={props.time} |
||||
bg={props.msgColor} |
||||
autohide |
||||
onClose={() => { |
||||
props.closeToast(false) |
||||
}} |
||||
> |
||||
<Toast.Header> |
||||
<strong className='me-auto'> |
||||
{props.header.toString().includes('Error') ? ( |
||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||
<BsXOctagonFill /> |
||||
</IconContext.Provider> |
||||
) : null} |
||||
{props.header.toString().includes('Informativo') ? ( |
||||
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
||||
<BsFillExclamationSquareFill /> |
||||
</IconContext.Provider> |
||||
) : null} |
||||
|
||||
<span style={{ color: props.header == 'Error' ? 'red' : '' }}>{props.header}</span> |
||||
</strong> |
||||
</Toast.Header> |
||||
<Toast.Body style={{ backgroundColor: '#FFFFFF' }}> |
||||
<div className={props.msgColor == 'warning' ? 'alert alert-warning' : ''}>{props.msg}</div> |
||||
</Toast.Body> |
||||
</Toast> |
||||
</ToastContainer> |
||||
</div> |
||||
) |
||||
} |
@ -0,0 +1,9 @@ |
||||
export default interface ICatUsuarios { |
||||
id: number |
||||
usuario: string |
||||
nombre: string |
||||
contrasena: string, |
||||
tipoUsuario : number |
||||
activo: number |
||||
idPerfil: number |
||||
} |
@ -0,0 +1,9 @@ |
||||
export default interface IFileManager { |
||||
id: number, |
||||
idUsuario: number, |
||||
proceso: number, |
||||
nombreArchivo: string, |
||||
fechaRegistro: string, |
||||
tags: string, |
||||
size: number, |
||||
} |
@ -0,0 +1,17 @@ |
||||
import http from "../../Services/Auth/config/http-common"; |
||||
import ICatUsuarios from "../../Interfaces/Catalogos/ICatUsuarios"; |
||||
import IRespuesta from "../../Interfaces/Respuestas/IRespuesta"; |
||||
import IAuth from "../../Interfaces/Auth/IAuth"; |
||||
|
||||
class CatUsuariosDataService { |
||||
async GetAll() { |
||||
return await http.get<ICatUsuarios[]>("Catalogos/Usuarios/GetAll"); |
||||
} |
||||
Append(data: ICatUsuarios) { |
||||
return http.post<ICatUsuarios>(`Catalogos/Usuarios/Append`,data); |
||||
}
|
||||
Delete(id: number) { |
||||
return http.delete<IRespuesta>(`Catalogos/Usuarios/Delete/${id}`); |
||||
} |
||||
} |
||||
export default new CatUsuariosDataService(); |
@ -0,0 +1,26 @@ |
||||
import http from "../Auth/config/http-common"; |
||||
import IRespuesta from "../../Interfaces/Respuestas/IRespuesta" |
||||
import IFileManager from "../../Interfaces/Utils/IFileManager"; |
||||
|
||||
class MFileManagerDataService { |
||||
|
||||
Append(formData: any, IDTrafico: number, Proceso: number, Usuario: number) { |
||||
return http.post<IFileManager[]>(`/Utils/MFileManager/Append?Tags=${IDTrafico}&Proceso=${Proceso}&Usuario=${Usuario}`, formData) |
||||
}
|
||||
DeleteFile(id: number) { |
||||
return http.delete<IRespuesta>(`/FileManager/DeleteById/${id}`); |
||||
} |
||||
Get(IDTrafico: number, Proceso: number) {
|
||||
return http.get<IFileManager[]>(`/Utils/MFileManager/GetFilesFromLog?Tags=${IDTrafico}&Proceso=${Proceso}`) |
||||
} |
||||
getFileContentById(id: number, Proceso: number) { |
||||
return http.get<ArrayBuffer>(`/Utils/MFileManager/GetFileContentById?id=${id}&Proceso=${Proceso}`, {responseType: 'arraybuffer'}) |
||||
.then(function (response) { |
||||
return response |
||||
}) |
||||
.catch(function (error) { |
||||
console.log(error) |
||||
}) |
||||
}
|
||||
} |
||||
export default new MFileManagerDataService(); |
After Width: | Height: | Size: 508 B |
Loading…
Reference in new issue