restructuring layout

app/Components/auth/ChangePassword/changePassword.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+
+export default function ChangePassword() {
+  const [pass, setPass] = useState("");
+  const [newPass, setNewPass] = useState("");
+  const [confirmNewPass, setconfirmNewPass] = useState("");
+
+  const handleChangePass = (e: React.FormEvent) => {
+    e.preventDefault;
+    const data = { pass, newPass, confirmNewPass };
+    console.log(data);
+  };
+
+  return (
+    <section className="centerGrid containerSection">
+      <form onSubmit={handleChangePass} className="pass">
+        <div className="containerInput relative">
+          <label className="label">Contraseña actual</label>
+          <input
+            placeholder="Coloca tu contraseña..."
+            value={pass}
+            onChange={(e) => {
+              setPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
+
+        <div className="containerInput relative">
+          <label className="label">Nueva contraseña</label>
+          <input
+            placeholder="Coloca tu nueva contraseña..."
+            value={newPass}
+            onChange={(e) => {
+              setNewPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
+
+        <div className="containerInput relative">
+          <label className="label">Confirmar la contraña</label>
+          <input
+            placeholder="Coloca tu nueva contraseña..."
+            value={confirmNewPass}
+            onChange={(e) => {
+              setconfirmNewPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
+
+        <div className="containerButton">
+          <button
+            className="button buttonSearch"
+            style={{ maxWidth: "100%", width: "100%" }}
+            type="submit"
+          >
+            Confirmar
+          </button>
+
+          <button
+            className="button buttonCancel"
+            style={{ maxWidth: "100%", width: "100%" }}
+            type="submit"
+          >
+            Cancelar
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+}

app/Components/auth/Login/Login.css

@@ -0,0 +1,25 @@
+.login {
+    width: 300px;
+}
+
+.relative {
+    position: relative;
+}
+
+.eyeClose,
+.eyeOpen {
+    position: absolute;
+    right: 10px;
+    bottom: -1px;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    background-size: cover;
+    cursor: pointer;
+}
+
+@media(max-width:800px){
+    .center{
+        display: flex ;
+    }
+}

app/Components/auth/Login/Login.tsx

@@ -0,0 +1,82 @@
+"use client";
+import { useState } from "react";
+import { loginUser } from "@/app/lib/login";
+import { useRouter } from "next/navigation";
+
+import "./Login.css";
+import AlertBox from "../../Global/AlertBox/AlertBox";
+
+function Login() {
+  const [user, setUser] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [alert, setAlert] = useState("");
+
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const data = await loginUser(user, password);
+
+    if ("error" in data) {
+      setError(data.error);
+    } else {
+      const token = data.access_token;
+      const payload = JSON.parse(atob(token.split(".")[1]));
+      const usuario = payload.usuario;
+
+      document.cookie = `token=${token}; path=/; SameSite=Strict`;
+      document.cookie = `usuario=${usuario}; path=/; SameSite=Strict`;
+
+      setAlert("Inicio de sesión exitoso");
+      router.push("/Impresiones");
+    }
+  };
+
+  return (
+    <section className="centerGrid containerSection">
+      <form className="login" onSubmit={handleLogin}>
+        <h2 className="title">Inicio de sesión</h2>
+
+        <div className="containerInput">
+          <label className="label">Usuario</label>
+          <input
+            type="text"
+            value={user}
+            onChange={(e) => setUser(e.target.value)}
+            placeholder="Coloca tu usuario..."
+          />
+        </div>
+
+        <div className="containerInput relative">
+          <label className="label">Contraseña</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Coloca tu contraseña..."
+          />
+          <span
+          //onClick={() => setShowPassword(!showPassword)}
+          //className={showPassword ? 'eyeOpen' : 'eyeClose'}
+          />
+        </div>
+
+        <button
+          className="button buttonSearch"
+          style={{ maxWidth: "100%", width: "100%" }}
+          type="submit"
+        >
+          Iniciar sesión
+        </button>
+
+        {error && <AlertBox message={error} type="error" />}
+        {alert && <AlertBox message={alert} type="success" />}
+      </form>
+    </section>
+  );
+}
+
+export default Login;
+//IO

app/Components/auth/Logout/Logout.css

@@ -0,0 +1,45 @@
+.button-logout {
+  background-color: #d32f2f;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.button-logout:hover {
+  background-color: #d12020;
+}
+
+@media (max-width: 800px) {
+  .button-logout {
+    color: transparent;
+    padding: 2rem;
+    font-size: 0px;
+    top: 15px;
+  }
+
+  .button-logout::after {
+    content: "";
+    border: 3px solid white;
+    border-radius: 2px;
+    height: 2rem;
+    width: 2rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .button-logout::before {
+    content: "";
+    border: 2px solid white;
+    border-radius: 1px;
+    height: 0px;
+    width: 1.5rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}

app/Components/auth/Logout/Logout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+
+import "./Logout.css";
+
+export default function Logout() {
+  const router = useRouter();
+
+  const handleLogout = () => {
+    Cookies.remove("token", { path: "/" });
+    router.push("/");
+  };
+
+  return (
+    <>
+      <h4></h4>
+      <button onClick={handleLogout} className="button button-logout">
+        Cerrar sesión
+      </button>
+    </>
+  );
+}