Laboratoria · PQ2505 · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022
diff --git a/package.json b/package.json
diff --git a/src/firebase.js b/src/firebase.js
@@ -0,0 +1,62 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
+import {
+  getAuth,
+  signInWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyCxLhAk9jOlsC43X5vqcFhw-eBCbrELaI4",
+  authDomain: "newme-13925.firebaseapp.com",
+  projectId: "newme-13925",
+  storageBucket: "newme-13925.appspot.com",
+  messagingSenderId: "214920308604",
+  appId: "1:214920308604:web:ebebebccc31d42002be6f9",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const provider = new GoogleAuthProvider();
+
+export const exitConsult = function (email, password) {
+  signInWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+      const user = userCredential.user;
+      console.log(user);
+    })
+    .catch((error) => {
+      const errorCode = error.code;
+      const errorMessage = error.message;
+
+      if (errorCode === "auth/user-not-found") {
+        return alert("Usuario no encontrado");
+      } else if (errorCode === "auth/wrong-password") {
+        return alert("Contraseña incorrecta");
+      }
+      console.log("Erorr de codigo", errorCode);
+      console.log("Error del mensaje del codigo", errorMessage);
+    });
+};
+
+export const authGoogle = async () => {
+  try {
+    const userResult = await signInWithPopup(auth, provider);
+    console.log(userResult);
+  } catch (error) {
+    const errorCode = error.code;
+    const errorMessage = error.message;
+    const email = error.customData.email;
+    console.log(errorCode, errorMessage, email, credential);
+  }
+};
+
+
+
+
diff --git a/src/formularioUno.html b/src/formularioUno.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NewMe</title>
+</head>
+
+<body>
+    <main>
+        <section>
+            <div>
+                <img src="img/logoSandra.png" alt="logo de la aplicación NewMe">
+            </div>
+            <div>
+                <form>
+                    <div>
+                        <input type="email" name="emailUser" class="emailUser" id="emailUserId">
+                        <input type="password" name="passwordUser" class="emailUser" id="passwordUserId">
+                    </div>
+                    <div class="containerCat">
+                        <img src="img/gato.png" alt="gato negro decorativo">
+                        <input type="submit" name="btn_singUp" class="btn_singUp" id="btn_singUpId">
+                    </div>
+                    <div class="containerSpan">
+                        <span class="option">Or Sing Up With</span>
+                    </div>
+                    <div>
+                        <input type="button" name="withGoogle" class="btn_google" id="btn_googleId">
+                        <p> You don't have an account? <a href="">SING UP</a></p>
+                    </div>
+                </form>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/src/home.js b/src/home.js
@@ -0,0 +1,46 @@
+import {
+    surfing
+}
+from './main.js'
+
+export const home = () => {
+const $sectionHome = document.createElement('section'),
+$divLogoContainer = document.createElement('div'),
+$figureLogo = document.createElement('figure'),
+$imgLogo = document.createElement('img'),
+$divWelcomeContainer = document.createElement('div'),
+$h1Slogan = document.createElement('h1'),
+$imgCat = document.createElement('img'),
+$divBtnClickHere = document.createElement('div'),
+$inputBtnClickHere = document.createElement('input');
+
+$sectionHome.classList.add('home'),
+$divLogoContainer.classList.add('c_logo','logo_container'),
+$figureLogo.classList.add('logo'),
+$divWelcomeContainer.classList.add('welcome','logo_container'),
+$inputBtnClickHere.classList.add('btn_click'),
+
+$imgLogo.setAttribute('src','img/logoNewMe.png')
+$imgLogo.setAttribute('alt', 'logo de la aplicacion')
+$h1Slogan.textContent = 'I could you can!'
+$imgCat.setAttribute('src', 'img/gato.png')
+$imgCat.setAttribute('alt', 'gato negro decorativo')
+$inputBtnClickHere.setAttribute('type','button')
+$inputBtnClickHere.setAttribute('id','btn_click')
+$inputBtnClickHere.setAttribute('value','CLICK HERE')
+
+$sectionHome.appendChild($divLogoContainer).appendChild($figureLogo).appendChild($imgLogo)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($h1Slogan)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($imgCat)
+$sectionHome.appendChild($divWelcomeContainer).appendChild($divBtnClickHere).appendChild($inputBtnClickHere)
+
+$inputBtnClickHere.addEventListener("click", () => {
+    surfing("/login")
+})
+
+
+return $sectionHome;
+};
+
+
+
diff --git a/src/img/LogoGoogle.png b/src/img/LogoGoogle.png
diff --git a/src/img/Vector 4.png b/src/img/Vector 4.png
diff --git a/src/img/Vector 5.png b/src/img/Vector 5.png
diff --git a/src/img/Vector 6.png b/src/img/Vector 6.png
diff --git a/src/img/candado.png b/src/img/candado.png
diff --git a/src/img/gato.png b/src/img/gato.png
diff --git a/src/img/imgGoogle.png b/src/img/imgGoogle.png
diff --git a/src/img/imgMuro.png b/src/img/imgMuro.png
diff --git a/src/img/loading.png b/src/img/loading.png
diff --git a/src/img/logoNewMe.png b/src/img/logoNewMe.png
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,15 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <link rel="icon" href="#">
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap" rel="stylesheet">
+  <title>NewMe</title>
 </head>
 <body>
