Miriam

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package.json

@@ -41,5 +41,8 @@
     "createdAt": "2023-06-06T21:37:46.504Z",
     "version": "6.3.0",
     "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d"
+  },
+  "dependencies": {
+    "firebase": "^10.1.0"
   }
-}
+}

src/components/firebase.js

@@ -0,0 +1,56 @@
+import { initializeApp } from 'firebase/app';
+import { getFirestore, collection, addDoc } from 'firebase/firestore';
+import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
+
+// Import the functions you need from the SDKs you need
+
+// 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
+const firebaseConfig = {
+  apiKey: 'AIzaSyDhmNVMP2orY3iOmOT6DdaVABzLyzydVLY',
+  authDomain: 'redis-ccc00.firebaseapp.com',
+  projectId: 'redis-ccc00',
+  storageBucket: 'redis-ccc00.appspot.com',
+  messagingSenderId: '718676390172',
+  appId: '1:718676390172:web:516edc445106e832a98ad9',
+  measurementId: 'G-JQF50P4QXX',
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const provider = new GoogleAuthProvider();
+const auth = getAuth(app);
+
+export const googleLogin = () => {
+  signInWithPopup(auth, provider)
+    .then((result) => {
+      // This gives you a Google Access Token. You can use it to access the Google API.
+      const credential = GoogleAuthProvider.credentialFromResult(result);
+      const token = credential.accessToken;
+      // The signed-in user info.
+      const user = result.user;
+      // IdP data available using getAdditionalUserInfo(result)
+      // ...
+      console.log(user);
+    })
+    .catch((error) => {
+      // Handle Errors here.
+      const errorCode = error.code;
+      const errorMessage = error.message;
+      // The email of the user's account used.
+      const email = error.customData.email;
+      // The AuthCredential type that was used.
+      const credential = GoogleAuthProvider.credentialFromError(error);
+      // ...
+      console.log(errorMessage);
+      console.log(errorCode);
+    });
+};
+export const savePosts = (post) => {
+  addDoc(collection(db, 'posts'), { post });
+};
+export const getPosts = () => console.log('Get Posts');

src/components/signIn.js

@@ -0,0 +1,68 @@
+import { googleLogin } from './firebase';
+export const signIn = (onNavigate) => {
+  // Se crean los elementos de HTML
+
+  const signInDiv = document.createElement('div');
+  signInDiv.classList.add('signInDiv');
+  const imgContainer = document.createElement('div');
+  imgContainer.classList.add('imgContainer');
+  const imageSignIn = document.createElement('img');
+  imageSignIn.classList.add('imageSignIn');
+  imageSignIn.src = '../image/imagesignIn.jpg';
+  // se crea un select para almacenar el formulario
+  const formSignIn = document.createElement('div');
+  formSignIn.classList.add('formSignIn');
+  const description = document.createElement('h1');
+  description.classList.add('description');
+  const sentence = document.createElement('h2');
+  sentence.classList.add('sentence');
+
+  const email = document.createElement('input');
+  email.classList.add('email');
+  const password = document.createElement('input');
+  password.classList.add('password');
+  const signInButton = document.createElement('button');
+  const googleButton = document.createElement('button');
+  const dontYouHaveAnAccount = document.createElement('p');
+  dontYouHaveAnAccount.classList.add('dontYouHaceAnAccount');
+  const signUpButton = document.createElement('button');
+
+  // Se inserta el nombre a los elementos creados
+  description.textContent =
+    'Únete a nuestra red de apoyo y reduce el derroche alimentario.';
+  email.placeholder = 'Correo Electrónico';
+  password.placeholder = 'Contraseña';
+  signInButton.textContent = 'Inicia sesión';
+  googleButton.textContent = 'Acceder con Google';
+  dontYouHaveAnAccount.textContent = '¿No tienes una cuenta?';
+  signUpButton.textContent = 'Registrate';
+
+  // Se crean los eventos que permitiran la navegación
+  signInButton.addEventListener('click', () => {
+    onNavigate('/wall');
+  });
+
+
+  googleButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    googleLogin();
+    onNavigate('/wall');
+  });
+  signUpButton.addEventListener('click', () => {
+    onNavigate('/signup');
+  });
+
+  // Se insertan los hijos
+  formSignIn.appendChild(email);
+  formSignIn.appendChild(password);
+  formSignIn.appendChild(signInButton);
+  formSignIn.appendChild(googleButton);
+  formSignIn.appendChild(dontYouHaveAnAccount);
+  formSignIn.appendChild(signUpButton);
+  imgContainer.appendChild(imageSignIn);
+  signInDiv.appendChild(imgContainer);
+  signInDiv.appendChild(description);
+  signInDiv.appendChild(formSignIn);
+
+  return signInDiv;
+};

src/components/signUp.js

