From ae62c7990749d7c6a8293aed7c5a056149465dc6 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 23 Aug 2020 23:28:12 -0300 Subject: [PATCH 01/59] app structure initialized --- package-lock.json | 333 +++++++--- package.json | 3 + src/app/app-routing.module.ts | 15 +- src/app/app.component.html | 574 ++---------------- src/app/app.component.scss | 10 + src/app/app.module.ts | 24 +- .../article-form/article-form.component.html | 1 + .../article-form/article-form.component.scss | 0 .../article-form.component.spec.ts | 25 + .../article-form/article-form.component.ts | 15 + .../article-page/article-page.component.html | 1 + .../article-page/article-page.component.scss | 0 .../article-page.component.spec.ts | 25 + .../article-page/article-page.component.ts | 15 + .../articles-list.component.html | 1 + .../articles-list.component.scss | 0 .../articles-list.component.spec.ts | 25 + .../articles-list/articles-list.component.ts | 15 + .../comment-form/comment-form.component.html | 1 + .../comment-form/comment-form.component.scss | 0 .../comment-form.component.spec.ts | 25 + .../comment-form/comment-form.component.ts | 15 + .../comments-list.component.html | 1 + .../comments-list.component.scss | 0 .../comments-list.component.spec.ts | 25 + .../comments-list/comments-list.component.ts | 15 + src/app/error-page/error-page.component.html | 1 + src/app/error-page/error-page.component.scss | 0 .../error-page/error-page.component.spec.ts | 25 + src/app/error-page/error-page.component.ts | 15 + src/app/home-page/home-page.component.html | 1 + src/app/home-page/home-page.component.scss | 0 src/app/home-page/home-page.component.spec.ts | 25 + src/app/home-page/home-page.component.ts | 15 + src/app/signin/signin.component.html | 1 + src/app/signin/signin.component.scss | 0 src/app/signin/signin.component.spec.ts | 25 + src/app/signin/signin.component.ts | 15 + src/app/signup/signup.component.html | 1 + src/app/signup/signup.component.scss | 0 src/app/signup/signup.component.spec.ts | 25 + src/app/signup/signup.component.ts | 15 + src/index.html | 2 +- src/polyfills.ts | 4 + src/styles.scss | 3 + 45 files changed, 733 insertions(+), 604 deletions(-) create mode 100644 src/app/article-form/article-form.component.html create mode 100644 src/app/article-form/article-form.component.scss create mode 100644 src/app/article-form/article-form.component.spec.ts create mode 100644 src/app/article-form/article-form.component.ts create mode 100644 src/app/article-page/article-page.component.html create mode 100644 src/app/article-page/article-page.component.scss create mode 100644 src/app/article-page/article-page.component.spec.ts create mode 100644 src/app/article-page/article-page.component.ts create mode 100644 src/app/articles-list/articles-list.component.html create mode 100644 src/app/articles-list/articles-list.component.scss create mode 100644 src/app/articles-list/articles-list.component.spec.ts create mode 100644 src/app/articles-list/articles-list.component.ts create mode 100644 src/app/comment-form/comment-form.component.html create mode 100644 src/app/comment-form/comment-form.component.scss create mode 100644 src/app/comment-form/comment-form.component.spec.ts create mode 100644 src/app/comment-form/comment-form.component.ts create mode 100644 src/app/comments-list/comments-list.component.html create mode 100644 src/app/comments-list/comments-list.component.scss create mode 100644 src/app/comments-list/comments-list.component.spec.ts create mode 100644 src/app/comments-list/comments-list.component.ts create mode 100644 src/app/error-page/error-page.component.html create mode 100644 src/app/error-page/error-page.component.scss create mode 100644 src/app/error-page/error-page.component.spec.ts create mode 100644 src/app/error-page/error-page.component.ts create mode 100644 src/app/home-page/home-page.component.html create mode 100644 src/app/home-page/home-page.component.scss create mode 100644 src/app/home-page/home-page.component.spec.ts create mode 100644 src/app/home-page/home-page.component.ts create mode 100644 src/app/signin/signin.component.html create mode 100644 src/app/signin/signin.component.scss create mode 100644 src/app/signin/signin.component.spec.ts create mode 100644 src/app/signin/signin.component.ts create mode 100644 src/app/signup/signup.component.html create mode 100644 src/app/signup/signup.component.scss create mode 100644 src/app/signup/signup.component.spec.ts create mode 100644 src/app/signup/signup.component.ts diff --git a/package-lock.json b/package-lock.json index 512f702..f20b7f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -470,6 +470,213 @@ "integrity": "sha512-T+/0X2VnmgW/vzynqYTVv29qtebNvrCB/yJqtNIlqXvBjcB8XRRwZPDZvRyl5BiwEPSsJnjdRFNH9krQHxYp+g==", "dev": true }, + "@angular/localize": { + "version": "9.1.12", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-9.1.12.tgz", + "integrity": "sha512-31OalfES+dLrxN0VXCxxtT5dWoOSlQ40KYmzMS8X+mQ20gy9eFiZK4qf3DEq3JPqRltBMdEDnwR38uGIMAu2gQ==", + "requires": { + "@babel/core": "7.8.3", + "glob": "7.1.2", + "yargs": "15.3.0" + }, + "dependencies": { + "@babel/core": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz", + "integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==", + "requires": { + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.8.3", + "@babel/helpers": "^7.8.3", + "@babel/parser": "^7.8.3", + "@babel/template": "^7.8.3", + "@babel/traverse": "^7.8.3", + "@babel/types": "^7.8.3", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.0", + "lodash": "^4.17.13", + "resolve": "^1.3.2", + "semver": "^5.4.1", + "source-map": "^0.5.0" + } + }, + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" + }, + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "requires": { + "p-locate": "^4.1.0" + } + }, + "p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "requires": { + "p-limit": "^2.2.0" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" + }, + "require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + }, + "string-width": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", + "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + } + }, + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "requires": { + "ansi-regex": "^5.0.0" + } + }, + "wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, + "yargs": { + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.0.tgz", + "integrity": "sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==", + "requires": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.0" + } + }, + "yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "requires": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + } + } + } + }, "@angular/platform-browser": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.1.tgz", @@ -489,7 +696,6 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", - "dev": true, "requires": { "@babel/highlight": "^7.8.3" } @@ -555,7 +761,6 @@ "version": "7.9.3", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.3.tgz", "integrity": "sha512-RpxM252EYsz9qLUIq6F7YJyK1sv0wWDBFuztfDGWaQKzHjqDHysxSiRUpA/X9jmfqo+WzkAVKFaUily5h+gDCQ==", - "dev": true, "requires": { "@babel/types": "^7.9.0", "jsesc": "^2.5.1", @@ -566,8 +771,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -647,7 +851,6 @@ "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz", "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==", - "dev": true, "requires": { "@babel/helper-get-function-arity": "^7.8.3", "@babel/template": "^7.8.3", @@ -658,7 +861,6 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", - "dev": true, "requires": { "@babel/types": "^7.8.3" } @@ -768,7 +970,6 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==", - "dev": true, "requires": { "@babel/types": "^7.8.3" } @@ -776,8 +977,7 @@ "@babel/helper-validator-identifier": { "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz", - "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==", - "dev": true + "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==" }, "@babel/helper-wrap-function": { "version": "7.8.3", @@ -795,7 +995,6 @@ "version": "7.9.2", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz", "integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==", - "dev": true, "requires": { "@babel/template": "^7.8.3", "@babel/traverse": "^7.9.0", @@ -806,7 +1005,6 @@ "version": "7.9.0", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz", "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.9.0", "chalk": "^2.0.0", @@ -816,8 +1014,7 @@ "@babel/parser": { "version": "7.9.4", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz", - "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==", - "dev": true + "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==" }, "@babel/plugin-proposal-async-generator-functions": { "version": "7.8.3", @@ -1400,7 +1597,6 @@ "version": "7.8.6", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz", "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==", - "dev": true, "requires": { "@babel/code-frame": "^7.8.3", "@babel/parser": "^7.8.6", @@ -1411,7 +1607,6 @@ "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz", "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==", - "dev": true, "requires": { "@babel/code-frame": "^7.8.3", "@babel/generator": "^7.9.5", @@ -1428,7 +1623,6 @@ "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz", "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==", - "dev": true, "requires": { "@babel/types": "^7.9.5", "jsesc": "^2.5.1", @@ -1439,8 +1633,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -1448,7 +1641,6 @@ "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.9.5", "lodash": "^4.17.13", @@ -1496,6 +1688,11 @@ } } }, + "@ng-bootstrap/ng-bootstrap": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-6.2.0.tgz", + "integrity": "sha512-wqwhnJFyEwvzWQJjXrEt+7oBTSvu2qPbdYvUFYhDVzOJLWB5M7YEhDAkMrfHQJ0pZNBMGr580FqYue+XiURY0Q==" + }, "@ngtools/webpack": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.1.tgz", @@ -1560,8 +1757,7 @@ "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", - "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", - "dev": true + "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==" }, "@types/events": { "version": "3.0.0", @@ -1965,7 +2161,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -2286,8 +2481,7 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "base": { "version": "0.11.2", @@ -2492,11 +2686,15 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz", + "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2776,8 +2974,7 @@ "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "dev": true + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, "caniuse-api": { "version": "3.0.0", @@ -2813,7 +3010,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -3051,7 +3247,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -3059,8 +3254,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { "version": "1.5.3", @@ -3167,8 +3361,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "concat-stream": { "version": "1.6.2", @@ -3248,7 +3441,6 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", - "dev": true, "requires": { "safe-buffer": "~5.1.1" } @@ -3795,7 +3987,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", - "dev": true, "requires": { "ms": "^2.1.1" } @@ -3809,8 +4000,7 @@ "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", - "dev": true + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" }, "decode-uri-component": { "version": "0.2.0", @@ -4191,8 +4381,7 @@ "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" }, "emojis-list": { "version": "3.0.0", @@ -4439,8 +4628,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "eslint-scope": { "version": "4.0.3", @@ -5086,8 +5274,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { "version": "2.1.2", @@ -5111,8 +5298,7 @@ "gensync": { "version": "1.0.0-beta.1", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", - "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==", - "dev": true + "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==" }, "get-caller-file": { "version": "1.0.3", @@ -5182,8 +5368,7 @@ "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" }, "globby": { "version": "7.1.1", @@ -5279,8 +5464,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.1", @@ -5685,7 +5869,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -5694,8 +5877,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "ini": { "version": "1.3.5", @@ -6392,8 +6574,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.13.1", @@ -6414,8 +6595,7 @@ "jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" }, "json-parse-better-errors": { "version": "1.0.2", @@ -6451,7 +6631,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", - "dev": true, "requires": { "minimist": "^1.2.5" } @@ -6740,8 +6919,7 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash.clonedeep": { "version": "4.5.0", @@ -7234,7 +7412,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7242,8 +7419,7 @@ "minimist": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, "minipass": { "version": "3.1.1", @@ -7367,8 +7543,7 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "multicast-dns": { "version": "6.2.3", @@ -7813,7 +7988,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, "requires": { "wrappy": "1" } @@ -8326,8 +8500,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { "version": "1.0.2", @@ -8344,8 +8517,7 @@ "path-parse": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" }, "path-to-regexp": { "version": "0.1.7", @@ -9751,8 +9923,7 @@ "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", - "dev": true + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" }, "require-main-filename": { "version": "1.0.1", @@ -9770,7 +9941,6 @@ "version": "1.15.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", - "dev": true, "requires": { "path-parse": "^1.0.6" } @@ -9893,8 +10063,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safe-regex": { "version": "1.1.0", @@ -10196,8 +10365,7 @@ "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", - "dev": true + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, "set-immediate-shim": { "version": "1.0.1", @@ -11196,7 +11364,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -11421,8 +11588,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, "to-object-path": { "version": "0.3.0", @@ -13690,8 +13856,7 @@ "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", - "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", - "dev": true + "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" }, "wordwrap": { "version": "0.0.3", @@ -13774,8 +13939,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "ws": { "version": "6.2.1", @@ -13817,8 +13981,7 @@ "y18n": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", - "dev": true + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" }, "yallist": { "version": "4.0.0", diff --git a/package.json b/package.json index 72b4bd7..4b3e29d 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,12 @@ "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", "@angular/forms": "~9.1.1", + "@angular/localize": "~9.1.1", "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", + "@ng-bootstrap/ng-bootstrap": "^6.2.0", + "bootstrap": "^4.5.2", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..daae57c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,21 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { HomePageComponent } from './home-page/home-page.component'; +import { SigninComponent } from './signin/signin.component'; +import { SignupComponent } from './signup/signup.component'; +import { ErrorPageComponent } from './error-page/error-page.component'; +import { ArticleFormComponent } from './article-form/article-form.component'; +import { ArticlePageComponent } from './article-page/article-page.component'; -const routes: Routes = []; +const routes: Routes = [ + {path:'home', component: HomePageComponent}, + {path:'login', component: SigninComponent}, + {path:'register', component: SignupComponent}, + {path:'editor', component: ArticleFormComponent}, + {path:'article', component: ArticlePageComponent}, + {path:'**', component: ErrorPageComponent} +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index e48d8c1..26b2ff7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,534 +1,78 @@ - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - +
+ +
+ + + -
-
- - New Component -
-
- + - Angular Material -
-
- - Add PWA Support -
+ + + + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..ea0a162 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,10 @@ +.text-link { + color: #007adf !important; + } + .text-link:hover, .text-link:active { + color: #008cff !important; + } + + .bg-navbar-custom{ + background-color: #1393fc; + } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..c09e930 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,14 +3,34 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { HomePageComponent } from './home-page/home-page.component'; +import { SignupComponent } from './signup/signup.component'; +import { SigninComponent } from './signin/signin.component'; +import { ErrorPageComponent } from './error-page/error-page.component'; +import { ArticlesListComponent } from './articles-list/articles-list.component'; +import { CommentsListComponent } from './comments-list/comments-list.component'; +import { CommentFormComponent } from './comment-form/comment-form.component'; +import { ArticleFormComponent } from './article-form/article-form.component'; +import { ArticlePageComponent } from './article-page/article-page.component'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ - AppComponent + AppComponent, + HomePageComponent, + SignupComponent, + SigninComponent, + ErrorPageComponent, + ArticlesListComponent, + CommentsListComponent, + CommentFormComponent, + ArticleFormComponent, + ArticlePageComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + NgbModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html new file mode 100644 index 0000000..9e96d46 --- /dev/null +++ b/src/app/article-form/article-form.component.html @@ -0,0 +1 @@ +

article-form works!

diff --git a/src/app/article-form/article-form.component.scss b/src/app/article-form/article-form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/article-form/article-form.component.spec.ts b/src/app/article-form/article-form.component.spec.ts new file mode 100644 index 0000000..e90d9ac --- /dev/null +++ b/src/app/article-form/article-form.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArticleFormComponent } from './article-form.component'; + +describe('ArticleFormComponent', () => { + let component: ArticleFormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ArticleFormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ArticleFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts new file mode 100644 index 0000000..0d7ec11 --- /dev/null +++ b/src/app/article-form/article-form.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-article-form', + templateUrl: './article-form.component.html', + styleUrls: ['./article-form.component.scss'] +}) +export class ArticleFormComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/article-page/article-page.component.html b/src/app/article-page/article-page.component.html new file mode 100644 index 0000000..b598de6 --- /dev/null +++ b/src/app/article-page/article-page.component.html @@ -0,0 +1 @@ +

article-page works!

diff --git a/src/app/article-page/article-page.component.scss b/src/app/article-page/article-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/article-page/article-page.component.spec.ts b/src/app/article-page/article-page.component.spec.ts new file mode 100644 index 0000000..f22db81 --- /dev/null +++ b/src/app/article-page/article-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArticlePageComponent } from './article-page.component'; + +describe('ArticlePageComponent', () => { + let component: ArticlePageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ArticlePageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ArticlePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/article-page/article-page.component.ts b/src/app/article-page/article-page.component.ts new file mode 100644 index 0000000..525f2ef --- /dev/null +++ b/src/app/article-page/article-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-article-page', + templateUrl: './article-page.component.html', + styleUrls: ['./article-page.component.scss'] +}) +export class ArticlePageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/articles-list/articles-list.component.html b/src/app/articles-list/articles-list.component.html new file mode 100644 index 0000000..8098e3a --- /dev/null +++ b/src/app/articles-list/articles-list.component.html @@ -0,0 +1 @@ +

articles-list works!

diff --git a/src/app/articles-list/articles-list.component.scss b/src/app/articles-list/articles-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/articles-list/articles-list.component.spec.ts b/src/app/articles-list/articles-list.component.spec.ts new file mode 100644 index 0000000..91aa8f2 --- /dev/null +++ b/src/app/articles-list/articles-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArticlesListComponent } from './articles-list.component'; + +describe('ArticlesListComponent', () => { + let component: ArticlesListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ArticlesListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ArticlesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/articles-list/articles-list.component.ts b/src/app/articles-list/articles-list.component.ts new file mode 100644 index 0000000..6f8f896 --- /dev/null +++ b/src/app/articles-list/articles-list.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-articles-list', + templateUrl: './articles-list.component.html', + styleUrls: ['./articles-list.component.scss'] +}) +export class ArticlesListComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/comment-form/comment-form.component.html b/src/app/comment-form/comment-form.component.html new file mode 100644 index 0000000..5634ab0 --- /dev/null +++ b/src/app/comment-form/comment-form.component.html @@ -0,0 +1 @@ +

comment-form works!

diff --git a/src/app/comment-form/comment-form.component.scss b/src/app/comment-form/comment-form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/comment-form/comment-form.component.spec.ts b/src/app/comment-form/comment-form.component.spec.ts new file mode 100644 index 0000000..57c0f75 --- /dev/null +++ b/src/app/comment-form/comment-form.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CommentFormComponent } from './comment-form.component'; + +describe('CommentFormComponent', () => { + let component: CommentFormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CommentFormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommentFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/comment-form/comment-form.component.ts b/src/app/comment-form/comment-form.component.ts new file mode 100644 index 0000000..22212b0 --- /dev/null +++ b/src/app/comment-form/comment-form.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-comment-form', + templateUrl: './comment-form.component.html', + styleUrls: ['./comment-form.component.scss'] +}) +export class CommentFormComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/comments-list/comments-list.component.html b/src/app/comments-list/comments-list.component.html new file mode 100644 index 0000000..9fe8944 --- /dev/null +++ b/src/app/comments-list/comments-list.component.html @@ -0,0 +1 @@ +

comments-list works!

diff --git a/src/app/comments-list/comments-list.component.scss b/src/app/comments-list/comments-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/comments-list/comments-list.component.spec.ts b/src/app/comments-list/comments-list.component.spec.ts new file mode 100644 index 0000000..7d816e5 --- /dev/null +++ b/src/app/comments-list/comments-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CommentsListComponent } from './comments-list.component'; + +describe('CommentsListComponent', () => { + let component: CommentsListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CommentsListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommentsListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/comments-list/comments-list.component.ts b/src/app/comments-list/comments-list.component.ts new file mode 100644 index 0000000..42ff010 --- /dev/null +++ b/src/app/comments-list/comments-list.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-comments-list', + templateUrl: './comments-list.component.html', + styleUrls: ['./comments-list.component.scss'] +}) +export class CommentsListComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/error-page/error-page.component.html b/src/app/error-page/error-page.component.html new file mode 100644 index 0000000..7e9d75a --- /dev/null +++ b/src/app/error-page/error-page.component.html @@ -0,0 +1 @@ +

error-page works!

diff --git a/src/app/error-page/error-page.component.scss b/src/app/error-page/error-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/error-page/error-page.component.spec.ts b/src/app/error-page/error-page.component.spec.ts new file mode 100644 index 0000000..faaa44d --- /dev/null +++ b/src/app/error-page/error-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ErrorPageComponent } from './error-page.component'; + +describe('ErrorPageComponent', () => { + let component: ErrorPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ErrorPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ErrorPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/error-page/error-page.component.ts b/src/app/error-page/error-page.component.ts new file mode 100644 index 0000000..34f4b9f --- /dev/null +++ b/src/app/error-page/error-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-error-page', + templateUrl: './error-page.component.html', + styleUrls: ['./error-page.component.scss'] +}) +export class ErrorPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html new file mode 100644 index 0000000..7454417 --- /dev/null +++ b/src/app/home-page/home-page.component.html @@ -0,0 +1 @@ +

home-page works!

diff --git a/src/app/home-page/home-page.component.scss b/src/app/home-page/home-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home-page/home-page.component.spec.ts b/src/app/home-page/home-page.component.spec.ts new file mode 100644 index 0000000..e180332 --- /dev/null +++ b/src/app/home-page/home-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomePageComponent } from './home-page.component'; + +describe('HomePageComponent', () => { + let component: HomePageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomePageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts new file mode 100644 index 0000000..38a0d8f --- /dev/null +++ b/src/app/home-page/home-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home-page', + templateUrl: './home-page.component.html', + styleUrls: ['./home-page.component.scss'] +}) +export class HomePageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/signin/signin.component.html b/src/app/signin/signin.component.html new file mode 100644 index 0000000..cc1a2e3 --- /dev/null +++ b/src/app/signin/signin.component.html @@ -0,0 +1 @@ +

signin works!

diff --git a/src/app/signin/signin.component.scss b/src/app/signin/signin.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/signin/signin.component.spec.ts b/src/app/signin/signin.component.spec.ts new file mode 100644 index 0000000..c64b0b2 --- /dev/null +++ b/src/app/signin/signin.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SigninComponent } from './signin.component'; + +describe('SigninComponent', () => { + let component: SigninComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SigninComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SigninComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/signin/signin.component.ts b/src/app/signin/signin.component.ts new file mode 100644 index 0000000..d0789c3 --- /dev/null +++ b/src/app/signin/signin.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-signin', + templateUrl: './signin.component.html', + styleUrls: ['./signin.component.scss'] +}) +export class SigninComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html new file mode 100644 index 0000000..c9ce9ad --- /dev/null +++ b/src/app/signup/signup.component.html @@ -0,0 +1 @@ +

signup works!

diff --git a/src/app/signup/signup.component.scss b/src/app/signup/signup.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/signup/signup.component.spec.ts b/src/app/signup/signup.component.spec.ts new file mode 100644 index 0000000..43e46a5 --- /dev/null +++ b/src/app/signup/signup.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SignupComponent } from './signup.component'; + +describe('SignupComponent', () => { + let component: SignupComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SignupComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SignupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts new file mode 100644 index 0000000..d59051e --- /dev/null +++ b/src/app/signup/signup.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-signup', + templateUrl: './signup.component.html', + styleUrls: ['./signup.component.scss'] +}) +export class SignupComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/index.html b/src/index.html index 62a7817..c524de2 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - NgPeti + RealWorld App diff --git a/src/polyfills.ts b/src/polyfills.ts index 03711e5..01e24d6 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -1,3 +1,7 @@ +/*************************************************************************************************** + * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. + */ +import '@angular/localize/init'; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..4bb3091 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +/* Importing Bootstrap SCSS file. */ +@import '~bootstrap/scss/bootstrap'; From dbe4308db145fbd48aaf9418716e86925bc25fe6 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Mon, 24 Aug 2020 16:51:54 -0300 Subject: [PATCH 02/59] test --- src/app/article-form/article-form.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html index 9e96d46..2c7d8a8 100644 --- a/src/app/article-form/article-form.component.html +++ b/src/app/article-form/article-form.component.html @@ -1 +1,2 @@

article-form works!

+

test

From 77a974a211548133e2ed57900835400927835e53 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 25 Aug 2020 13:05:35 -0300 Subject: [PATCH 03/59] interfaces --- src/app/model/article.ts | 23 +++++++++++++++++++++++ src/app/model/author.ts | 6 ++++++ src/app/model/comment.ts | 9 +++++++++ src/app/model/user.ts | 7 +++++++ 4 files changed, 45 insertions(+) create mode 100644 src/app/model/article.ts create mode 100644 src/app/model/author.ts create mode 100644 src/app/model/comment.ts create mode 100644 src/app/model/user.ts diff --git a/src/app/model/article.ts b/src/app/model/article.ts new file mode 100644 index 0000000..38b963a --- /dev/null +++ b/src/app/model/article.ts @@ -0,0 +1,23 @@ +import { Author } from './author'; + +export interface SingleArticle { + article: Article; +} + +export interface MultipleArticles { + articles: Article[]; + articlesCount: number; +} + +export interface Article { + slug: string; + title: string; + description: string; + body: string; + tagList: string[]; + createdAt: Date; + updatedAt: Date; + favorited: boolean; + favoritesCount: number; + author: Author; +} \ No newline at end of file diff --git a/src/app/model/author.ts b/src/app/model/author.ts new file mode 100644 index 0000000..593ffa0 --- /dev/null +++ b/src/app/model/author.ts @@ -0,0 +1,6 @@ +export interface Author { + username: string; + bio: string; + image: string; + following: boolean; +} \ No newline at end of file diff --git a/src/app/model/comment.ts b/src/app/model/comment.ts new file mode 100644 index 0000000..1a43b96 --- /dev/null +++ b/src/app/model/comment.ts @@ -0,0 +1,9 @@ +import { Author } from './author' + +export interface Comment { + id: number; + createdAt: Date; + updatedAt: Date; + body: string; + author: Author; +} \ No newline at end of file diff --git a/src/app/model/user.ts b/src/app/model/user.ts new file mode 100644 index 0000000..ef0c3ea --- /dev/null +++ b/src/app/model/user.ts @@ -0,0 +1,7 @@ +export interface User { + email: string; + token: string; + username: string; + bio: string; + image: string; +} \ No newline at end of file From dd238a7cc4c62ce2e64603a598f65364b4d6c5a8 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 25 Aug 2020 13:14:01 -0300 Subject: [PATCH 04/59] http service --- src/app/http.service.spec.ts | 16 +++++++++++ src/app/http.service.ts | 54 ++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/app/http.service.spec.ts create mode 100644 src/app/http.service.ts diff --git a/src/app/http.service.spec.ts b/src/app/http.service.spec.ts new file mode 100644 index 0000000..7b345d4 --- /dev/null +++ b/src/app/http.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { HttpService } from './http.service'; + +describe('HttpService', () => { + let service: HttpService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(HttpService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/http.service.ts b/src/app/http.service.ts new file mode 100644 index 0000000..71ca0e9 --- /dev/null +++ b/src/app/http.service.ts @@ -0,0 +1,54 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { MultipleArticles } from './model/article'; +import { Author } from './model/author'; + +@Injectable({ + providedIn: 'root' +}) +export class HttpService { + + readonly baseUrl = 'https://conduit.productionready.io/api/'; + + constructor(private http: HttpClient) { } + + getAllArticles(){ + const url = `${this.baseUrl}articles?limit=100`; + return this.http.get(url); + } + + getMyArticles(){ + let author: Author; // request current user + const url = `${this.baseUrl}articles?${author.username}`; + return this.http.get(url); + } + + getArticlesByTag(tag:string) { + const limit = 5; + const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; + return this.http.get(url); + } + + getAllTags() { + const url = `${this.baseUrl}tags`; + return this.http.get(url); + } + + addCommentToArticle(slug: string, comment:string, callback){ + const url = `${this.baseUrl}articles/${slug}/comments`; + this.authenticate( + ({ user: {token} }) => { + const headers = {Authorization: 'Token ' + token} + this.http.post(url,{comment:{body:comment}},{headers}).subscribe(callback); + } + ); + + } + + authenticate(functionRequest){ + const url = `${this.baseUrl}users/login`; + const email = 'user123@dominio.com'; + const password = 'mipassword'; + this.http.post(url,{user:{email:email,password:password}}).subscribe(functionRequest); + } +} From 4841595ea2fee99eec8f9535b055d04b04c20569 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 25 Aug 2020 13:16:21 -0300 Subject: [PATCH 05/59] error 404 template --- src/app/error-page/error-page.component.html | 10 +- src/app/error-page/error-page.component.scss | 104 +++++++++++++++++++ 2 files changed, 113 insertions(+), 1 deletion(-) diff --git a/src/app/error-page/error-page.component.html b/src/app/error-page/error-page.component.html index 7e9d75a..740d642 100644 --- a/src/app/error-page/error-page.component.html +++ b/src/app/error-page/error-page.component.html @@ -1 +1,9 @@ -

error-page works!

+
+
+
+

404

+

Page not found

+
+ Back to home page +
+
diff --git a/src/app/error-page/error-page.component.scss b/src/app/error-page/error-page.component.scss index e69de29..7ed0bcf 100644 --- a/src/app/error-page/error-page.component.scss +++ b/src/app/error-page/error-page.component.scss @@ -0,0 +1,104 @@ +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + body { + padding: 0; + margin: 0; + } + + #notfound { + position: relative; + height: 100vh; + background: #030005; + } + + #notfound .notfound { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + + .notfound { + max-width: 767px; + width: 100%; + line-height: 1.4; + text-align: center; + } + + .notfound .notfound-404 { + position: relative; + height: 180px; + margin-bottom: 20px; + z-index: -1; + } + + .notfound .notfound-404 h1 { + font-family: 'Montserrat', sans-serif; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50% , -50%); + -ms-transform: translate(-50% , -50%); + transform: translate(-50% , -50%); + font-size: 224px; + font-weight: 900; + margin-top: 0px; + margin-bottom: 0px; + margin-left: -12px; + color: #030005; + text-transform: uppercase; + text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a; + letter-spacing: -20px; + } + + + .notfound .notfound-404 h2 { + font-family: 'Montserrat', sans-serif; + position: absolute; + left: 0; + right: 0; + top: 110px; + font-size: 42px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + text-shadow: 0px 2px 0px #8400ff; + letter-spacing: 13px; + margin: 0; + } + + .notfound a { + font-family: 'Montserrat', sans-serif; + display: inline-block; + text-transform: uppercase; + color: #ff005a; + text-decoration: none; + border: 2px solid; + background: transparent; + padding: 10px 40px; + font-size: 14px; + font-weight: 700; + -webkit-transition: 0.2s all; + transition: 0.2s all; + } + + .notfound a:hover { + color: #8400ff; + } + + @media only screen and (max-width: 767px) { + .notfound .notfound-404 h2 { + font-size: 24px; + } + } + + @media only screen and (max-width: 480px) { + .notfound .notfound-404 h1 { + font-size: 182px; + } + } \ No newline at end of file From 790c7807394ac8136962b5666f22bac62b150af8 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 25 Aug 2020 13:25:56 -0300 Subject: [PATCH 06/59] imports --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c09e930..6fd649e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { CommentFormComponent } from './comment-form/comment-form.component'; import { ArticleFormComponent } from './article-form/article-form.component'; import { ArticlePageComponent } from './article-page/article-page.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { HttpClientModule } from '@angular/common/http' @NgModule({ declarations: [ @@ -30,7 +31,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ BrowserModule, AppRoutingModule, - NgbModule + NgbModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] From 158c94a568601dbc0be93977922514c4c4f7887f Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 25 Aug 2020 13:41:57 -0300 Subject: [PATCH 07/59] component started --- src/app/app.component.html | 3 ++- src/app/app.component.scss | 17 +++++++++++------ .../article-form/article-form.component.html | 6 ++++-- src/app/article-form/article-form.component.ts | 4 +++- src/app/article-page/article-page.component.ts | 4 +++- .../articles-list/articles-list.component.html | 9 ++++++++- .../articles-list/articles-list.component.ts | 14 ++++++++++++-- src/app/home-page/home-page.component.html | 9 ++++++++- src/app/home-page/home-page.component.ts | 15 ++++++++++++++- 9 files changed, 65 insertions(+), 16 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 26b2ff7..1d9b5a3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -37,7 +37,8 @@ -
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index ea0a162..c0182f4 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,10 +1,15 @@ .text-link { color: #007adf !important; } - .text-link:hover, .text-link:active { - color: #008cff !important; - } + +.text-link:hover, .text-link:active { + color: #008cff !important; +} + +.bg-navbar-custom{ + background-color: #1393fc; +} - .bg-navbar-custom{ - background-color: #1393fc; - } \ No newline at end of file +.footer-copyright{ + background-color: rgb(32, 31, 31); +} \ No newline at end of file diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html index 2c7d8a8..f2010f0 100644 --- a/src/app/article-form/article-form.component.html +++ b/src/app/article-form/article-form.component.html @@ -1,2 +1,4 @@ -

article-form works!

-

test

+
+ + +
diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts index 0d7ec11..05ed50a 100644 --- a/src/app/article-form/article-form.component.ts +++ b/src/app/article-form/article-form.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-article-form', @@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core'; }) export class ArticleFormComponent implements OnInit { + @Input() article; + constructor() { } ngOnInit(): void { diff --git a/src/app/article-page/article-page.component.ts b/src/app/article-page/article-page.component.ts index 525f2ef..cebc148 100644 --- a/src/app/article-page/article-page.component.ts +++ b/src/app/article-page/article-page.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-article-page', @@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core'; }) export class ArticlePageComponent implements OnInit { + @Input() article; + constructor() { } ngOnInit(): void { diff --git a/src/app/articles-list/articles-list.component.html b/src/app/articles-list/articles-list.component.html index 8098e3a..ab2555a 100644 --- a/src/app/articles-list/articles-list.component.html +++ b/src/app/articles-list/articles-list.component.html @@ -1 +1,8 @@ -

articles-list works!

+
    +
  • + {{article.slug}} //// {{article.title}} //// {{article.description}} //// + +
    • +
\ No newline at end of file diff --git a/src/app/articles-list/articles-list.component.ts b/src/app/articles-list/articles-list.component.ts index 6f8f896..850372c 100644 --- a/src/app/articles-list/articles-list.component.ts +++ b/src/app/articles-list/articles-list.component.ts @@ -1,4 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { HttpService } from '../http.service'; +import { MultipleArticles, Article } from '../model/article'; +import { Router } from '@angular/router'; @Component({ selector: 'app-articles-list', @@ -7,9 +10,16 @@ import { Component, OnInit } from '@angular/core'; }) export class ArticlesListComponent implements OnInit { - constructor() { } + @Input() articles: Article[]; + + constructor(private router: Router ) { } ngOnInit(): void { + + } + + goToArticlePage(article: Article){ + this.router.navigate(['article']); //ver como pasar parametros } } diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index 7454417..f320c18 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -1 +1,8 @@ -

home-page works!

+ + + + + + diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index 38a0d8f..a79871c 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { HttpService } from '../http.service'; +import { Article } from '../model/article'; @Component({ selector: 'app-home-page', @@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core'; }) export class HomePageComponent implements OnInit { - constructor() { } + articles: Article[] = []; + + constructor(private http: HttpService) { } ngOnInit(): void { + this.getAllArticles(); + } + + getAllArticles(){ + this.http.getAllArticles().subscribe(response => this.articles = response.articles ); } + getMyArticles(){ + this.articles=[]; //test + //this.http.getMyArticles().subscribe(response => this.articles = response.articles ); + } } From efc78fc193c8ff6253c414c273de3225ac262139 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Tue, 25 Aug 2020 14:00:58 -0300 Subject: [PATCH 08/59] module imports --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c09e930..ffab391 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { CommentFormComponent } from './comment-form/comment-form.component'; import { ArticleFormComponent } from './article-form/article-form.component'; import { ArticlePageComponent } from './article-page/article-page.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ @@ -30,7 +31,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ BrowserModule, AppRoutingModule, - NgbModule + NgbModule, + ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] From 53566dd1260185f5d300cdb01f65c3c434bc190a Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Tue, 25 Aug 2020 22:46:25 -0300 Subject: [PATCH 09/59] user registration --- src/app/app.module.ts | 5 +---- src/app/http.service.ts | 11 +++++++++++ src/app/model/user.ts | 4 ++++ src/app/signup/signup.component.html | 23 ++++++++++++++++++++++- src/app/signup/signup.component.scss | 10 ++++++++++ src/app/signup/signup.component.ts | 15 ++++++++++++++- src/index.html | 2 +- 7 files changed, 63 insertions(+), 7 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8499dc8..749512e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -34,11 +34,8 @@ import { HttpClientModule } from '@angular/common/http' BrowserModule, AppRoutingModule, NgbModule, -<<<<<<< HEAD - ReactiveFormsModule -======= + ReactiveFormsModule, HttpClientModule ->>>>>>> 158c94a568601dbc0be93977922514c4c4f7887f ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/http.service.ts b/src/app/http.service.ts index 71ca0e9..7789b88 100644 --- a/src/app/http.service.ts +++ b/src/app/http.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { MultipleArticles } from './model/article'; import { Author } from './model/author'; +import { SingleUser, User } from './model/user'; @Injectable({ providedIn: 'root' @@ -51,4 +52,14 @@ export class HttpService { const password = 'mipassword'; this.http.post(url,{user:{email:email,password:password}}).subscribe(functionRequest); } + + getCurrentUser(){ + const url = this.baseUrl + 'user'; + this.http.get(url); + } + + registerUser(user: User){ + const url = `${this.baseUrl}users`; + this.http.post(url,{user}).subscribe(user => console.log(user)); + } } diff --git a/src/app/model/user.ts b/src/app/model/user.ts index ef0c3ea..50d3ad5 100644 --- a/src/app/model/user.ts +++ b/src/app/model/user.ts @@ -1,3 +1,7 @@ +export interface SingleUser{ + user: User; +} + export interface User { email: string; token: string; diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html index c9ce9ad..999d77e 100644 --- a/src/app/signup/signup.component.html +++ b/src/app/signup/signup.component.html @@ -1 +1,22 @@ -

signup works!

+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
\ No newline at end of file diff --git a/src/app/signup/signup.component.scss b/src/app/signup/signup.component.scss index e69de29..b29ff8d 100644 --- a/src/app/signup/signup.component.scss +++ b/src/app/signup/signup.component.scss @@ -0,0 +1,10 @@ +.center-form{ + width: 30%; + margin: 0 auto; + margin-top: 20px; + margin-bottom: 20px; + padding: 10px; + border-radius: 20px; + border: solid 1px gray; + background-color: white; +} \ No newline at end of file diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts index d59051e..7e763ab 100644 --- a/src/app/signup/signup.component.ts +++ b/src/app/signup/signup.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl } from '@angular/forms'; +import { HttpService } from '../http.service'; @Component({ selector: 'app-signup', @@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core'; }) export class SignupComponent implements OnInit { - constructor() { } + signupForm = new FormGroup({ + username: new FormControl(''), + password: new FormControl(''), + email: new FormControl('') + }) + + constructor(private http: HttpService) { } ngOnInit(): void { } + register(){ + let user = this.signupForm.value; + this.http.registerUser(user); + } + } diff --git a/src/index.html b/src/index.html index c524de2..206bce9 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,7 @@ - + From 98e3c70b1c7894c4866098474a241ffbe889aa38 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 17:37:05 -0300 Subject: [PATCH 10/59] header styles changes --- src/app/app.component.html | 4 ++-- src/app/app.component.scss | 15 ++++++++++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 1d9b5a3..daf242e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -29,9 +29,9 @@ - +
- +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index c0182f4..46f7bf9 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -7,9 +7,22 @@ } .bg-navbar-custom{ - background-color: #1393fc; + background-color: #8c00ff; } .footer-copyright{ background-color: rgb(32, 31, 31); +} + +.fill-screen{ + height:100%; +} + +.nav-link{ + color:lightgray !important; + font-weight: bold; +} + +.nav-link:hover{ + color: white !important; } \ No newline at end of file From fd88c109dcafc54d99187ffa1205167c6600c663 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 17:45:35 -0300 Subject: [PATCH 11/59] article form with errors --- src/app/article-form/article-form.component.html | 14 ++++++++++---- src/app/article-form/article-form.component.ts | 11 +++++++++++ 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html index f2010f0..e99e2cc 100644 --- a/src/app/article-form/article-form.component.html +++ b/src/app/article-form/article-form.component.html @@ -1,4 +1,10 @@ -
- - -
+
+ + + + + +
\ No newline at end of file diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts index 05ed50a..2c4cdaa 100644 --- a/src/app/article-form/article-form.component.ts +++ b/src/app/article-form/article-form.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input } from '@angular/core'; +import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-article-form', @@ -7,6 +8,13 @@ import { Component, OnInit, Input } from '@angular/core'; }) export class ArticleFormComponent implements OnInit { + articleForm = new FormGroup({ + slug: new FormControl(''), + title: new FormControl(''), + description: new FormControl(''), + body: new FormControl(''), + tagList: new FormControl('') + }); @Input() article; constructor() { } @@ -14,4 +22,7 @@ export class ArticleFormComponent implements OnInit { ngOnInit(): void { } + saveArticle(){ + + } } From 36910d932db90c5febecabb596a67bc27bd3f3c5 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 17:59:03 -0300 Subject: [PATCH 12/59] article details --- .../article-page/article-page.component.html | 19 ++++++++++++++- .../article-page/article-page.component.scss | 24 +++++++++++++++++++ .../article-page/article-page.component.ts | 7 ++++-- .../comment-form/comment-form.component.html | 5 +++- .../comments-list.component.html | 11 ++++++++- .../comments-list.component.scss | 9 +++++++ .../comments-list/comments-list.component.ts | 10 ++++++-- 7 files changed, 78 insertions(+), 7 deletions(-) diff --git a/src/app/article-page/article-page.component.html b/src/app/article-page/article-page.component.html index b598de6..e835559 100644 --- a/src/app/article-page/article-page.component.html +++ b/src/app/article-page/article-page.component.html @@ -1 +1,18 @@ -

article-page works!

+
+
+ + + + + +
+ +
+ + + + + + +
+
\ No newline at end of file diff --git a/src/app/article-page/article-page.component.scss b/src/app/article-page/article-page.component.scss index e69de29..5bf4581 100644 --- a/src/app/article-page/article-page.component.scss +++ b/src/app/article-page/article-page.component.scss @@ -0,0 +1,24 @@ +.center-page{ + width: 80%; + margin: 0 auto; +} + +.article-group{ + background-color: white; + border-radius: 10px; + border: solid 1px lightgray; + margin-top: 20px; + margin-bottom: 20px; + padding:20px +} + +.article-item{ + display: block; +} + +.comments-section{ + width: 80%; + float: right; + background-color: gray; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/app/article-page/article-page.component.ts b/src/app/article-page/article-page.component.ts index cebc148..bdb1999 100644 --- a/src/app/article-page/article-page.component.ts +++ b/src/app/article-page/article-page.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; +import { ArticleService } from '../services/article.service'; +import { Article } from '../model/article'; @Component({ selector: 'app-article-page', @@ -7,11 +9,12 @@ import { Component, OnInit, Input } from '@angular/core'; }) export class ArticlePageComponent implements OnInit { - @Input() article; + article: Article; - constructor() { } + constructor(private articleService: ArticleService) { } ngOnInit(): void { + this.article = this.articleService.getArticle(); } } diff --git a/src/app/comment-form/comment-form.component.html b/src/app/comment-form/comment-form.component.html index 5634ab0..8fe27b6 100644 --- a/src/app/comment-form/comment-form.component.html +++ b/src/app/comment-form/comment-form.component.html @@ -1 +1,4 @@ -

comment-form works!

+
+ + +
diff --git a/src/app/comments-list/comments-list.component.html b/src/app/comments-list/comments-list.component.html index 9fe8944..4c5dce4 100644 --- a/src/app/comments-list/comments-list.component.html +++ b/src/app/comments-list/comments-list.component.html @@ -1 +1,10 @@ -

comments-list works!

+Previous Comments: +
    +
  • + + +
    • +
diff --git a/src/app/comments-list/comments-list.component.scss b/src/app/comments-list/comments-list.component.scss index e69de29..5f48cc3 100644 --- a/src/app/comments-list/comments-list.component.scss +++ b/src/app/comments-list/comments-list.component.scss @@ -0,0 +1,9 @@ +.comment-group{ + list-style-type: none; + display: block; + background-color: green; +} + +.comment-item{ + display: block; +} \ No newline at end of file diff --git a/src/app/comments-list/comments-list.component.ts b/src/app/comments-list/comments-list.component.ts index 42ff010..2ad069d 100644 --- a/src/app/comments-list/comments-list.component.ts +++ b/src/app/comments-list/comments-list.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { HttpService } from '../services/http.service'; +import { Comment } from '../model/comment'; @Component({ selector: 'app-comments-list', @@ -7,9 +9,13 @@ import { Component, OnInit } from '@angular/core'; }) export class CommentsListComponent implements OnInit { - constructor() { } + comments: Comment[] = []; + @Input() article; + + constructor(private http: HttpService) { } ngOnInit(): void { + this.http.getAllCommentsByArticle(this.article).subscribe(response => this.comments = response.comments); } } From 07f6347339ba6695ecb6bb2c657becff80d6cb12 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 18:05:13 -0300 Subject: [PATCH 13/59] comment interface --- src/app/model/comment.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/model/comment.ts b/src/app/model/comment.ts index 1a43b96..8e8b002 100644 --- a/src/app/model/comment.ts +++ b/src/app/model/comment.ts @@ -1,5 +1,9 @@ import { Author } from './author' +export interface MultipleComments{ + comments: Comment[]; +} + export interface Comment { id: number; createdAt: Date; From 062fd4a90d1115d62735b53e91fa9bfe2861ece1 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 18:06:18 -0300 Subject: [PATCH 14/59] header and footer styles changes --- src/styles.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/styles.scss b/src/styles.scss index 4bb3091..24e5cb9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,3 +2,10 @@ /* Importing Bootstrap SCSS file. */ @import '~bootstrap/scss/bootstrap'; + +html, body{ + height:100%; + margin:0; + display: flex; + flex-direction: column; +} \ No newline at end of file From 1fe6f2e0288a927fd45c64f1d931e094b0b7a216 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 26 Aug 2020 18:07:09 -0300 Subject: [PATCH 15/59] services folder created --- .../articles-list/articles-list.component.ts | 10 +++++++--- src/app/home-page/home-page.component.ts | 2 +- src/app/services/article.service.spec.ts | 16 +++++++++++++++ src/app/services/article.service.ts | 20 +++++++++++++++++++ src/app/{ => services}/http.service.spec.ts | 0 src/app/{ => services}/http.service.ts | 10 ++++++++-- 6 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 src/app/services/article.service.spec.ts create mode 100644 src/app/services/article.service.ts rename src/app/{ => services}/http.service.spec.ts (100%) rename src/app/{ => services}/http.service.ts (81%) diff --git a/src/app/articles-list/articles-list.component.ts b/src/app/articles-list/articles-list.component.ts index 850372c..5ac6f3d 100644 --- a/src/app/articles-list/articles-list.component.ts +++ b/src/app/articles-list/articles-list.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Input } from '@angular/core'; -import { HttpService } from '../http.service'; import { MultipleArticles, Article } from '../model/article'; import { Router } from '@angular/router'; +import { ArticleService } from '../services/article.service'; @Component({ selector: 'app-articles-list', @@ -12,14 +12,18 @@ export class ArticlesListComponent implements OnInit { @Input() articles: Article[]; - constructor(private router: Router ) { } + constructor( + private router: Router, + private articleService: ArticleService + ) { } ngOnInit(): void { } goToArticlePage(article: Article){ - this.router.navigate(['article']); //ver como pasar parametros + this.articleService.setArticle(article); + this.router.navigate(['article']); } } diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index a79871c..77922b0 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { HttpService } from '../http.service'; +import { HttpService } from '../services/http.service'; import { Article } from '../model/article'; @Component({ diff --git a/src/app/services/article.service.spec.ts b/src/app/services/article.service.spec.ts new file mode 100644 index 0000000..120c0e2 --- /dev/null +++ b/src/app/services/article.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ArticleService } from './article.service'; + +describe('ArticleService', () => { + let service: ArticleService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ArticleService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/article.service.ts b/src/app/services/article.service.ts new file mode 100644 index 0000000..5868163 --- /dev/null +++ b/src/app/services/article.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { Article } from '../model/article'; + +@Injectable({ + providedIn: 'root' +}) +export class ArticleService { + + article: Article; + + constructor() { } + + setArticle(article: Article){ + this.article = article; + } + + getArticle(){ + return this.article; + } +} diff --git a/src/app/http.service.spec.ts b/src/app/services/http.service.spec.ts similarity index 100% rename from src/app/http.service.spec.ts rename to src/app/services/http.service.spec.ts diff --git a/src/app/http.service.ts b/src/app/services/http.service.ts similarity index 81% rename from src/app/http.service.ts rename to src/app/services/http.service.ts index 71ca0e9..8857929 100644 --- a/src/app/http.service.ts +++ b/src/app/services/http.service.ts @@ -1,7 +1,8 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { MultipleArticles } from './model/article'; -import { Author } from './model/author'; +import { MultipleArticles, Article } from '../model/article'; +import { Author } from '../model/author'; +import { MultipleComments } from '../model/comment'; @Injectable({ providedIn: 'root' @@ -45,6 +46,11 @@ export class HttpService { } + getAllCommentsByArticle(article: Article){ + const url = `${this.baseUrl}articles/${article.slug}/comments`; + return this.http.get(url); + } + authenticate(functionRequest){ const url = `${this.baseUrl}users/login`; const email = 'user123@dominio.com'; From 2db2c8a414dfa0810b037808cfd97c26a1b74dfa Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Wed, 26 Aug 2020 20:05:47 -0300 Subject: [PATCH 16/59] minor changes --- src/app/signup/signup.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html index 999d77e..282fe3b 100644 --- a/src/app/signup/signup.component.html +++ b/src/app/signup/signup.component.html @@ -1,5 +1,5 @@
-
+
@@ -16,7 +16,7 @@
\ No newline at end of file From bbe4413c8e2ebde302a38b8443e232166649858f Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Wed, 26 Aug 2020 20:35:17 -0300 Subject: [PATCH 17/59] log in interface --- src/app/signin/signin.component.html | 18 +++++++++++++++++- src/app/signin/signin.component.scss | 10 ++++++++++ src/app/signin/signin.component.ts | 10 ++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/app/signin/signin.component.html b/src/app/signin/signin.component.html index cc1a2e3..9c871f9 100644 --- a/src/app/signin/signin.component.html +++ b/src/app/signin/signin.component.html @@ -1 +1,17 @@ -

signin works!

+
+
+
+ + +
+ +
+ + +
+ + +
+
diff --git a/src/app/signin/signin.component.scss b/src/app/signin/signin.component.scss index e69de29..6910a02 100644 --- a/src/app/signin/signin.component.scss +++ b/src/app/signin/signin.component.scss @@ -0,0 +1,10 @@ +.center-form{ + width: 30%; + margin: 0 auto; + margin-top: 20px; + margin-bottom: 20px; + padding: 30px; + border-radius: 20px; + border: solid 1px gray; + background-color: white; +} \ No newline at end of file diff --git a/src/app/signin/signin.component.ts b/src/app/signin/signin.component.ts index d0789c3..6566584 100644 --- a/src/app/signin/signin.component.ts +++ b/src/app/signin/signin.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-signin', @@ -7,9 +8,18 @@ import { Component, OnInit } from '@angular/core'; }) export class SigninComponent implements OnInit { + signinForm = new FormGroup({ + password: new FormControl(''), + email: new FormControl('') + }) + constructor() { } ngOnInit(): void { } + logIn(){ + + } + } From d252a858220181a3224dbb43efae1ffd6fd4ac75 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 27 Aug 2020 19:41:49 -0300 Subject: [PATCH 18/59] home page styles improved, paginator --- .../articles-list.component.html | 22 +++++- .../articles-list.component.scss | 60 ++++++++++++++++ src/app/home-page/home-page.component.html | 37 ++++++++-- src/app/home-page/home-page.component.scss | 68 +++++++++++++++++++ src/app/home-page/home-page.component.ts | 26 +++++-- src/app/services/http.service.ts | 14 ++-- src/app/signup/signup.component.ts | 2 +- 7 files changed, 205 insertions(+), 24 deletions(-) diff --git a/src/app/articles-list/articles-list.component.html b/src/app/articles-list/articles-list.component.html index ab2555a..c6327a6 100644 --- a/src/app/articles-list/articles-list.component.html +++ b/src/app/articles-list/articles-list.component.html @@ -1,8 +1,24 @@ -
    +
    • - {{article.slug}} //// {{article.title}} //// {{article.description}} //// - +
      + +
      +
      +
      + {{article.title}} +
      +
      + {{article.createdAt | date:'medium'}} +
      + +
      + {{article.description}} +
      + + More +
    \ No newline at end of file diff --git a/src/app/articles-list/articles-list.component.scss b/src/app/articles-list/articles-list.component.scss index e69de29..ff490d7 100644 --- a/src/app/articles-list/articles-list.component.scss +++ b/src/app/articles-list/articles-list.component.scss @@ -0,0 +1,60 @@ +.articles-container{ + margin: 0px; + padding: 0px; +} + +.article-group{ + list-style: none; + background-color: white; + border-radius: 5px; + border-top: solid 1px rgba($color: #000000, $alpha: 0.4); + margin-top: 10px; + padding: 40px; + clear: both; +} + +.author-image{ + width: 50px; + margin-right: 10px; + border-radius: 50%; +} + +.image-container{ + height: 100%; + float: left; +} + +.align-left{ + float: left; +} + +.align-right{ + float: right; + //width: 80%; +} + +.clear{ + clear: both; +} + +.article-description{ + margin-top: 10px; + border-top: solid 1px rgb(204, 202, 202); +} + +.article-title{ + font-size: large; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + +} + +.article-creation-date{ + font-size: small; + color: rgb(187, 187, 187); +} + +.link-more{ + float: right; + color: gray; +} \ No newline at end of file diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index f320c18..b6397c6 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -1,8 +1,33 @@ - - +
    +
    + + + - + - + +
    + + + +
      + +
    +
    \ No newline at end of file diff --git a/src/app/home-page/home-page.component.scss b/src/app/home-page/home-page.component.scss index e69de29..ac0cb7d 100644 --- a/src/app/home-page/home-page.component.scss +++ b/src/app/home-page/home-page.component.scss @@ -0,0 +1,68 @@ +.center-page{ + width: 80%; + margin: 0 auto; + margin-top: 20px; +} + +.articles-section{ + width: 75%; + background-color: rgb(243, 243, 243); + border-radius: 5px; + float: left; + padding: 20px; +} + +.tags-section{ + width: 20%; + background-color: rgb(223, 223, 223); + border-radius: 30px; + box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.4); + float: right; + padding: 10px; +} + +.tags-container{ + margin: 0px; +} + +.tag{ + background-color: rgb(141, 141, 141); + padding: 5px; + float: left; + list-style-type: none; + margin: 2px auto; + margin-left: 2px; + border-radius: 15px; +} + +.btn-article{ + background-color: rgb(216, 88, 255); + box-shadow: 2px 2px 5px rgba(210, 63, 255, 0.8); + margin: 5px; +} + +.btn-article:hover{ + background-color: rgb(205, 48, 253); +} + +.btn-article:focus{ + border-bottom: solid 3px rgb(144, 20, 245); +} + +.paginator{ + display: block; + width: 75%; + background-color: rgb(231, 231, 231); + border-radius: 5px; + clear: both; + list-style-type: none; + padding: 10px; +} + +.page{ + background-color: rgb(255, 104, 247); + padding: 5px; + border-radius: 20px; + display: inline-block; + margin: 2px; +} \ No newline at end of file diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index 77922b0..b4f67a3 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -10,19 +10,35 @@ import { Article } from '../model/article'; export class HomePageComponent implements OnInit { articles: Article[] = []; + tags: string[] = []; + readonly pageLimit = 10; + pages: number[] = []; constructor(private http: HttpService) { } ngOnInit(): void { - this.getAllArticles(); + this.getAllArticles(1); + this.getAllTags(); } - getAllArticles(){ - this.http.getAllArticles().subscribe(response => this.articles = response.articles ); + getAllArticles(page: number){ + this.http.getAllArticles(page, this.pageLimit).subscribe(response => { + this.articles = response.articles; + const pagesCount = (Math.ceil(response.articlesCount / this.pageLimit)); + + this.pages = []; + for(let i=0; i < pagesCount; i++){ + this.pages.push(i+1); + } + }); } - getMyArticles(){ + getAllTags(){ + this.http.getAllTags().subscribe(response => this.tags = response.tags); + } + + getMyArticles(page: number){ this.articles=[]; //test - //this.http.getMyArticles().subscribe(response => this.articles = response.articles ); + //this.http.getMyArticles(page).subscribe(response => this.articles = response.articles ); } } diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index cc7309e..4c229b4 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -1,14 +1,9 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -<<<<<<< HEAD:src/app/http.service.ts -import { MultipleArticles } from './model/article'; -import { Author } from './model/author'; -import { SingleUser, User } from './model/user'; -======= import { MultipleArticles, Article } from '../model/article'; import { Author } from '../model/author'; import { MultipleComments } from '../model/comment'; ->>>>>>> article-page:src/app/services/http.service.ts +import { SingleUser, User } from '../model/user'; @Injectable({ providedIn: 'root' @@ -19,8 +14,9 @@ export class HttpService { constructor(private http: HttpClient) { } - getAllArticles(){ - const url = `${this.baseUrl}articles?limit=100`; + getAllArticles(page: number, limit:number){ + const offset = (page - 1) * limit; + const url = `${this.baseUrl}articles?limit=${limit}&offset=${offset}`; return this.http.get(url); } @@ -31,7 +27,7 @@ export class HttpService { } getArticlesByTag(tag:string) { - const limit = 5; + const limit = 20; const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; return this.http.get(url); } diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts index 7e763ab..05c7cbb 100644 --- a/src/app/signup/signup.component.ts +++ b/src/app/signup/signup.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; -import { HttpService } from '../http.service'; +import { HttpService } from '../services/http.service'; @Component({ selector: 'app-signup', From 1c8aa399d66e83b03d4266af85bd4c71256e09e1 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 28 Aug 2020 15:45:07 -0300 Subject: [PATCH 19/59] local storage service --- package-lock.json | 8 ++++++ package.json | 1 + .../services/local-storage.service.spec.ts | 16 ++++++++++++ src/app/services/local-storage.service.ts | 25 +++++++++++++++++++ 4 files changed, 50 insertions(+) create mode 100644 src/app/services/local-storage.service.spec.ts create mode 100644 src/app/services/local-storage.service.ts diff --git a/package-lock.json b/package-lock.json index f20b7f4..f11a045 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7598,6 +7598,14 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-webstorage-service": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ngx-webstorage-service/-/ngx-webstorage-service-4.1.0.tgz", + "integrity": "sha512-t0aO4X8rqesLqypU8ZK2W7xGVbpi/z7u/Xg7qhnLoKVauI29NFzdKxV2oaYZmpkxIpgdbLSsIfklkjgxIM0IFA==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index 4b3e29d..bc51240 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/router": "~9.1.1", "@ng-bootstrap/ng-bootstrap": "^6.2.0", "bootstrap": "^4.5.2", + "ngx-webstorage-service": "^4.1.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/services/local-storage.service.spec.ts b/src/app/services/local-storage.service.spec.ts new file mode 100644 index 0000000..ba1dbd4 --- /dev/null +++ b/src/app/services/local-storage.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LocalStorageService } from './local-storage.service'; + +describe('LocalStorageService', () => { + let service: LocalStorageService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LocalStorageService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/local-storage.service.ts b/src/app/services/local-storage.service.ts new file mode 100644 index 0000000..7249f7d --- /dev/null +++ b/src/app/services/local-storage.service.ts @@ -0,0 +1,25 @@ +import { Injectable, Inject } from '@angular/core'; +import { User } from '../model/user'; +import {LOCAL_STORAGE, WebStorageService} from 'ngx-webstorage-service' + +@Injectable({ + providedIn: 'root' +}) +export class LocalStorageService { + + appID = 'RWA'; + + constructor(@Inject(LOCAL_STORAGE) private storage: WebStorageService) { } + + saveLogIn(user: User){ + this.storage.set(this.appID + 'current-user', user.token); + } + + getAuthentication(){ + return this.storage.get(this.appID + 'current-user'); + } + + logOut(){ + this.storage.set(this.appID + 'current-user', null) + } +} From bdf4a4e087d1cec9a015937b317521f1bddbfee1 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 28 Aug 2020 15:47:53 -0300 Subject: [PATCH 20/59] authentication --- src/app/services/http.service.ts | 19 ++++++++++++------- src/app/signin/signin.component.html | 8 ++++---- src/app/signin/signin.component.ts | 17 ++++++++++++----- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index cc7309e..c6fda1b 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -1,14 +1,10 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -<<<<<<< HEAD:src/app/http.service.ts -import { MultipleArticles } from './model/article'; -import { Author } from './model/author'; -import { SingleUser, User } from './model/user'; -======= +import { SingleUser, User } from '../model/user'; import { MultipleArticles, Article } from '../model/article'; import { Author } from '../model/author'; import { MultipleComments } from '../model/comment'; ->>>>>>> article-page:src/app/services/http.service.ts +import { LocalStorageService } from './local-storage.service'; @Injectable({ providedIn: 'root' @@ -17,7 +13,7 @@ export class HttpService { readonly baseUrl = 'https://conduit.productionready.io/api/'; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient, private storage: LocalStorageService) { } getAllArticles(){ const url = `${this.baseUrl}articles?limit=100`; @@ -73,4 +69,13 @@ export class HttpService { const url = `${this.baseUrl}users`; this.http.post(url,{user}).subscribe(user => console.log(user)); } + + logIn(user: User){ + const url = `${this.baseUrl}users/login`; + this.http.post(url,{user}).subscribe(response => this.storage.saveLogIn(response.user)); + } + + logOut(){ + this.storage.logOut(); + } } diff --git a/src/app/signin/signin.component.html b/src/app/signin/signin.component.html index 9c871f9..fa65587 100644 --- a/src/app/signin/signin.component.html +++ b/src/app/signin/signin.component.html @@ -1,8 +1,8 @@
    - - + +
    @@ -10,8 +10,8 @@
    -
    diff --git a/src/app/signin/signin.component.ts b/src/app/signin/signin.component.ts index 6566584..6f043f1 100644 --- a/src/app/signin/signin.component.ts +++ b/src/app/signin/signin.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { HttpService } from '../services/http.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-signin', @@ -9,17 +11,22 @@ import { FormGroup, FormControl } from '@angular/forms'; export class SigninComponent implements OnInit { signinForm = new FormGroup({ - password: new FormControl(''), - email: new FormControl('') + password: new FormControl('', [Validators.required]), + email: new FormControl('',[Validators.required, Validators.email]) }) - constructor() { } + constructor( + private http: HttpService, + private router: Router + ) { } ngOnInit(): void { } logIn(){ - + this.router.navigate(['home']); + console.log(this.signinForm.value); + this.http.logIn(this.signinForm.value); } } From baa034aeca8cef00a8ef94372ef457c63153df03 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 28 Aug 2020 15:49:43 -0300 Subject: [PATCH 21/59] validations, minor changes --- src/app/signup/signup.component.html | 4 ++-- src/app/signup/signup.component.scss | 2 +- src/app/signup/signup.component.ts | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html index 282fe3b..f38e728 100644 --- a/src/app/signup/signup.component.html +++ b/src/app/signup/signup.component.html @@ -12,10 +12,10 @@
    - +
    - diff --git a/src/app/signup/signup.component.scss b/src/app/signup/signup.component.scss index b29ff8d..6910a02 100644 --- a/src/app/signup/signup.component.scss +++ b/src/app/signup/signup.component.scss @@ -3,7 +3,7 @@ margin: 0 auto; margin-top: 20px; margin-bottom: 20px; - padding: 10px; + padding: 30px; border-radius: 20px; border: solid 1px gray; background-color: white; diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts index 7e763ab..da1945f 100644 --- a/src/app/signup/signup.component.ts +++ b/src/app/signup/signup.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; -import { HttpService } from '../http.service'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { HttpService } from '../services/http.service'; @Component({ selector: 'app-signup', @@ -10,9 +10,9 @@ import { HttpService } from '../http.service'; export class SignupComponent implements OnInit { signupForm = new FormGroup({ - username: new FormControl(''), - password: new FormControl(''), - email: new FormControl('') + username: new FormControl('', [Validators.required]), + password: new FormControl('', [Validators.required]), + email: new FormControl('', [Validators.required, Validators.email]) }) constructor(private http: HttpService) { } From fcc68253f19fe6c2d1445eb58078d65c2086973f Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 28 Aug 2020 15:50:27 -0300 Subject: [PATCH 22/59] import webStorageService --- src/app/app.module.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 749512e..a02a177 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,7 +14,8 @@ import { ArticleFormComponent } from './article-form/article-form.component'; import { ArticlePageComponent } from './article-page/article-page.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http' +import { HttpClientModule } from '@angular/common/http'; +import { StorageServiceModule} from 'ngx-webstorage-service'; @NgModule({ @@ -35,7 +36,8 @@ import { HttpClientModule } from '@angular/common/http' AppRoutingModule, NgbModule, ReactiveFormsModule, - HttpClientModule + HttpClientModule, + StorageServiceModule ], providers: [], bootstrap: [AppComponent] From 39d0ae30847b32e12f8d9fcf2d942d71a93c2342 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 28 Aug 2020 16:49:00 -0300 Subject: [PATCH 23/59] hide navigation bar item --- src/app/app.component.html | 6 +++--- src/app/app.component.ts | 12 ++++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index daf242e..2e04854 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -11,13 +11,13 @@
  • Home (current)
    • -
  • +
  • New Article
    • -
  • +
  • Sign Up
    • -
  • +
  • Sign In
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6a08b74..1bf2b3c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,18 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { LocalStorageService } from './services/local-storage.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'ng-peti'; + token = ''; + + constructor(private storage: LocalStorageService){} + + ngOnInit(){ + this.token = this.storage.getAuthentication(); + } } From 7e042cd743eb1a5079bcdbba404fd23125fb5c54 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sat, 29 Aug 2020 00:28:47 -0300 Subject: [PATCH 24/59] minor change --- src/app/home-page/home-page.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index b6397c6..85a0d20 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -28,6 +28,6 @@ (click)="getAllArticles(page)" > {{page}} - +
\ No newline at end of file From 5a14f467f132fe779c5b3c15693dca9d9f41a3cd Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Tue, 1 Sep 2020 10:32:56 -0300 Subject: [PATCH 25/59] user sign in --- src/app/app.component.html | 5 ++++- src/app/app.component.ts | 22 ++++++++++++++++++---- src/app/services/http.service.ts | 4 +++- src/app/services/local-storage.service.ts | 2 +- src/app/signin/signin.component.ts | 9 +++++---- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 2e04854..d866c93 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -14,6 +14,9 @@
  • New Article
    • +
  • + Log Out +
  • Sign Up
    • @@ -30,7 +33,7 @@
    - +
    diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1bf2b3c..9f6c802 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,32 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnChanges } from '@angular/core'; import { LocalStorageService } from './services/local-storage.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnInit { +export class AppComponent implements OnChanges { title = 'ng-peti'; token = ''; - constructor(private storage: LocalStorageService){} + constructor( + private storage: LocalStorageService, + private router: Router + ){} - ngOnInit(){ + ngOnChanges(){ this.token = this.storage.getAuthentication(); } + + logOut(){ + this.storage.logOut(); + this.token = undefined; + this.router.navigate(['login']); + } + + onLoggingIn(token){ + this.token = token; + } } diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index c6fda1b..ba82437 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -72,7 +72,9 @@ export class HttpService { logIn(user: User){ const url = `${this.baseUrl}users/login`; - this.http.post(url,{user}).subscribe(response => this.storage.saveLogIn(response.user)); + let observable = this.http.post(url,{user}); + observable.subscribe(response => this.storage.saveLogIn(response.user)); + return observable; } logOut(){ diff --git a/src/app/services/local-storage.service.ts b/src/app/services/local-storage.service.ts index 7249f7d..3f303ba 100644 --- a/src/app/services/local-storage.service.ts +++ b/src/app/services/local-storage.service.ts @@ -20,6 +20,6 @@ export class LocalStorageService { } logOut(){ - this.storage.set(this.appID + 'current-user', null) + this.storage.remove(this.appID + 'current-user'); } } diff --git a/src/app/signin/signin.component.ts b/src/app/signin/signin.component.ts index 6f043f1..e53e2da 100644 --- a/src/app/signin/signin.component.ts +++ b/src/app/signin/signin.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { HttpService } from '../services/http.service'; import { Router } from '@angular/router'; @@ -10,6 +10,7 @@ import { Router } from '@angular/router'; }) export class SigninComponent implements OnInit { + @Output() loggingIn = new EventEmitter(); signinForm = new FormGroup({ password: new FormControl('', [Validators.required]), email: new FormControl('',[Validators.required, Validators.email]) @@ -24,9 +25,9 @@ export class SigninComponent implements OnInit { } logIn(){ - this.router.navigate(['home']); - console.log(this.signinForm.value); - this.http.logIn(this.signinForm.value); + this.http.logIn(this.signinForm.value).subscribe( + response => this.loggingIn.emit(response.user.token) + ); } } From 69be77d90909eb9e2460a5c8b6cbc4fdf4e55564 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 10:57:47 -0300 Subject: [PATCH 26/59] create article --- .../article-form/article-form.component.html | 31 +++++++++++++++---- .../article-form/article-form.component.scss | 10 ++++++ .../article-form/article-form.component.ts | 6 ++-- src/app/services/http.service.ts | 17 +++++++++- 4 files changed, 54 insertions(+), 10 deletions(-) diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html index e99e2cc..d8499ad 100644 --- a/src/app/article-form/article-form.component.html +++ b/src/app/article-form/article-form.component.html @@ -1,10 +1,29 @@ +
    - - - +
    + + +
    + +
    + + +
    - -
    \ No newline at end of file +
    + + +
    + +
    + + +
    + + + +
    \ No newline at end of file diff --git a/src/app/article-form/article-form.component.scss b/src/app/article-form/article-form.component.scss index e69de29..b29ff8d 100644 --- a/src/app/article-form/article-form.component.scss +++ b/src/app/article-form/article-form.component.scss @@ -0,0 +1,10 @@ +.center-form{ + width: 30%; + margin: 0 auto; + margin-top: 20px; + margin-bottom: 20px; + padding: 10px; + border-radius: 20px; + border: solid 1px gray; + background-color: white; +} \ No newline at end of file diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts index 2c4cdaa..66b35c9 100644 --- a/src/app/article-form/article-form.component.ts +++ b/src/app/article-form/article-form.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; +import { HttpService } from '../services/http.service'; @Component({ selector: 'app-article-form', @@ -9,7 +10,6 @@ import { FormGroup, FormControl } from '@angular/forms'; export class ArticleFormComponent implements OnInit { articleForm = new FormGroup({ - slug: new FormControl(''), title: new FormControl(''), description: new FormControl(''), body: new FormControl(''), @@ -17,12 +17,12 @@ export class ArticleFormComponent implements OnInit { }); @Input() article; - constructor() { } + constructor(private http: HttpService) { } ngOnInit(): void { } saveArticle(){ - + this.http.createArticle(this.articleForm.value); } } diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index 4c229b4..d6ea5dd 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { MultipleArticles, Article } from '../model/article'; +import { MultipleArticles, Article, SingleArticle } from '../model/article'; import { Author } from '../model/author'; import { MultipleComments } from '../model/comment'; import { SingleUser, User } from '../model/user'; @@ -31,6 +31,21 @@ export class HttpService { const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; return this.http.get(url); } + + createArticle(article: Article){ + const url = `${this.baseUrl}articles`; + const token = storage.getAtuthentication(); + const headers = {Authorization: 'Token ' + token} + return this.http.post(url, {article}, {headers}); + } + + updateArticle(article: Article){ + + } + + deleteArticle(article: Article){ + + } getAllTags() { const url = `${this.baseUrl}tags`; From 37764bd3474c9ea94a3cb57a3df8c85a25eb4bca Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:08:00 -0300 Subject: [PATCH 27/59] empty path redirect to home --- src/app/app-routing.module.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index daae57c..706c623 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ import { ArticlePageComponent } from './article-page/article-page.component'; const routes: Routes = [ + {path:'', component: HomePageComponent}, {path:'home', component: HomePageComponent}, {path:'login', component: SigninComponent}, {path:'register', component: SignupComponent}, From 7b51e9b51da8fd51c86948204f39a55b405e9d94 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:12:20 -0300 Subject: [PATCH 28/59] DoCheck event to update header --- src/app/app.component.html | 2 +- src/app/app.component.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index d866c93..de41aa6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -33,7 +33,7 @@
    - +
    diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9f6c802..99ebc23 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnChanges } from '@angular/core'; +import { Component, OnInit, OnChanges, DoCheck } from '@angular/core'; import { LocalStorageService } from './services/local-storage.service'; import { Router } from '@angular/router'; @@ -7,7 +7,7 @@ import { Router } from '@angular/router'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnChanges { +export class AppComponent implements OnInit, DoCheck { title = 'ng-peti'; token = ''; @@ -16,17 +16,17 @@ export class AppComponent implements OnChanges { private router: Router ){} - ngOnChanges(){ + ngOnInit(){ this.token = this.storage.getAuthentication(); } + ngDoCheck(){ + this.token = this.storage.getAuthentication(); //has delay in updating header, but update it without refresh page (routing) + } + logOut(){ this.storage.logOut(); this.token = undefined; this.router.navigate(['login']); } - - onLoggingIn(token){ - this.token = token; - } } From 8bfb472b88f1d3ce59e39ebcfc831816a581e064 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:13:51 -0300 Subject: [PATCH 29/59] redirect home --- src/app/signin/signin.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/signin/signin.component.ts b/src/app/signin/signin.component.ts index e53e2da..63bb086 100644 --- a/src/app/signin/signin.component.ts +++ b/src/app/signin/signin.component.ts @@ -28,6 +28,7 @@ export class SigninComponent implements OnInit { this.http.logIn(this.signinForm.value).subscribe( response => this.loggingIn.emit(response.user.token) ); + this.router.navigate(['home']); } } From 6a7c735322260ffc2ebb6fdb065aebe3ea5f68e3 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:43:24 -0300 Subject: [PATCH 30/59] http error handling --- src/app/model/base-interface.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/app/model/base-interface.ts diff --git a/src/app/model/base-interface.ts b/src/app/model/base-interface.ts new file mode 100644 index 0000000..525e055 --- /dev/null +++ b/src/app/model/base-interface.ts @@ -0,0 +1,7 @@ +export interface BaseInterface { + errors: Errors; +} + +interface Errors{ + body: string[]; +} \ No newline at end of file From c71b9a51e13204eb09eeb4f751f8d1527d94c2ba Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:44:42 -0300 Subject: [PATCH 31/59] readonly properties --- src/app/services/local-storage.service.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/services/local-storage.service.ts b/src/app/services/local-storage.service.ts index 3f303ba..1e27dad 100644 --- a/src/app/services/local-storage.service.ts +++ b/src/app/services/local-storage.service.ts @@ -7,19 +7,20 @@ import {LOCAL_STORAGE, WebStorageService} from 'ngx-webstorage-service' }) export class LocalStorageService { - appID = 'RWA'; + readonly appID = 'RWA'; + readonly currentUserID = 'current-user'; constructor(@Inject(LOCAL_STORAGE) private storage: WebStorageService) { } saveLogIn(user: User){ - this.storage.set(this.appID + 'current-user', user.token); + this.storage.set(this.appID + this.currentUserID, user.token); } getAuthentication(){ - return this.storage.get(this.appID + 'current-user'); + return this.storage.get(this.appID + this.currentUserID); } logOut(){ - this.storage.remove(this.appID + 'current-user'); + this.storage.remove(this.appID + this.currentUserID); } } From e26fba210e0839e4af2e6c6d0d3be7733c52e8f1 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:45:59 -0300 Subject: [PATCH 32/59] errors property --- src/app/model/article.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/model/article.ts b/src/app/model/article.ts index 38b963a..5460bb9 100644 --- a/src/app/model/article.ts +++ b/src/app/model/article.ts @@ -1,10 +1,11 @@ import { Author } from './author'; +import { BaseInterface } from './base-interface'; -export interface SingleArticle { +export interface SingleArticle extends BaseInterface { article: Article; } -export interface MultipleArticles { +export interface MultipleArticles extends BaseInterface { articles: Article[]; articlesCount: number; } From 1595ebf895f36d61399dc1976704d8a732a46787 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 1 Sep 2020 16:46:24 -0300 Subject: [PATCH 33/59] create article --- src/app/article-form/article-form.component.ts | 10 +++++++++- src/app/services/http.service.ts | 6 ++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts index 66b35c9..893459f 100644 --- a/src/app/article-form/article-form.component.ts +++ b/src/app/article-form/article-form.component.ts @@ -23,6 +23,14 @@ export class ArticleFormComponent implements OnInit { } saveArticle(){ - this.http.createArticle(this.articleForm.value); + this.createArticle(); + } + + createArticle(){ + this.http.createArticle(this.articleForm.value).subscribe(response => { + if(response.errors !== undefined){ + alert('Error al enviar articulo') + } + }); } } diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index 5c6a06d..79b165c 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -14,7 +14,9 @@ export class HttpService { readonly baseUrl = 'https://conduit.productionready.io/api/'; - constructor(private http: HttpClient, private storage: LocalStorageService) { } + constructor( + private http: HttpClient, + private storage: LocalStorageService) { } getAllArticles(page: number, limit:number){ const offset = (page - 1) * limit; @@ -36,7 +38,7 @@ export class HttpService { createArticle(article: Article){ const url = `${this.baseUrl}articles`; - const token = storage.getAtuthentication(); + const token = this.storage.getAuthentication(); const headers = {Authorization: 'Token ' + token} return this.http.post(url, {article}, {headers}); } From 97e2c5cb69b583d2db50125ca93f90885391295b Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 00:35:24 -0300 Subject: [PATCH 34/59] article update and delete --- src/app/services/http.service.ts | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index 79b165c..7306332 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -5,6 +5,8 @@ import { SingleUser, User } from '../model/user'; import { Author } from '../model/author'; import { MultipleComments } from '../model/comment'; import { LocalStorageService } from './local-storage.service'; +import { Observable } from 'rxjs'; +import { BaseInterface } from '../model/base-interface'; @Injectable({ @@ -24,10 +26,16 @@ export class HttpService { return this.http.get(url); } - getMyArticles(){ - let author: Author; // request current user - const url = `${this.baseUrl}articles?${author.username}`; - return this.http.get(url); + getMyArticles(page: number, limit:number, callback){ + const offset = (page - 1) * limit; + let myArticles: Article[]; + + this.getCurrentUser().subscribe( ({user}) => { + const url = `${this.baseUrl}articles?author=${user.username}&limit=${limit}&offset=${offset}`; + this.http.get(url).subscribe(callback); + }); + + return myArticles; } getArticlesByTag(tag:string) { @@ -44,11 +52,17 @@ export class HttpService { } updateArticle(article: Article){ - + const url = `${this.baseUrl}articles/${article.slug}`; + const token = this.storage.getAuthentication(); + const headers = {Authorization: 'Token ' + token}; + return this.http.put(url, {article}, {headers}); } deleteArticle(article: Article){ - + const url = `${this.baseUrl}articles/${article.slug}`; + const token = this.storage.getAuthentication(); + const headers = {Authorization: 'Token ' + token}; + return this.http.delete(url, {headers}); } getAllTags() { @@ -81,7 +95,9 @@ export class HttpService { getCurrentUser(){ const url = this.baseUrl + 'user'; - this.http.get(url); + const token = this.storage.getAuthentication(); + const headers = {Authorization: 'Token ' + token}; + return this.http.get(url, {headers}); } registerUser(user: User){ From 3a798ab7d420ef08d2fc837490507104a4fff8d4 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 00:37:40 -0300 Subject: [PATCH 35/59] retrive my articles --- src/app/home-page/home-page.component.scss | 3 ++- src/app/home-page/home-page.component.ts | 13 +++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/home-page/home-page.component.scss b/src/app/home-page/home-page.component.scss index ac0cb7d..ab8979c 100644 --- a/src/app/home-page/home-page.component.scss +++ b/src/app/home-page/home-page.component.scss @@ -62,7 +62,8 @@ .page{ background-color: rgb(255, 104, 247); padding: 5px; - border-radius: 20px; + border-radius: 50%; display: inline-block; margin: 2px; + width: 40px; } \ No newline at end of file diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index b4f67a3..2e050c9 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -38,7 +38,16 @@ export class HomePageComponent implements OnInit { } getMyArticles(page: number){ - this.articles=[]; //test - //this.http.getMyArticles(page).subscribe(response => this.articles = response.articles ); + this.http.getMyArticles(page, this.pageLimit, + response => { + this.articles = response.articles; + const pagesCount = (Math.ceil(response.articlesCount / this.pageLimit)); + + this.pages = []; + for(let i=0; i < pagesCount; i++){ + this.pages.push(i+1); + } + }); } + } From 5e09f133602641d08df8018d704bde6606ddc364 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 00:51:49 -0300 Subject: [PATCH 36/59] additions of icons, delete article --- .../articles-list.component.html | 10 ++++++- .../articles-list.component.scss | 28 ++++++++++++++++++- .../articles-list/articles-list.component.ts | 24 ++++++++++++++-- 3 files changed, 57 insertions(+), 5 deletions(-) diff --git a/src/app/articles-list/articles-list.component.html b/src/app/articles-list/articles-list.component.html index c6327a6..3a07004 100644 --- a/src/app/articles-list/articles-list.component.html +++ b/src/app/articles-list/articles-list.component.html @@ -15,10 +15,18 @@
    - {{article.description}} +

    {{article.description}}

    More +
    +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/src/app/articles-list/articles-list.component.scss b/src/app/articles-list/articles-list.component.scss index ff490d7..eb461a8 100644 --- a/src/app/articles-list/articles-list.component.scss +++ b/src/app/articles-list/articles-list.component.scss @@ -30,7 +30,6 @@ .align-right{ float: right; - //width: 80%; } .clear{ @@ -40,6 +39,7 @@ .article-description{ margin-top: 10px; border-top: solid 1px rgb(204, 202, 202); + word-wrap: break-word; } .article-title{ @@ -57,4 +57,30 @@ .link-more{ float: right; color: gray; +} + +.update-delete-section{ + float: right; + color: black; + margin-right: 20px; +} + +.update{ + margin-right: 3px; + display: inline-block; +} + +.update:hover{ + cursor: pointer; + box-shadow: 2px 2px 10px rgba(24, 121, 0, 0.8); +} + +.delete{ + margin-left: 3px; + display: inline-block; +} + +.delete:hover{ + cursor: pointer; + box-shadow: 2px 2px 10px rgba(189, 0, 0, 0.8); } \ No newline at end of file diff --git a/src/app/articles-list/articles-list.component.ts b/src/app/articles-list/articles-list.component.ts index 5ac6f3d..294d927 100644 --- a/src/app/articles-list/articles-list.component.ts +++ b/src/app/articles-list/articles-list.component.ts @@ -2,6 +2,9 @@ import { Component, OnInit, Input } from '@angular/core'; import { MultipleArticles, Article } from '../model/article'; import { Router } from '@angular/router'; import { ArticleService } from '../services/article.service'; +import { User } from '../model/user'; +import { faEdit,faTrash } from '@fortawesome/free-solid-svg-icons'; +import { HttpService } from '../services/http.service'; @Component({ selector: 'app-articles-list', @@ -10,15 +13,21 @@ import { ArticleService } from '../services/article.service'; }) export class ArticlesListComponent implements OnInit { + updateIcon = faEdit; + deleteIcon = faTrash; + currentUser: User; @Input() articles: Article[]; constructor( private router: Router, - private articleService: ArticleService - ) { } + private articleService: ArticleService, + private http: HttpService + ) { + this.http.getCurrentUser().subscribe(response => this.currentUser = response.user); + } ngOnInit(): void { - + } goToArticlePage(article: Article){ @@ -26,4 +35,13 @@ export class ArticlesListComponent implements OnInit { this.router.navigate(['article']); } + updateArticle(article: Article){ + this.articleService.setArticle(article); + this.router.navigate(['editor/update']); + } + + deleteArticle(article: Article){ + this.http.deleteArticle(article); + } + } From 44c951f8362ce881231203d33e61407812d54726 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 01:06:09 -0300 Subject: [PATCH 37/59] icons dependencies --- package-lock.json | 52 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 +++++ 2 files changed, 57 insertions(+) diff --git a/package-lock.json b/package-lock.json index f11a045..5a0226a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1647,6 +1647,58 @@ "to-fast-properties": "^2.0.0" } }, + "@fortawesome/angular-fontawesome": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.7.0.tgz", + "integrity": "sha512-U+eHYbKuVYrrm9SnIfl+z+6KTiI4Pu+S2OKh34JIi7C1jHhDcrVeDZISP/cpswHY7LWWDOPYeKE+yuWFlL4aVw==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", + "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + } + } + }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.30", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz", + "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.30", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz", + "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz", + "integrity": "sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.14.0.tgz", + "integrity": "sha512-6LCFvjGSMPoUQbn3NVlgiG4CY5iIY8fOm+to/D6QS/GvdqhDt+xZklQeERdCvVRbnFa1ITc1rJHPRXqkX5wztQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz", + "integrity": "sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + } + }, "@istanbuljs/schema": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", diff --git a/package.json b/package.json index bc51240..9312639 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,11 @@ "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", + "@fortawesome/angular-fontawesome": "^0.7.0", + "@fortawesome/fontawesome-svg-core": "^1.2.30", + "@fortawesome/free-brands-svg-icons": "^5.14.0", + "@fortawesome/free-regular-svg-icons": "^5.14.0", + "@fortawesome/free-solid-svg-icons": "^5.14.0", "@ng-bootstrap/ng-bootstrap": "^6.2.0", "bootstrap": "^4.5.2", "ngx-webstorage-service": "^4.1.0", From 81c55010ee7639dac8f2e16ae83abbe675b928b7 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 01:07:42 -0300 Subject: [PATCH 38/59] paremeters for create/update article --- src/app/app-routing.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 706c623..30c30bf 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -13,6 +13,8 @@ const routes: Routes = [ {path:'home', component: HomePageComponent}, {path:'login', component: SigninComponent}, {path:'register', component: SignupComponent}, + {path:'editor/:update', component: ArticleFormComponent}, + {path:'editor/:create', component: ArticleFormComponent}, {path:'editor', component: ArticleFormComponent}, {path:'article', component: ArticlePageComponent}, {path:'**', component: ErrorPageComponent} From 03e7fedf9bcae47944d9dd9cdf872aa3f980c2aa Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 01:09:18 -0300 Subject: [PATCH 39/59] import FontAwesomeModule icons --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a02a177..af5cbe0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { StorageServiceModule} from 'ngx-webstorage-service'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' @NgModule({ @@ -37,7 +38,8 @@ import { StorageServiceModule} from 'ngx-webstorage-service'; NgbModule, ReactiveFormsModule, HttpClientModule, - StorageServiceModule + StorageServiceModule, + FontAwesomeModule ], providers: [], bootstrap: [AppComponent] From 831dca5b338e9b478d1e87251081a1b53e91d822 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 3 Sep 2020 01:11:16 -0300 Subject: [PATCH 40/59] delete article --- .../article-page/article-page.component.html | 28 +++++-- .../article-page/article-page.component.scss | 78 ++++++++++++++++++- .../article-page/article-page.component.ts | 19 ++++- 3 files changed, 114 insertions(+), 11 deletions(-) diff --git a/src/app/article-page/article-page.component.html b/src/app/article-page/article-page.component.html index e835559..5dfbd9f 100644 --- a/src/app/article-page/article-page.component.html +++ b/src/app/article-page/article-page.component.html @@ -1,16 +1,30 @@
    - - - - - +
    +
    + +
    +
    + + + +
    +
    + +
    +

    {{article.body}}

    +
    + +
    + + +
    - + diff --git a/src/app/article-page/article-page.component.scss b/src/app/article-page/article-page.component.scss index 5bf4581..5e979b1 100644 --- a/src/app/article-page/article-page.component.scss +++ b/src/app/article-page/article-page.component.scss @@ -5,15 +5,87 @@ .article-group{ background-color: white; - border-radius: 10px; border: solid 1px lightgray; margin-top: 20px; margin-bottom: 20px; - padding:20px + padding: 0px; + overflow: hidden; } -.article-item{ +.article-header{ + background-color: rgb(54, 54, 54); + padding: 10px; + overflow: hidden; +} + +.author-image{ + float: left; + margin-right: 15px; +} + +.header-text{ + margin-left: 15px; +} + +.article-title{ + font-size: xx-large; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + color: white; + display: block; + margin: 0px; +} + +.article-subtitle{ + color: lightgray; + font-size: small; display: block; + margin: 0px; +} + +.article-description{ + color: white; + font-family: cursive; + font-size: large; + margin-top: 20px; + margin-left: 10px; +} + +.article-content{ + padding: 15px; + clear: both; +} + +.article-body{ + word-wrap: break-word; + color: black; + font-family: Arial, Helvetica, sans-serif; +} + +.update-delete-section{ + float: right; +} + +.btn-update{ + padding: 5px 15px; + background-color: rgb(121, 65, 253); + margin: 5px; + color:black; +} + +.btn-update:hover{ + background-color: rgb(151, 107, 255); +} + +.btn-delete{ + padding: 5px 10px; + background-color: rgb(199, 75, 133); + margin: 5px; + color:black; +} + +.btn-delete:hover{ + background-color: rgb(189, 105, 144); } .comments-section{ diff --git a/src/app/article-page/article-page.component.ts b/src/app/article-page/article-page.component.ts index bdb1999..000be85 100644 --- a/src/app/article-page/article-page.component.ts +++ b/src/app/article-page/article-page.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit, Input } from '@angular/core'; import { ArticleService } from '../services/article.service'; import { Article } from '../model/article'; +import { HttpService } from '../services/http.service'; +import { User } from '../model/user'; +import { Router } from '@angular/router'; @Component({ selector: 'app-article-page', @@ -10,11 +13,25 @@ import { Article } from '../model/article'; export class ArticlePageComponent implements OnInit { article: Article; + currentUser: User; - constructor(private articleService: ArticleService) { } + constructor( + private articleService: ArticleService, + private http: HttpService, + private router: Router + ) { } ngOnInit(): void { this.article = this.articleService.getArticle(); + this.http.getCurrentUser().subscribe(response => this.currentUser = response.user); + } + + updateArticle(){ + this.router.navigate(['editor/update']); + } + + deleteArticle(){ + this.http.deleteArticle(this.article); } } From f187cb50dca608b1966fb77c2e391f85a6e6be5e Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 6 Sep 2020 13:34:58 -0300 Subject: [PATCH 41/59] parameters changes --- src/app/app-routing.module.ts | 6 ++---- src/app/app.component.html | 4 ++-- src/app/articles-list/articles-list.component.ts | 1 + 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 30c30bf..5d4b7b3 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,12 +10,10 @@ import { ArticlePageComponent } from './article-page/article-page.component'; const routes: Routes = [ {path:'', component: HomePageComponent}, - {path:'home', component: HomePageComponent}, + {path:'home/:articlesMode/:page', component: HomePageComponent}, {path:'login', component: SigninComponent}, {path:'register', component: SignupComponent}, - {path:'editor/:update', component: ArticleFormComponent}, - {path:'editor/:create', component: ArticleFormComponent}, - {path:'editor', component: ArticleFormComponent}, + {path:'editor/:mode', component: ArticleFormComponent}, {path:'article', component: ArticlePageComponent}, {path:'**', component: ErrorPageComponent} ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index de41aa6..d8b8a03 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -9,10 +9,10 @@ From 6fcd8f5bf70d6540c11812f63598249c9695c15e Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Tue, 8 Sep 2020 00:27:18 -0300 Subject: [PATCH 47/59] request http for crud comment --- src/app/services/http.service.ts | 34 ++++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index c90ad74..69dabc1 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'; import { SingleUser, User } from '../model/user'; import { MultipleArticles, Article } from '../model/article'; import { Author } from '../model/author'; -import { MultipleComments } from '../model/comment'; +import { MultipleComments, Comment } from '../model/comment'; import { LocalStorageService } from './local-storage.service'; @@ -39,15 +39,22 @@ export class HttpService { return this.http.get(url); } - addCommentToArticle(slug: string, comment:string, callback){ - const url = `${this.baseUrl}articles/${slug}/comments`; - this.authenticate( - ({ user: {token} }) => { - const headers = {Authorization: 'Token ' + token} - this.http.post(url,{comment:{body:comment}},{headers}).subscribe(callback); + addCommentToArticle(article: Article, comment: Comment){ + const url = `${this.baseUrl}articles/${article.slug}/comments`; + const token = this.storage.getAuthentication(); + const headers = {Authorization: 'Token ' + token}; + return this.http.post(url, {comment}, {headers}); + } + + deleteComment(article: Article, comment: Comment){ + const url = `${this.baseUrl}articles/${article.slug}/comments/${comment.id}`; + const token = this.storage.getAuthentication(); + const headers = {Authorization: 'Token ' + token}; + this.http.delete(url, {headers}).subscribe( response => { + if(response.errors !== undefined){ + alert('Error when deleting comment'); } - ); - + }); } getAllCommentsByArticle(article: Article){ @@ -55,16 +62,9 @@ export class HttpService { return this.http.get(url); } - authenticate(functionRequest){ - const url = `${this.baseUrl}users/login`; - const email = 'user123@dominio.com'; - const password = 'mipassword'; - this.http.post(url,{user:{email:email,password:password}}).subscribe(functionRequest); - } - getCurrentUser(){ const url = this.baseUrl + 'user'; - this.http.get(url); + return this.http.get(url); } registerUser(user: User){ From fea2c7f8e96e712a3890982895455a25e23efe5b Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Tue, 8 Sep 2020 00:27:49 -0300 Subject: [PATCH 48/59] create and delete comments --- src/app/article-page/article-page.component.html | 12 ++++++++---- src/app/article-page/article-page.component.ts | 15 ++++++++++++++- .../comments-list/comments-list.component.html | 5 +++++ .../comments-list/comments-list.component.scss | 2 +- src/app/comments-list/comments-list.component.ts | 10 ++++++++-- 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/app/article-page/article-page.component.html b/src/app/article-page/article-page.component.html index e835559..9a688f7 100644 --- a/src/app/article-page/article-page.component.html +++ b/src/app/article-page/article-page.component.html @@ -8,11 +8,15 @@
    - - + - - +
    \ No newline at end of file diff --git a/src/app/article-page/article-page.component.ts b/src/app/article-page/article-page.component.ts index bdb1999..644f2a7 100644 --- a/src/app/article-page/article-page.component.ts +++ b/src/app/article-page/article-page.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit, Input } from '@angular/core'; import { ArticleService } from '../services/article.service'; import { Article } from '../model/article'; +import { HttpService } from '../services/http.service'; +import { Comment } from '../model/comment'; @Component({ selector: 'app-article-page', @@ -10,11 +12,22 @@ import { Article } from '../model/article'; export class ArticlePageComponent implements OnInit { article: Article; + comments: Comment[]; - constructor(private articleService: ArticleService) { } + constructor( + private articleService: ArticleService, + private http: HttpService + ) { } ngOnInit(): void { this.article = this.articleService.getArticle(); + this.updateComments(); + } + + updateComments(){ + this.http.getAllCommentsByArticle(this.article).subscribe( + response => this.comments = response.comments + ); } } diff --git a/src/app/comments-list/comments-list.component.html b/src/app/comments-list/comments-list.component.html index 4c5dce4..5242f3c 100644 --- a/src/app/comments-list/comments-list.component.html +++ b/src/app/comments-list/comments-list.component.html @@ -6,5 +6,10 @@ > + diff --git a/src/app/comments-list/comments-list.component.scss b/src/app/comments-list/comments-list.component.scss index 5f48cc3..fe42ac2 100644 --- a/src/app/comments-list/comments-list.component.scss +++ b/src/app/comments-list/comments-list.component.scss @@ -1,7 +1,7 @@ .comment-group{ list-style-type: none; display: block; - background-color: green; + background-color: rgb(218, 218, 218); } .comment-item{ diff --git a/src/app/comments-list/comments-list.component.ts b/src/app/comments-list/comments-list.component.ts index 2ad069d..320a1c6 100644 --- a/src/app/comments-list/comments-list.component.ts +++ b/src/app/comments-list/comments-list.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, Input } from '@angular/core'; import { HttpService } from '../services/http.service'; import { Comment } from '../model/comment'; +import { User } from '../model/user'; @Component({ selector: 'app-comments-list', @@ -9,13 +10,18 @@ import { Comment } from '../model/comment'; }) export class CommentsListComponent implements OnInit { - comments: Comment[] = []; + currentUser: User; + @Input() comments; @Input() article; constructor(private http: HttpService) { } ngOnInit(): void { - this.http.getAllCommentsByArticle(this.article).subscribe(response => this.comments = response.comments); + this.http.getCurrentUser().subscribe( response => this.currentUser = response.user); + } + + deleteComment(comment: Comment){ + this.http.deleteComment(this.article, comment); } } From 149ad380d5569f3e8e06548924f684f097c27144 Mon Sep 17 00:00:00 2001 From: Agustina Blanco Date: Fri, 11 Sep 2020 18:01:13 -0300 Subject: [PATCH 49/59] corrections --- src/app/article-page/article-page.component.html | 3 ++- src/app/comments-list/comments-list.component.html | 2 +- src/app/comments-list/comments-list.component.ts | 5 +++-- src/app/services/http.service.ts | 5 ++++- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/article-page/article-page.component.html b/src/app/article-page/article-page.component.html index ec8eb34..2cea159 100644 --- a/src/app/article-page/article-page.component.html +++ b/src/app/article-page/article-page.component.html @@ -27,7 +27,8 @@ [article]="article" > - diff --git a/src/app/comments-list/comments-list.component.html b/src/app/comments-list/comments-list.component.html index 5242f3c..2624e99 100644 --- a/src/app/comments-list/comments-list.component.html +++ b/src/app/comments-list/comments-list.component.html @@ -8,7 +8,7 @@ diff --git a/src/app/comments-list/comments-list.component.ts b/src/app/comments-list/comments-list.component.ts index 320a1c6..3eedc74 100644 --- a/src/app/comments-list/comments-list.component.ts +++ b/src/app/comments-list/comments-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { HttpService } from '../services/http.service'; import { Comment } from '../model/comment'; import { User } from '../model/user'; @@ -13,6 +13,7 @@ export class CommentsListComponent implements OnInit { currentUser: User; @Input() comments; @Input() article; + @Output() commentDeleted = new EventEmitter(); constructor(private http: HttpService) { } @@ -21,7 +22,7 @@ export class CommentsListComponent implements OnInit { } deleteComment(comment: Comment){ - this.http.deleteComment(this.article, comment); + this.http.deleteComment(this.article, comment).subscribe( () => this.commentDeleted.emit() ); } } diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts index 4282ab4..84239c0 100644 --- a/src/app/services/http.service.ts +++ b/src/app/services/http.service.ts @@ -86,11 +86,14 @@ export class HttpService { const url = `${this.baseUrl}articles/${article.slug}/comments/${comment.id}`; const token = this.storage.getAuthentication(); const headers = {Authorization: 'Token ' + token}; - this.http.delete(url, {headers}).subscribe( response => { + let observable = this.http.delete(url, {headers}); + observable.subscribe( response => { if(response.errors !== undefined){ alert('Error when deleting comment'); } }); + + return observable; } getAllCommentsByArticle(article: Article){ From f3c85965e81210d40c9ab9c246cec122243ebfdc Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 13 Sep 2020 15:30:35 -0300 Subject: [PATCH 50/59] comment styles improved --- .../comment-form/comment-form.component.html | 2 +- .../comment-form/comment-form.component.scss | 3 + .../comment-form/comment-form.component.ts | 33 +++++--- .../comments-list.component.html | 29 ++++--- .../comments-list.component.scss | 76 +++++++++++++++++-- .../comments-list/comments-list.component.ts | 21 ++++- 6 files changed, 136 insertions(+), 28 deletions(-) diff --git a/src/app/comment-form/comment-form.component.html b/src/app/comment-form/comment-form.component.html index baf0567..3f22db7 100644 --- a/src/app/comment-form/comment-form.component.html +++ b/src/app/comment-form/comment-form.component.html @@ -3,7 +3,7 @@
    - diff --git a/src/app/comment-form/comment-form.component.scss b/src/app/comment-form/comment-form.component.scss index e69de29..adfcade 100644 --- a/src/app/comment-form/comment-form.component.scss +++ b/src/app/comment-form/comment-form.component.scss @@ -0,0 +1,3 @@ +.btn-margin{ + margin-left: 10px; +} \ No newline at end of file diff --git a/src/app/comment-form/comment-form.component.ts b/src/app/comment-form/comment-form.component.ts index 9203bf8..da112c6 100644 --- a/src/app/comment-form/comment-form.component.ts +++ b/src/app/comment-form/comment-form.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { HttpService } from '../services/http.service'; +import { LocalStorageService } from '../services/local-storage.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-comment-form', @@ -17,22 +19,31 @@ export class CommentFormComponent implements OnInit { @Output() commentSent = new EventEmitter(); constructor( - private http: HttpService + private http: HttpService, + private storage: LocalStorageService, + private router: Router ) { } ngOnInit(): void { - console.log(this.article); + } sendComment(){ - this.http.addCommentToArticle(this.article, this.commentForm.value).subscribe( response => { - if(response.errors !== undefined){ - alert('Error when commenting'); - } - else{ - this.commentSent.emit(this.article); - alert('Successfully commented'); - } - }); + if(!this.storage.getAuthentication()){ + alert('You need to log in'); + this.router.navigate(['login']); + } + else{ + this.http.addCommentToArticle(this.article, this.commentForm.value).subscribe( response => { + if(response.errors !== undefined){ + alert('Error when commenting'); + } + else{ + this.commentSent.emit(this.article); + } + }); + this.commentForm.reset(); + } + } } diff --git a/src/app/comments-list/comments-list.component.html b/src/app/comments-list/comments-list.component.html index 2624e99..59ad043 100644 --- a/src/app/comments-list/comments-list.component.html +++ b/src/app/comments-list/comments-list.component.html @@ -1,15 +1,26 @@ -Previous Comments: -
      +
      • - - - +
        + +
        +
        +
        + {{comment.author.username}} + {{comment.createdAt | date:'medium'}} +
        + +
        +

        {{comment.body}}

        +
        + +
        +
        + +
        +
        +
      diff --git a/src/app/comments-list/comments-list.component.scss b/src/app/comments-list/comments-list.component.scss index fe42ac2..244f4d5 100644 --- a/src/app/comments-list/comments-list.component.scss +++ b/src/app/comments-list/comments-list.component.scss @@ -1,9 +1,75 @@ -.comment-group{ - list-style-type: none; + +.comments-container{ + margin: 5px; + margin-top: 20px; + padding: 0px; + min-height: 50px; display: block; - background-color: rgb(218, 218, 218); } -.comment-item{ - display: block; +.comment-group{ + list-style: none; + background-color: white; + border-radius: 2px; + border-top: solid 1px rgba($color: #000000, $alpha: 0.4); + margin-top: 10px; + padding: 10px; + clear: both; + overflow: hidden; +} + +.author-image{ + width: 20px; + margin-right: 10px; + border-radius: 50%; +} + +.image-container{ + height: 100%; + float: left; +} + +.align-left{ + float: left; +} + +.align-right{ + float: right; +} + +.clear{ + clear: both; +} + +.comment-body{ + margin-top: 10px; + word-wrap: break-word; +} + +.comment-author{ + font-size: medium; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; +} + +.comment-creation-date{ + font-size: small; + color: rgb(187, 187, 187); + margin-left: 10px; +} + +.update-delete-section{ + float: right; + color: black; + margin-right: 20px; +} + +.delete{ + margin-left: 3px; + display: inline-block; +} + +.delete:hover{ + cursor: pointer; + box-shadow: 2px 2px 10px rgba(189, 0, 0, 0.8); } \ No newline at end of file diff --git a/src/app/comments-list/comments-list.component.ts b/src/app/comments-list/comments-list.component.ts index 3eedc74..b3c4a61 100644 --- a/src/app/comments-list/comments-list.component.ts +++ b/src/app/comments-list/comments-list.component.ts @@ -2,6 +2,9 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { HttpService } from '../services/http.service'; import { Comment } from '../model/comment'; import { User } from '../model/user'; +import { faTrash } from '@fortawesome/free-solid-svg-icons'; +import { Author } from '../model/author'; +import { LocalStorageService } from '../services/local-storage.service'; @Component({ selector: 'app-comments-list', @@ -11,18 +14,32 @@ import { User } from '../model/user'; export class CommentsListComponent implements OnInit { currentUser: User; + deleteIcon = faTrash; @Input() comments; @Input() article; @Output() commentDeleted = new EventEmitter(); - constructor(private http: HttpService) { } + constructor( + private http: HttpService, + private storage: LocalStorageService + ) { } ngOnInit(): void { - this.http.getCurrentUser().subscribe( response => this.currentUser = response.user); + if(this.storage.getAuthentication()){ + this.http.getCurrentUser().subscribe( response => this.currentUser = response.user); + } } deleteComment(comment: Comment){ this.http.deleteComment(this.article, comment).subscribe( () => this.commentDeleted.emit() ); } + belongsToAuthor(author: Author){ + if(this.currentUser !== undefined && author.username === this.currentUser.username){ + return true; + } + else{ + return false; + } + } } From 5f8aea53f657aafa431137ff3eea49cd5f8e39df Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 13 Sep 2020 15:37:57 -0300 Subject: [PATCH 51/59] autocomplete tag field --- angular.json | 7 +- package-lock.json | 21 ++++++ package.json | 2 + src/app/app.module.ts | 13 +++- .../article-form/article-form.component.html | 20 ++++-- .../article-form/article-form.component.scss | 25 +++++++ .../article-form/article-form.component.ts | 67 +++++++++++++++++-- src/index.html | 4 +- src/styles.scss | 4 +- 9 files changed, 145 insertions(+), 18 deletions(-) diff --git a/angular.json b/angular.json index 4deb648..1875b03 100644 --- a/angular.json +++ b/angular.json @@ -28,6 +28,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] @@ -92,6 +93,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] @@ -123,6 +125,7 @@ } } } - }}, + } + }, "defaultProject": "ng-peti" -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5a0226a..ebcda8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -199,6 +199,22 @@ "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.1.tgz", "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ==" }, + "@angular/cdk": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz", + "integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==", + "requires": { + "parse5": "^5.0.0" + }, + "dependencies": { + "parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + } + } + }, "@angular/cli": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz", @@ -677,6 +693,11 @@ } } }, + "@angular/material": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.4.tgz", + "integrity": "sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA==" + }, "@angular/platform-browser": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.1.tgz", diff --git a/package.json b/package.json index 9312639..b05f3fc 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "private": true, "dependencies": { "@angular/animations": "~9.1.1", + "@angular/cdk": "^9.2.4", "@angular/common": "~9.1.1", "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", "@angular/forms": "~9.1.1", "@angular/localize": "~9.1.1", + "@angular/material": "^9.2.4", "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index af5cbe0..414a2bd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { StorageServiceModule} from 'ngx-webstorage-service'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatInputModule } from '@angular/material/input'; @NgModule({ @@ -30,7 +33,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' CommentsListComponent, CommentFormComponent, ArticleFormComponent, - ArticlePageComponent + ArticlePageComponent, + ], imports: [ BrowserModule, @@ -39,7 +43,10 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' ReactiveFormsModule, HttpClientModule, StorageServiceModule, - FontAwesomeModule + FontAwesomeModule, + BrowserAnimationsModule, + MatAutocompleteModule, + MatInputModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/article-form/article-form.component.html b/src/app/article-form/article-form.component.html index 091c12f..f18ea70 100644 --- a/src/app/article-form/article-form.component.html +++ b/src/app/article-form/article-form.component.html @@ -21,11 +21,23 @@

      Article

    -
    - - +
    + +
    + + + {{selectedTag}} + x + +
    + + + + {{tag}} + +
    - +
    \ No newline at end of file diff --git a/src/app/article-form/article-form.component.scss b/src/app/article-form/article-form.component.scss index 58c4418..9aa623d 100644 --- a/src/app/article-form/article-form.component.scss +++ b/src/app/article-form/article-form.component.scss @@ -19,4 +19,29 @@ .article-body{ min-height: 150px; +} + +.selected-tag{ + background-color: gray; + font-weight: bold; + color: white; + padding: 5px; + margin: 2px; + border-radius: 10px; + display: inline-block; +} + +.deselect-tag{ + color: white; +} + +.deselect-tag:hover{ + color: tomato; + text-decoration: none; +} + +.tag-form{ + width: 30%; + display: inline-block; + margin-right: 20px; } \ No newline at end of file diff --git a/src/app/article-form/article-form.component.ts b/src/app/article-form/article-form.component.ts index 9c7cb6b..ac3d03b 100644 --- a/src/app/article-form/article-form.component.ts +++ b/src/app/article-form/article-form.component.ts @@ -1,9 +1,11 @@ import { Component, OnInit, Input } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; +import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms'; import { HttpService } from '../services/http.service'; import { ActivatedRoute, Router } from '@angular/router'; import { ArticleService } from '../services/article.service'; import { Article } from '../model/article'; +import { Observable } from 'rxjs'; +import { map, startWith } from 'rxjs/operators'; @Component({ selector: 'app-article-form', @@ -12,12 +14,25 @@ import { Article } from '../model/article'; }) export class ArticleFormComponent implements OnInit { + tags: string[] = []; + filteredTags: Observable; + selectedTags: string[] = []; + + notEmptySelectedTags = (control: AbstractControl) => { + if(this.selectedTags.length === 0){ + return {EmptySelectedTags: true}; + } + return null; + }; + articleForm = new FormGroup({ - title: new FormControl(''), - description: new FormControl(''), - body: new FormControl(''), + title: new FormControl('',[Validators.required]), + description: new FormControl('',[Validators.required]), + body: new FormControl('',[Validators.required]), tagList: new FormControl('') - }); + }, + [this.notEmptySelectedTags] + ); mode: string; article: Article; @@ -27,10 +42,13 @@ export class ArticleFormComponent implements OnInit { private route: ActivatedRoute, private articleService: ArticleService, private router: Router - ) { } + ) { } + + ngOnInit(): void { this.route.params.subscribe( params => this.mode = params.mode); + this.autocompleteTags(); switch(this.mode){ case 'update': @@ -38,6 +56,7 @@ export class ArticleFormComponent implements OnInit { this.article = this.articleService.getArticle(); if(this.article !== undefined){ this.articleForm.patchValue(this.article); + this.selectedTags = this.article.tagList; } break; case 'create': @@ -58,7 +77,10 @@ export class ArticleFormComponent implements OnInit { } createArticle(){ - this.http.createArticle(this.articleForm.value).subscribe(response => { + let article: Article = this.articleForm.value; + article.tagList = this.selectedTags; + + this.http.createArticle(article).subscribe(response => { if(response.errors !== undefined){ alert('Error when creating article'); } @@ -71,6 +93,8 @@ export class ArticleFormComponent implements OnInit { updateArticle(){ Object.assign(this.article, this.articleForm.value); + this.article.tagList = this.selectedTags; + this.http.updateArticle(this.article).subscribe( response => { if(response.errors !== undefined){ alert('Error when updating article'); @@ -81,4 +105,33 @@ export class ArticleFormComponent implements OnInit { } }); } + + + private autocompleteTags(){ + this.http.getAllTags().subscribe( response => this.tags = response.tags); + + this.filteredTags = this.articleForm.get('tagList').valueChanges.pipe( + startWith(''), + map(value => this.filter(value)) + ); + } + + private filter(value: string): string[] { + const filterValue = value.toLowerCase(); + + return this.tags.filter(tag => + tag.toLowerCase().indexOf(filterValue) === 0 && this.selectedTags.indexOf(tag) === -1 + ); + } + + selectTag(tag: string){ + this.selectedTags.push(tag); + this.articleForm.patchValue({tagList: ''}); + } + + deselectTag(tag: string){ + const index = this.selectedTags.indexOf(tag); + this.selectedTags.splice(index, 1); + } + } diff --git a/src/index.html b/src/index.html index 206bce9..bf371f1 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,10 @@ + + - + diff --git a/src/styles.scss b/src/styles.scss index 24e5cb9..4555dca 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -8,4 +8,6 @@ html, body{ margin:0; display: flex; flex-direction: column; -} \ No newline at end of file +} +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } From 00c02398b396ca30f136b566082d99e3343060f2 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 13 Sep 2020 16:27:47 -0300 Subject: [PATCH 52/59] corrections --- src/app/app.component.html | 3 +-- .../article-page/article-page.component.html | 2 +- .../article-page/article-page.component.scss | 10 ++++++++- .../article-page/article-page.component.ts | 19 +++++++++++++--- .../articles-list.component.html | 4 ++-- .../articles-list.component.scss | 8 +++---- .../articles-list/articles-list.component.ts | 22 ++++++++++++++----- src/app/signin/signin.component.ts | 2 +- 8 files changed, 50 insertions(+), 20 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index d8b8a03..b120284 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@