Skip to content

Commit

Permalink
Version 1.5.0 - System login/register OK Firts Update
Browse files Browse the repository at this point in the history
  • Loading branch information
PintoDev64 committed Jul 31, 2022
1 parent d4d078e commit ed07939
Show file tree
Hide file tree
Showing 10 changed files with 416 additions and 75 deletions.
7 changes: 6 additions & 1 deletion src/Components/Login/Login.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
z-index: 3;
top: 0;
margin: 0;
padding: 0;
Expand Down Expand Up @@ -54,6 +54,11 @@
border-radius: 10px;
}

.mb-3 {
display: flex;
flex-direction: column;
}

.btn-primary {
outline: #4b7f30 3px solid;
margin-top: 10px;
Expand Down
58 changes: 16 additions & 42 deletions src/Components/Login/LoginForm.jsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,15 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';

//Custom Hooks
import useFecth from '../../Hooks/useFecth';

//CSS
import './Login.css'

export default function LoginForm() {

const [user, setUser] = useState('');
const [password, setPassword] = useState('');

const inputUser = (event) => {
setUser(event.target.value);
}

const inputPass = (event) => {
setPassword(event.target.value);
}

const Login = () => {

fetch('https://SofiaPlus-API.11-cardozo-joan.repl.co',
{
method: "PUT",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: user,
log: password
})
}
)
.then(res => res.json())
.then(res => {
res.validate === 'Correct Password'
? //If
window.localStorage.setItem('SessionID', user)
: //Else
console.log('not logued');
})
.catch(e => console.error(e))
}
const { login, changeType, inputPass, inputUser } = useFecth();