+<main class="containerMain" id="containerMain">
+</main>
+  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script type="module" src="main.js"></script>
 </body>
 </html>
diff --git a/src/login.js b/src/login.js
@@ -0,0 +1,113 @@
+import { exitConsult, authGoogle } from "./firebase.js";
+
+export const login = () => {
+  const $section = document.createElement("section"),
+    $divLogo = document.createElement("div"),
+    $figureLogin = document.createElement("figure"),
+    $imgLogo = document.createElement("img"),
+    $containerICoulLogin = document.createElement("div"),
+    $iCouldLogin = document.createElement("h2"),
+    $divContainerForm = document.createElement("div"),
+    $divForm = document.createElement("form"),
+    $divInput = document.createElement("div"),
+    $inputEmail = document.createElement("input"),
+    $inputPassword = document.createElement("input"),
+    $divContainerCat = document.createElement("div"),
+    $imgCat = document.createElement("img"),
+    $inputSignUpCat = document.createElement("input"),
+    $divContainerSpan = document.createElement("div"),
+    $spanOption = document.createElement("span"),
+    $divContainerRegister = document.createElement("div"),
+    $inputBtnGoogle = document.createElement("input"),
+    $figureGoogle = document.createElement("figure"),
+    $imgGoogle = document.createElement("img"),
+    $pSignUp = document.createElement("p")
+
+  //agregamos HTML semantico------------------------------------
+
+  $section
+    .appendChild($divLogo)
+    .appendChild($figureLogin)
+    .appendChild($imgLogo);
+  $section.appendChild($containerICoulLogin).appendChild($iCouldLogin);
+  $section.appendChild($divContainerForm);
+  $divContainerForm.appendChild($divForm);
+  $divForm.appendChild($divInput);
+  $divInput.appendChild($inputEmail);
+  $divInput.appendChild($inputPassword);
+  $divForm.appendChild($divContainerCat).appendChild($imgCat);
+  $divContainerCat.appendChild($inputSignUpCat);
+
+  $section.appendChild($divContainerSpan).appendChild($spanOption);
+
+  $section.appendChild($divContainerRegister);
+  $divContainerRegister.appendChild($figureGoogle).appendChild($imgGoogle);
+  $divContainerRegister.appendChild($inputBtnGoogle);
+  $divContainerRegister.appendChild($pSignUp);
+
+  //agregamos atributos----------------------------------------
+  $section.setAttribute("class", "sectionLogin");
+  $figureLogin.setAttribute("class", "figureLogin");
+  $imgLogo.setAttribute("src", "img/logoNewMe.png");
+  $imgLogo.setAttribute("alt", "Logo de la aplicacion Newme");
+  $iCouldLogin.setAttribute("class", "sloganLogin");
+  $iCouldLogin.textContent = "I could you can!";
+  $divContainerForm.setAttribute("class", "containerFormLogin");
+  $divForm.setAttribute("id", "formLogin");
+  $divForm.setAttribute("class", "formLogin");
+
+  $divInput.setAttribute("class", "problemInput");
+
+  $inputEmail.setAttribute("type", "email");
+  $inputEmail.setAttribute("class", "emailUser");
+  $inputEmail.setAttribute("id", "emailUserId");
+  $inputEmail.setAttribute("placeHolder", "example@gmail.com");
+
+  $inputPassword.setAttribute("type", "password");
+  $inputPassword.setAttribute("class", "passwordUser");
+  $inputPassword.setAttribute("id", "passwordUserId");
+  $inputPassword.setAttribute("placeHolder", "Password");
+
+  $divContainerCat.setAttribute("class", "ContainerCat");
+
+  $imgCat.setAttribute("src", "img/gato.png");
+  $imgCat.setAttribute("alt", "gato negro decorativo");
+
+  $inputSignUpCat.setAttribute("type", "submit");
+  $inputSignUpCat.setAttribute("name", "btn_signUpCat");
+  $inputSignUpCat.setAttribute("class", "btn_signUpCat");
+  $inputSignUpCat.setAttribute("id", "btn_signUpIdCat");
+  $inputSignUpCat.setAttribute("value", "SIGN UP");
+
+  $divContainerSpan.setAttribute("class", "containerSpan");
+  $spanOption.setAttribute("class", "option");
+  $spanOption.textContent = "Or sign up With";
+
+  $divContainerRegister.setAttribute("class", "ContainerReg");
+
+  $inputBtnGoogle.setAttribute("type", "button");
+  $inputBtnGoogle.setAttribute("class", "btn_google");
+  $figureGoogle.setAttribute("class", "log_google")
+  $imgGoogle.setAttribute("src", "img/imgGoogle.png");
+  $inputBtnGoogle.setAttribute("id", "btn_googleId");
+  $inputBtnGoogle.setAttribute("value", "WITH GOOGLE");
+
+  $pSignUp.setAttribute("class", "register");
+  $pSignUp.innerHTML = `
+  You don't have an account?
+  <input type="button" class="btn_signUp" id="btn_signUpId" value="SIGN UP">
+  `
+
+  $divForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const email = $divForm["emailUserId"].value;
+    const password = $divForm["passwordUserId"].value;
+
+    exitConsult(email, password);
+  });
+
+  $inputBtnGoogle.addEventListener("click", async () => {
+    await authGoogle();
+  });
+  return $section;
+};
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,21 @@
 // Este es el punto de entrada de tu aplicacion
 
-import { myFunction } from './lib/index.js';
+// import { myFunction } from './lib/index.js';
+import {login} from './login.js';
+import {home} from './home.js'
 
-myFunction();
+const routes = {
+    "/" :  home,             //objeto que contiene las direcciones
+    "/login": login
+}
+
+export const surfing = (pathname, archivoNuevo = routes) => {
+    const rootMain = document.querySelector('#containerMain');
+    window.history.pushState({}, pathname, window.location.origin+pathname)
+
+//en la sintaxis de replaceChildren "archivo nuevo(seccion)" es el  archivo que reemplazará la seccion actual y lo que está entre corchetes "archivoActual" es el nombre de la nueva sección
+
+    rootMain.replaceChildren(archivoNuevo[pathname]())
+}
+
+window.addEventListener("DOMContentLoaded", () =>  surfing(window.location.pathname))