Feature style feed

.gitignore

@@ -3,4 +3,5 @@
 coverage/
 node_modules/
 .yarn.lock
-package-lock.json
+package-lock.json
+/src/Firebase/firebaseConfig.js

package.json

@@ -2,7 +2,7 @@
   "name": "social-network",
   "version": "1.0.0",
   "description": "Social Network @ Laboratoria",
-  "main": "src/index.html",
+  "main": "main.js",
   "keywords": [
     "javascript",
     "firebase",
@@ -15,7 +15,8 @@
     "stylelint": "stylelint --aei src/**/*.css",
     "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
     "test": "jest --coverage",
-    "start": "serve -s src/"
+    "start": "serve -s src/",
+    "deploy": "gh-pages -d src"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
@@ -25,6 +26,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^25.3.0",
+    "gh-pages": "^4.0.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "regenerator-runtime": "^0.13.1",
@@ -40,4 +42,4 @@
     "version": "5.5.0",
     "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1"
   }
-}
+}

src/Firebase/firebase.js

@@ -0,0 +1,25 @@
+import { app } from "../Firebase/firebaseConfig.js";
+import { getAuth, createUserWithEmailAndPassword, signOut, GoogleAuthProvider, onAuthStateChanged, updateProfile, signInWithPopup, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
+
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider();
+
+//Crear Usuario
+export const signUpWithPass = (auth, email, password) => createUserWithEmailAndPassword(auth, email, password)
+export const signInWithPass = (auth, email, password) => signInWithEmailAndPassword(auth, email, password)
+export const viewer = () => {
+  onAuthStateChanged(auth, (user) => {
+    if (user) {
+      // currentUser.email = user.email;
+      // currentUser.uid = user.uid;
+      console.log("user logged in " + user.email)
+    } else {
+      console.log("user logged out ")
+    }
+  });
+};
+export const logout = (auth) => signOut(auth)
+export const popUpGoogle = (auth, provider) => signInWithPopup(auth, provider)
+
+
+

src/Firebase/firebaseConfig.js

@@ -0,0 +1,21 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.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
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+export const firebaseConfig = {
+  apiKey: "AIzaSyDPHtZUcsIC4Le451IhyZuwQmB8XHFma3Y",
+  authDomain: "social-network-39dcf.firebaseapp.com",
+  projectId: "social-network-39dcf",
+  storageBucket: "social-network-39dcf.appspot.com",
+  messagingSenderId: "1024927465075",
+  appId: "1:1024927465075:web:6d61cb6a3d3f57ddc43406",
+  measurementId: "G-MK58E6Q1EJ"
+};
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+

src/components/feed.js

@@ -0,0 +1,92 @@
+import { toNavigate } from "../main.js";
+import { register } from "../components/register.js"
+import { auth, logout } from "../Firebase/firebase.js";
+
+export const feed = () => {
+    //Creamos elementos del Feed
+    const feedDiv = document.createElement("div");
+    feedDiv.classList = "feedDiv"
+    const header = document.createElement("div");
+
+    const imgHeader = document.createElement("img");
+    imgHeader.src = "../img/Logo VeganShip.png"
+    imgHeader.classList = "imgHeader"
+
+    const inputSearchHeader = document.createElement("input");
+    inputSearchHeader.placeholder = "tu búsqueda"
+
+    const buttonSignOut = document.createElement("button");
+    buttonSignOut.textContent = "Cerrar Sesión";
+
+    const newPostContainer = document.createElement("section");
+    newPostContainer.classList = "newPostContainer";
+    const newPostLocation = document.createElement("input");
+    newPostLocation.placeholder = "ubicación"
+
+    const newPostTag = document.createElement("input");
+    newPostTag.placeholder = "etiquetas"
+
+    const newPostContent = document.createElement("textarea");
+    newPostContent.classList = "newPostContent"
+    const newPostButton = document.createElement("button");
+    const postFeed = document.createElement("section");
+    const post = document.createElement("article");
+    const postHeader = document.createElement("div");
+    postHeader.classList = "postHeader"
+    const imgProfilePost = document.createElement("img");
+    imgProfilePost.src = "../img/sandia-logo.png";
+    imgProfilePost.classList = "imgProfilePost";
+
+    const postUserName = document.createElement("h3");
+    postUserName.textContent = "Vaquita Vegana";
+    const postLocation = document.createElement("h4");
+    postLocation.textContent = "Villa Dulce"
+    //botón para hacer drop down menu con a href
+    const moreOptions = document.createElement("button");
+    moreOptions.textContent = "más"
+    const postContentContainer = document.createElement("div");
+    postContentContainer.classList = "postContentContainer"
+    const postTag = document.createElement("a");
+    postTag.textContent = "#recetas";
+    const postContent = document.createElement("p");
+    postContent.textContent = "receta de dobladitas";
+    const likeButton = document.createElement("button");
+    likeButton.textContent = "like";
+
+    feedDiv.appendChild(header);
+    header.appendChild(imgHeader);
+    header.appendChild(inputSearchHeader);
+    header.appendChild(buttonSignOut);
+    feedDiv.appendChild(newPostContainer);
+    newPostContainer.appendChild(newPostLocation);
+    newPostContainer.appendChild(newPostTag);
+    newPostContainer.appendChild(newPostContent);
+    newPostContainer.appendChild(newPostButton);
+    feedDiv.appendChild(postFeed);
+    postFeed.appendChild(post);
+    post.appendChild(postHeader);
+    postHeader.appendChild(imgProfilePost);
+    postHeader.appendChild(postUserName);
+    postHeader.appendChild(postLocation);
+    postHeader.appendChild(moreOptions);
+    postFeed.appendChild(postContentContainer);
+    postContentContainer.appendChild(postTag);
+    postContentContainer.appendChild(postContent);
+    postContentContainer.appendChild(likeButton);
+
+
+
+
+    buttonSignOut.addEventListener("click", () => toNavigate("/"));
+    buttonSignOut.addEventListener("click", async (e) => {
+            e.preventDefault() //cancela comportamiento por defecto de refrescar la pagina
+            try {
+                await logout(auth)
+            } catch (error) {
+                console.log(error)
+            }
+            toNavigate("/");
+        })
+
+        return feedDiv;
+    }

src/components/home.js

@@ -0,0 +1,127 @@
+import { toNavigate } from "../main.js";
+import { auth, signInWithPass, viewer, provider, popUpGoogle } from "../Firebase/firebase.js";
+
+export const home = () => {
+    //Creamos elementos del Formulario
+    //const containerHeader = document.createElement("header");
+    //const imgHeader = document.createElement("img");
+    const homeDiv = document.createElement("div");
+    const container = document.createElement("section")
+    const containerLogo = document.createElement("figure");
+    const imgLogo = document.createElement("img");
+    const containerForm = document.createElement("div");
+    const loginForm = document.createElement("form");
+    const labelMail = document.createElement("label");
+    const inputMail = document.createElement("input");
+    const labelPassword = document.createElement("label");
+    const inputPassword = document.createElement("input");
+    const buttonLogin = document.createElement("button");
+    const containerGoogle = document.createElement("div");
+    const iconLogoGoogle = document.createElement("i");
+    const buttonGoogle = document.createElement("button");
+    const containerRegister = document.createElement("div");
+    const labelRegister = document.createElement("label");
+    const hrefRegister = document.createElement("a");
+
+    homeDiv.className = "div-container";
+    container.className = "container";
+    //containerHeader.className = "container-header";
+    //imgHeader.className = "img-header";
+    containerLogo.className = "container-logo";
+    imgLogo.src = "../img/Logo VeganShip.png";
+    imgLogo.className = "img-logo";
+    containerForm.className = "container-form";
+    loginForm.className = "login-form";
+    labelMail.className = "label-mail labels";
+    labelMail.textContent = "Correo electrónico";
+    inputMail.type = "email";
+    inputMail.id = "i-input-login-mail";
+    inputMail.className = "input-login-mail inputs";
+    inputMail.placeholder = "tucorreo@gmail.com";
+    inputMail.required = "true";
+    labelPassword.className = "label-pass labels";
+    labelPassword.textContent = "Contraseña";
+    inputPassword.type = "text";
+    inputPassword.id = "i-input-login-password";
+    inputPassword.className = "input-login-password inputs";
+    inputPassword.placeholder = "xxxxxxxxxxxxxx";
+    inputPassword.required = "true";
+    buttonLogin.textContent = "Iniciar sesión";
+    buttonLogin.className = "button-login buttons";
+    containerGoogle.className = "container-google";
+    iconLogoGoogle.id = "span-i"; 
+    iconLogoGoogle.className = "fa-brands fa-google";
+    buttonGoogle.textContent = "Continuar con Google";
+    buttonGoogle.className = "button-google buttons";
+    containerRegister.className = "container-register";
+    labelRegister.textContent = "¿No tienes una cuenta?";
+    hrefRegister.textContent = "Regístrate";
+    hrefRegister.className = "href-register";
+
+    //homeDiv.appendChild(loginForm);
+    homeDiv.appendChild(container);
+    container.appendChild(containerLogo);
+    containerLogo.appendChild(imgLogo);
+    container.appendChild(containerForm);
+    containerForm.appendChild(loginForm);
+    loginForm.appendChild(labelMail);
+    loginForm.appendChild(inputMail);
+    loginForm.appendChild(labelPassword);
+    loginForm.appendChild(inputPassword);
+    loginForm.appendChild(buttonLogin);
+    container.appendChild(containerGoogle);
+    containerGoogle.appendChild(buttonGoogle);
+    buttonGoogle.appendChild(iconLogoGoogle);
+    container.appendChild(containerRegister);
+    containerRegister.appendChild(labelRegister);
+    containerRegister.appendChild(hrefRegister);
+
+    //loginForm.appendChild(loginForm);
+    // loginForm.appendChild(hrefRegister);
+    // loginForm.appendChild(buttonGoogle);
+
+    viewer();
+
+    buttonLogin.addEventListener("click", () => {
+        loginForm.addEventListener("submit", async (e) => {
+            e.preventDefault()
+            const emailLogin = inputMail.value
+            const passwordLogin = inputPassword.value
+            console.log(emailLogin, passwordLogin)
+            try {
+                const userCredentials = await signInWithPass(auth, emailLogin, passwordLogin)
+                console.log(userCredentials.user)
+            } catch (error) {
+                if (error.code === "auth/user-not-found"){
+                    alert("usuario NO encontrado");
+                }else if (error.code === "auth/wrong-password"){
+                    alert("Contraseña incorrecta");
+                } else if (error.code){
+                console.log(error.code);
+                }
+            }
+
+            toNavigate("/feed");
+        })
+    })
+
+    hrefRegister.addEventListener("click", () => toNavigate("/register"));
+    buttonGoogle.addEventListener("click", async (e) => {
+        e.preventDefault()
+
+        try {
+            const credentials = await popUpGoogle(auth, provider);
+            console.log(credentials.user);
+            toNavigate("/feed");
+        } catch (error) {
+            console.log(error);
+        }
+    });
+
+
+    return homeDiv;
+}
+
+
+
+