@@ -0,0 +1,40 @@
+export const signUp = (onNavigate) => {
+  const singUpDiv = document.createElement('div');
+  const signUpButton = document.createElement('button');
+  const backToLogin = document.createElement('button');
+  const signUpText = document.createElement('h3');
+  const usersName = document.createElement('input');
+  const usersEmail = document.createElement('input');
+  const usersPassword = document.createElement('input');
+  const termsCheckbox = document.createElement('input');
+  const termsText = document.createElement('p');
+  const doYouHaveAnAccount = document.createElement('p');
+
+  doYouHaveAnAccount.textContent = '¿Ya tienes una cuenta?';
+  termsText.textContent = 'Acepto Términos, Condiciones y política de Privacidad';
+  termsCheckbox.type = 'checkbox';
+  signUpText.textContent = '¡Regístrate!';
+  usersName.placeholder = 'Nombre y Apellidos';
+  usersEmail.placeholder = 'Correo Electrónico';
+  usersPassword.placeholder = 'Contraseña';
+  signUpButton.textContent = 'Crear cuenta';
+  backToLogin.textContent = 'Inicia sesión';
+
+  backToLogin.addEventListener('click', () => {
+    onNavigate('/');
+  });
+  signUpButton.addEventListener('click', () => {
+    onNavigate('/wall');
+  });
+
+  singUpDiv.appendChild(signUpText);
+  singUpDiv.appendChild(usersName);
+  singUpDiv.appendChild(usersEmail);
+  singUpDiv.appendChild(usersPassword);
+  singUpDiv.appendChild(termsCheckbox);
+  singUpDiv.appendChild(termsText);
+  singUpDiv.appendChild(signUpButton);
+  singUpDiv.appendChild(doYouHaveAnAccount);
+  singUpDiv.appendChild(backToLogin);
+  return singUpDiv;
+};

src/components/wall.js

@@ -0,0 +1,33 @@
+import { savePosts, getPosts} from './firebase.js';
+
+export const wall = (onNavigate) => {
+  const wallDiv = document.createElement('div');
+  const allPosts = document.createElement('form')
+  const signOutButton = document.createElement('button');
+  const postButton = document.createElement('button');
+  const post = document.createElement('textarea');
+
+  post.placeholder = 'Escribe tu publicación';
+  post.rows = '4';
+  postButton.textContent = 'Publicar';
+  signOutButton.textContent = 'Cerrar sesión';
+
+  allPosts.addEventListener('submit', (e) => {
+    e.preventDefault();
+    savePosts(post.value);
+  });
+  getPosts();
+  signOutButton.addEventListener('click', () => {
+    onNavigate('/');
+  });
+
+  allPosts.append(post, postButton);
+  wallDiv.appendChild(allPosts);
+  wallDiv.appendChild(signOutButton);
+
+<<<<<<< HEAD
+  return wallDiv;
+=======
+  return wallDiv; 
+>>>>>>> main
+};

src/index.html

@@ -4,9 +4,12 @@
   <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>
+  <title>Social Network</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <script type="module" src="main.js"></script>
+
+  <div id="root"></div>
 </body>
 </html>

src/main.js

@@ -1,5 +1,38 @@
-// Este es el punto de entrada de tu aplicacion
+// rauter , gestiona las rutas
+import { signIn } from './components/signIn';
+import { signUp } from './components/signUp';
+import { wall } from './components/wall';
 
-import { myFunction } from './lib/index.js';
+const rootDiv = document.getElementById('root');
+// funciones a ejecutar por elección del usuario
+const routes = {
+  '/': signIn,
+  '/signup': signUp,
+  '/wall': wall,
+};
+// onNavigate navegar entre paginas 
+const onNavigate = (pathname) => {
+// history es la historia de las pagina, pushState agrega una página nueva al historial y cambia el URL
+  window.history.pushState({}, pathname, window.location.origin + pathname);
+  // while se utiliza si tengo que remover mas de un hijo
+  // while (rootDiv.firstChild) {
+  rootDiv.removeChild(rootDiv.firstChild);
+  // Limpiar la página 
+  // }
+  // Agrega contenido del nuevo url (pathname)
+  rootDiv.appendChild(routes[pathname](onNavigate));
+};
+// Selecciona pagina o componente para mostrarlo dependiendo URL
+// window.location = ubicacion donde esta el usuario y agrega el pathname o ruta 
+const component = routes[window.location.pathname];
+console.log(window.location);
 
-myFunction();
+// Recuperar las paginas cuando selecciono hacia atras o hacia adelante del historial(las saca del historial)
+window.addEventListener('popstate', () => {
+  const paginas = routes[window.location.pathname];
+  rootDiv.removeChild(rootDiv.firstChild);
+  rootDiv.appendChild(paginas(onNavigate));
+  console.log(window.location.pathname);
+});
+// Agrega el contenido a la pantalla
+rootDiv.appendChild(component(onNavigate));

src/style.css

@@ -0,0 +1,49 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+#root {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.signInDiv {
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column; 
+}
+.imgContainer{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5%;
+    max-width: 90%;
+    max-height: 90%;   
+}
+.imageSignIn{
+    margin-top: 5%;
+    max-width: 90%;
+    max-height: 90%; 
+
+}
+.formSignIn{
+    display:flex;
+   align-items: center;
+   flex-direction: column;
+   justify-content: center;
+    padding: 5%;
+    margin: 0% 5% 5% 5%;
+    border-radius: 10%;
+}
+
+.description{
+    text-align: center;
+    font-size: 100%;
+    color: #080808;
+    margin-top: 5%;
+
+}