Atualizações de login

src/App.js

@@ -1,15 +1,19 @@
 // src/App.js
+//import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useState } from "react";
 
-import React, { useState } from 'react';
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Forgot from "./pages/ForgotPassword";
 import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
 import LandingPage from './pages/LandingPage';
 // Mantenha todas as importações de CSS globais aqui se houver!
-// import './App.css'; 
-// import './index.css'; 
 
 function App() {
   // O estado controla qual view mostrar: false = Landing Page, true = Dashboard
   const [isInternalView, setIsInternalView] = useState(false);
+  // const [isSecretaria, setIsSecretaria] = useState(false);
 
   const handleEnterSystem = () => {
     setIsInternalView(true);
@@ -19,9 +23,24 @@ function App() {
     setIsInternalView(false);
   };
 
+  // if (isSecretaria) {
+  //   return <PerfilSecretaria onLogout={() => setIsSecretaria(false)} />;
+  // }
+  
   // Se não estiver na visualização interna, retorna a LandingPage.
   if (!isInternalView) {
-    return <LandingPage onEnterSystem={handleEnterSystem} />;
+    return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<LandingPage onEnterSystem={handleEnterSystem}/>} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/forgotPassword" element={<Forgot />} />
+        <Route path="/secretaria/*" element={<PerfilSecretaria />} />
+        <Route path="*" element={<h2>Página não encontrada</h2>} />
+      </Routes>
+    </Router>
+    )
   }
   
   // Se estiver na visualização interna, retorna o PerfilSecretaria

src/assets/scss/components/_card.scss