return (

Expand All @@ -52,19 +21,24 @@ export default function LoginForm() {
<h1 id='form-title'>Inicio de Sesión</h1>
</div>
<div className="card-body">
<br />
<div className="mb-3">
<br />
<label htmlFor='usuario' className="form-label">Usuario</label>
<input onChange={(ev) => inputUser(ev)} required type="number" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
<label htmlFor='Type' className="form-label">Tipo de Documento</label>
<select required onChange={ev => changeType(ev)} name="type" className="LoginInputs" id="correo electronico" >
<option value="Ti">Tarjeta de Identidad</option>
<option value="cc">Cedula de Ciudadania</option>
</select>
</div>
<div className="mb-3">
<label htmlFor='usuario' className="form-label">Identificacion</label>
<input onChange={ev => inputUser(ev)} required type="number" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
</div>
<br />
<div className="mb-3">
<label htmlFor='contraseña' className="form-label">Contraseña</label>
<input onChange={(ev) => inputPass(ev)} required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
<input onChange={ev => inputPass(ev)} required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
</div>
<br />
<Link to='/' aria-label='exit to login form'>
<input onClick={() => Login()} type="submit" value="Iniciar Sesion" className="btn-primary" />
<input onClick={() => login()} type="submit" value="Iniciar Sesion" className="btn-primary" />
</Link>
<br /><br />
<small>Si no tienes usuario <Link to='/register'>Registrate</Link></small>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Navbar/Components/options.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { Link, NavLink } from 'react-router-dom';

//Data
Expand Down
11 changes: 6 additions & 5 deletions src/Components/Navbar/navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ nav,
}

.navSF-Base {
background: #52952e;
background: #4dad33;
width: 100%;
height: 20%;
display: grid;
grid-template-areas: "n01 n02 n02 n03";
align-items: center;
border: solid 1.5px #4b7f30;
}

#logo-Nav {
Expand Down Expand Up @@ -54,12 +55,12 @@ nav,

.navSF-Base-Search-container {
width: 40%;
background: #4dad33;
background: #fff;
border-radius: 10px;
outline: 3px #282828 solid;
outline: 1.5px #52952e solid;
}

.navSF-Base-Search-container:hover {
.navSF-Base-Search-container:hover, #searcher:focus{
outline: 3px #000000 solid;
}

Expand Down Expand Up @@ -95,7 +96,7 @@ button {
.navSF-Options {
display: block;
border-radius: 10px;
border: solid 3px #4b7f30;
border: solid 1.5px #4b7f30;
font-size: x-large;
position: absolute;
top: 110%;
Expand Down
26 changes: 23 additions & 3 deletions src/Components/Register/register.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
z-index: 3;
top: 0;
margin: 0;
padding: 0;
Expand All @@ -12,6 +12,18 @@

}

.mb-8 {
align-items: center;
justify-content: center;
text-align: center;
display: flex;
flex-direction: row;
}

.mb-3-names {
width: 45%;
}

.ext {
cursor: default;
position: absolute;
Expand All @@ -31,7 +43,7 @@

.card-body {
background-color: #f5f4f3;
padding: 0px 45px 25px 45px;
padding: 0px 20px 25px 20px;
border-radius: 0 0 9px 9px;
}

Expand All @@ -42,14 +54,16 @@
}

.row {
z-index: 2;
width: 40%;
z-index: 4;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}

.col-md-8 {
width: 90%;
border: 1px #757575 solid;
border-radius: 10px;
}
Expand Down Expand Up @@ -91,4 +105,10 @@

.LoginInputs:hover, .LoginInputs:focus {
outline: 3px solid #67b23e;
}

@media screen and (max-width: 680px) {
.row {
width: 95%;
}
}
38 changes: 23 additions & 15 deletions src/Components/Register/register.jsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,57 @@
import React from 'react';
import { Link } from 'react-router-dom';
import useFecth from '../../Hooks/useFecth';

//CSS
import './register.css'

export default function RegisterForm() {

const { register, changeType, inputPass, inputUser, inputApellido, inputNombre } = useFecth();

return (

<div className="Login-Form">
<div className="row">
<div className="col-md-8">
<form action="http://localhost/CRUD/server/signing.php" method="post">
<div>
<div className="card-header">
<h1 id='form-title'>Registro de Usuario</h1>
</div>
<div className="card-body">
<div className="mb-3">
<br />
<label htmlFor='usuario' className="form-label">Usuario</label>
<input required type="text" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
</div>
<br />
<div className="mb-8">
<div className="mb-3-names">
<label htmlFor='nombres' className="form-label">Nombres</label>
<input required onChange={ev => inputNombre(ev)} type='text' name="nombres" className="LoginInputs" id="nombres" placeholder="Nombre Completos" />
</div>
<div className="mb-3-names">
<label htmlFor='apellidos' className="form-label">Apellidos</label>
<input required onChange={ev => inputApellido(ev)} type='text' name="apellidos" className="LoginInputs" id="apellidos" placeholder="Apellidos Completos" />
</div>
</div>
<div className="mb-3">
<label htmlFor='identificacion' className="form-label">Identificacion</label>
<input required type='number' name="Identificacion" className="LoginInputs" id="identificacion" placeholder="Identificacion" />
<input required onChange={ev => inputUser(ev)} type='number' name="Identificacion" className="LoginInputs" id="identificacion" placeholder="Identificacion" />
</div>
<br />
<div className="mb-3">
<label htmlFor='correo electronico' className="form-label">Correo</label>
<input required type="email" name="Correo" className="LoginInputs" id="correo electronico" placeholder="Correo Electronico" />
<label htmlFor='Type' className="form-label">Tipo de Documento</label>
<select required onChange={ev => changeType(ev)} name="type" className="LoginInputs" id="correo electronico" >
<option value="ti">Tarjeta de Identidad</option>
<option value="cc">Cedula de Ciudadania</option>
</select>
</div>
<br />
<div className="mb-3">
<label htmlFor='contraseña' className="form-label">Contraseña</label>
<input required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
<input required onChange={ ev => inputPass(ev) } type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
</div>
<br />
<Link to='/' aria-label='exit to login form'>
<input type="submit" value="Registrate" className="btn-primary" />
<input onClick={() => register()} type="submit" value="Registrate" className="btn-primary" />
</Link>
<br /><br />
<small>Si ya tienes un usuario <Link to='/login'>Inicia Sesion</Link></small>
</div>
</form>
</div>
</div>
</div >
<Link to='/' aria-label='exit to login form'>
Expand Down
90 changes: 89 additions & 1 deletion src/Hooks/useFecth.jsx
Original file line number Diff line number Diff line change
@@ -1 +1,89 @@
import React from 'react';
import React, { useState } from 'react';

export default function useFecth() {

const [Type, setType] = useState('Ti')
const [User, setUser] = useState('');
const [Password, setPassword] = useState('');
const [Nombre, setNombre] = useState('');
const [Apellido, setApellido] = useState('');
const [responce, setResponce] = useState(false);

const inputUser = (event) => {
setUser(event.target.value);
}

const inputPass = (event) => {
setPassword(event.target.value);
}

//Change the type of document
const changeType = (event) => {
console.log(event.target.value);
setType(event.target.value);
}

const inputNombre = (event) => {
setNombre(event.target.value);
}

const inputApellido = (event) => {
setApellido(event.target.value);
}

const login = () => {

console.log('Login');

fetch('http://localhost:4000/', {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: Type,
id: User,
pass: Password
})
})
.then(res => res.json())
.then(res => {
res.validate === true
? //If
window.localStorage.setItem('SessionID', User)
: //Else
setResponce(false)
})
.catch(e => console.log(e));

}

const register = () => {

fetch('http://localhost:4000/', {
method: "PUT",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: Type,
id: User,
pass: Password,
nombre: Nombre,
apellido: Apellido
})
})
.then(res => res.json())
.then(res => {
res.register === 'Succesfull Register'
? //If
setResponce(true)
:// Else
setResponce(false)
})
.catch(e => console.log(e));
}

return { login, register, inputPass, inputUser, changeType, inputNombre, inputApellido }

}
Loading

1 comment on commit ed07939

@vercel
Copy link

@vercel vercel bot commented on ed07939 Jul 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.