diff --git a/__mocks__firebase/auth.js b/__mocks__firebase/auth.js new file mode 100644 index 00000000..699531e4 --- /dev/null +++ b/__mocks__firebase/auth.js @@ -0,0 +1,5 @@ +export const createUserWithEmailAndPassword = jest.fn( (auth, email, password) =>Promise.resolve({ + user:{ + email + } +})) \ No newline at end of file diff --git a/package.json b/package.json index 0c72f6c8..f5024697 100644 --- a/package.json +++ b/package.json @@ -39,5 +39,463 @@ "createdAt": "2022-11-30T16:52:37.204Z", "version": "5.5.0", "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1" + }, + "directories": { + "test": "test" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Sandra-18/DEV002-social-network.git" + }, + "author": "\"sandra Rios\"", + "bugs": { + "url": "https://github.com/Sandra-18/DEV002-social-network/issues" + }, + "homepage": "https://github.com/Sandra-18/DEV002-social-network#readme", + "dependencies": { + "abab": "^2.0.6", + "accepts": "^1.3.8", + "acorn": "^8.8.1", + "acorn-globals": "^6.0.0", + "acorn-jsx": "^5.3.2", + "acorn-walk": "^7.2.0", + "agent-base": "^6.0.2", + "ajv": "^6.12.6", + "ansi-align": "^3.0.1", + "ansi-escapes": "^4.3.2", + "ansi-regex": "^5.0.1", + "ansi-styles": "^3.2.1", + "anymatch": "^3.1.3", + "arch": "^2.2.0", + "arg": "^2.0.0", + "argparse": "^1.0.10", + "array-includes": "^3.1.6", + "array-union": "^2.1.0", + "array.prototype.flat": "^1.3.1", + "arrify": "^1.0.1", + "astral-regex": "^2.0.0", + "async": "^3.2.3", + "asynckit": "^0.4.0", + "babel-plugin-istanbul": "^6.1.1", + "babel-plugin-jest-hoist": "^27.5.1", + "babel-plugin-polyfill-corejs2": "^0.3.3", + "babel-plugin-polyfill-corejs3": "^0.6.0", + "babel-plugin-polyfill-regenerator": "^0.4.1", + "babel-preset-current-node-syntax": "^1.0.1", + "babel-preset-jest": "^27.5.1", + "balanced-match": "^1.0.2", + "boxen": "^5.1.2", + "brace-expansion": "^1.1.11", + "braces": "^3.0.2", + "browser-process-hrtime": "^1.0.0", + "browserslist": "^4.21.4", + "bser": "^2.1.1", + "buffer-from": "^1.1.2", + "bytes": "^3.0.0", + "call-bind": "^1.0.2", + "callsites": "^3.1.0", + "camelcase": "^5.3.1", + "camelcase-keys": "^6.2.2", + "caniuse-lite": "^1.0.30001441", + "chalk": "^2.4.2", + "char-regex": "^1.0.2", + "ci-info": "^3.7.0", + "cjs-module-lexer": "^1.2.2", + "cli-boxes": "^2.2.1", + "clipboardy": "^2.3.0", + "cliui": "^7.0.4", + "co": "^4.6.0", + "collect-v8-coverage": "^1.0.1", + "color-convert": "^1.9.3", + "color-name": "^1.1.3", + "colord": "^2.9.3", + "combined-stream": "^1.0.8", + "commander": "^9.4.1", + "compressible": "^2.0.18", + "compression": "^1.7.3", + "concat-map": "^0.0.1", + "confusing-browser-globals": "^1.0.11", + "content-disposition": "^0.5.2", + "convert-source-map": "^1.9.0", + "core-js-compat": "^3.27.0", + "cosmiconfig": "^7.1.0", + "cross-spawn": "^7.0.3", + "css-functions-list": "^3.1.0", + "cssesc": "^3.0.0", + "cssom": "^0.4.4", + "cssstyle": "^2.3.0", + "cycle-import-check": "^1.3.2", + "data-urls": "^2.0.0", + "debug": "^4.3.4", + "decamelize": "^1.2.0", + "decamelize-keys": "^1.1.1", + "decimal.js": "^10.4.3", + "dedent": "^0.7.0", + "deep-extend": "^0.6.0", + "deep-is": "^0.1.4", + "deepmerge": "^4.2.2", + "define-properties": "^1.1.4", + "delayed-stream": "^1.0.0", + "detect-newline": "^3.1.0", + "diff-sequences": "^27.5.1", + "dir-glob": "^3.0.1", + "doctrine": "^3.0.0", + "domexception": "^2.0.1", + "electron-to-chromium": "^1.4.284", + "emittery": "^0.8.1", + "emoji-regex": "^8.0.0", + "end-of-stream": "^1.4.4", + "error-ex": "^1.3.2", + "es-abstract": "^1.20.5", + "es-shim-unscopables": "^1.0.0", + "es-to-primitive": "^1.2.1", + "escalade": "^3.1.1", + "escape-string-regexp": "^1.0.5", + "escodegen": "^2.0.0", + "eslint-import-resolver-node": "^0.3.6", + "eslint-module-utils": "^2.7.4", + "eslint-scope": "^7.1.1", + "eslint-utils": "^3.0.0", + "eslint-visitor-keys": "^3.3.0", + "espree": "^9.4.1", + "esprima": "^4.0.1", + "esquery": "^1.4.0", + "esrecurse": "^4.3.0", + "estraverse": "^5.3.0", + "esutils": "^2.0.3", + "execa": "^5.1.1", + "exit": "^0.1.2", + "expect": "^27.5.1", + "fast-deep-equal": "^3.1.3", + "fast-glob": "^3.2.12", + "fast-json-stable-stringify": "^2.1.0", + "fast-levenshtein": "^2.0.6", + "fast-url-parser": "^1.1.3", + "fastest-levenshtein": "^1.0.16", + "fastq": "^1.14.0", + "fb-watchman": "^2.0.2", + "file-entry-cache": "^6.0.1", + "fill-range": "^7.0.1", + "find-up": "^4.1.0", + "flat-cache": "^3.0.4", + "flatted": "^3.2.7", + "form-data": "^3.0.1", + "fs.realpath": "^1.0.0", + "function-bind": "^1.1.1", + "function.prototype.name": "^1.1.5", + "functions-have-names": "^1.2.3", + "gensync": "^1.0.0-beta.2", + "get-caller-file": "^2.0.5", + "get-intrinsic": "^1.1.3", + "get-package-type": "^0.1.0", + "get-stream": "^6.0.1", + "get-symbol-description": "^1.0.0", + "glob": "^7.2.3", + "glob-parent": "^6.0.2", + "global-modules": "^2.0.0", + "global-prefix": "^3.0.0", + "globals": "^11.12.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "gopd": "^1.0.1", + "graceful-fs": "^4.2.10", + "grapheme-splitter": "^1.0.4", + "hard-rejection": "^2.1.0", + "has": "^1.0.3", + "has-bigints": "^1.0.2", + "has-flag": "^3.0.0", + "has-property-descriptors": "^1.0.0", + "has-symbols": "^1.0.3", + "has-tostringtag": "^1.0.0", + "hosted-git-info": "^4.1.0", + "html-encoding-sniffer": "^2.0.1", + "html-escaper": "^2.0.2", + "html-tags": "^3.2.0", + "http-proxy-agent": "^4.0.1", + "https-proxy-agent": "^5.0.1", + "human-signals": "^2.1.0", + "iconv-lite": "^0.4.24", + "ignore": "^5.2.4", + "import-fresh": "^3.3.0", + "import-lazy": "^4.0.0", + "import-local": "^3.1.0", + "imurmurhash": "^0.1.4", + "indent-string": "^4.0.0", + "inflight": "^1.0.6", + "inherits": "^2.0.4", + "ini": "^1.3.8", + "internal-slot": "^1.0.4", + "is-arrayish": "^0.2.1", + "is-bigint": "^1.0.4", + "is-boolean-object": "^1.1.2", + "is-callable": "^1.2.7", + "is-core-module": "^2.11.0", + "is-date-object": "^1.0.5", + "is-docker": "^2.2.1", + "is-extglob": "^2.1.1", + "is-fullwidth-code-point": "^3.0.0", + "is-generator-fn": "^2.1.0", + "is-glob": "^4.0.3", + "is-negative-zero": "^2.0.2", + "is-number": "^7.0.0", + "is-number-object": "^1.0.7", + "is-path-inside": "^3.0.3", + "is-plain-obj": "^1.1.0", + "is-plain-object": "^5.0.0", + "is-potential-custom-element-name": "^1.0.1", + "is-regex": "^1.1.4", + "is-shared-array-buffer": "^1.0.2", + "is-stream": "^2.0.1", + "is-string": "^1.0.7", + "is-symbol": "^1.0.4", + "is-typedarray": "^1.0.0", + "is-weakref": "^1.0.2", + "is-wsl": "^2.2.0", + "isexe": "^2.0.0", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-instrument": "^5.2.1", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.1", + "istanbul-reports": "^3.1.5", + "jest-changed-files": "^27.5.1", + "jest-circus": "^27.5.1", + "jest-cli": "^27.5.1", + "jest-config": "^27.5.1", + "jest-diff": "^27.5.1", + "jest-docblock": "^27.5.1", + "jest-each": "^27.5.1", + "jest-environment-jsdom": "^27.5.1", + "jest-environment-node": "^27.5.1", + "jest-get-type": "^27.5.1", + "jest-haste-map": "^27.5.1", + "jest-jasmine2": "^27.5.1", + "jest-leak-detector": "^27.5.1", + "jest-matcher-utils": "^27.5.1", + "jest-message-util": "^27.5.1", + "jest-mock": "^27.5.1", + "jest-pnp-resolver": "^1.2.3", + "jest-regex-util": "^27.5.1", + "jest-resolve": "^27.5.1", + "jest-resolve-dependencies": "^27.5.1", + "jest-runner": "^27.5.1", + "jest-runtime": "^27.5.1", + "jest-serializer": "^27.5.1", + "jest-snapshot": "^27.5.1", + "jest-util": "^27.5.1", + "jest-validate": "^27.5.1", + "jest-watcher": "^27.5.1", + "jest-worker": "^27.5.1", + "js-sdsl": "^4.2.0", + "js-tokens": "^4.0.0", + "js-yaml": "^3.14.1", + "jsdom": "^16.7.0", + "jsesc": "^2.5.2", + "json-parse-even-better-errors": "^2.3.1", + "json-schema-traverse": "^0.4.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "json5": "^2.2.2", + "kind-of": "^6.0.3", + "kleur": "^3.0.3", + "known-css-properties": "^0.26.0", + "leven": "^3.1.0", + "levn": "^0.4.1", + "lines-and-columns": "^1.2.4", + "locate-path": "^5.0.0", + "lodash": "^4.17.21", + "lodash.debounce": "^4.0.8", + "lodash.merge": "^4.6.2", + "lodash.truncate": "^4.4.2", + "lru-cache": "^5.1.1", + "make-dir": "^3.1.0", + "makeerror": "^1.0.12", + "map-obj": "^4.3.0", + "mathml-tag-names": "^2.1.3", + "meow": "^9.0.0", + "merge-stream": "^2.0.0", + "merge2": "^1.4.1", + "micromatch": "^4.0.5", + "mime-db": "^1.52.0", + "mime-types": "^2.1.35", + "mimic-fn": "^2.1.0", + "min-indent": "^1.0.1", + "minimatch": "^3.1.2", + "minimist": "^1.2.7", + "minimist-options": "^4.1.0", + "ms": "^2.1.2", + "nanoid": "^3.3.4", + "natural-compare": "^1.4.0", + "negotiator": "^0.6.3", + "nice-try": "^1.0.5", + "node-fetch": "^2.6.7", + "node-int64": "^0.4.0", + "node-releases": "^2.0.8", + "normalize-package-data": "^3.0.3", + "normalize-path": "^3.0.0", + "npm-run-path": "^4.0.1", + "nwsapi": "^2.2.2", + "object-inspect": "^1.12.2", + "object-keys": "^1.1.1", + "object.assign": "^4.1.4", + "object.entries": "^1.1.6", + "object.values": "^1.1.6", + "on-headers": "^1.0.2", + "once": "^1.4.0", + "onetime": "^5.1.2", + "optionator": "^0.9.1", + "p-finally": "^1.0.0", + "p-limit": "^2.3.0", + "p-locate": "^4.1.0", + "p-try": "^2.2.0", + "parent-module": "^1.0.1", + "parse-json": "^5.2.0", + "parse5": "^6.0.1", + "path-exists": "^4.0.0", + "path-is-absolute": "^1.0.1", + "path-is-inside": "^1.0.2", + "path-key": "^3.1.1", + "path-parse": "^1.0.7", + "path-to-regexp": "^2.2.1", + "path-type": "^4.0.0", + "picocolors": "^1.0.0", + "picomatch": "^2.3.1", + "pirates": "^4.0.5", + "pkg-dir": "^4.2.0", + "postcss": "^8.4.20", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^6.0.0", + "postcss-selector-parser": "^6.0.11", + "postcss-value-parser": "^4.2.0", + "prelude-ls": "^1.2.1", + "pretty-format": "^27.5.1", + "prompts": "^2.4.2", + "psl": "^1.9.0", + "pump": "^3.0.0", + "punycode": "^1.4.1", + "querystringify": "^2.2.0", + "queue-microtask": "^1.2.3", + "quick-lru": "^4.0.1", + "range-parser": "^1.2.0", + "rc": "^1.2.8", + "react-is": "^17.0.2", + "read-pkg": "^5.2.0", + "read-pkg-up": "^7.0.1", + "redent": "^3.0.0", + "regenerate": "^1.4.2", + "regenerate-unicode-properties": "^10.1.0", + "regenerator-transform": "^0.15.1", + "regexp.prototype.flags": "^1.4.3", + "regexpp": "^3.2.0", + "regexpu-core": "^5.2.2", + "registry-auth-token": "^3.3.2", + "registry-url": "^3.1.0", + "regjsgen": "^0.7.1", + "regjsparser": "^0.9.1", + "require-directory": "^2.1.1", + "require-from-string": "^2.0.2", + "requires-port": "^1.0.0", + "resolve": "^1.22.1", + "resolve-cwd": "^3.0.0", + "resolve-from": "^5.0.0", + "resolve.exports": "^1.1.0", + "reusify": "^1.0.4", + "rimraf": "^3.0.2", + "run-parallel": "^1.2.0", + "safe-buffer": "^5.1.2", + "safe-regex-test": "^1.0.0", + "safer-buffer": "^2.1.2", + "saxes": "^5.0.1", + "semver": "^6.3.0", + "serve-handler": "^6.1.3", + "shebang-command": "^2.0.0", + "shebang-regex": "^3.0.0", + "side-channel": "^1.0.4", + "signal-exit": "^3.0.7", + "sisteransi": "^1.0.5", + "slash": "^3.0.0", + "slice-ansi": "^4.0.0", + "source-map": "^0.6.1", + "source-map-js": "^1.0.2", + "source-map-support": "^0.5.21", + "spdx-correct": "^3.1.1", + "spdx-exceptions": "^2.3.0", + "spdx-expression-parse": "^3.0.1", + "spdx-license-ids": "^3.0.12", + "sprintf-js": "^1.0.3", + "stack-utils": "^2.0.6", + "string-length": "^4.0.2", + "string-width": "^4.2.3", + "string.prototype.trimend": "^1.0.6", + "string.prototype.trimstart": "^1.0.6", + "strip-ansi": "^6.0.1", + "strip-bom": "^4.0.0", + "strip-eof": "^1.0.0", + "strip-final-newline": "^2.0.0", + "strip-indent": "^3.0.0", + "strip-json-comments": "^3.1.1", + "style-search": "^0.1.0", + "supports-color": "^5.5.0", + "supports-hyperlinks": "^2.3.0", + "supports-preserve-symlinks-flag": "^1.0.0", + "svg-tags": "^1.0.0", + "symbol-tree": "^3.2.4", + "table": "^6.8.1", + "terminal-link": "^2.1.1", + "test-exclude": "^6.0.0", + "text-table": "^0.2.0", + "throat": "^6.0.1", + "tmpl": "^1.0.5", + "to-fast-properties": "^2.0.0", + "to-regex-range": "^5.0.1", + "tough-cookie": "^4.1.2", + "tr46": "^2.1.0", + "trim-newlines": "^3.0.1", + "tsconfig-paths": "^3.14.1", + "tslib": "^1.14.1", + "tsutils": "^3.21.0", + "type-check": "^0.4.0", + "type-detect": "^4.0.8", + "type-fest": "^0.21.3", + "typedarray-to-buffer": "^3.1.5", + "typescript": "^4.9.4", + "unbox-primitive": "^1.0.2", + "unicode-canonical-property-names-ecmascript": "^2.0.0", + "unicode-match-property-ecmascript": "^2.0.0", + "unicode-match-property-value-ecmascript": "^2.1.0", + "unicode-property-aliases-ecmascript": "^2.1.0", + "universalify": "^0.2.0", + "update-browserslist-db": "^1.0.10", + "update-check": "^1.5.2", + "uri-js": "^4.4.1", + "url-parse": "^1.5.10", + "util-deprecate": "^1.0.2", + "v8-compile-cache": "^2.3.0", + "v8-to-istanbul": "^8.1.1", + "validate-npm-package-license": "^3.0.4", + "vary": "^1.1.2", + "w3c-hr-time": "^1.0.2", + "w3c-xmlserializer": "^2.0.0", + "walker": "^1.0.8", + "webidl-conversions": "^6.1.0", + "whatwg-encoding": "^1.0.5", + "whatwg-mimetype": "^2.3.0", + "whatwg-url": "^8.7.0", + "which": "^2.0.2", + "which-boxed-primitive": "^1.0.2", + "widest-line": "^3.1.0", + "word-wrap": "^1.2.3", + "wrap-ansi": "^7.0.0", + "wrappy": "^1.0.2", + "write-file-atomic": "^3.0.3", + "ws": "^7.5.9", + "xml": "^1.0.1", + "xml-name-validator": "^3.0.0", + "xmlchars": "^2.2.0", + "y18n": "^5.0.8", + "yallist": "^3.1.1", + "yaml": "^1.10.2", + "yargs": "^16.2.0", + "yargs-parser": "^20.2.9", + "yocto-queue": "^0.1.0" } -} \ No newline at end of file +} diff --git a/src/Readme.md b/src/Readme.md new file mode 100644 index 00000000..27b8858e --- /dev/null +++ b/src/Readme.md @@ -0,0 +1,58 @@ +# Proyecto Social Network +# **NEWME** + +## Índice + +* [1. Definición del producto](#1-definición-del-producto) +* [2. Principales usuarios](#2-princiaples-usuarios) +* [3. Objetivos de los usuarios en relación al producto](#3-objetivos-producto) +* [4. Qué problema resuelve el producto / para qué le servirá a estos usuarios](#4-problemas-resuelve) +* [5. Prototipo](#5-prototipo) + +*** + +## **1.Definición del producto** + +Nuestra red social es una plataforma Web y Mobile para que lxs usuarixs muestren sus cambios, esos cambios que le llenan de orgullo o cambios que representan una parte muy importante dentro de sus vidas; Nada como contarle a otrxs personas tus logros y que celebren contigo + +Video de guía, o idea: https://trends.google.com/trends/yis/2022/CO/ + +## **2. Principales Usuarios** + +Cualquier persona que desee contarle a su red de amigos, familiares o conocidos los acontecimientos importantes de su vida; Cambios que al día de lo hoy lx hacen sentir diferente o aquella situación que cambio su vida dándole un giro de 180° + +## **3. Objetivos del usuario en relación al producto** + +- Lograr que el usuario pueda compartir sus cambios o logros +- Permitir que el usurio encuentre una red social donde no tenga miedo de mostrar sus cambios +- Permitir al usuario interactuar con amigos y conocidos. + +## **4. Qué problema resuelve el producto / para qué le servirá a estos usuarios** + +Permitirá contar sus historias de vida o mostrar los cambios que le han traído felicidad, o algun sentimiento que le ha representado un cambio significativo a su vida. + +## **5. Prototipo** + +### **5.1 Baja Fidelidad** + + **Movil** + +![Prototipo Blanco y Negro Movil](./img/prototipoBajaFidelidad0.1.jpeg) + +**Desktop** + +![Prototipo Blanco y Negro Desktop](./img/PrototipoBajaFedelidad0.2.jpeg) + + +### **5.2 Alta Fidelidad ** + + **Movil** + +![Prototipo Alta Fidelidad Movil](./img/PrototipoAltaFidelidad0.1.png) + +**Desktop** + +![Prototipo Alta Fidelidad Movil](./img/PrototipoAltaFidelidad0.2.png) + + +### **5.3 DISEÑO FINAL PROYECTO** diff --git a/src/component/home.js b/src/component/home.js new file mode 100644 index 00000000..a3891a08 --- /dev/null +++ b/src/component/home.js @@ -0,0 +1,46 @@ +// eslint-disable-next-line import/no-cycle +import { surfing } from '../main.js'; + +export const Home = () => { + const $sectionHome = document.createElement('section'); + const $divLogoContainer = document.createElement('div'); + const $figureLogo = document.createElement('figure'); + const $imgLogo = document.createElement('img'); + const $divWelcomeContainer = document.createElement('div'); + const $h1Slogan = document.createElement('h1'); + const $imgCat = document.createElement('img'); + const $divBtnClickHere = document.createElement('div'); + const $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/component/login.js b/src/component/login.js new file mode 100644 index 00000000..55f41a22 --- /dev/null +++ b/src/component/login.js @@ -0,0 +1,133 @@ +// eslint-disable-next-line import/no-cycle +import { exitConsult, authGoogle } from '../lib/firebase.js'; +// eslint-disable-next-line import/no-cycle +import { surfing } from '../main.js'; + +export const Login = () => { + const $section = document.createElement('section'); + const $divLogo = document.createElement('div'); + const $figureLogin = document.createElement('figure'); + const $imgLogo = document.createElement('img'); + const $containerICoulLogin = document.createElement('div'); + const $iCouldLogin = document.createElement('h2'); + const $divContainerF = document.createElement('div'); + const $divContainerForm = document.createElement('div'); + const $divForm = document.createElement('form'); + const $divInput = document.createElement('div'); + const $inputEmail = document.createElement('input'); + const $inputPassword = document.createElement('input'); + const $divContainerCat = document.createElement('div'); + const $imgCat = document.createElement('img'); + const $inputSignUpCat = document.createElement('input'); + const $inputForgotP = document.createElement('input'); + const $divContainerSpan = document.createElement('div'); + const $spanOption = document.createElement('span'); + const $divContainerRegister = document.createElement('div'); + const $inputBtnGoogle = document.createElement('input'); + const $figureGoogle = document.createElement('figure'); + const $imgGoogle = document.createElement('img'); + const $pSignUp = document.createElement('p'); + + // agregamos HTML semantico------------------------------------ + + $section + .appendChild($divLogo) + .appendChild($figureLogin) + .appendChild($imgLogo); + $divLogo.appendChild($containerICoulLogin).appendChild($iCouldLogin); + + $section.appendChild($divContainerF); + $divContainerF.appendChild($divContainerForm); + $divContainerForm.appendChild($divForm); + $divForm.appendChild($divInput); + $divInput.appendChild($inputEmail); + $divInput.appendChild($inputPassword); + $divForm.appendChild($divContainerCat).appendChild($imgCat); + $divContainerCat.appendChild($inputSignUpCat); + $divContainerCat.appendChild($inputForgotP); + + $divContainerF.appendChild($divContainerSpan).appendChild($spanOption); + + $divContainerF.appendChild($divContainerRegister); + $divContainerRegister.appendChild($figureGoogle).appendChild($imgGoogle); + $divContainerRegister.appendChild($inputBtnGoogle); + $divContainerRegister.appendChild($pSignUp); + + // agregamos atributos---------------------------------------- + $section.setAttribute('class', 'sectionLogin'); + $divLogo.setAttribute('class', 'logoNewM'); + $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!'; + + $divContainerF.setAttribute('class', 'containerF'); + $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 IN'); + + $inputForgotP.setAttribute('type', 'submit'); + $inputForgotP.setAttribute('class', 'forgotP'); + $inputForgotP.setAttribute('id', 'forgotP'); + $inputForgotP.setAttribute('value', 'I forgot my password'); + + $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? + + `; + + $divForm.addEventListener('submit', (e) => { + e.preventDefault(); + exitConsult($inputEmail.value, $inputPassword.value); + surfing('/Wall'); + }); + + $inputBtnGoogle.addEventListener('click', async () => { + await authGoogle(); + surfing('/Wall'); + }); + + $pSignUp.addEventListener('click', () => { + surfing('/Register'); + }); + + return $section; +}; diff --git a/src/component/register.js b/src/component/register.js new file mode 100644 index 00000000..16bbcbd5 --- /dev/null +++ b/src/component/register.js @@ -0,0 +1,137 @@ +// eslint-disable-next-line import/no-cycle +import { surfing } from '../main.js'; +import { createUser } from '../lib/firebase.js'; + +export const Register = () => { + const $sectionF = document.createElement('section'); + const $divWelcomeF = document.createElement('div'); // mobile Divprincipal # 1 + const $btnBack = document.createElement('input'); // este boton queda afuera de todos los div + const $welcomeF = document.createElement('h2'); // mobile + const $divLogoF = document.createElement('div');// desktop DivPrincipal#1 + const $figureFormularioF = document.createElement('figure'); // desktop + const $imgLogoF = document.createElement('img'); // desktop + const $containerICouldForm = document.createElement('div'); // desktop + const $iCouldForm = document.createElement('h2'); // desktop + const $divContainerFormF = document.createElement('div'); // divprincipal#2 + const $divFormF = document.createElement('form'); // hijo de DivContainerFormF + const $divInputsF = document.createElement('div'); + const $inputEmailF = document.createElement('input'); + const $inputUsernameF = document.createElement('input'); + const $inputPasswordF = document.createElement('input'); + const $inputPasswordDos = document.createElement('input'); + const $divContainerCat = document.createElement('div'); // hijo de DivFormF + const $imgCat = document.createElement('img'); + const $inputSignUpCat = document.createElement('input'); + const $divContainerSpanF = document.createElement('div'); // hijo de divContainerFormF + const $spanOptionF = document.createElement('span'); + const $divContainerRegisterF = document.createElement('div'); // hijo divContainerFormF + const $inputBtnGoogleF = document.createElement('input'); + const $figureGoogleF = document.createElement('figure'); + const $imgGoogleF = document.createElement('img'); + + // -----------------------agregamos HTML semantico------------------------------------ + + $sectionF.appendChild($btnBack); + + $sectionF.appendChild($divWelcomeF); + $divWelcomeF.appendChild($welcomeF); + + $sectionF.appendChild($divLogoF); + $divLogoF.appendChild($figureFormularioF); + $figureFormularioF.appendChild($imgLogoF); + $divLogoF.appendChild($containerICouldForm); + $containerICouldForm.appendChild($iCouldForm); + + $sectionF.appendChild($divContainerFormF); + $divContainerFormF.appendChild($divFormF); + $divFormF.appendChild($divInputsF); + $divInputsF.appendChild($inputEmailF); + $divInputsF.appendChild($inputUsernameF); + $divInputsF.appendChild($inputPasswordF); + $divInputsF.appendChild($inputPasswordDos); + + $divFormF.appendChild($divContainerCat); + $divContainerCat.appendChild($imgCat); + $divContainerCat.appendChild($inputSignUpCat); + + $divContainerFormF.appendChild($divContainerSpanF); + $divContainerSpanF.appendChild($spanOptionF); + + $divContainerFormF.appendChild($divContainerRegisterF); + $divContainerRegisterF.appendChild($figureGoogleF).appendChild($imgGoogleF); + $divContainerRegisterF.appendChild($inputBtnGoogleF); + + // ------------atribuutos HTML-------------- + + $sectionF.setAttribute('class', 'sectionLogin'); + + $btnBack.setAttribute('type', 'button'); + $btnBack.setAttribute('class', 'btnBack'); + $btnBack.setAttribute('value', 'BACK'); + + $divWelcomeF.setAttribute('class', 'welcomeContainer'); // s aludo Mobile + $welcomeF.textContent = 'WELCOME TO NEWME'; + + $divLogoF.setAttribute('class', 'logoNewF'); // 79-84 desktop, display none + $figureFormularioF.setAttribute('class', 'figureLogin'); + $imgLogoF.setAttribute('src', 'img/logoNewMe.png'); + $imgLogoF.setAttribute('alt', 'Logo de la aplicacion Newme'); + $iCouldForm.setAttribute('class', 'sloganLogin'); + $iCouldForm.textContent = 'I could you can!'; + + $divContainerFormF.setAttribute('class', 'containerF'); // desktop + $divFormF.setAttribute('class', 'formRegister'); + $divInputsF.setAttribute('class', 'containerInputsRegister'); + + $inputEmailF.setAttribute('type', 'email'); + $inputEmailF.setAttribute('placeholder', 'example@gmail.com'); + $inputEmailF.setAttribute('required', ''); + + $inputUsernameF.setAttribute('type', 'text'); + $inputUsernameF.setAttribute('placeholder', 'Username'); + $inputUsernameF.setAttribute('required', ''); + + $inputPasswordF.setAttribute('type', 'password'); + $inputPasswordF.setAttribute('placeholder', 'Password'); + $inputPasswordF.setAttribute('required', ''); + + $inputPasswordDos.setAttribute('type', 'password'); + $inputPasswordDos.setAttribute('placeholder', 'Confirm Password'); + $inputPasswordDos.setAttribute('required', ''); + + $divContainerCat.setAttribute('class', 'containerCatReg'); + + $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'); + + $divContainerSpanF.setAttribute('class', 'containerSpan'); + $spanOptionF.setAttribute('class', 'option'); + $spanOptionF.textContent = 'Or sign up With'; + + $divContainerRegisterF.setAttribute('class', 'ContainerReg'); + + $inputBtnGoogleF.setAttribute('type', 'button'); + $inputBtnGoogleF.setAttribute('class', 'btn_google'); + $figureGoogleF.setAttribute('class', 'log_google'); + $imgGoogleF.setAttribute('src', 'img/imgGoogle.png'); + $inputBtnGoogleF.setAttribute('id', 'btn_googleId'); + $inputBtnGoogleF.setAttribute('value', 'WITH GOOGLE'); + + $btnBack.addEventListener('click', () => { + surfing('/Login'); + }); + + $divFormF.addEventListener('submit', (e) => { + e.preventDefault(); + createUser($inputEmailF.value, $inputPasswordF.value); + surfing('/Wall'); + }); + + return $sectionF; +}; diff --git a/src/component/wall.js b/src/component/wall.js new file mode 100644 index 00000000..58106b5a --- /dev/null +++ b/src/component/wall.js @@ -0,0 +1,166 @@ +import { savePublic } from '../lib/firestore.js'; +// eslint-disable-next-line import/no-cycle +import { surfing } from '../main.js'; + +export const Wall = () => { + const $sectionW = document.createElement('section'); // padre de tres + const $divContainerWall = document.createElement('div'); // hijo 1 + const $divSaludo = document.createElement('div'); + const $imgLogoW = document.createElement('img'); + const $h2name = document.createElement('h2'); + const $containerOrange = document.createElement('div'); // hijo 2 + const $divRightOrange = document.createElement('div'); + const $divImgWall = document.createElement('div'); + const $imgWall = document.createElement('img'); + const $divLeftOrange = document.createElement('div'); + const $divH3Post = document.createElement('div'); + const $h3Post = document.createElement('h3'); + const $containerFormWall = document.createElement('div'); + const $formWall = document.createElement('form'); + const $inputPublication = document.createElement('textarea'); + const $inputBtnWall = document.createElement('input'); + const $containerPublication = document.createElement('div'); // hijo de section y padre de dos 2 + const $divPublicUser = document.createElement('div'); // padre gris y blanca hijo 1 + const $divPublicU = document.createElement('div'); // parte gris + const $divReactions = document.createElement('div'); // parte blanca padre de tres + const $divReactionLikes = document.createElement('div'); // padrecorazon + const $imgHeart = document.createElement('img'); + const $inputReactionLikes = document.createElement('input'); + const $divReactionEdit = document.createElement('div'); // padreeditar + const $inputReactionEdit = document.createElement('input'); + const $divReactionDelete = document.createElement('div'); // padre eliminar + const $inputReactionDelete = document.createElement('input'); + const $divSignOffCat = document.createElement('div'); // hijo 2 + const $btnSingOff = document.createElement('input'); + const $imgWallCat = document.createElement('img'); + + // ---- HTML Semantico ----// + + $sectionW.appendChild($divContainerWall); // HIJO PRINCIPAL 1 + $divContainerWall.appendChild($divSaludo); + $divSaludo.appendChild($imgLogoW); + $divSaludo.appendChild($h2name); + + $sectionW.appendChild($containerOrange); // HIJO PRINCIPAL 2 + $containerOrange.appendChild($divRightOrange); + $divRightOrange.appendChild($divImgWall); + $divImgWall.appendChild($imgWall); + + $containerOrange.appendChild($divLeftOrange); + $divLeftOrange.appendChild($divH3Post); + $divH3Post.appendChild($h3Post); + $divLeftOrange.appendChild($containerFormWall); + $containerFormWall.appendChild($formWall); + $formWall.appendChild($inputPublication); + $formWall.appendChild($inputBtnWall); + + $sectionW.appendChild($containerPublication); // HIJO PRINCIPAL 3 + $containerPublication.appendChild($divPublicUser); + $divPublicUser.appendChild($divPublicU); + $divPublicUser.appendChild($divReactions); + + $divReactions.appendChild($divReactionLikes); + $divReactionLikes.appendChild($imgHeart); + $divReactionLikes.appendChild($inputReactionLikes); + + $divReactions.appendChild($divReactionEdit); + $divReactionEdit.appendChild($inputReactionEdit); + + $divReactions.appendChild($divReactionDelete); + $divReactionDelete.appendChild($inputReactionDelete); + + $sectionW.appendChild($divSignOffCat); + $divSignOffCat.appendChild($btnSingOff); + $divSignOffCat.appendChild($imgWallCat); + + // ----------ATRIBUTOS-------------// + + $sectionW.setAttribute('class', 'sectionWall'); + $divContainerWall.setAttribute('class', 'wallContainer'); + $divSaludo.setAttribute('class', 'Saludo'); + $imgLogoW.setAttribute('src', 'img/logoNewMe.png'); + $imgLogoW.setAttribute('alt', 'Logo NewMe'); + $h2name.textContent = 'Hello'; + + $containerOrange.setAttribute('class', 'ContainerOrange'); + + $divRightOrange.setAttribute('class', 'rightOrange'); + $divImgWall.setAttribute('class', 'imagenWall'); + $imgWall.setAttribute('src', 'img/imgMuro.png'); + $imgWall.setAttribute('alt', 'Img Niña Muro'); + + $divLeftOrange.setAttribute('class', 'leftOrange'); + $divH3Post.setAttribute('class', 'hPost'); + $h3Post.textContent = 'What was your change today?'; + $containerFormWall.setAttribute('class', 'ContFormWall'); + $formWall.setAttribute('class', 'formWall'); + $formWall.setAttribute('id', 'formWall'); + + // $inputPublication.setAttribute('type', 'text'); + $inputPublication.setAttribute('name', 'inp_publication'); + $inputPublication.setAttribute('class', 'inp_publication'); + $inputPublication.setAttribute('id', 'inp_idPublication'); + + $inputBtnWall.setAttribute('type', 'submit'); + $inputBtnWall.setAttribute('name', 'btn_send'); + $inputBtnWall.setAttribute('class', 'btn_send'); + $inputBtnWall.setAttribute('id', 'btn_idSend'); + $inputBtnWall.setAttribute('value', 'SEND'); + + $containerPublication.setAttribute('class', 'contPublic'); + $divPublicUser.setAttribute('class', 'publicUser'); + + // $divPublicU.setAttribute('type', 'submit'); + // $divPublicU.setAttribute('name', 'inp_publiU'); + $divPublicU.setAttribute('class', 'div_publiU'); + $divPublicU.setAttribute('id', 'div_idPubliU'); + + $divReactions.setAttribute('class', 'reactions'); + $divReactionLikes.setAttribute('class', 'reactionsLikes'); + + $imgHeart.setAttribute('src', 'img/heart.png'); + $imgHeart.setAttribute('alt', 'heart'); + + $inputReactionLikes.setAttribute('type', 'submit'); + $inputReactionLikes.setAttribute('name', 'inp_reaction'); + $inputReactionLikes.setAttribute('class', 'inp_reaction'); + $inputReactionLikes.setAttribute('id', 'inp_idReaction'); + $inputReactionLikes.setAttribute('value', 'Likes'); + + $divReactionEdit.setAttribute('class', 'reactionEdit'); + + $inputReactionEdit.setAttribute('type', 'submit'); + $inputReactionEdit.setAttribute('name', 'inp_reactionEdit'); + $inputReactionEdit.setAttribute('class', 'inp_reactionEdit'); + $inputReactionEdit.setAttribute('id', 'inp_idReactionEdit'); + $inputReactionEdit.setAttribute('value', 'Edit'); + + $divReactionDelete.setAttribute('class', 'reactionDelete'); + + $inputReactionDelete.setAttribute('type', 'submit'); + $inputReactionDelete.setAttribute('name', 'inp_reactionDelete'); + $inputReactionDelete.setAttribute('class', 'inp_reactionDelete'); + $inputReactionDelete.setAttribute('id', 'inp_idReactionDelete'); + $inputReactionDelete.setAttribute('value', 'Delete'); + + $divSignOffCat.setAttribute('class', 'signOff'); + + $btnSingOff.setAttribute('type', 'button'); + $btnSingOff.setAttribute('class', 'btnSignOff'); + $btnSingOff.setAttribute('value', 'SIGN OFF'); + + $imgWallCat.setAttribute('src', 'img/gato.png'); + $imgWallCat.setAttribute('alt', 'wallCat'); + + $formWall.addEventListener('submit', (e) => { + e.preventDefault(); + savePublic($inputPublication.value); + $formWall.reset(); + }); + + $btnSingOff.addEventListener('click', () => { + surfing('/'); + }); + + return $sectionW; +}; diff --git a/src/img/LogoGoogle.png b/src/img/LogoGoogle.png new file mode 100644 index 00000000..1adc4d95 Binary files /dev/null and b/src/img/LogoGoogle.png differ diff --git a/src/img/PrototipoAltaFidelidad0.1.png b/src/img/PrototipoAltaFidelidad0.1.png new file mode 100644 index 00000000..ec13b67b Binary files /dev/null and b/src/img/PrototipoAltaFidelidad0.1.png differ diff --git a/src/img/PrototipoAltaFidelidad0.2.png b/src/img/PrototipoAltaFidelidad0.2.png new file mode 100644 index 00000000..eafa127a Binary files /dev/null and b/src/img/PrototipoAltaFidelidad0.2.png differ diff --git a/src/img/PrototipoBajaFedelidad0.2.jpeg b/src/img/PrototipoBajaFedelidad0.2.jpeg new file mode 100644 index 00000000..a48c0761 Binary files /dev/null and b/src/img/PrototipoBajaFedelidad0.2.jpeg differ diff --git a/src/img/Vector 4.png b/src/img/Vector 4.png new file mode 100644 index 00000000..b7580010 Binary files /dev/null and b/src/img/Vector 4.png differ diff --git a/src/img/Vector 5.png b/src/img/Vector 5.png new file mode 100644 index 00000000..ca339c4f Binary files /dev/null and b/src/img/Vector 5.png differ diff --git a/src/img/Vector 6.png b/src/img/Vector 6.png new file mode 100644 index 00000000..bf8909cc Binary files /dev/null and b/src/img/Vector 6.png differ diff --git a/src/img/candado.png b/src/img/candado.png new file mode 100644 index 00000000..fe01ff0c Binary files /dev/null and b/src/img/candado.png differ diff --git a/src/img/gato.png b/src/img/gato.png new file mode 100644 index 00000000..17958436 Binary files /dev/null and b/src/img/gato.png differ diff --git a/src/img/heart.png b/src/img/heart.png new file mode 100644 index 00000000..ffe73a13 Binary files /dev/null and b/src/img/heart.png differ diff --git a/src/img/imgGoogle.png b/src/img/imgGoogle.png new file mode 100644 index 00000000..3a2e0c53 Binary files /dev/null and b/src/img/imgGoogle.png differ diff --git a/src/img/imgMuro.png b/src/img/imgMuro.png new file mode 100644 index 00000000..86752775 Binary files /dev/null and b/src/img/imgMuro.png differ diff --git a/src/img/loading.png b/src/img/loading.png new file mode 100644 index 00000000..1cbc652e Binary files /dev/null and b/src/img/loading.png differ diff --git a/src/img/logoNewMe.png b/src/img/logoNewMe.png new file mode 100644 index 00000000..c4f11921 Binary files /dev/null and b/src/img/logoNewMe.png differ diff --git a/src/img/prototipoBajaFidelidad0.1.jpeg b/src/img/prototipoBajaFidelidad0.1.jpeg new file mode 100644 index 00000000..e6f5fc22 Binary files /dev/null and b/src/img/prototipoBajaFidelidad0.1.jpeg differ diff --git a/src/index.html b/src/index.html index 788db3c9..887839c6 100644 --- a/src/index.html +++ b/src/index.html @@ -4,9 +4,15 @@ - Document + + + + NewMe +
+
+ \ No newline at end of file diff --git a/src/lib/firebase.js b/src/lib/firebase.js new file mode 100644 index 00000000..fc467f68 --- /dev/null +++ b/src/lib/firebase.js @@ -0,0 +1,49 @@ +// Import the functions you need from the SDKs you need +// eslint-disable-next-line import/no-unresolved +import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'; +// Consultas firebase +// eslint-disable-next-line import/no-unresolved +import { + getAuth, + signInWithEmailAndPassword, + createUserWithEmailAndPassword, + GoogleAuthProvider, + signInWithPopup, +} +// eslint-disable-next-line import/no-unresolved + from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'; + +import firebaseConfig from './firebaseconfig.js'; + +// Servivcios Firebase +// Initialize Firebase +export const app = initializeApp(firebaseConfig); +const auth = getAuth(app); +const provider = new GoogleAuthProvider(); + +export const exitConsult = (email, password) => { + signInWithEmailAndPassword(auth, email, password) + .then((userCredential) => { + const user = userCredential.user; + return user; + }) + .catch((error) => error); +}; + +export const authGoogle = async () => { + try { + const userResult = await signInWithPopup(auth, provider); + return userResult; + } catch (error) { + return error; + } +}; + +export const createUser = (email, password) => { + createUserWithEmailAndPassword(auth, email, password) + .then((userCredential) => { + const user = userCredential.user; + return user; + }) + .catch((error) => error); +}; diff --git a/src/lib/firebaseconfig.js b/src/lib/firebaseconfig.js new file mode 100644 index 00000000..8d395852 --- /dev/null +++ b/src/lib/firebaseconfig.js @@ -0,0 +1,10 @@ +// Your web app's Firebase configuration +// Configuración Firebase al inicializar sus servicios +export default { + apiKey: 'AIzaSyCxLhAk9jOlsC43X5vqcFhw-eBCbrELaI4', + authDomain: 'newme-13925.firebaseapp.com', + projectId: 'newme-13925', + storageBucket: 'newme-13925.appspot.com', + messagingSenderId: '214920308604', + appId: '1:214920308604:web:ebebebccc31d42002be6f9', +}; diff --git a/src/lib/firestore.js b/src/lib/firestore.js new file mode 100644 index 00000000..1374aa50 --- /dev/null +++ b/src/lib/firestore.js @@ -0,0 +1,14 @@ +// eslint-disable-next-line import/no-unresolved +import { getFirestore, collection, addDoc } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js'; +import { app } from './firebase.js'; + +const db = getFirestore(app); + +export const savePublic = async (coment) => { + try { + const docRef = await addDoc(collection(db, 'Publication'), { coment }); + console.log(docRef); + } catch (error) { + console.log(error); + } +}; diff --git a/src/lib/index.js b/src/lib/index.js index d1930899..182d880a 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,6 +1,6 @@ // aqui exportaras las funciones que necesites -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); -}; +// export const myFunction = () => { +// // aqui tu codigo +// console.log('Hola mundo!'); +// }; diff --git a/src/main.js b/src/main.js index ac27e91a..517700e9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,27 @@ // Este es el punto de entrada de tu aplicacion +// eslint-disable-next-line import/no-cycle +// import { myFunction } from './lib/index.js'; +// eslint-disable-next-line import/no-cycle +import { Login } from './component/login.js'; +// eslint-disable-next-line import/no-cycle +import { Home } from './component/home.js'; +// eslint-disable-next-line import/no-cycle +import { Register } from './component/register.js'; +// eslint-disable-next-line import/no-cycle +import { Wall } from './component/wall.js'; -import { myFunction } from './lib/index.js'; +const routes = { + '/': Home, // objeto que contiene las direcciones + '/Login': Login, + '/Register': Register, + '/Wall': Wall, +}; -myFunction(); +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 + return rootMain.replaceChildren(archivoNuevo[pathname]()); +}; +window.addEventListener('DOMContentLoaded', () => surfing(window.location.pathname)); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..29ee3aba --- /dev/null +++ b/src/style.css @@ -0,0 +1,566 @@ +:root { + --colorOrange: #FF9F00; + --colorTurquois: #03A7BB; + --colorDarkGrey: #C4C4C4; + --colorBlueLight: #A9D2F0; + --colorOlive: #C5D2B0; + --colorWhite: #FFF; + --colorBlack: #000000; + --colorGreen: #6ED788; + --colorForm: #546E85; + /*---------- colors-----------------*/ + --fFamilyOleo: 'Oleo Script', cursive; + /*-------------tipos de letras-------------*/ +} + +html { + box-sizing: border-box; + font-size: 16px; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + background-color: var(--colorTurquois); +} + +img { + max-width: 100%; +} + +.home { + margin-top: 1rem; +} + +.logo { + padding: 2.2rem 2.2rem 0; + margin: 0; +} + +.welcome { + padding: 3rem 3.6rem 0; + text-align: center; +} + +.welcome h1 { + font-family: var(--fFamilyOleo); + margin: 0; + font-size: 3.2rem; + line-height: 1; + color: var(--colorWhite); + padding: 0 0.5rem; + margin-bottom: 3rem; +} + +.welcome img { + max-width: 4.5rem; + margin-bottom: -0.5rem; +} + +.btn_click { + background: none; + width: 11rem; + border-radius: 1.4rem; + border: thick solid var(--colorOrange); + height: 3.6rem; + color: var(--colorWhite); + font-weight: bold; +} +/*------------------------CSS HOME----------------------------------*/ + +.figureLogin{ + padding: 2rem 3rem 0; +} +.sloganLogin{ + display: none; +} +.formLogin{ + display: flex; + flex-direction: column; + align-items: center; +} +.problemInput{ + background-color: var(--colorOrange); + width: 55%; + height: 13vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border-radius: 20px; + margin-top: 4vh; +} +.emailUser{ + width: 85%; + height: 4vh; + border-radius: 25px; + border: none; + cursor: pointer; + text-indent: 10%; +} +.passwordUser{ + width: 85%; + height: 4vh; + border-radius: 25px; + border: none; + cursor: pointer; + text-indent: 10%; +} +::placeholder{ + text-align: center; +} +.ContainerCat{ + width: 100%; + display: flex; + flex-direction: column; + margin-top: 10vh; + align-items: center; +} +.btn_signUpCat{ + background-color: #ff9f00; + width: 35%; + height: 3.5vh; + border-radius: 20px; + border: none; + cursor: pointer; +} +.ContainerCat img{ + max-width: 4.5rem; +} +.containerSpan{ + text-align: center; + margin-top: 7vh; + position: relative; +} +.option{ + color: white; + font-size: 0.7rem; + font-family: system-ui; +} +.option::before, +.option::after{ + content: ""; + display: block; + width: 30%; + height: 1px; + background-color: white; + position: absolute; +} + +.option:before{ + right: 0; + top: 10px; + margin-right: 15px; +} +.option::after{ + top: 10px; + margin-left: 15px; +} +.ContainerReg{ + text-align: center; + position: relative; +} +.btn_google{ + background: #ff9f00; + height: 4vh; + width: 46%; + margin-top: 5vh; + color: white; + border: none; + border-radius: 20px; +} +.log_google img{ + position: absolute; + width: 1.8rem; + height: auto; + left: 29%; + top: 45px; +} +.register{ + color: white; + font-size: 0.85rem; + font-family: system-ui; +} +.btn_signUp{ + background: none; + border: none; + color: #f2a339; + font-size: 1.1rem; + cursor: pointer; + font-weight: bolder; + font-family: system-ui; +} +/*------------------------CSS LOGIN----------------------------------*/ +.btnBack{ + background-color: transparent; + border: none; + color: var(--colorWhite); + padding-left: 1rem; + padding-top: 1rem; + font-weight: 700; +} +.welcomeContainer{ + padding: 2rem 6rem 0; + color: var(--colorWhite); + text-align: center; + font-family: monospace; + line-height: 1.5; +} +.welcomeContainer h2{ + font-size: 2.2rem; +} +.logoNewF{ + display: none; +} +.containerInputsRegister{ + background-color: var(--colorOrange); + width: 55%; + height: 28vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border-radius: 20px; +} +.containerInputsRegister input{ + width: 85%; + height: 4vh; + border-radius: 25px; + border: none; + cursor: pointer; + text-indent: 10%; +} +.formRegister{ + display: flex; + flex-direction: column; + align-items: center; +} +.containerCatReg{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 6vh; +} +.containerCatReg img{ + max-width: 4.5rem ; +} +.forgotP{ + background-color: transparent; + color: white; + border: none; + margin-top: 5vh; + font-family: system-ui; + font-weight: bolder; + cursor: pointer; +} +/*------------------------CSS REGISTER----------------------------------*/ + +.Saludo{ + width: 100%; + height: 15vh; + display: flex; + justify-content: center; + align-items: center; + gap: 1rem 2rem; +} +.Saludo img{ + width: 20%; +} +.Saludo h2{ + color: white; + font-family: system-ui; +} +.ContainerOrange{ + height: 39vh; + width: 100vw; + background-color: #FF9F00; + display: flex; + flex-direction: row-reverse; +} +.rightOrange{ + width: 35vw; +} +.imagenWall{ + display: flex; + justify-content: flex-end; +} +.imagenWall img{ + width: 90%; +} +.leftOrange{ + width: 65vw; +} +.hPost{ + width: 82%; + margin-left: 9%; +} +.hPost h3{ + color: white; + font-size: 10vw; + text-align: end; + margin-top: 7%; + font-family: system-ui; + line-height: 5vh; +} +.ContFormWall{ + height: 12vh; + display: flex; + justify-content: end; +} +.formWall{ + display: flex; + justify-content: end; + flex-direction: column; + align-items: center; +} +.inp_publication{ + background-color: #efefef; + border-radius: 17px; + height: 9vh; + border: none; + outline: none; +} +.btn_send{ + background-color: var(--colorTurquois); + border: none; + border-radius: 5px; + color: var(--colorWhite); + margin-top: 6px; +} +.contPublic{ + padding: 5vh 10% 0px 10%; + width: 100%; +} +.publicUser{ + width: 100%; +} +.div_publiU{ + height: 20vh; + background-color: var(--colorDarkGrey); + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} +.reactions{ + background-color: var(--colorWhite); + display: grid; + grid-template-rows: 41px; + grid-template-columns: repeat(3, 33.3%); + justify-items: center; + align-items: center; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; +} +.reactionsLikes{ + display: flex; + gap: 8px; + justify-content: center; +} +.reactionsLikes img{ + width: 18%; +} +.signOff{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 21px 0 21px; +} +.btnSignOff{ + background-color: transparent; + border: none; + cursor: pointer; + color: var(--colorWhite); + font-weight: bold; +} +.signOff img{ + width: 20%; +} +.reactions div input{ + background-color: transparent; + border: none; + font-weight: bold; + cursor: pointer; +} + + +@media screen and (min-width: 500px) { + main { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + figure { + position: relative; + } + + .welcome { + position: relative; + padding: 0 14rem 0 0; + } + + .welcome::after { + position: absolute; + content: ""; + background-image: url("img/Vector\ 6.png"); + background-repeat: no-repeat; + display: block; + width: 560px; + height: 241px; + top: 30vh; + left: -14vw; + } + .logo::after { + position: absolute; + content: ""; + background-image: url("img/Vector\ 4.png"); + display: block; + width: 349px; + height: 372px; + top: -29vh; + left: -10vw; + } + + .logo::before { + position: absolute; + content: ""; + background-image: url(img/Vector\ 5.png); + background-repeat: no-repeat; + display: block; + width: 349px; + height: 372px; + top: -23vh; + right: -50vw; + } + + .home { + display: flex; + justify-content: center; + align-items: center; + } + + .home .logo_container { + width: 50%; + } + + .c_logo { + text-align: end; + } + + .c_logo img { + width: 75%; + } + .sectionLogin{ + width: 63%; + display: flex; + justify-content: center; + align-items: center; + position: absolute + } + + .logoNewM{ + margin: 0px; + width: 60%; + padding: 0px; + } + + .figureLogin img{ + width: 91%; + padding: 2rem 3rem 1rem 0; + margin: 0px; + } + .figureLogin{ + padding: 0rem 0rem 0; + } + .sloganLogin{ + display: block; + text-align: start; + font-family: var(--fFamilyOleo); + margin: 0; + font-size: 3.2rem; + line-height: 1; + color: var(--colorWhite); + padding: 0 0 0 2rem; + margin-bottom: 3rem; + } + + .containerF{ + width: 50%; + height: 80vh; + background: linear-gradient(179.98deg, #03a7bb 0.02%, #3fa8b14a 0.03%, rgba(0, 0, 0, 0) 94.5%), linear-gradient(180deg, rgb(76 101 115 / 40%) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 255, 255, 0.1); + box-shadow: 0px 4px 24px -1px rgb(0 0 0 / 20%), inset 5px 5px 4px rgb(88 124 155 / 20%); + border-radius: 25px; + } + + .containerFormLogin{ + margin-top: 5vh; + } + + .forgotP{ + background-color: transparent; + color: white; + border: none; + margin-top: 5vh; + font-family: system-ui; + font-weight: bolder; + cursor: pointer; + } + + .problemInput{ + background-color: transparent; + width: 76%; + } + + .emailUser, .passwordUser{ + height: 5vh; + } + + .containerSpan{ + margin-top: 3vh; + } + + .ContainerReg{ + margin-top: 4vh; + } + + .btn_google{ + height: 5vh; + font-weight: bolder; + } + .welcomeContainer{ + display: none; + } + + .logoNewF{ + display: block; + } + + .btnBack { + position: relative; + top: 37vh; + } + .containerInputsRegister{ + background: transparent; + width: 76%; + margin-top: 2rem + } + + .containerInputsRegister input{ + width: 85%; + height: 5vh; + border-radius: 25px; + border: none; + cursor: pointer + } + .log_google img { + width: 1.5rem; + left: 23%; + top: 40px; + } +} diff --git a/src/validation.js b/src/validation.js new file mode 100644 index 00000000..e69de29b diff --git a/test/firebase.spec.js b/test/firebase.spec.js new file mode 100644 index 00000000..293ebb3b --- /dev/null +++ b/test/firebase.spec.js @@ -0,0 +1,2 @@ +// importamos la funcion que vamos a testear +// import { createUser } from '../src/lib/firebase.js'; diff --git a/test/index.spec.js b/test/index.spec.js deleted file mode 100644 index 91f11a33..00000000 --- a/test/index.spec.js +++ /dev/null @@ -1,8 +0,0 @@ -// importamos la funcion que vamos a testear -import { myFunction } from '../src/lib/index'; - -describe('myFunction', () => { - it('debería ser una función', () => { - expect(typeof myFunction).toBe('function'); - }); -});