@@ -1,3 +1,9 @@
+.card-position {
+    padding-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .card {
     margin-bottom: 2.2rem;
     border: none;

src/data/sidebar-items.json

@@ -6,43 +6,43 @@
 
   {
     "name":"Início",
-    "url": "/",
+    "url": "/secretaria/inicio",
     "icon": "house"
   },
 
   {
     "name": "Cadastro de Pacientes",
-    "url": "/pacientes/cadastro",
+    "url": "/secretaria/pacientes/cadastro",
     "icon": "heart-pulse-fill"
   },
 
   {
     "name": "Cadastro do Médico",
-    "url": "/medicos/cadastro",
+    "url": "/secretaria/medicos/cadastro",
     "icon": "capsule"
   },
 
   {
     "name": "Lista de Pacientes",
     "icon": "clipboard-heart-fill",
-    "url": "/pacientes"
+    "url": "/secretaria/pacientes"
   },
 
   {
     "name": "Lista de Médico",
     "icon": "hospital-fill",
-    "url": "/medicos"
+    "url": "/secretaria/medicos"
   }, 
   {
     "name": "Agendar consulta",
     "icon": "calendar-plus-fill",
-    "url": "/agendamento"
+    "url": "/secretaria/agendamento"
   },
   
   {
     "name": "Laudo do Paciente",
     "icon": "table",
-    "url": "/laudo"
+    "url": "/secretaria/laudo"
   }
 
 ]

src/pages/ForgotPassword.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+function ForgotPassword() {
+return (
+    <>
+    <div className="mt-3 card-position">
+        <div className="col-lg-5 col-12">
+            <div className="card shadow-sm d-flex justify-content-between align-items-center">
+                <div id="auth-left">
+                    <div className="auth-logo">
+                        <br />
+                        <Link to="/">
+                        <h1 className="mb-4 text-center">MediConnect</h1>
+                        </Link>
+                    </div>
+                    <h3 className="auth-title">Esqueci minha senha</h3>
+                    <p className="auth-subtitle mb-5">
+                    Informe seu e-mail e enviaremos um link para redefinir sua senha.
+                    </p>
+                    <form action="index.html">
+                        <div className="form-group position-relative has-icon-left mb-4">
+                            <input
+                            type="email"
+                            className="form-control form-control-xl"
+                            placeholder="E-mail"
+                            />
+                            <div className="form-control-icon">
+                                <i className="bi bi-envelope" />
+                            </div>
+                        </div>
+                        <button className="btn btn-primary btn-block btn-lg shadow-lg mt-5">
+                        Enviar
+                        </button>
+                    </form>
+                    <div className="text-center mt-5 text-lg fs-4">
+                        <p className="text-gray-600">
+                        Lembrou da sua senha?
+                        <Link className="font-bold" to={'/login'}>
+                        Entrar
+                        </Link>
+                        .
+                        </p>
+                    </div>
+                </div>
+                <div className="col-lg-7 d-none d-lg-block">
+                    <div id="auth-right"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</>
+ );
+}
+
+export default ForgotPassword;

src/pages/LandingPage.jsx

@@ -1,9 +1,9 @@
-// src/pages/LandingPage.jsx
-
 import React from 'react';
+import { useNavigate } from "react-router-dom";
 import './style/LandingPage.css'; 
 
-const LandingPage = ({ onEnterSystem }) => {
+const LandingPage = () => {
+  const navigate = useNavigate();
   return (
     // Usa a classe de isolamento CSS
     <div className="landing-page-public-view">
@@ -18,7 +18,7 @@ const LandingPage = ({ onEnterSystem }) => {
           <a href="#services">Serviços</a>
           <a href="#contact">Contato</a>
           {/* Botão para entrar no sistema interno */}
-          <button className="access-button" onClick={onEnterSystem}>
+          <button className="access-button" onClick={() => navigate('/login')}>
             Acessar Sistema
           </button>
         </nav>
@@ -35,7 +35,7 @@ const LandingPage = ({ onEnterSystem }) => {
             Somos focados em oferecer a melhor experiência para pacientes e a gestão mais eficiente para a clínica.
           </p>
           {/* Botão de ação principal: "Acessar Sistema" */}
-          <button className="main-action-button" onClick={onEnterSystem}>
+          <button className="main-action-button" onClick={() => navigate('/login')}>
             Acessar Sistema
           </button>
         </div>

src/pages/Login.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Link, useNavigate } from "react-router-dom";
+
+function Login() {
+    const navigate = useNavigate();
+    const handleLogin = (e) => {
+        e.preventDefault();
+        // ...login logic...
+        navigate('/secretaria/inicio');
+    };
+    return (
+    <>
+    <div className="mt-3 card-position">
+        <div className="col-lg-5 col-12">
+        <div className="card shadow-sm d-flex justify-content-between align-items-center">
+            <div id="auth-left">
+                <div className="auth-logo">
+                    <br />
+                    <Link to="/">
+                        <h1 className="mb-4 text-center">MediConnect</h1>
+                    </Link>
+                </div>
+                <h3 className="auth-title">Entrar</h3>
+                <p className="auth-subtitle mb-5">
+                Entre com os dados que você inseriu durante o registro.
+                </p>
+                <form action="index.html">
+                <div className="form-group position-relative has-icon-left mb-4">
+                    <input
+                    type="text"
+                    className="form-control form-control-xl"
+                    placeholder="Username"
+                    />
+                    <div className="form-control-icon">
+                    <i className="bi bi-person" />
+                    </div>
+                </div>
+                <div className="form-group position-relative has-icon-left mb-4">
+                    <input
+                    type="password"
+                    className="form-control form-control-xl"
+                    placeholder="Password"
+                    />
+                    <div className="form-control-icon">
+                    <i className="bi bi-shield-lock" />
+                    </div>
+                </div>
+                <div className="form-check form-check-lg d-flex align-items-end">
+                    <input
+                    className="form-check-input me-2"
+                    type="checkbox"
+                    defaultValue=""
+                    id="flexCheckDefault"
+                    />
+                    <label
+                    className="form-check-label text-gray-600"
+                    htmlFor="flexCheckDefault"
+                    >
+                    Manter-me conectado
+                    </label>
+                </div>
+                <button className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
+                onClick={handleLogin}>
+                Entrar
+                </button>
+                </form>
+                <div className="text-center mt-5 text-lg fs-4">
+                <p className="text-gray-600">
+                    Não tem uma conta?
+                    <Link className="font-bold" to={'/register'}>
+                    Cadastre-se
+                    </Link>
+                    .
+                </p>
+                <p>
+                    <Link className="font-bold" to={'/forgotPassword'}>
+                    Esqueceu a senha?
+                    </Link>
+                    .
+                </p>
+                </div>
+            </div>
+            <div className="col-lg-7 d-none d-lg-block">
+            <div id="auth-right"></div>
+            </div>
+        </div>
+        </div>
+    </div>
+    </>
+    );
+}
+
+export default Login;

src/pages/Register.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Link, useNavigate } from "react-router-dom";
+
+function Register() {
+    const navigate = useNavigate();
+    const handleLogin = (e) => {
+        e.preventDefault();
+        // ...login logic...
+        navigate('/secretaria/inicio');
+    };
+return (  
+    <>
+    <div className="mt-3 card-position">
+        <div className="col-lg-5 col-12">
+            <div className="card shadow-sm d-flex justify-content-between align-items-center">
+                <div id="auth-left">
+                    <div className="auth-logo">
+                        <br />
+                        <Link to="/">
+                        <h1 className="mb-4 text-center">MediConnect</h1>
+                        </Link>
+                    </div>
+                    <h3 className="auth-title">Cadastre-se</h3>
+                    <p className="auth-subtitle mb-5">
+                    Insira seus dados para se registrar em nosso site.
+                    </p>
+                    <form action="index.html">
+                        <div className="form-group position-relative has-icon-left mb-4">
+                            <input
+                            type="text"
+                            className="form-control form-control-xl"
+                            placeholder="E-mail"
+                            />
+                            <div className="form-control-icon">
+                                <i className="bi bi-envelope" />
+                            </div>
+                        </div>
+                        <div className="form-group position-relative has-icon-left mb-4">
+                            <input
+                            type="text"
+                            className="form-control form-control-xl"
+                            placeholder="Nome de usuário"
+                            />
+                            <div className="form-control-icon">
+                                <i className="bi bi-person" />
+                            </div>
+                        </div>
+                        <div className="form-group position-relative has-icon-left mb-4">
+                            <input
+                            type="password"
+                            className="form-control form-control-xl"
+                            placeholder="Senha"
+                            />
+                            <div className="form-control-icon">
+                                <i className="bi bi-shield-lock" />
+                            </div>
+                        </div>
+                        <div className="form-group position-relative has-icon-left mb-4">
+                            <input
+                            type="password"
+                            className="form-control form-control-xl"
+                            placeholder="Confirmar senha"
+                            />
+                            <div className="form-control-icon">
+                                <i className="bi bi-shield-lock" />
+                            </div>
+                        </div>
+                        <button className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
+                        onClick={handleLogin}>
+                        Cadastrar
+                        </button>
+                    </form>
+                    <div className="text-center mt-5 text-lg fs-4">
+                        <p className="text-gray-600">
+                        Já tem uma conta?
+                        <Link className="font-bold" to={'/login'}>
+                        Entrar
+                        </Link>
+                        .
+                        </p>
+                    </div>
+                </div>
+                <div className="col-lg-7 d-none d-lg-block">
+                    <div id="auth-right"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</>
+ );
+}
+
+export default Register;

src/pages/style/LandingPage.css

@@ -2,7 +2,6 @@
 
 /* O seletor .landing-page-public-view ajuda a isolar os estilos */
 .landing-page-public-view {
-    font-family: Arial, sans-serif;
     min-height: 100vh;
     background-color: #f0f2f5;
 }
@@ -25,7 +24,7 @@
 /* Estilo para a logo DENTRO do cabeçalho da Landing Page */
 .landing-header .logo h1 {
     font-size: 1.8em;
-    color: #5b56f8; 
+    color: #25396f; 
     font-weight: 700;
     margin: 0; /* Remove margem que pode quebrar o layout */
     padding: 0; /* Remove padding */
@@ -42,6 +41,9 @@
 .nav-menu a:hover {
     color: #5b56f8;
 }
+.nav-menu button:hover {
+    background-color: #4540d6;
+}
 
 .access-button {
     background-color: #5b56f8;

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -1,6 +1,5 @@
-// src/perfis/perfil_secretaria/PerfilSecretaria.jsx
+//import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
+import { Routes, Route } from "react-router-dom";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import Sidebar from "../../components/Sidebar";
 import Inicio from "../../pages/Inicio";
@@ -15,15 +14,14 @@ import EditPage from "../../pages/EditPage";
 import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
 
-function PerfilSecretaria({ onLogout }) {
+function PerfilSecretaria() {
   return (
-    <Router>
+    // <Router>
       <div id="app" className="active">
-        {/* Passamos onLogout para que o botão Sair funcione no menu */}
+        <Sidebar />
-        <Sidebar onLogout={onLogout} />
         <div id="main">
           <Routes>
-            <Route path="/" element={<Inicio />} />
+            <Route path="/inicio" element={<Inicio />} />
             <Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
             <Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
             <Route path="/pacientes" element={<TablePaciente />} />
@@ -38,7 +36,7 @@ function PerfilSecretaria({ onLogout }) {
           </Routes>
         </div>
       </div>
-    </Router>
+    // </Router>
   );
 }