Login

package.json

@@ -41,5 +41,9 @@
     "createdAt": "2023-05-12T17:41:08.657Z",
     "version": "6.2.0",
     "commit": "a5360f78b634be4f14eaea996ee4c7afc85a2f48"
+  },
+  "dependencies": {
+    "@types/jest": "^29.5.2",
+    "firebase": "^9.22.2"
   }
-}
+}

src/components/home.js

@@ -0,0 +1,33 @@
+export const Home = (onNavigate) => {
+  const titleFlora = document.createElement('h1');
+  const logoFlora = document.createElement('p');
+  const imgFlora = document.createElement('img');
+  imgFlora.src = './img/Floralogo.png';
+  // imgFlora.id = 'containerImgHome';
+  const HomeDiv = document.createElement('div');
+  const buttonRegister = document.createElement('button');
+  const buttonLogin = document.createElement('button');
+
+  titleFlora.textContent = 'Flora';
+  logoFlora.textContent = 'Aprende. Cultiva. Publica.';
+  buttonRegister.textContent = 'Registrarse';
+  buttonLogin.textContent = 'Iniciar sesión';
+
+  HomeDiv.setAttribute('class', 'home-div');
+  titleFlora.setAttribute('class', 'title-flora');
+  logoFlora.setAttribute('class', 'logo-flora');
+  imgFlora.setAttribute('class', 'container-img-home');
+  buttonRegister.setAttribute('class', 'button');
+  buttonLogin.setAttribute('class', 'button');
+
+  buttonRegister.addEventListener('click', () => onNavigate('/register'));
+  buttonLogin.addEventListener('click', () => onNavigate('/login'));
+
+  HomeDiv.appendChild(titleFlora);
+  HomeDiv.appendChild(logoFlora);
+  HomeDiv.appendChild(imgFlora);
+  HomeDiv.appendChild(buttonRegister);
+  HomeDiv.appendChild(buttonLogin);
+
+  return HomeDiv;
+};

src/components/login.js

@@ -0,0 +1,98 @@
+/* eslint-disable max-len */
+import { iniciarSesionConUsuarioYContraseña, iniciarSesionConGoogle } from '../lib';
+
+export const Login = (onNavigate) => {
+  const loginDiv = document.createElement('div');
+  loginDiv.setAttribute('class', 'login-register-div');
+
+  const titleIS = document.createElement('h2');
+  titleIS.textContent = ' Iniciar sesión ';
+  titleIS.setAttribute('class', 'titles');
+
+  const inputEmail = document.createElement('input');
+  inputEmail.placeholder = 'Ingresa tu Email';
+  inputEmail.setAttribute('class', 'input-data');
+  inputEmail.setAttribute('id', 'input-email');
+
+  const inputPassword = document.createElement('input');
+  inputPassword.placeholder = 'Ingresa tu contraseña';
+  inputPassword.type = 'password';
+  inputPassword.setAttribute('class', 'input-data');
+  inputPassword.setAttribute('id', 'input-password');
+
+  const buttonLogin = document.createElement('button');
+  buttonLogin.textContent = 'Iniciar sesión';
+  buttonLogin.setAttribute('class', 'button');
+
+  const buttongoogle = document.createElement('button');
+  buttongoogle.textContent = 'Continuar con Google';
+  buttongoogle.setAttribute('class', 'button-google');
+
+  const buttonHome = document.createElement('button');
+  buttonHome.textContent = 'Volver a Home';
+  buttonHome.setAttribute('class', 'button');
+
+  const errorLogIn = document.createElement('h4');
+  errorLogIn.textContent = '';
+  errorLogIn.setAttribute('class', 'error-message');
+
+  const welcomeMessage = document.createElement('h4');
+  welcomeMessage.setAttribute('class', 'error-message');
+
+  // boton para volver a home--------------------------------------------------------------------
+  buttonHome.addEventListener('click', () => onNavigate('/'));
+
+  // boton para iniciar sesion--------------------------------------------------------------------
+  buttonLogin.addEventListener('click', async (e) => {
+    e.preventDefault();
+
+    const inputCorreo = loginDiv.querySelector('#input-email');
+    const inputContraseña = loginDiv.querySelector('#input-password');
+
+    try {
+      if (inputCorreo.value === '' || inputContraseña.value === '') {
+        errorLogIn.textContent = ('Por favor ingresa tu correo y contraseña.');
+        errorLogIn.style.display = 'block';
+      } else {
+        await iniciarSesionConUsuarioYContraseña(inputCorreo.value, inputContraseña.value);
+        onNavigate('/timeline');
+        alert(`¡ Hola ${inputCorreo.value} has iniciado sesión con éxito!`);
+      }
+    } catch (error) {
+      if (error.code === 'auth/wrong-password') {
+        errorLogIn.textContent = ('Contraseña incorrecta. Verifica tu contraseña e intenta nuevamente.');
+        errorLogIn.style.display = 'block';
+      } else if (error.code === 'auth/invalid-email') {
+        errorLogIn.textContent = ('El correo electrónico proporcionado no es válido.');
+        errorLogIn.style.display = 'block';
+      } else if (error.code === 'auth/user-not-found') {
+        errorLogIn.textContent = ('El usuario no fue encontrado. Verifica tu correo y contraseña.');
+        errorLogIn.style.display = 'block';
+      } else {
+        errorLogIn.textContent = ('Ha ocurrido un error en el inicio de sesión. Por favor, intenta nuevamente.');
+        errorLogIn.style.display = 'block';
+      }
+    }
+  });
+  // boton para iniciar sesion con GOOGLE---------------------------------------------------------
+  buttongoogle.addEventListener('click', async (e) => {
+    e.preventDefault();
+    try {
+      await iniciarSesionConGoogle();
+      onNavigate('/timeline');
+    } catch (error) {
+      // Manejar errores
+      console.error(error);
+    }
+  });
+
+  loginDiv.appendChild(titleIS);
+  loginDiv.appendChild(errorLogIn);
+  loginDiv.appendChild(inputEmail);
+  loginDiv.appendChild(inputPassword);
+  loginDiv.appendChild(buttonLogin);
+  loginDiv.appendChild(buttongoogle);
+  loginDiv.appendChild(buttonHome);
+
+  return loginDiv;
+};

