-En otras palabras, seguirás afianzando todo lo aprendido en el Common Core, pero en particular verás :
+Diseño final
-### Planificación
+
+**Feeback**
+Al inicio del diseño de la aplicacion construimos una idea de acuerdo a nuestras creencias y creyendo que habíamos tomando buenas decisiones sin embargo al recibir los comentarios de parte de coaches y prospectos a usuarios decidimos usar colores mas atractivos, formas modernas en cuanto al diseño en general y seguir las tendencias actuales en cuanto a aplicaciones móbiles.
-* Te recomendamos utilizar *projects*, *issues* y *milestones* de GitHub para gestionar la planificación de tu proyecto. Estos recursos serán la fuente de organización de tu equipo y a través de estas herramientas tus coaches podrán ver el avance del proyecto y darte feedback.
+**Descripción de paginas:**
-* Escribir, de manera colaborativa, las **Definiciones de terminado** y **Criterios de Aceptación** por cada **Historia de usuario** que te daremos para este proyecto y que se deberán ver reflejadas en tu planificación.
+**Página de Registro**
+Al inicio de la aplicación la pantalla que se muestra es la de Inicio, la cual cuenta con campos para registrarse si asi lo desea el usuario, para mayor comodidad del usario también podra ingresar con su cuenta de Google o Facebook.
-* **Priorizar** la implementación de tus funcionalidades, en función al esfuerzo que demandan en relación al valor que le aportan al usuario, y ejecutar en equipo todas las historias de usuario dentro del tiempo estimado para cada sprint y que finalmente se vean reflejadas en publicaciones completamentamente funcionales al final de cada sprint.
+**Página de Foro**
+Esta página es la más útil para el usuario, ya que aquí puede publicar ideas personales, imagenes para compartir o solo incluir sus dudas para que otros usuarios puedan responder. Estas publicaciones se pueden leer, editar y eliminar a gusto y necesidad del usuario.
-* Adquirir la disciplina de la completitud, terminando una historia de usuario antes de pasar a la siguiente (es decir, que cumple con *Definición de Terminado* y *Criterios de Aceptación* contemplando todos los puntos que son objetivos de aprendizaje para este proyecto).
+**Página de Perfil**
+Esta página sirve al usuario para personalizar su perfil con los campos: nombre, profesión e imagen, para que pueda ser ubicado y contactado por otros usuarios.
-### Desarrollo frontend
+Tecnologías y características de la aplicación
-#### Arquitectura de la aplicación
-
-- Diseñar la arquitectura de tu aplicación, modularizando tu código a través de *es modules* ([`import`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) y [`export`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export))
-
-- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)).
-
-#### Tecnologías HTML5 y CSS3/SASS
-
-* Aplicar HTML5 semántico en tu proyecto.
-* Aplicar y reforzar los conceptos fundamentales de CSS3.
-* Implementar selectores de clase evitando la redundancia de estilos en CCS3.
-* Utilizar `flexbox` para lograr un diseño `mobile first`, implementando un layout que te permita crear un diseño adaptativo para **mobile y desktop**
-
-A continuación te proporcionamos el layout (diseño) de la vista mobile y desktop que deberás replicar visualmente y cuyo contenido, colores y fuentes de texto, dejaremos a tu elección.
-
-* Vista mobile
-
- 
-
-* Vista Desktop
-
- 
-
-#### JavaScript (ES6+)
-
-* Utilizar modulos de ES6 para poder modularizar tu código JavaScript.
-* Reforzar tu conocimiento sobre el uso de Template literals (Template strings).
-* Reforzar tu conocimiento de la manipulacion de los elementos del DOM a traves JavaScript.
-* Implementar un sistema de rutas para cambiar de una vista a otra de manera dinámica (SPA).
-* Testear la lógica de tu aplicación, con Jest cuidando que el coverage pase el 90% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas).
-
-### Persistencia de datos
-
-En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo `json` o utilizando `fetch`.
-
-En este proyecto diseñarás la estructura de esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras `Firestore` de `Firebase` o `LocalStogarge` una `Web Storage API`
-
-#### Firebase
-
-El objetivo de usar Firestore en este proyecto, es que aprendes a manejar y persistir datos a traves de una base de datos no relacional, en tiempo real y puedas implementar operaciones CRUD (Creación, Lectura, Actualización y eliminación) de datos.
-
-## Consideraciones generales del proyecto
-
-* Este proyecto debe ser desarrollado en equipos de trabajo de 3 integrantes.
-
-* La duración propuesta del proyecto es **3 sprints**, con una duración de una semana cada uno.
-
-* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.
-
-* La **planificación es vital**, para ello te recomendamos utilizar el flujo de trabajo colaborativo que nos ofrecen los projects de GitHub, para que puedas **escribir tus definiciones de terminado** y **criterios de aceptación** por cada historia de usuario con el objetivo que determinen, en equipo, **qué hacer** en el sprint y **cómo se realizará**.
-
-* Para que todas las miembros de tu equipo puedan lograr los objetivos de aprendizaje, deberán determinar cuál será la estrategia de desarrollo que utilizarán: división por sub-historias, pair programming, code reviews, etc.
-
-## Restricciones Técnicas
-
-* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.
-
-* Ya te damos un diseño (layout) de la vista mobile y desktop, queremos que lo repliques a nivel *pixel perfect*, el contenido, paleta de colores y fuentes, depende de la temática que van a elegir como equipo. La implementación de ese layout deberá formar parte de la *definición de terminado* de tus historias de usuario.
-
-* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.
-
-## Historias de Usuario
-
-* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
-
-* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido.
-
-* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.
-
-* Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis post.
-
-* Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en mi publicación así como poder escribir, guardar, editar o eliminar un comentario en mi publicación.
-
-* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.
-
-* Te dejamos un ejemplo de cómo definir criterios de aceptación y definiciones de terminado para una H.U. Si se te complica definirlas o no tienes idea de que considerar para cada H.U. es de gran ayuda revisar redes sociales como `facebok`, `twitter`, `instagram`, `devopedia` o la red social que más te guste y puedas evaluar qué consideran en cada funcionalidad para darla como terminada y aceptada.
-
- > Como usuario nuevo debo poder crear una cuenta con email y password para
- > poder iniciar sesion. Por otro lado, necesito también tener la opción de
- > iniciar sesión con mi cuenta de Google o Facebook.
- >
- > **Criterios de aceptación**
- > - Si el mail o password no es válido, al momento de logearme, debo poder
- > ver un mensaje de error.
- > - Debe ser visible si hay algún mensaje de error.
- > - Debo poder ver esta página de creación en Móviles y desktop (responsive).
- > - No debe necesitar recargar la página para crear una cuenta (SPA).
- >
- > **Definición de terminado**
- > - La funcionalidad cumple satisface los criterios de aceptación.
- > - La funcionalidad tiene _test unitarios_.
- > - El diseño visual corresponde al prototipo de alta fidelidad.
- > - El código de esta funcionalidad recibió code review.
- > - La funcionalidad esta desplegada y pública para ser probada.
- > - La funcionalidad fue probada manualmente.
- > - Se hicieron pruebas de usuabilidad y se implementó el feedback si se
- > consideró necesario.
-
-## Objetivos de aprendizaje
-
-Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
-anterior en la siguiente sección.
-
-### Objetivos de aprendizajes pendientes
-
-
-### HTML y CSS
-
-* [ ] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
-
-### DOM y Web APIs
-
-* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
-* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-* [ ] [`localStorage`]
-
-### Javascript
-
-* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
-* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
-* [ ] Uso ES modules
-([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
-| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-
-### Firebase
-
-* [ ] [Firestore](https://firebase.google.com/docs/firestore)
-* [ ] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
-* [ ] [Firebase security rules](https://firebase.google.com/docs/rules)
-* [ ] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
-| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
-
-### Testing
-
-* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
-* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
-* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
-
-### Colaboración en Github
-
-* [ ] Branches
-* [ ] Pull Requests
-* [ ] Tags
-
-### Organización en Github
-
-* [ ] Projects
-* [ ] Issues
-* [ ] Labels
-* [ ] Milestones
-
-### Buenas prácticas de desarrollo
-
-* [ ] Modularización
-* [ ] Nomenclatura / Semántica
-* [ ] Linting
-
-***
-
-## Recursos
-
-### Mobile first
-
-El concepto de [_mobile first_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve
-y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se
-ve como adaptar la aplicación a pantallas progresivamente grandes y
-características específicas del entorno desktop. Esto es en contraposición al
-modelo tradicional, donde primero se diseñaban los websites (o webapps) para
-desktop y después se trataba de _arrugar_ el diseño para que entre en pantallas
-más chicas. La clave acá es asegurarse de que desde el principio diseñan usando
-la vista _responsive_ de las herramientas de desarrollador (developer tools) del
-navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una
-pantalla y entorno móvil.
-
-### Múltiples vistas
-
-En proyectos anteriores nuestras aplicaciones habían estado compuestas de una
-sola _vista_ principal (una sóla _página_). En este proyecto se introduce la
-necesidad de tener que dividir nuestra interfaz en varias _vistas_ o _páginas_
-y ofrecer una manera de navegar entre ellas.
-
-### Escritura de datos
-
-En los proyectos anteriores hemos consumido (leído) datos, pero todavía no
-habíamos escrito datos (salvar cambios, crear datos, borrar, ...). En este
-proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y
-modificar datos existentes. Estos datos se podrán guardar de forma remota
-usando [Firestore](https://firebase.google.com/docs/firestore) o de forma
-local utilizando`localStorage`.
-
-### Autenticación y autorización
-
-Hasta el momento, los proyectos han sido pensados como recursos públicos, donde todos
-los usuarios compartían un mismo rol y la misma información.
-
-En este proyecto tendrás que diferenciar la información a mostrar y modificar,
-dependiendo de la identidad del usuario.
-De la misma manera deberás crear reglar de autorización para el acceso a los
-datos.
-
-Para esto utilizaras respectivamente
-[`Firebase authentication`](https://firebase.google.com/docs/auth/) y
-[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started)
-
-### CSS
-
-En este proyecto queremos que ganes confianza y experiencia con CSS profesional,
-por eso usarás [`flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-para posicionar tus elementos.
-
-Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/).
-
-### Otras:
-
-* [Pildora SPA](https://www.loom.com/share/fa63a8ad0e9a43428222c15b6f6613d3)
-* [Repositorio de pildora de SPA](https://github.com/betsyvies/bootcamp-spa)
-* [Pildora de mock Firebase](https://www.youtube.com/watch?v=06myVn41OTY&t=1s)
-* [Repositorio de pildora de mock Firebase](https://github.com/Danielalab/2018-2-Testing)
-* [Pildora MVC](https://github.com/merunga/todomvc-vanillajs)
-* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/)
-* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html)
-* [Mobile First - ZURB](https://zurb.com/word/mobile-first)
-* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/)
-
-***
+- HTML
+- CSS
+- Javascript
+- Materialize
+- Firebase
+- Firestore
+- Github colaborativo
+- SPA
+- MVC
+- Responsive Desing
diff --git a/package.json b/package.json
index 9a365577..796f1d15 100644
--- a/package.json
+++ b/package.json
@@ -33,4 +33,4 @@
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
}
-}
\ No newline at end of file
+}
diff --git a/prototype/prototipo-actual.jpg b/prototype/prototipo-actual.jpg
new file mode 100644
index 00000000..cecfa60c
Binary files /dev/null and b/prototype/prototipo-actual.jpg differ
diff --git a/prototype/prototipo-inicial.jpg b/prototype/prototipo-inicial.jpg
new file mode 100644
index 00000000..b8cfa54f
Binary files /dev/null and b/prototype/prototipo-inicial.jpg differ
diff --git a/src/digitalplatform/firebase.js b/src/digitalplatform/firebase.js
new file mode 100644
index 00000000..06ba60c2
--- /dev/null
+++ b/src/digitalplatform/firebase.js
@@ -0,0 +1,15 @@
+// Your web app's Firebase configuration
+var firebaseConfig = {
+ apiKey: "AIzaSyCkfImtzIXqG7KbK3b6Tu3MABA91hPqdFA",
+ authDomain: "social-network-pruebas.firebaseapp.com",
+ databaseURL: "https://social-network-pruebas.firebaseio.com",
+ projectId: "social-network-pruebas",
+ storageBucket: "social-network-pruebas.appspot.com",
+ messagingSenderId: "327573056555",
+ appId: "1:327573056555:web:38bda7ccadbd1fb70c0e6e",
+ measurementId: "G-ZLRFD83MS0"
+};
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+firebase.analytics();
+var db = firebase.firestore()
\ No newline at end of file
diff --git a/src/example.js b/src/example.js
deleted file mode 100644
index 52d2c7ea..00000000
--- a/src/example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const example = () => {
- // aquí tu código
-}
\ No newline at end of file
diff --git a/src/functions/clickmenus.js b/src/functions/clickmenus.js
new file mode 100644
index 00000000..6b5817a8
--- /dev/null
+++ b/src/functions/clickmenus.js
@@ -0,0 +1,38 @@
+import { viewProfile } from '../view/profile.js';
+import { out } from './logout.js';
+import { editionOfProfile } from '../view/editprofile.js';
+import { viewForum } from '../view/fuorum.js';
+import { publicPost, addNewPost } from './publicpoust.js';
+import { readPosts } from './readposts.js';
+import { editProfileUser } from './editprofile.js';
+
+function clickMenus(obtainingPersistenceData) {
+ let nameMenus = document.querySelectorAll('ul.clickMenu li a');
+ nameMenus.forEach(function(viewMenus) {
+ viewMenus.addEventListener('click', function(clickedMenu) {
+ clickedMenu.preventDefault();
+ let userClickMenu = clickedMenu.target.dataset.nav;
+ if (userClickMenu == "/Foro") {
+ viewForum(obtainingPersistenceData)
+ .then(function() {
+ publicPost(obtainingPersistenceData);
+ readPosts();
+ });
+ window.history.pushState('Foro', 'Foro', '/Foro');
+ } else if (userClickMenu == "/Perfil") {
+ viewProfile(obtainingPersistenceData);
+ window.history.pushState('perfil', 'Perfil', '/Perfil');
+ } else if (userClickMenu == "/editarPerfil") {
+ editionOfProfile(obtainingPersistenceData)
+ .then(function() {
+ editProfileUser(obtainingPersistenceData);
+ });
+ window.history.pushState('Editar Perfil', 'Editar Perfil', '/EditarPerfil');
+ } else if (userClickMenu == "/cerrarSesion") {
+ out();
+ };
+ });
+ });
+};
+
+export { clickMenus }
\ No newline at end of file
diff --git a/src/functions/editprofile.js b/src/functions/editprofile.js
new file mode 100644
index 00000000..f4be7d90
--- /dev/null
+++ b/src/functions/editprofile.js
@@ -0,0 +1,94 @@
+import { clickMenus } from './clickmenus.js';
+import { viewForum } from '../view/fuorum.js';
+import { publicPost, addNewPost } from './publicpoust.js';
+import { readPosts } from './readposts.js';
+
+
+function editProfileUser(user) {
+ let savesChanges = document.getElementById('saveChangesButton');
+ let profilePictureInput = document.getElementById('newProfilePhoto'); //aquí pongo en id del input donde voy dar click para entrar a carpeta que muestra imágenes
+ let imageUrl = ''; //la variable está vacia,porque solamente cuando el usuario mande una imagen y la imagen sea subida a firebase, tendremos solo así el link. En caso de que el usuario ponga una imagen se llenará.
+
+ profilePictureInput.onchange = changeProfilePhoto => {
+ console.log(changeProfilePhoto);
+
+ let file = changeProfilePhoto.target.files[0];
+ firebase.storage().ref("devpost").child(file.name).put(file) //le digo a firebase que voy a ocupar su servicio de storage haciendo referencia a la carpeta devpost y que voy a declarar un hijito como mi file que ya declaramos arriba .name ahí entramos a la propiedad name de file, y luego le decimos quiero poner que es PUT este archivo(file) y es tal cual todo el objeto del archivo
+ .then(snap => { ///cuando ya sea exitoso snap es el que me va a retornar la respuesta del storage de firebase
+ return snap.ref.getDownloadURL() //retorname el ref y la url de descarga de mi imagen que acabo de subir a tu servicio, esta url la recibe la siguiente promesa como link
+ })
+ .then(link => { //entonces..Si todo exitoso:
+ console.log(link)
+ imageUrl = link; //devuelveme la url de esta imagen que subiste
+ let img = document.getElementById('userPhoto'); //recueparmos la imagen con su id
+ img.src = imageUrl; //y le decimos que su srrc va ser igual a esa imagen y ya se ve el preview en el circulito
+ });
+ };
+
+ savesChanges.onclick = function() {
+
+ let callName = document.querySelector('#changeName');
+ let callProfession = document.querySelector('#changeProfession');
+
+ let editDataProfile = {
+ user: callName.value,
+ job: callProfession.value,
+ img: imageUrl,
+ uid: user.uid,
+ };
+
+ addInformationProfileEdit(editDataProfile)
+ .then(function() {
+ // Get the existing data
+ let existing = localStorage.getItem('userdata');
+ // If no existing data, create an array
+ // Otherwise, convert the localStorage string to an array
+ existing = existing ? JSON.parse(existing) : {}; //un objeto vacio en el caso de que no haya para yo llenarlo
+ // Add new data to localStorage Array
+ existing['displayName'] = editDataProfile.user;
+ existing['job'] = editDataProfile.job;
+ existing['photoURL'] = editDataProfile.img;
+ // Save back to localStorage
+ localStorage.setItem('userdata', JSON.stringify(existing));
+ return existing;
+ })
+ .then(function(existing) { //esto es la promesa
+ console.log('este es el bueno', existing);
+
+ alert('se guardaron los datos') //este es el resultado de la promesa
+ viewForum(existing)
+ .then(function() {
+ publicPost(existing);
+ readPosts();
+ })
+ .then(function() {
+ clickMenus(existing);
+ updatePostPic(user.uid, imageUrl);
+ })
+ })
+ .catch(err => {
+ console.log(err) //esto es el error cuando la respuesta es negativa
+ });
+ };
+
+};
+
+function addInformationProfileEdit(editDataProfile) {
+ console.log(editDataProfile);
+ return firebase.database().ref('users/' + editDataProfile.uid).set(editDataProfile);
+}
+
+function updatePostPic(uid, photo) {
+ return db.collection("pruebas_020520").where("uid", "==", uid)
+ .get()
+ .then(function(resultAllPost) {
+ resultAllPost.forEach(function(post) {
+ db.collection("pruebas_020520").doc(post.id).update({
+ photo: photo,
+ });
+ });
+ });
+
+};
+
+export { editProfileUser }
\ No newline at end of file
diff --git a/src/functions/loginfacebook.js b/src/functions/loginfacebook.js
new file mode 100644
index 00000000..3b260906
--- /dev/null
+++ b/src/functions/loginfacebook.js
@@ -0,0 +1,37 @@
+import { clickMenus } from './clickmenus.js';
+import { viewForum } from '../view/fuorum.js';
+import { publicPost, addNewPost } from './publicpoust.js';
+
+
+//Login with Facebook
+function facebookButton() {
+ let provider = new firebase.auth.FacebookAuthProvider();
+ let movilIcon = document.getElementById('movilIcon');
+
+ firebase.auth().signInWithPopup(provider)
+ .then(function(data) {
+ // This gives you a Facebook Access Token. You can use it to access the Facebook API.
+ let token = data.credential.accessToken;
+ // The signed-in user info.
+ let user = data.user;
+ clickMenus(user);
+ viewForum(user)
+ .then(function() {
+ publicPost();
+ })
+ .then(function() {
+ localStorage.setItem('userdata', JSON.stringify(user));
+ })
+ movilIcon.classList.add('shown');
+ document.getElementById('hideAndShow').style.display = 'block';
+ })
+ .catch(function(error) {
+ console.log(error);
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ let email = error.email;
+ let credential = error.credential;
+ });
+};
+
+export { facebookButton }
\ No newline at end of file
diff --git a/src/functions/logingoogle.js b/src/functions/logingoogle.js
new file mode 100644
index 00000000..15edcd15
--- /dev/null
+++ b/src/functions/logingoogle.js
@@ -0,0 +1,37 @@
+import { clickMenus } from './clickmenus.js';
+import { viewForum } from '../view/fuorum.js';
+import { publicPost, addNewPost } from './publicpoust.js';
+
+
+//Login with Google Acount
+function googleButton() {
+ let provider = new firebase.auth.GoogleAuthProvider();
+ let movilIcon = document.getElementById('movilIcon');
+
+ firebase.auth().signInWithPopup(provider)
+ .then(function(data) {
+ // This gives you a Google Access Token. You can use it to access the Google API.
+ let token = data.credential.accessToken;
+ // The signed-in user info.
+ let user = data.user;
+ clickMenus(user);
+ viewForum(user)
+ .then(function() {
+ publicPost();
+ })
+ .then(function() {
+ localStorage.setItem('userdata', JSON.stringify(user));
+ });
+ document.getElementById('hideAndShow').style.display = 'block';
+ movilIcon.classList.add('shown');
+
+ })
+ .catch(function(error) {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ let email = error.email;
+ let credential = error.credential;
+ });
+}
+
+export { googleButton }
diff --git a/src/functions/loginpageone.js b/src/functions/loginpageone.js
new file mode 100644
index 00000000..9ba9ce06
--- /dev/null
+++ b/src/functions/loginpageone.js
@@ -0,0 +1,35 @@
+//Page one Login
+import { viewForum } from '../view/fuorum.js';
+import { readPosts } from './readposts.js';
+import { clickMenus } from './clickmenus.js';
+import { publicPost, addNewPost } from './publicpoust.js';
+
+function loginPageOne() {
+ let email = document.getElementById('email').value;
+ let pass = document.getElementById('pass').value;
+ let movilIcon = document.getElementById('movilIcon');
+ firebase.auth().signInWithEmailAndPassword(email, pass,)
+ .then((data) => {
+ clickMenus(data.user);
+ viewForum(data.user)
+ .then(function() {
+ publicPost(data.user);
+ readPosts();
+ })
+ .then(function() {
+ localStorage.setItem('userdata', JSON.stringify(data.user));
+ });
+
+ document.getElementById('hideAndShow').style.display = 'block';
+ movilIcon.classList.add('shown');
+ })
+ .catch(function(error) {
+ alert('Los datos ingresados no son correctos');
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ alert(errorMessage);
+ });
+ let cred = firebase.auth.EmailAuthProvider.credential(email, pass);
+}
+
+export { loginPageOne }
\ No newline at end of file
diff --git a/src/functions/logout.js b/src/functions/logout.js
new file mode 100644
index 00000000..633b3742
--- /dev/null
+++ b/src/functions/logout.js
@@ -0,0 +1,68 @@
+//Log out
+import { viewLogin } from '../view/login.js';
+import { loginPageOne } from './loginpageone.js';
+import { viewRegister } from '../view/register.js';
+import { register } from './register.js';
+import { googleButton } from './logingoogle.js';
+import { facebookButton } from './loginfacebook.js';
+
+function out() {
+ console.log('revisando out');
+
+ firebase.auth().signOut()
+ .then(function() {
+ document.getElementById('movilIcon').classList.toggle('shown');
+ document.getElementById('hideAndShow').style.display = 'none';
+ })
+ .then(function() {
+ viewLogin()
+ .then(function() {
+ localStorage.setItem('userdata', null);
+ })
+ .then(function() {
+ let buttonLogin = document.querySelector('#doLogin');
+ buttonLogin.addEventListener('click', function(e) {
+ e.preventDefault();
+ loginPageOne();
+ movilIcon.classList.add('shown');
+ });
+ })
+ .then(function() {
+ let buttonGoogle = document.querySelector('#loginGoogle');
+ buttonGoogle.addEventListener('click', function(e) {
+ e.preventDefault();
+ googleButton();
+ });
+ })
+ .then(function() {
+ let buttonFacebook = document.querySelector('#loginFacebook');
+ buttonFacebook.addEventListener('click', function(e) {
+ e.preventDefault();
+ facebookButton();
+ document.getElementById('hideAndShow').style.display = 'block';
+ movilIcon.classList.add('shown');
+ });
+ })
+ .then(function() {
+ let ntAccount = document.querySelector('#reg');
+ ntAccount.addEventListener('click', function(e) {
+ e.preventDefault();
+ viewRegister()
+ .then(function() {
+ let buttonReg = document.querySelector('#doRegister');
+ buttonReg.addEventListener('click', function(e) {
+ e.preventDefault();
+ register();
+ });
+ });
+ });
+ });
+
+ window.history.pushState('cerrar sesion', 'cerrar sesion', '/');
+ })
+ .catch(function(error) {
+ console.log(error);
+ });
+};
+
+export { out }
diff --git a/src/functions/publicpoust.js b/src/functions/publicpoust.js
new file mode 100644
index 00000000..ebb69e86
--- /dev/null
+++ b/src/functions/publicpoust.js
@@ -0,0 +1,61 @@
+//Public Post
+function publicPost(user) {
+ let fileInput = document.getElementById('myNewFile');
+ let imageUrl = '';
+ fileInput.onchange = respuestaCambioImagen => {
+ let file = respuestaCambioImagen.target.files[0];
+ firebase.storage().ref("devpost").child(file.name).put(file)
+ .then(snap => {
+ return snap.ref.getDownloadURL();
+ })
+ .then(link => {
+ imageUrl = link;
+ let img = document.createElement('img');
+ img.src = imageUrl;
+ document.getElementById("showComment").appendChild(img);
+ document.body.appendChild(img);
+ document.getElementById("showComment").appendChild(img);
+ });
+ };
+
+ let publicPost = document.getElementById('publish');
+
+ publicPost.onclick = function () {
+ let text = document.getElementById('userCommit');
+ console.log(user);
+ let post = {
+ texto: text.value,
+
+
+
+
+ user: (user.hasOwnProperty('displayName') && user.displayName != null) ? user.displayName : emailCortado,
+ date: new Date(),
+ img: imageUrl,
+ mail: user.email,
+ photo: user.photoURL,
+ uid: user.uid,
+ }
+ addNewPost(post)
+ .then(function (post) {
+ alert('Post publicado');
+ })
+ .then(function () {
+ text.value = "";
+ })
+ .then(function () {
+ imageUrl = "";
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ };
+};
+
+function addNewPost(post) {
+ console.log(post);
+ let postsRef = db.collection('pruebas_020520');
+ return postsRef.add(post);
+};
+
+export { publicPost, addNewPost }
\ No newline at end of file
diff --git a/src/functions/readposts.js b/src/functions/readposts.js
new file mode 100644
index 00000000..591ba5aa
--- /dev/null
+++ b/src/functions/readposts.js
@@ -0,0 +1,90 @@
+//Read Post
+import { buildComent } from '../view/coment.js';
+
+function readPosts() {
+ let emailCortado = 'No hay email';
+ let postsRef = db.collection('pruebas_020520');
+ postsRef.orderBy('date', 'desc').onSnapshot(snap => {
+ let publishPust = document.querySelector('#showComment');
+ publishPust.innerHTML = '';
+ snap.forEach(doc => {
+ if (typeof doc.data().mail != 'undefined') {
+ let email = doc.data().mail;
+ let divisiones = email.split("@");
+ emailCortado = divisiones[0];
+ };
+ let nombre = doc.data().user ? doc.data().user : emailCortado;
+ let image = doc.data().photo ? doc.data().photo : "images/profile-picture-green.jpg";
+ let div = buildComent(image, nombre, doc.data().img, doc.data().texto, doc.id);
+ let nodo = document.createElement('div')
+ nodo.innerHTML = div;
+ publishPust.appendChild(nodo);
+ });
+
+//Delete Post
+ let elems = document.querySelectorAll('.fixed-action-btn');
+ let instances = M.FloatingActionButton.init(elems, {
+ direction: 'right',
+ hoverEnabled: false
+ });
+
+ let deleteComments = document.querySelectorAll('.deletePostUser');
+
+ deleteComments.forEach(function(deleteComment) {
+ deleteComment.addEventListener('click', function(clickedPoints) {
+ db.collection('pruebas_020520').doc(clickedPoints.target.dataset.id).delete()
+ .then(function() {
+ alert('Post borrado exitosamente');
+ })
+ .catch(function(error) {
+ alert('Error removing post: ', error);
+ });
+ });
+ });
+
+//Edit Post
+ let editComments = document.querySelectorAll('.editPostUser');
+ editComments.forEach(function(editComment) {
+ editComment.addEventListener('click', function(clickedPencil) {
+ let postForEdition = db.collection("pruebas_020520").doc(clickedPencil.target.dataset.id);
+ let publicEditPost = document.querySelector('#newPostPublish-' + clickedPencil.target.dataset.id);
+ let box = document.querySelector('.editTextPostUser-' + clickedPencil.target.dataset.id);
+ box.style.display = 'block';
+ let buttonCheck = document.querySelector('.publicationedit-' + clickedPencil.target.dataset.id);
+ buttonCheck.style.display = 'block';
+ let fileEdit = document.querySelector('#newEditPost-' + clickedPencil.target.dataset.id);
+ let imageUrl = '';
+ fileEdit.onchange = answerChangeImage => {
+ let editedFile = answerChangeImage.target.files[0]
+ firebase.storage().ref("devpost").child(editedFile.name).put(editedFile)
+ .then(snap => {
+ return snap.ref.getDownloadURL();
+ })
+ .then(link => {
+ imageUrl = link
+ let img = document.createElement('img');
+ img.src = imageUrl;
+ document.body.appendChild(img);
+ document.getElementById("showComment").appendChild(img);
+ });
+ };
+
+ publicEditPost.onclick = function() {
+ return postForEdition.update({
+ texto: box.value,
+ //img: imageUrl,
+ })
+ .then(function() {
+ alert("Post editado exitosamente!!");
+ })
+ .catch(function(error) {
+ console.error("Error updating document: ", error);
+ });
+ };
+ });
+ });
+
+ });
+};
+
+export { readPosts }
diff --git a/src/functions/register.js b/src/functions/register.js
new file mode 100644
index 00000000..b4662ce8
--- /dev/null
+++ b/src/functions/register.js
@@ -0,0 +1,40 @@
+//Registry
+import { clickMenus } from './clickmenus.js';
+import { viewForum } from '../view/fuorum.js';
+import { publicPost } from './publicpoust.js';
+import { readPosts } from './readposts.js';
+
+function register() {
+ let registerNameLogin2 = document.getElementById('registerLoginName2').value;
+ let registerEmailLogin2 = document.getElementById('registerLoginEmail2').value;
+ let registerPassLogin2 = document.getElementById('registerLoginPass2').value;
+ let registerConfirmPassLogin2 = document.getElementById('registerLoginConfirmPass2').value;
+ let movilIcon = document.getElementById('movilIcon');
+ console.log(registerNameLogin2);
+
+
+ if (registerPassLogin2 != registerConfirmPassLogin2) {
+ alert('Las contraseñas deben coincidir');
+ } else {
+ firebase.auth().createUserWithEmailAndPassword(registerEmailLogin2, registerPassLogin2)
+ .then((data) => {
+ clickMenus(data.user);
+ viewForum(data.user);
+ publicPost(data.user);
+ readPosts(data.user);
+ document.getElementById('hideAndShow').style.display = 'block';
+ movilIcon.classList.add('shown');
+ })
+ .catch(function(error) {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ if (errorCode == 'auth/weak-password') {
+ alert('The password is too weak.');
+ } else {
+ alert(errorMessage);
+ };
+ });
+ };
+};
+
+export { register }
\ No newline at end of file
diff --git a/src/images/foto_perfil_circulo.png b/src/images/foto_perfil_circulo.png
new file mode 100644
index 00000000..d157ff4a
Binary files /dev/null and b/src/images/foto_perfil_circulo.png differ
diff --git a/src/images/logo_ok2.png b/src/images/logo_ok2.png
new file mode 100644
index 00000000..b22cca67
Binary files /dev/null and b/src/images/logo_ok2.png differ
diff --git a/src/images/profile-picture-green.jpg b/src/images/profile-picture-green.jpg
new file mode 100644
index 00000000..0ee6e2e1
Binary files /dev/null and b/src/images/profile-picture-green.jpg differ
diff --git a/src/images/profile-picture-pink.jpg b/src/images/profile-picture-pink.jpg
new file mode 100644
index 00000000..ba73eba0
Binary files /dev/null and b/src/images/profile-picture-pink.jpg differ
diff --git a/src/images/profile-picture-purple.jpg b/src/images/profile-picture-purple.jpg
new file mode 100644
index 00000000..ecc532e4
Binary files /dev/null and b/src/images/profile-picture-purple.jpg differ
diff --git a/src/images/prototipo_actual.jpg b/src/images/prototipo_actual.jpg
new file mode 100644
index 00000000..cdaa1c2d
Binary files /dev/null and b/src/images/prototipo_actual.jpg differ
diff --git a/src/images/prototipo_inicial.jpg b/src/images/prototipo_inicial.jpg
new file mode 100644
index 00000000..2c4b677f
Binary files /dev/null and b/src/images/prototipo_inicial.jpg differ
diff --git a/src/index.html b/src/index.html
index bb6937cc..87c76ca1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,62 @@
+
-
-
-
- ${nameUser}
+${text}
+Editar Perfil
+Cambiar foto
++ +
+ +Una red social pensada para los que hacemos Desarrollo Web
+No tienes cuenta? Registrate
+Sé parte de nuestra comunidad y fortalece tus ideas y conocimientos.
+${name}
+¿Cómo centrar texto en HTML?
+Por favor llena los siguientes campos
Obligatorio *
Sé parte de nuestra comunidad y fortalece tus ideas y conocimientos.
+${doc.data().texto}
+