loginForm babysteps b00tc4mp#220

venturars · Sep 30, 2024 · c6e8176 · c6e8176
1 parent 1e2d305
commit c6e8176
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 27 deletions.
diff --git a/staff/ventura-rodriguez/social-app/src/components/Header.jsx b/staff/ventura-rodriguez/social-app/src/components/Header.jsx
@@ -5,7 +5,7 @@ function Header() {
   return (
     <>
       <header>
-        <nav className="navbar bg-base-100 text-black">
+        <nav className="navbar bg-base-100 text-black bg-secondary">
           <div className="navbar-start">
             {!(
               window.location.pathname === "/sign-up" ||

diff --git a/staff/ventura-rodriguez/social-app/src/components/LoginForm.jsx b/staff/ventura-rodriguez/social-app/src/components/LoginForm.jsx
@@ -1,35 +1,110 @@
+import { Link } from "react-router-dom";
 import { IconEmail, IconLogin, IconPassword } from "./icons";
 import classNames from "classnames";
+import { EmailNotValidError } from "../tools/errors";
+import { useState } from "react";
+
+function LoginForm({ className, onSubmit }) {
+  const [errors, setErrors] = useState(null);
+  // recopiar datos y dejar que la lógica de negocio trate esos datos
+
+  const submit = (event) => {
+    // manejar la lógica básica de front
+    // validaciones síncronas de los datos
+    // eniar los datos en formato correcto al Login
+    // de alguna forma quedarse esperando órdenes del login
+    event.preventDefault();
+
+    const { email: inputEmail, password: inputPassword } = event.target;
+
+    const emailRegexp = new RegExp(
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    );
+
+    try {
+      if (!emailRegexp.test(inputEmail.value))
+        throw new EmailNotValidError("Email is not valid");
+
+      onSubmit(event);
+    } catch (error) {
+      if (error.constructor.name === "EmailNotValidError") {
+        setErrors((_errors) =>
+          _errors
+            ? [..._errors, "El email no es váido"]
+            : ["El email no es váido"]
+        );
+        inputEmail.focus();
+      }
+    }
+  };
 
-function LoginForm({ className }) {
   return (
     <>
-      <div className={classNames("bg-red-400 max-w-screen-sm", className)}>
-        <form>
-          <div>
-            <IconLogin />
+      <div
+        className={classNames(
+          "bg-neutral-800 max-w-screen-sm px-9 py-12",
+          className
+        )}
+      >
+        <form onSubmit={submit}>
+          <div className="grid mb-5">
+            <IconLogin className="place-self-center w-16 h-16" />
           </div>
-          <h3>Bienvenido de vuelta</h3>
-          <fieldset>
-            <legend>Introduce tus datos de inicio de sesión</legend>
-            <label className="input input-bordered flex items-center gap-2">
-              <IconEmail />
-              <input type="text" className="grow" placeholder="Email" />
+          <h3 className="text-center mb-8 text-xl">Bienvenido de vuelta</h3>
+          <fieldset className="mb-5">
+            <legend className="mb-4 text-sm">
+              Introduce tus datos de inicio de sesión
+            </legend>
+            <label
+              className={classNames(
+                "input input-bordered input-ghost glass flex items-center gap-2 mb-4",
+                {
+                  "input-error": errors,
+                }
+              )}
+            >
+              <IconEmail fill="white" />
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Email"
+                className="grow focus:text-white placeholder:text-white placeholder:text-opacity-70"
+              />
             </label>
-            <label className="input input-bordered flex items-center gap-2">
-              <IconPassword />
-              <input type="password" className="grow" value="password" />
+            <label className="input input-bordered input-ghost glass flex items-center gap-2">
+              <IconPassword fill="white" />
+              <input
+                type="password"
+                id="password"
+                name="password"
+                placeholder="Contraseña"
+                className="grow focus:text-white placeholder:text-white placeholder:text-opacity-70"
+              />
             </label>
           </fieldset>
           <div id="show-errors">
-            <span></span>
+            <span>{errors}</span>
           </div>
-          <div>
-            <button>Iniciar sesión</button>
+          <div className="mb-5 grid">
+            <button
+              type="submit"
+              className="place-self-center btn btn-primary btn-block text-base"
+            >
+              Iniciar sesión
+            </button>
           </div>
-          <div>
-            <button>¿Has olvidado la contraseña?</button>
-            <button>Formulario de registro</button>
+          <div className="text-xs flex justify-between">
+            <Link
+              to="/recovery-password"
+              target="_self"
+              className="link link-secondary"
+            >
+              ¿Has olvidado la contraseña?
+            </Link>
+            <Link to="/sign-up" target="_self" className="link link-secondary">
+              Formulario de registro
+            </Link>
           </div>
         </form>
       </div>

diff --git a/staff/ventura-rodriguez/social-app/src/index.css b/staff/ventura-rodriguez/social-app/src/index.css
@@ -2,10 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-black w-screen h-screen max-w-full text-white font-mono;
+@layer components {
+  .prose {
+    @apply text-white;
+  }
 }
 
-.prose {
-  @apply text-white;
+@layer base {
+  :root {
+    --header-heigth: 64px;
+  }
+
+  body {
+    @apply bg-black w-screen h-screen max-w-full text-white font-mono;
+  }
 }
diff --git a/staff/ventura-rodriguez/social-app/src/pages/Login.jsx b/staff/ventura-rodriguez/social-app/src/pages/Login.jsx
@@ -6,7 +6,17 @@ class Login extends Component {
     return (
       <>
         <Header />
-        <LoginForm className="mx-auto" />
+        <section className="w-screen h-[calc(100vh-var(--header-heigth))] xs:pt-20 max-xs:pt-16">
+          <LoginForm
+            className="mx-auto"
+            onSubmit={(event) => {
+              // llamar a la api en busca del usuario con contraseña y correo
+              // si el auth no sale bien avisa al compo LoginForm para que lance errores
+              // si el auth sale bien redirige al usuario a la home
+              console.log(event);
+            }}
+          />
+        </section>
         {/* <Footer /> */}
       </>
     );

diff --git a/staff/ventura-rodriguez/social-app/src/pages/Page404.jsx b/staff/ventura-rodriguez/social-app/src/pages/Page404.jsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 class Page404 extends Component {
   render() {
     return (
-      <section className="w-full h-full min-w-[100vw] min-h-[100vh] grid">
+      <section className="w-full h-full min-w-[100vw] min-h-[100vh] grid glass">
         <div className="py-12">
           <h1 className="text-[240px] mx-auto w-fit animate-buzzing">404</h1>
           <p className="text-xl mx-auto w-fit animate-bounce">

diff --git a/staff/ventura-rodriguez/social-app/src/tools/errors.js b/staff/ventura-rodriguez/social-app/src/tools/errors.js
@@ -0,0 +1,8 @@
+export class EmailNotValidError extends Error {
+  constructor(message) {
+    super(message);
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, EmailNotValidError);
+    }
+  }
+}
diff --git a/staff/ventura-rodriguez/social-app/src/tools/index.js b/staff/ventura-rodriguez/social-app/src/tools/index.js
@@ -0,0 +1 @@
+export * as Errors from "./errors";