src/components/register.js

@@ -0,0 +1,111 @@
+import { crearUsuarioConCorreoYContraseña, iniciarSesionConGoogle } from '../lib';
+
+export const Register = (onNavigate) => {
+  const registerDiv = document.createElement('div');
+  registerDiv.className = 'login-register-div';
+
+  const buttonHome = document.createElement('button');
+  buttonHome.className = 'button';
+  buttonHome.textContent = 'Regresar al Home';
+
+  const titleR = document.createElement('h2');
+  titleR.textContent = 'Registrarse';
+  titleR.className = 'titles';
+
+  const errorRegister = document.createElement('h4');
+  errorRegister.className = 'error-message';
+  errorRegister.style.display = 'none';
+  errorRegister.id = 'errorRegister';
+  // crea formulario de registro
+  const formRegister = document.createElement('form');
+  formRegister.id = 'formRegister';
+  formRegister.className = 'login-register-div';
+
+  const nameRegister = document.createElement('input');
+  nameRegister.type = 'text';
+  nameRegister.placeholder = 'Nombre de Usuario';
+  nameRegister.id = 'name';
+  nameRegister.className = 'input-data';
+
+  const emailRegister = document.createElement('input');
+  emailRegister.type = 'email';
+  emailRegister.placeholder = 'Email';
+  emailRegister.id = 'email';
+  emailRegister.className = 'input-data';
+
+  const claveRegister = document.createElement('input');
+  claveRegister.type = 'password';
+  claveRegister.placeholder = 'Contraseña';
+  claveRegister.id = 'password';
+  claveRegister.className = 'input-data';
+
+  const buttonRegister = document.createElement('button');
+  buttonRegister.type = 'submit';
+  buttonRegister.textContent = 'Registrar';
+  buttonRegister.className = 'button';
+
+  const buttonGoogle = document.createElement('button');
+  buttonGoogle.textContent = 'Continuar con Google';
+  buttonGoogle.className = 'button-google';
+
+  // const registerName = HomeDiv.querySelector('#name');
+
+  registerDiv.appendChild(titleR);
+  registerDiv.appendChild(errorRegister);
+  registerDiv.appendChild(formRegister);
+  registerDiv.appendChild(buttonHome);
+  formRegister.appendChild(nameRegister);
+  formRegister.appendChild(emailRegister);
+  formRegister.appendChild(claveRegister);
+  formRegister.appendChild(buttonRegister);
+  formRegister.appendChild(buttonGoogle);
+
+  buttonHome.addEventListener('click', () => {
+    onNavigate('/');
+  });
+
+  formRegister.addEventListener('submit', (e) => {
+    e.preventDefault();
+    crearUsuarioConCorreoYContraseña(emailRegister.value, claveRegister.value, nameRegister.value)
+      .then(() => {
+        onNavigate('/timeline');
+        alert(`¡ Hola ${emailRegister.value} te has registrado con éxito!`);
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        if (errorCode === 'auth/weak-password') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'La contraseña debe ser de al menos 6 caracteres.';
+        } else if (errorCode === 'auth/network-request-failed.') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'Los campos no deben estar vacíos.';
+        } else if (errorCode === 'auth/invalid-email') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'Correo inválido.';
+        } else if (errorCode === 'auth/missing-email') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'Ingresa tu correo electrónico.';
+        } else if (errorCode === 'auth/email-already-in-use') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'Correo en uso.';
+        } else if (errorCode === 'auth/invalid-argument') {
+          errorRegister.style.display = 'block';
+          errorRegister.textContent = 'Ingresa tu contraseña.';
+        }
+        return error;
+      });
+  });
+
+  buttonGoogle.addEventListener('click', async (e) => {
+    e.preventDefault();
+    try {
+      await iniciarSesionConGoogle();
+      onNavigate('/timeline');
+    } catch (error) {
+      // Manejar errores
+      console.error(error);
+    }
+  });
+
+  return registerDiv;
+};