login con funcionalidad en el backend y bd | opcion para logout
This commit is contained in:
Christopher Ulloa
parent
bb695eca85
commit
a5c791837e
91
package-lock.json
generated
91
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "crov-citas",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"dayjs": "^1.11.13",
|
||||
"react": "^18.3.1",
|
||||
"react-big-calendar": "^1.17.1",
|
||||
@ -1514,6 +1515,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
@ -1529,6 +1535,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.9",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -1695,6 +1711,17 @@
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -1852,6 +1879,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
@ -2389,6 +2424,25 @@
|
||||
"integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@ -2398,6 +2452,19 @@
|
||||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@ -3260,6 +3327,25 @@
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -3588,6 +3674,11 @@
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"dayjs": "^1.11.13",
|
||||
"react": "^18.3.1",
|
||||
"react-big-calendar": "^1.17.1",
|
||||
|
||||
13
src/App.jsx
13
src/App.jsx
@ -1,16 +1,15 @@
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import SideBar from './components/Side Bar/SideBar';
|
||||
import AppRoutes from './routes/AppRoutes';
|
||||
import { Outlet } from "react-router-dom";
|
||||
import './app.css'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className='App-container'>
|
||||
<SideBar />
|
||||
<AppRoutes />
|
||||
<div style={{ display: "flex" }}>
|
||||
<SideBar />
|
||||
<div style={{ flex: 1, padding: "20px" }}>
|
||||
<Outlet />
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,8 +6,10 @@
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 20px);
|
||||
width: 280px;
|
||||
border: 1.5px #E7E7E7 solid;
|
||||
border-radius: 16px;
|
||||
background-color: #F6F6F6;
|
||||
@ -15,6 +17,10 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.user-profile-wrapper {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Estilos para el sidebar Header */
|
||||
|
||||
.sidebar-header {
|
||||
|
||||
@ -3,6 +3,7 @@ import SideBarHeader from './SideBarHeader'
|
||||
import SideBarGeneral from './SideBarGeneral'
|
||||
import SidebarOthers from './SidebarOthers'
|
||||
import './SideBar.css'
|
||||
import UserProfile from '../button/UserProfile'
|
||||
|
||||
|
||||
|
||||
@ -12,6 +13,7 @@ const SideBar = () => {
|
||||
<SideBarHeader />
|
||||
<SideBarGeneral />
|
||||
<SidebarOthers/>
|
||||
<UserProfile/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
0
src/components/button/DropUpButton.jsx
Normal file
0
src/components/button/DropUpButton.jsx
Normal file
73
src/components/button/UserProfile.css
Normal file
73
src/components/button/UserProfile.css
Normal file
@ -0,0 +1,73 @@
|
||||
.user-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
.user-profile-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Perfil de usuario */
|
||||
.user-profile-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1.5px #E7E7E7 solid;
|
||||
background: white;
|
||||
display: flex;
|
||||
padding: 6px 8px;
|
||||
gap: 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-img {
|
||||
width: 15%;
|
||||
background-color: #D9D9D9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.user-profile-content {
|
||||
width: 85%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1.5px solid #E7E7E7;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.user-button-logout {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: red;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-button-logout:hover {
|
||||
background: darkred;
|
||||
}
|
||||
55
src/components/button/UserProfile.jsx
Normal file
55
src/components/button/UserProfile.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "./UserProfile.css";
|
||||
|
||||
const UserProfile = () => {
|
||||
const navigate = useNavigate();
|
||||
const [token, setToken] = useState(localStorage.getItem("token"));
|
||||
const [email, setEmail] = useState(localStorage.getItem("email"));
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
navigate("/login");
|
||||
}
|
||||
}, [token, navigate]);
|
||||
|
||||
const logout = () => {
|
||||
setToken(null);
|
||||
setEmail(null);
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("email");
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return <div>No estás logueado</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="user-profile-wrapper">
|
||||
{/* Contenedor principal del perfil */}
|
||||
<div
|
||||
className="user-profile-container"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
>
|
||||
<div className="user-profile-img"></div>
|
||||
<div className="user-profile-content">
|
||||
<p className="user-name">Oscar Vargas</p>
|
||||
<p className="user-email">{email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dropdown */}
|
||||
{isDropdownOpen && (
|
||||
<div className="user-dropdown">
|
||||
<button onClick={logout} className="user-button-logout">
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile;
|
||||
@ -2,7 +2,7 @@ import React from 'react'
|
||||
import './footer.css'
|
||||
import logo from '../../assets/logo.png'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link as ScrollLink } from 'react-scroll';
|
||||
import { Link as ScrollLink} from 'react-scroll';
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import './DashboardPage.css'
|
||||
|
||||
import React from 'react'
|
||||
import SideBar from '../../components/Side Bar/SideBar'
|
||||
|
||||
const DashboardPage = () => {
|
||||
return (
|
||||
<div className="dashboard-page-container">
|
||||
<h1>Dashboard</h1>
|
||||
<h2>Dashboard</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -134,6 +134,14 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.LoginPage-container {
|
||||
width: 90%;
|
||||
|
||||
@ -1,8 +1,35 @@
|
||||
import React from 'react'
|
||||
import './LoginPage.css'
|
||||
import { useState} from 'react'
|
||||
import axios from 'axios'
|
||||
import imgLogo from '/src/assets/logo.png'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
const LoginPage = () => {
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await axios.post("http://localhost:8080/api/auth/login", {
|
||||
email,
|
||||
password,
|
||||
});
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("email", email);
|
||||
navigate("/dashboard");
|
||||
} catch (err) {
|
||||
setError("Credenciales incorrectas");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<section className='LoginPage-container'>
|
||||
|
||||
@ -30,16 +57,29 @@ const LoginPage = () => {
|
||||
<p>Introduce tu usuario y contraseña para acceder a tu cuenta</p>
|
||||
</div>
|
||||
<div className='login-formulario'>
|
||||
<form action="">
|
||||
<label htmlFor="">Usuario</label>
|
||||
<input type="text" placeholder='introduce tu usuario*'/>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label htmlFor="">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder='introduce tu Email*'
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<label htmlFor="">Contraseña</label>
|
||||
<input type="text" placeholder='introduce tu contraseña*'/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder='introduce tu contraseña*'
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div className='login-forgot-container'>
|
||||
<div> <span>Recordar conexión</span></div>
|
||||
<div><span>Olvide mi contraseña</span></div>
|
||||
</div>
|
||||
<button>Iniciar sesión</button>
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
<button type="submit">Iniciar sesión</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import DashboardPage from '../pages/DashboardPage/DashboardPage';
|
||||
import CalendarPage from '../pages/CalendarPage/CalendarPage';
|
||||
import DatePage from '../pages/DatePage/DatePage';
|
||||
import LoginPage from '../pages/Login/LoginPage';
|
||||
import LandingPage from '../pages/landingPage/LandingPage';
|
||||
import FormReservPage from '../pages/FormReservPage/FormReservPage';
|
||||
import DentalServicePage from '../pages/DentalServicePage/DentalServicePage';
|
||||
import SpaServicePage from '../pages/SpaServicePage/SpaServicePage'
|
||||
|
||||
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import App from ".././App";
|
||||
import DashboardPage from "../pages/DashboardPage/DashboardPage";
|
||||
import CalendarPage from "../pages/CalendarPage/CalendarPage";
|
||||
import DatePage from "../pages/DatePage/DatePage";
|
||||
import LoginPage from "../pages/Login/LoginPage";
|
||||
import LandingPage from "../pages/landingPage/LandingPage";
|
||||
import FormReservPage from "../pages/FormReservPage/FormReservPage";
|
||||
import DentalServicePage from "../pages/DentalServicePage/DentalServicePage";
|
||||
import SpaServicePage from "../pages/SpaServicePage/SpaServicePage";
|
||||
|
||||
const AppRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
|
||||
{/* Rutas sin sidebar */}
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
|
||||
<Route path="/dashboard" element={<DashboardPage />} />
|
||||
<Route path="/calendar" element={<CalendarPage />} />
|
||||
<Route path="/date" element={<DatePage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/reservacion-dentista" element={<FormReservPage/>} />
|
||||
<Route path="/Servicios-dentista" element={<DentalServicePage/>} />
|
||||
<Route path="/Servicios-spa" element={<SpaServicePage/>} />
|
||||
<Route path="/reservacion-dentista" element={<FormReservPage />} />
|
||||
<Route path="/Servicios-dentista" element={<DentalServicePage />} />
|
||||
<Route path="/Servicios-spa" element={<SpaServicePage />} />
|
||||
|
||||
{/* Rutas con sidebar */}
|
||||
<Route path="/" element={<App />}>
|
||||
<Route path="/dashboard" element={<DashboardPage />} />
|
||||
<Route path="/calendar" element={<CalendarPage />} />
|
||||
<Route path="/date" element={<DatePage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user