├── .browserslistrc
├── .eslintrc.js
├── .firebase
    └── hosting.ZGlzdA.cache
├── .firebaserc
├── .gitattributes
├── .gitignore
├── README.md
├── babel.config.js
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
    ├── .gitignore
    ├── index.js
    ├── package-lock.json
    └── package.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── Icons
    │   │   ├── arrow-right-light.svg
    │   │   ├── bars-regular.svg
    │   │   ├── edit-regular.svg
    │   │   ├── envelope-regular.svg
    │   │   ├── instagram-brands.svg
    │   │   ├── linkedin-brands.svg
    │   │   ├── lock-alt-solid.svg
    │   │   ├── sign-out-alt-regular.svg
    │   │   ├── times-circle-light.svg
    │   │   ├── trash-regular.svg
    │   │   ├── twitter-brands.svg
    │   │   ├── user-alt-light.svg
    │   │   ├── user-crown-light.svg
    │   │   ├── whatsapp-brands.svg
    │   │   └── youtube-brands.svg
    │   ├── background.png
    │   ├── blogCards
    │   │   ├── stock-1.jpg
    │   │   ├── stock-2.jpg
    │   │   ├── stock-3.jpg
    │   │   └── stock-4.jpg
    │   ├── blogPhotos
    │   │   ├── beautiful-stories.jpg
    │   │   ├── coding.jpg
    │   │   └── designed-for-everyone.jpg
    │   └── logo.png
    ├── components
    │   ├── BlogCard.vue
    │   ├── BlogCoverPreview.vue
    │   ├── BlogPost.vue
    │   ├── Footer.vue
    │   ├── Loading.vue
    │   ├── Modal.vue
    │   └── Navigation.vue
    ├── firebase
    │   └── firebaseInit.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── Admin.vue
    │   ├── BlogPreview.vue
    │   ├── Blogs.vue
    │   ├── CreatePost.vue
    │   ├── EditBlog.vue
    │   ├── ForgotPassword.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── Profile.vue
    │   ├── Register.vue
    │   └── ViewBlog.vue
├── storage.rules
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.firebase/hosting.ZGlzdA.cache:
--------------------------------------------------------------------------------
 1 | index.html,1620760139988,77a2c9c6d80df1ae3bde8a70c8c25875e01cd37324518623ab6324a046f71f8b
 2 | favicon.ico,1620760139988,1e71457865f706dc865b49a54a86e193818220d290b30226b6630a42faf1535d
 3 | css/app.34410813.css,1620760139998,f521a653c7675e599a5797e210684d894e393958bb90e89bcffdc0179bb3ed50
 4 | js/app.d9bb0b95.js,1620760140003,e4d1188e625699ae1f506e2d628be656ee65d0c830e6f043ae2572200c611de1
 5 | img/designed-for-everyone.e5c67be6.jpg,1620760139999,733796e549513c66de7983f932b54fbdd23c06ce269670a07312c016d53f0ccd
 6 | img/beautiful-stories.abd940b5.jpg,1620760139999,0dc1a3d8ed58ddc98dc35306d23ebaa12cf0211847d64a971fcd0172bfbcb798
 7 | js/app.d9bb0b95.js.map,1620760139999,6f709a8803bd5702f1a17b733fa71f33bc30c920045e5675503431af0a0aad77
 8 | img/background.048d49ff.png,1620760140003,601ceb5ea2529b848c3e87f64b5a6ec308d37d06da0ed892815a16ea51e42907
 9 | js/chunk-vendors.fd168014.js,1620760140001,a6ccf1bb47775d21ecbbb16791d418a30607a0f4c66b8c9763d3f02f325e2c7f
10 | img/coding.7ab56a95.jpg,1620760139989,dc975d3c4933a62c43b5b71d11e7141bf0dd52d4a6cdacc0f0d18d69634c2e18
11 | js/chunk-vendors.fd168014.js.map,1620760140000,f25b17c8ac69729d37fdd1b9ace1e3ea03b281171ca63e3a8899badcaed1a7ed
12 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "fireblogsyt-92263"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fireblogs
 2 | 
 3 | ## Project Overview
 4 | 
 5 | This is the completed source code for FireBlogs. This application is built with Vue.js (version 2) & Firebase. This video was created for Traversy Media, you can watch the tutorial [here:](https://www.youtube.com/watch?v=ISv22NNL-aE).
 6 | 
 7 | ## Project setup
 8 | 
 9 | ```
10 | npm install
11 | ```
12 | 
13 | ### Compiles and hot-reloads for development
14 | 
15 | ```
16 | npm run serve
17 | ```
18 | 
19 | ### Compiles and minifies for production
20 | 
21 | ```
22 | npm run build
23 | ```
24 | 
25 | ### Lints and fixes files
26 | 
27 | ```
28 | npm run lint
29 | ```
30 | 
31 | ### Customize configuration
32 | 
33 | See [Configuration Reference](https://cli.vuejs.org/config/).
34 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firestore": {
 3 |     "rules": "firestore.rules",
 4 |     "indexes": "firestore.indexes.json"
 5 |   },
 6 |   "storage": {
 7 |     "rules": "storage.rules"
 8 |   },
 9 |   "hosting": {
10 |     "public": "dist",
11 |     "ignore": [
12 |       "firebase.json",
13 |       "**/.*",
14 |       "**/node_modules/**"
15 |     ],
16 |     "rewrites": [
17 |       {
18 |         "source": "**",
19 |         "destination": "/index.html"
20 |       }
21 |     ]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/firestore.indexes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "indexes": [],
3 |   "fieldOverrides": []
4 | }
5 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service cloud.firestore {
3 |   match /databases/{database}/documents {
4 |     match /{document=**} {
5 |       allow read, write: if
6 |           request.time < timestamp.date(2021, 6, 2);
7 |     }
8 |   }
9 | }


--------------------------------------------------------------------------------
/functions/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/


--------------------------------------------------------------------------------
/functions/index.js:
--------------------------------------------------------------------------------
 1 | const functions = require("firebase-functions");
 2 | const admin = require("firebase-admin");
 3 | admin.initializeApp();
 4 | 
 5 | exports.addAdminRole = functions.https.onCall((data, context) => {
 6 |   return admin
 7 |     .auth()
 8 |     .getUserByEmail(data.email)
 9 |     .then((user) => {
10 |       return admin.auth().setCustomUserClaims(user.uid, {
11 |         admin: true,
12 |       });
13 |     })
14 |     .then(() => {
15 |       return {
16 |         message: `Success! ${data.email} has been made an admin!!`,
17 |       };
18 |     })
19 |     .catch((err) => {
20 |       console.log(err);
21 |     });
22 | });
23 | 


--------------------------------------------------------------------------------
/functions/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "functions",
 3 |   "description": "Cloud Functions for Firebase",
 4 |   "scripts": {
 5 |     "serve": "firebase emulators:start --only functions",
 6 |     "shell": "firebase functions:shell",
 7 |     "start": "npm run shell",
 8 |     "deploy": "firebase deploy --only functions",
 9 |     "logs": "firebase functions:log"
10 |   },
11 |   "engines": {
12 |     "node": "12"
13 |   },
14 |   "main": "index.js",
15 |   "dependencies": {
16 |     "firebase-admin": "^9.2.0",
17 |     "firebase-functions": "^3.11.0"
18 |   },
19 |   "devDependencies": {
20 |     "firebase-functions-test": "^0.2.0"
21 |   },
22 |   "private": true
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fireblogs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "firebase": "^8.7.1",
13 |     "quill": "^1.3.7",
14 |     "quill-image-resize-module": "^3.0.0",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vue-svg-loader": "^0.16.0",
18 |     "vue2-editor": "^2.10.2",
19 |     "vuex": "^3.4.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-plugin-router": "~4.5.0",
25 |     "@vue/cli-plugin-vuex": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "node-sass": "^4.12.0",
31 |     "sass-loader": "^8.0.2",
32 |     "vue-template-compiler": "^2.6.11"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-wrapper">
  3 |     <div class="app" v-if="this.$store.state.postLoaded">
  4 |       <Navigation v-if="!navigation" />
  5 |       <router-view />
  6 |       <Footer v-if="!navigation" />
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import Navigation from "./components/Navigation";
 13 | import Footer from "./components/Footer";
 14 | import firebase from "firebase/app";
 15 | import "firebase/auth";
 16 | export default {
 17 |   name: "app",
 18 |   components: { Navigation, Footer },
 19 |   data() {
 20 |     return {
 21 |       navigation: null,
 22 |     };
 23 |   },
 24 |   created() {
 25 |     firebase.auth().onAuthStateChanged((user) => {
 26 |       this.$store.commit("updateUser", user);
 27 |       if (user) {
 28 |         this.$store.dispatch("getCurrentUser", user);
 29 |       }
 30 |     });
 31 |     this.checkRoute();
 32 |     this.$store.dispatch("getPost");
 33 |   },
 34 |   mounted() {},
 35 |   methods: {
 36 |     checkRoute() {
 37 |       if (this.$route.name === "Login" || this.$route.name === "Register" || this.$route.name === "ForgotPassword") {
 38 |         this.navigation = true;
 39 |         return;
 40 |       }
 41 |       this.navigation = false;
 42 |     },
 43 |   },
 44 |   watch: {
 45 |     $route() {
 46 |       this.checkRoute();
 47 |     },
 48 |   },
 49 | };
 50 | </script>
 51 | 
 52 | <style lang="scss">
 53 | @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
 54 | 
 55 | * {
 56 |   margin: 0;
 57 |   padding: 0;
 58 |   box-sizing: border-box;
 59 |   font-family: "Quicksand", sans-serif;
 60 | }
 61 | 
 62 | .app {
 63 |   display: flex;
 64 |   flex-direction: column;
 65 |   min-height: 100vh;
 66 | }
 67 | 
 68 | .container {
 69 |   max-width: 1440px;
 70 |   margin: 0 auto;
 71 | }
 72 | 
 73 | .link {
 74 |   cursor: pointer;
 75 |   text-decoration: none;
 76 |   text-transform: uppercase;
 77 |   color: black;
 78 | }
 79 | 
 80 | .link-light {
 81 |   color: #fff;
 82 | }
 83 | 
 84 | .arrow {
 85 |   margin-left: 8px;
 86 |   width: 12px;
 87 |   path {
 88 |     fill: #000;
 89 |   }
 90 | }
 91 | .arrow-light {
 92 |   path {
 93 |     fill: #fff;
 94 |   }
 95 | }
 96 | 
 97 | button,
 98 | .router-button {
 99 |   transition: 500ms ease all;
100 |   cursor: pointer;
101 |   margin-top: 24px;
102 |   padding: 12px 24px;
103 |   background-color: #303030;
104 |   color: #fff;
105 |   border-radius: 20px;
106 |   border: none;
107 |   text-transform: uppercase;
108 | 
109 |   &:focus {
110 |     outline: none;
111 |   }
112 | 
113 |   &:hover {
114 |     background-color: rgba(48, 48, 48, 0.7);
115 |   }
116 | }
117 | 
118 | .button-ghost {
119 |   color: #000;
120 |   padding: 0;
121 |   border-radius: 0;
122 |   margin-top: 50px;
123 |   font-size: 15px;
124 |   font-weight: 500;
125 |   background-color: transparent;
126 |   @media (min-width: 700px) {
127 |     margin-top: 0;
128 |     margin-left: auto;
129 |   }
130 | 
131 |   i {
132 |     margin-left: 8px;
133 |   }
134 | }
135 | 
136 | .button-light {
137 |   background-color: transparent;
138 |   border: 2px solid #fff;
139 |   color: #fff;
140 | }
141 | 
142 | .button-inactive {
143 |   pointer-events: none !important;
144 |   cursor: none !important;
145 |   background-color: rgba(128, 128, 128, 0.5) !important;
146 | }
147 | 
148 | .error {
149 |   text-align: center;
150 |   font-size: 12px;
151 |   color: red;
152 | }
153 | 
154 | .blog-card-wrap {
155 |   position: relative;
156 |   padding: 80px 16px;
157 |   background-color: #f1f1f1;
158 |   @media (min-width: 500px) {
159 |     padding: 100px 16px;
160 |   }
161 | 
162 |   .blog-cards {
163 |     display: grid;
164 |     gap: 32px;
165 |     grid-template-columns: 1fr;
166 | 
167 |     @media (min-width: 500px) {
168 |       grid-template-columns: repeat(2, 1fr);
169 |     }
170 |     @media (min-width: 900px) {
171 |       grid-template-columns: repeat(3, 1fr);
172 |     }
173 |     @media (min-width: 1200px) {
174 |       grid-template-columns: repeat(4, 1fr);
175 |     }
176 |   }
177 | }
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/assets/Icons/arrow-right-light.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/bars-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/edit-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/envelope-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/instagram-brands.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/linkedin-brands.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/lock-alt-solid.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock-alt" class="svg-inline--fa fa-lock-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zM264 392c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48zm32-168H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/sign-out-alt-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="sign-out-alt" class="svg-inline--fa fa-sign-out-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M272 112v51.6h-96c-26.5 0-48 21.5-48 48v88.6c0 26.5 21.5 48 48 48h96v51.6c0 42.6 51.7 64.2 81.9 33.9l144-143.9c18.7-18.7 18.7-49.1 0-67.9l-144-144C323.8 48 272 69.3 272 112zm192 144L320 400v-99.7H176v-88.6h144V112l144 144zM96 64h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-53 0-96-43-96-96V160c0-53 43-96 96-96z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/times-circle-light.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/trash-regular.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash" class="svg-inline--fa fa-trash fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/twitter-brands.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/user-alt-light.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="user-alt" class="svg-inline--fa fa-user-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 32c61.8 0 112 50.2 112 112s-50.2 112-112 112-112-50.2-112-112S194.2 32 256 32m128 320c52.9 0 96 43.1 96 96v32H32v-32c0-52.9 43.1-96 96-96 85 0 67.3 16 128 16 60.9 0 42.9-16 128-16M256 0c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144S335.5 0 256 0zm128 320c-92.4 0-71 16-128 16-56.8 0-35.7-16-128-16C57.3 320 0 377.3 0 448v32c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32v-32c0-70.7-57.3-128-128-128z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/user-crown-light.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="user-crown" class="svg-inline--fa fa-user-crown fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M313.6 320c-28.71 0-42.6 16-89.6 16-47.09 0-60.82-16-89.6-16C60.17 320 0 380.17 0 454.4v9.6c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-9.6c0-74.23-60.17-134.4-134.4-134.4zM416 464c0 8.82-7.18 16-16 16H48c-8.82 0-16-7.18-16-16v-9.6C32 397.94 77.94 352 134.4 352c19.38 0 39.33 16 89.6 16 49.4 0 70.66-16 89.6-16 56.46 0 102.4 45.94 102.4 102.4v9.6zM224 288c70.7 0 128-57.31 128-128V0l-64 32-64-32-64 32L96 0v160c0 70.69 57.31 128 128 128zM128 51.78l32 16 64-32 64 32 32-16V112H128V51.78zm0 92.22h192v16c0 52.93-43.06 96-96 96s-96-43.07-96-96v-16z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/whatsapp-brands.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>


--------------------------------------------------------------------------------
/src/assets/Icons/youtube-brands.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/background.png


--------------------------------------------------------------------------------
/src/assets/blogCards/stock-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogCards/stock-1.jpg


--------------------------------------------------------------------------------
/src/assets/blogCards/stock-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogCards/stock-2.jpg


--------------------------------------------------------------------------------
/src/assets/blogCards/stock-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogCards/stock-3.jpg


--------------------------------------------------------------------------------
/src/assets/blogCards/stock-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogCards/stock-4.jpg


--------------------------------------------------------------------------------
/src/assets/blogPhotos/beautiful-stories.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogPhotos/beautiful-stories.jpg


--------------------------------------------------------------------------------
/src/assets/blogPhotos/coding.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogPhotos/coding.jpg


--------------------------------------------------------------------------------
/src/assets/blogPhotos/designed-for-everyone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/blogPhotos/designed-for-everyone.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaerfayyad/fireBlogs-vuejs-backend-firebase/e9c9b055d88cadb14ecb7ffa3a7f797b6d505b32/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/BlogCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="blog-card">
  3 |     <div v-show="editPost" class="icons">
  4 |       <div @click="editBlog" class="icon">
  5 |         <Edit class="edit" />
  6 |       </div>
  7 |       <div @click="deletePost" class="icon">
  8 |         <Delete class="delete" />
  9 |       </div>
 10 |     </div>
 11 |     <img :src="post.blogCoverPhoto" alt="" />
 12 |     <div class="info">
 13 |       <h4>{{ post.blogTitle }}</h4>
 14 |       <h6>Posted on: {{ new Date(post.blogDate).toLocaleString("en-us", { dateStyle: "long" }) }}</h6>
 15 |       <router-link class="link" :to="{ name: 'ViewBlog', params: { blogid: this.post.blogID } }">
 16 |         View The Post <Arrow class="arrow" />
 17 |       </router-link>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import Arrow from "../assets/Icons/arrow-right-light.svg";
 24 | import Edit from "../assets/Icons/edit-regular.svg";
 25 | import Delete from "../assets/Icons/trash-regular.svg";
 26 | export default {
 27 |   name: "blogCard",
 28 |   props: ["post"],
 29 |   components: {
 30 |     Arrow,
 31 |     Edit,
 32 |     Delete,
 33 |   },
 34 |   methods: {
 35 |     deletePost() {
 36 |       this.$store.dispatch("deletePost", this.post.blogID);
 37 |     },
 38 |     editBlog() {
 39 |       this.$router.push({ name: "EditBlog", params: { blogid: this.post.blogID } });
 40 |     },
 41 |   },
 42 |   computed: {
 43 |     editPost() {
 44 |       return this.$store.state.editPost;
 45 |     },
 46 |   },
 47 | };
 48 | </script>
 49 | 
 50 | <style lang="scss" scoped>
 51 | .blog-card {
 52 |   position: relative;
 53 |   cursor: pointer;
 54 |   display: flex;
 55 |   flex-direction: column;
 56 |   border-radius: 8px;
 57 |   background-color: #fff;
 58 |   min-height: 420px;
 59 |   transition: 0.5s ease all;
 60 | 
 61 |   &:hover {
 62 |     transform: rotateZ(-1deg) scale(1.01);
 63 |     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 64 |   }
 65 | 
 66 |   .icons {
 67 |     display: flex;
 68 |     position: absolute;
 69 |     top: 10px;
 70 |     right: 10px;
 71 |     z-index: 99;
 72 | 
 73 |     .icon {
 74 |       display: flex;
 75 |       justify-content: center;
 76 |       align-items: center;
 77 |       width: 35px;
 78 |       height: 35px;
 79 |       border-radius: 50%;
 80 |       background-color: #fff;
 81 |       transition: 0.5s ease all;
 82 | 
 83 |       &:hover {
 84 |         background-color: #303030;
 85 | 
 86 |         .edit,
 87 |         .delete {
 88 |           path {
 89 |             fill: #fff;
 90 |           }
 91 |         }
 92 |       }
 93 | 
 94 |       &:nth-child(1) {
 95 |         margin-right: 8px;
 96 |       }
 97 | 
 98 |       .edit,
 99 |       .delete {
100 |         pointer-events: none;
101 |         height: 15px;
102 |         width: auto;
103 |       }
104 |     }
105 |   }
106 | 
107 |   img {
108 |     display: block;
109 |     border-radius: 8px 8px 0 0;
110 |     z-index: 1;
111 |     width: 100%;
112 |     min-height: 200px;
113 |     object-fit: cover;
114 |   }
115 | 
116 |   .info {
117 |     display: flex;
118 |     flex-direction: column;
119 |     height: 100%;
120 |     z-index: 3;
121 |     padding: 32px 16px;
122 |     color: #000;
123 | 
124 |     h4 {
125 |       padding-bottom: 8px;
126 |       font-size: 20px;
127 |       font-weight: 300;
128 |     }
129 | 
130 |     h6 {
131 |       font-weight: 400;
132 |       font-size: 12px;
133 |       padding-bottom: 16px;
134 |     }
135 | 
136 |     .link {
137 |       display: inline-flex;
138 |       align-items: center;
139 |       margin-top: auto;
140 |       font-weight: 500;
141 |       padding-top: 20px;
142 |       font-size: 12px;
143 |       padding-bottom: 4px;
144 |       transition: 0.5s ease-in all;
145 | 
146 |       &:hover {
147 |         color: rgba(48, 48, 48, 0.8);
148 |       }
149 | 
150 |       .arrow {
151 |         width: 10px;
152 |       }
153 |     }
154 |   }
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/components/BlogCoverPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal" ref="modal">
 3 |     <div class="modal-content">
 4 |       <close @click="closePreview" class="icon" />
 5 |       <img :src="this.blogCoverPhoto" alt="" />
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import close from "../assets/Icons/times-circle-light.svg";
12 | export default {
13 |   components: {
14 |     close,
15 |   },
16 |   methods: {
17 |     closePreview() {
18 |       this.$store.commit("openPhotoPreview");
19 |     },
20 |   },
21 |   computed: {
22 |     blogCoverPhoto() {
23 |       return this.$store.state.blogPhotoFileURL;
24 |     },
25 |   },
26 | };
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .modal {
31 |   top: 0;
32 |   background-color: rgba(0, 0, 0, 0.5);
33 |   z-index: 99;
34 |   position: fixed;
35 |   display: flex;
36 |   justify-content: center;
37 |   align-items: center;
38 |   height: 100%;
39 |   width: 100%;
40 | 
41 |   .modal-content {
42 |     display: flex;
43 |     justify-content: center;
44 |     position: relative;
45 |     border-radius: 12px;
46 |     background-color: #fff;
47 |     height: 400px;
48 |     width: 600px;
49 |     padding: 50px;
50 |     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
51 | 
52 |     .icon {
53 |       width: 24px;
54 |       height: auto;
55 |       cursor: pointer;
56 |       font-size: 24px;
57 |       position: absolute;
58 |       top: 15px;
59 |       right: 15px;
60 |       color: #303030;
61 |     }
62 | 
63 |     img {
64 |       margin-top: 16px;
65 |       display: block;
66 |       width: auto;
67 |       height: 100%;
68 |       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
69 |     }
70 |   }
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/BlogPost.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="blog-wrapper" :class="{ 'no-user': !user }">
  3 |     <div class="blog-content">
  4 |       <div>
  5 |         <h2 v-if="post.welcomeScreen">{{ post.title }}</h2>
  6 |         <h2 v-else>{{ post.blogTitle }}</h2>
  7 |         <p v-if="post.welcomeScreen">{{ post.blogPost }}</p>
  8 |         <p class="content-preview" v-else v-html="post.blogHTML"></p>
  9 |         <router-link class="link link-light" v-if="post.welcomeScreen" to="#">
 10 |           Login/Register<Arrow class="arrow arrow-light" />
 11 |         </router-link>
 12 |         <router-link class="link" v-else :to="{ name: 'ViewBlog', params: { blogid: this.post.blogID } }">
 13 |           View The Post<Arrow class="arrow" />
 14 |         </router-link>
 15 |       </div>
 16 |     </div>
 17 |     <div class="blog-photo">
 18 |       <img v-if="post.welcomeScreen" :src="require(`../assets/blogPhotos/${post.photo}.jpg`)" alt="" />
 19 |       <img v-else :src="post.blogCoverPhoto" alt="" />
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | import Arrow from "../assets/Icons/arrow-right-light.svg";
 26 | export default {
 27 |   name: "blogPost",
 28 |   props: ["post"],
 29 |   components: {
 30 |     Arrow,
 31 |   },
 32 |   computed: {
 33 |     user() {
 34 |       return this.$store.state.user;
 35 |     },
 36 |   },
 37 | };
 38 | </script>
 39 | 
 40 | <style lang="scss" scoped>
 41 | .blog-wrapper {
 42 |   display: flex;
 43 |   flex-direction: column;
 44 |   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 45 |   @media (min-width: 700px) {
 46 |     min-height: 650px;
 47 |     max-height: 650px;
 48 |     flex-direction: row;
 49 |   }
 50 | 
 51 |   .blog-content {
 52 |     display: flex;
 53 |     flex-direction: column;
 54 |     justify-content: center;
 55 |     align-items: center;
 56 |     flex: 4;
 57 |     order: 2;
 58 |     @media (min-width: 700px) {
 59 |       order: 1;
 60 |     }
 61 |     @media (min-width: 800px) {
 62 |       flex: 3;
 63 |     }
 64 | 
 65 |     div {
 66 |       max-width: 375px;
 67 |       padding: 72px 24px;
 68 |       @media (min-width: 700px) {
 69 |         padding: 0 24px;
 70 |       }
 71 | 
 72 |       h2 {
 73 |         font-size: 32px;
 74 |         font-weight: 300;
 75 |         text-transform: uppercase;
 76 |         margin-bottom: 24px;
 77 |         @media (min-width: 700px) {
 78 |           font-size: 40px;
 79 |         }
 80 |       }
 81 | 
 82 |       p {
 83 |         font-size: 15px;
 84 |         font-weight: 300;
 85 |         line-height: 1.7;
 86 |       }
 87 | 
 88 |       .content-preview {
 89 |         font-size: 13px;
 90 |         max-height: 24px;
 91 |         width: 250px;
 92 |         white-space: nowrap;
 93 |         overflow: hidden;
 94 |         text-overflow: ellipsis;
 95 |       }
 96 | 
 97 |       .link {
 98 |         display: inline-flex;
 99 |         align-items: center;
100 |         margin-top: 32px;
101 |         padding-bottom: 4px;
102 |         border-bottom: 1px solid transparent;
103 |         transition: 0.5s ease-in all;
104 | 
105 |         &:hover {
106 |           border-bottom-color: #303030;
107 |         }
108 |       }
109 | 
110 |       .link-light {
111 |         &:hover {
112 |           border-bottom-color: #ffff;
113 |         }
114 |       }
115 |     }
116 |   }
117 | 
118 |   .blog-photo {
119 |     order: 1;
120 |     flex: 3;
121 |     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
122 | 
123 |     @media (min-width: 700px) {
124 |       order: 2;
125 |     }
126 |     @media (min-width: 800px) {
127 |       flex: 4;
128 |     }
129 | 
130 |     img {
131 |       display: block;
132 |       width: 100%;
133 |       height: 100%;
134 |       object-fit: cover;
135 |     }
136 |   }
137 | 
138 |   &:nth-child(even) {
139 |     .blog-content {
140 |       order: 2;
141 |     }
142 |     .blog-photo {
143 |       order: 1;
144 |     }
145 |   }
146 | }
147 | 
148 | .no-user:first-child {
149 |   .blog-content {
150 |     background-color: #303030;
151 |     color: #fff;
152 |   }
153 | }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <footer>
  3 |     <div class="container">
  4 |       <div class="left">
  5 |         <div class="col-1">
  6 |           <router-link class="header" :to="{ name: 'Home' }">FireBlogs</router-link>
  7 |           <ul>
  8 |             <li>
  9 |               <a href=" https://wa.me/00972595840807" target="_blank"><whatsapp class="svg-icon"/></a>
 10 |             </li>
 11 |             <li>
 12 |               <a href="https://twitter.com/devThaer" target="_blank"><twitter class="svg-icon"/></a>
 13 |             </li>
 14 |             <li>
 15 |               <a href="https://www.instagram.com/thaer_fayyad94/" target="_blank"><instagram class="svg-icon"/></a>
 16 |             </li>
 17 |             <li>
 18 |               <a href="https://www.linkedin.com/in/thaer-fayyad/" target="_blank"><linkedin class="svg-icon"/></a>
 19 |             </li>
 20 |           </ul>
 21 |         </div>
 22 |         <div class="col-2">
 23 |           <ul>
 24 |             <router-link class="link" :to="{ name: 'Home' }">Home</router-link>
 25 |             <router-link class="link" :to="{ name: 'Blogs' }">Blogs</router-link>
 26 |             <router-link v-if="admin" class="link" :to="{ name: 'CreatePost' }">Create Post</router-link>
 27 |             <router-link v-if="!user" class="link" :to="{ name: 'Login' }">Login In / Register</router-link>
 28 |           </ul>
 29 |         </div>
 30 |       </div>
 31 |       <div class="right">
 32 |         <p>Copyright 2021 All Rights Reserved</p>
 33 |       </div>
 34 |     </div>
 35 |   </footer>
 36 | </template>
 37 | 
 38 | <script>
 39 | // import youTube from "../assets/Icons/youtube-brands.svg";
 40 | import whatsapp from "../assets/Icons/whatsapp-brands.svg";
 41 | import twitter from "../assets/Icons/twitter-brands.svg";
 42 | import instagram from "../assets/Icons/instagram-brands.svg";
 43 | import linkedin from "../assets/Icons/linkedin-brands.svg";
 44 | export default {
 45 |   name: "footer-vue",
 46 |   components: {
 47 |     // youTube,
 48 |     whatsapp,
 49 |     twitter,
 50 |     instagram,
 51 |     linkedin,
 52 |   },
 53 |   computed: {
 54 |     user() {
 55 |       return this.$store.state.user;
 56 |     },
 57 |     admin() {
 58 |       return this.$store.state.profileAdmin;
 59 |     },
 60 |   },
 61 | };
 62 | </script>
 63 | 
 64 | <style lang="scss" scoped>
 65 | footer {
 66 |   margin-top: auto;
 67 |   padding: 100px 25px;
 68 |   background-color: #303030;
 69 |   .container {
 70 |     display: flex;
 71 |     flex-direction: column;
 72 |     gap: 32px;
 73 |     @media (min-width: 800px) {
 74 |       flex-direction: row;
 75 |       gap: 0px;
 76 |     }
 77 | 
 78 |     > div {
 79 |       display: flex;
 80 |       flex: 1;
 81 |     }
 82 | 
 83 |     .left {
 84 |       gap: 32px;
 85 |       color: #fff;
 86 |       display: flex;
 87 |       flex-direction: column;
 88 |       align-items: center;
 89 |       @media (min-width: 800px) {
 90 |         flex-direction: row;
 91 |         align-items: initial;
 92 |         gap: 0;
 93 |       }
 94 | 
 95 |       .header {
 96 |         text-align: center;
 97 |         font-size: 24px;
 98 |         color: #fff;
 99 |         margin-bottom: 16px;
100 |         text-decoration: none;
101 |         font-weight: 600;
102 |         @media (min-width: 800px) {
103 |           text-align: initial;
104 |         }
105 |       }
106 |       ul {
107 |         gap: 16px;
108 |         list-style: none;
109 |         display: flex;
110 |       }
111 | 
112 |       .col-1,
113 |       .col-2 {
114 |         gap: 32px;
115 |         display: flex;
116 |         flex: 1;
117 |         @media (min-width: 800px) {
118 |           gap: 0;
119 |         }
120 |       }
121 | 
122 |       .col-1 {
123 |         flex-direction: column;
124 | 
125 |         h2 {
126 |           text-align: center;
127 |           @media (min-width: 800px) {
128 |             text-align: initial;
129 |           }
130 |         }
131 |         ul {
132 |           margin-top: auto;
133 | 
134 |           li {
135 |             display: flex;
136 |             align-items: center;
137 |             .svg-icon {
138 |               width: 24px;
139 |               height: auto;
140 |               color: #fff;
141 |             }
142 |           }
143 |         }
144 |       }
145 | 
146 |       .col-2 {
147 |         ul {
148 |           height: 100%;
149 |           justify-content: center;
150 |           flex-direction: row;
151 |           flex-wrap: wrap;
152 |           @media (min-width: 800px) {
153 |             flex-direction: column;
154 |           }
155 |           .link {
156 |             font-size: 16px;
157 |             font-weight: 500;
158 |             color: #fff;
159 |             text-decoration: none;
160 |           }
161 |         }
162 |       }
163 |     }
164 | 
165 |     .right {
166 |       gap: 32px;
167 |       color: #fff;
168 |       align-items: center;
169 |       flex-direction: column;
170 |       @media (min-width: 800px) {
171 |         align-items: flex-end;
172 |         gap: 0;
173 |       }
174 |     }
175 | 
176 |     p {
177 |       margin-top: auto;
178 |     }
179 |   }
180 | }
181 | </style>
182 | 


--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading">
 3 |     <span></span>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "loading",
10 | };
11 | </script>
12 | 
13 | <style lang="scss">
14 | .loading {
15 |   top: 0;
16 |   z-index: 101;
17 |   height: 100%;
18 |   width: 100%;
19 |   background-color: rgba(0, 0, 0, 0.5);
20 |   position: fixed;
21 |   display: flex;
22 |   justify-content: center;
23 |   align-items: center;
24 |   @keyframes spin {
25 |     to {
26 |       transform: rotateZ(360deg);
27 |     }
28 |   }
29 |   span {
30 |     display: block;
31 |     width: 60px;
32 |     height: 60px;
33 |     margin: 0 auto;
34 |     border: 3px solid transparent;
35 |     border-top-color: #fff;
36 |     border-bottom-color: #fff;
37 |     border-radius: 50%;
38 |     animation: spin ease 1000ms infinite;
39 |   }
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="modal-content">
 4 |       <p>{{ this.modalMessage }}</p>
 5 |       <button @click="closeModal">Close</button>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: ["modalMessage"],
13 |   methods: {
14 |     closeModal() {
15 |       this.$emit("close-modal");
16 |     },
17 |   },
18 | };
19 | </script>
20 | 
21 | <style lang="scss" scoped>
22 | .modal {
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 |   z-index: 101;
27 |   position: absolute;
28 |   width: 100%;
29 |   height: 100%;
30 |   top: 0;
31 |   background-color: rgba(0, 0, 0, 0.7);
32 | 
33 |   .modal-content {
34 |     display: flex;
35 |     flex-direction: column;
36 |     justify-content: center;
37 |     border-radius: 8px;
38 |     width: 300px;
39 |     padding: 40px 30px;
40 |     background-color: #fff;
41 | 
42 |     p {
43 |       text-align: center;
44 |     }
45 | 
46 |     button {
47 |       align-self: center;
48 |     }
49 |   }
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/Navigation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header>
  3 |     <nav class="container">
  4 |       <div class="branding">
  5 |         <router-link class="header" :to="{ name: 'Home' }">FireBlogs</router-link>
  6 |       </div>
  7 |       <div class="nav-links">
  8 |         <ul v-show="!mobile">
  9 |           <router-link class="link" :to="{ name: 'Home' }">Home</router-link>
 10 |           <router-link class="link" :to="{ name: 'Blogs' }">Blogs</router-link>
 11 |           <router-link  class="link" :to="{ name: 'CreatePost' }">Create Post</router-link> 
 12 |           <router-link v-if="!user" class="link" :to="{ name: 'Login' }">Login/Register</router-link>
 13 |         </ul>
 14 |         <div v-if="user" :class="{ 'mobile-user-menu': mobile }" @click="toggleProfileMenu" class="profile" ref="profile">
 15 |           <span>{{ this.$store.state.profileInitials }}</span>
 16 |           <div v-show="profileMenu" class="profile-menu">
 17 |             <div class="info">
 18 |               <p class="initials">{{ this.$store.state.profileInitials }}</p>
 19 |               <div class="right">
 20 |                 <p>{{ this.$store.state.profileFirstName }} {{ this.$store.state.profileLastName }}</p>
 21 |                 <p>{{ this.$store.state.profileUsername }}</p>
 22 |                 <p>{{ this.$store.state.profileEmail }}</p>
 23 |               </div>
 24 |             </div>
 25 |             <div class="options">
 26 |               <div class="option">
 27 |                 <router-link class="option" :to="{ name: 'Profile' }">
 28 |                   <userIcon class="icon" />
 29 |                   <p>Profile</p>
 30 |                 </router-link>
 31 |               </div>
 32 |               <div v-if="admin" class="option">
 33 |                 <router-link class="option" :to="{ name: 'Admin' }">
 34 |                   <adminIcon class="icon" />
 35 |                   <p>Admin</p>
 36 |                 </router-link>
 37 |               </div>
 38 |               <div @click="signOut" class="option">
 39 |                 <signOutIcon class="icon" />
 40 |                 <p>Sign Out</p>
 41 |               </div>
 42 |             </div>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </nav>
 47 |     <menuIcon @click="toggleMobileNav" class="menu-icon" v-show="mobile" />
 48 |     <transition name="mobile-nav">
 49 |       <ul class="mobile-nav" v-show="mobileNav">
 50 |         <router-link class="link" :to="{ name: 'Home' }">Home</router-link>
 51 |         <router-link class="link" :to="{ name: 'Blogs' }">Blogs</router-link>
 52 |         <router-link v-if="admin" class="link" :to="{ name: 'CreatePost' }">Create Post</router-link>
 53 |         <router-link v-if="!user" class="link" :to="{ name: 'Login' }">Login/Register</router-link>
 54 |       </ul>
 55 |     </transition>
 56 |   </header>
 57 | </template>
 58 | 
 59 | <script>
 60 | import menuIcon from "../assets/Icons/bars-regular.svg";
 61 | import userIcon from "../assets/Icons/user-alt-light.svg";
 62 | import adminIcon from "../assets/Icons/user-crown-light.svg";
 63 | import signOutIcon from "../assets/Icons/sign-out-alt-regular.svg";
 64 | import firebase from "firebase/app";
 65 | import "firebase/auth";
 66 | 
 67 | export default {
 68 |   name: "navigation",
 69 |   components: {
 70 |     menuIcon,
 71 |     userIcon,
 72 |     adminIcon,
 73 |     signOutIcon,
 74 |   },
 75 |   data() {
 76 |     return {
 77 |       profileMenu: null,
 78 |       mobile: null,
 79 |       mobileNav: null,
 80 |       windownWidth: null,
 81 |     };
 82 |   },
 83 |   created() {
 84 |     window.addEventListener("resize", this.checkScreen);
 85 |     this.checkScreen();
 86 |   },
 87 |   methods: {
 88 |     checkScreen() {
 89 |       this.windownWidth = window.innerWidth;
 90 |       if (this.windownWidth <= 750) {
 91 |         this.mobile = true;
 92 |         return;
 93 |       }
 94 |       this.mobile = false;
 95 |       this.mobileNav = false;
 96 |       return;
 97 |     },
 98 | 
 99 |     toggleMobileNav() {
100 |       this.mobileNav = !this.mobileNav;
101 |     },
102 | 
103 |     toggleProfileMenu(e) {
104 |       if (e.target === this.$refs.profile) {
105 |         this.profileMenu = !this.profileMenu;
106 |       }
107 |     },
108 | 
109 |     signOut() {
110 |       firebase.auth().signOut();
111 |       window.location.reload();
112 |     },
113 |   },
114 |   computed: {
115 |     user() {
116 |       return this.$store.state.user;
117 |     },
118 |     admin() {
119 |       return this.$store.state.profileAdmin;
120 |     },
121 |   },
122 | };
123 | </script>
124 | 
125 | <style lang="scss" scoped>
126 | header {
127 |   background-color: #fff;
128 |   padding: 0 25px;
129 |   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
130 |   z-index: 99;
131 | 
132 |   .link {
133 |     font-weight: 500;
134 |     padding: 0 8px;
135 |     transition: 0.3s color ease;
136 | 
137 |     &:hover {
138 |       color: #1eb8b8;
139 |     }
140 |   }
141 | 
142 |   nav {
143 |     display: flex;
144 |     padding: 25px 0;
145 | 
146 |     .branding {
147 |       display: flex;
148 |       align-items: center;
149 | 
150 |       .header {
151 |         font-weight: 600;
152 |         font-size: 24px;
153 |         color: #000;
154 |         text-decoration: none;
155 |       }
156 |     }
157 | 
158 |     .nav-links {
159 |       position: relative;
160 |       display: flex;
161 |       flex: 1;
162 |       align-items: center;
163 |       justify-content: flex-end;
164 | 
165 |       ul {
166 |         margin-right: 32px;
167 | 
168 |         .link {
169 |           margin-right: 32px;
170 |         }
171 | 
172 |         .link:last-child {
173 |           margin-right: 0;
174 |         }
175 |       }
176 | 
177 |       .profile {
178 |         position: relative;
179 |         cursor: pointer;
180 |         display: flex;
181 |         align-items: center;
182 |         justify-content: center;
183 |         width: 40px;
184 |         height: 40px;
185 |         border-radius: 50%;
186 |         color: #fff;
187 |         background-color: #303030;
188 | 
189 |         span {
190 |           pointer-events: none;
191 |         }
192 | 
193 |         .profile-menu {
194 |           position: absolute;
195 |           top: 60px;
196 |           right: 0;
197 |           width: 250px;
198 |           background-color: #303030;
199 |           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
200 | 
201 |           .info {
202 |             display: flex;
203 |             align-items: center;
204 |             padding: 15px;
205 |             border-bottom: 1px solid #fff;
206 | 
207 |             .initials {
208 |               position: initial;
209 |               width: 40px;
210 |               height: 40px;
211 |               background-color: #fff;
212 |               color: #303030;
213 |               display: flex;
214 |               align-items: center;
215 |               justify-content: center;
216 |               border-radius: 50%;
217 |             }
218 | 
219 |             .right {
220 |               flex: 1;
221 |               margin-left: 24px;
222 | 
223 |               p:nth-child(1) {
224 |                 font-size: 14px;
225 |               }
226 | 
227 |               p:nth-child(2),
228 |               p:nth-child(3) {
229 |                 font-size: 12px;
230 |               }
231 |             }
232 |           }
233 | 
234 |           .options {
235 |             padding: 15px;
236 |             .option {
237 |               text-decoration: none;
238 |               color: #fff;
239 |               display: flex;
240 |               align-items: center;
241 |               margin-bottom: 12px;
242 | 
243 |               .icon {
244 |                 width: 18px;
245 |                 height: auto;
246 |               }
247 |               p {
248 |                 font-size: 14px;
249 |                 margin-left: 12px;
250 |               }
251 | 
252 |               &:last-child {
253 |                 margin-bottom: 0px;
254 |               }
255 |             }
256 |           }
257 |         }
258 |       }
259 |     }
260 | 
261 |     .mobile-user-menu {
262 |       margin-right: 40px;
263 |     }
264 |   }
265 | 
266 |   .menu-icon {
267 |     cursor: pointer;
268 |     position: absolute;
269 |     top: 32px;
270 |     right: 25px;
271 |     height: 25px;
272 |     width: auto;
273 |   }
274 | 
275 |   .mobile-nav {
276 |     padding: 20px;
277 |     width: 70%;
278 |     max-width: 250px;
279 |     display: flex;
280 |     flex-direction: column;
281 |     position: fixed;
282 |     height: 100%;
283 |     background-color: #303030;
284 |     top: 0;
285 |     left: 0;
286 | 
287 |     .link {
288 |       padding: 15px 0;
289 |       color: #fff;
290 |     }
291 |   }
292 | 
293 |   .mobile-nav-enter-active,
294 |   .mobile-nav-leave-active {
295 |     transition: all 1s ease;
296 |   }
297 | 
298 |   .mobile-nav-enter {
299 |     transform: translateX(-250px);
300 |   }
301 | 
302 |   .mobile-nav-enter-to {
303 |     transform: translateX(0);
304 |   }
305 | 
306 |   .mobile-nav-leave-to {
307 |     transform: translateX(-250px);
308 |   }
309 | }
310 | </style>
311 | 


--------------------------------------------------------------------------------
/src/firebase/firebaseInit.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase/app";
 2 | import "firebase/firestore";
 3 | 
 4 | var firebaseConfig = {
 5 |   // ENTER YOUR CONFIG HERE
 6 |   apiKey: "",
 7 |   authDomain: "",
 8 |   projectId: "",
 9 |   storageBucket: "",
10 |   messagingSenderId: "",
11 |   appId: ""
12 | };
13 | 
14 | const firebaseApp = firebase.initializeApp(firebaseConfig);
15 | const timestamp = firebase.firestore.FieldValue.serverTimestamp;
16 | 
17 | export { timestamp };
18 | export default firebaseApp.firestore();
19 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import Vue2Editor from "vue2-editor";
 6 | import firebase from "firebase/app";
 7 | import "firebase/auth";
 8 | 
 9 | Vue.use(Vue2Editor);
10 | 
11 | Vue.config.productionTip = false;
12 | 
13 | let app;
14 | firebase.auth().onAuthStateChanged(() => {
15 |   if (!app) {
16 |     new Vue({
17 |       router,
18 |       store,
19 |       render: (h) => h(App),
20 |     }).$mount("#app");
21 |   }
22 | });
23 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import VueRouter from "vue-router";
  3 | import Home from "../views/Home.vue";
  4 | import Blogs from "../views/Blogs.vue";
  5 | import Login from "../views/Login.vue";
  6 | import Register from "../views/Register.vue";
  7 | import ForgotPassword from "../views/ForgotPassword.vue";
  8 | import Profile from "../views/Profile.vue";
  9 | import Admin from "../views/Admin.vue";
 10 | import CreatePost from "../views/CreatePost.vue";
 11 | import BlogPreview from "../views/BlogPreview.vue";
 12 | import ViewBlog from "../views/ViewBlog.vue";
 13 | import EditBlog from "../views/EditBlog.vue";
 14 | import firebase from "firebase/app";
 15 | import "firebase/auth";
 16 | 
 17 | Vue.use(VueRouter);
 18 | 
 19 | const routes = [
 20 |   {
 21 |     path: "/",
 22 |     name: "Home",
 23 |     component: Home,
 24 |     meta: {
 25 |       title: "Home",
 26 |       requiresAuth: false,
 27 |     },
 28 |   },
 29 |   {
 30 |     path: "/blogs",
 31 |     name: "Blogs",
 32 |     component: Blogs,
 33 |     meta: {
 34 |       title: "Blogs",
 35 |       requiresAuth: false,
 36 |     },
 37 |   },
 38 |   {
 39 |     path: "/login",
 40 |     name: "Login",
 41 |     component: Login,
 42 |     meta: {
 43 |       title: "Login",
 44 |       requiresAuth: false,
 45 |     },
 46 |   },
 47 |   {
 48 |     path: "/register",
 49 |     name: "Register",
 50 |     component: Register,
 51 |     meta: {
 52 |       title: "Register",
 53 |       requiresAuth: false,
 54 |     },
 55 |   },
 56 |   {
 57 |     path: "/forgot-password",
 58 |     name: "ForgotPassword",
 59 |     component: ForgotPassword,
 60 |     meta: {
 61 |       title: "Forgot Password",
 62 |       requiresAuth: false,
 63 |     },
 64 |   },
 65 |   {
 66 |     path: "/profile",
 67 |     name: "Profile",
 68 |     component: Profile,
 69 |     meta: {
 70 |       title: "Profile",
 71 |       requiresAuth: true,
 72 |     },
 73 |   },
 74 |   {
 75 |     path: "/admin",
 76 |     name: "Admin",
 77 |     component: Admin,
 78 |     meta: {
 79 |       title: "Admin",
 80 |       requiresAuth: true,
 81 |       requiresAdmin: true,
 82 |     },
 83 |   },
 84 |   {
 85 |     path: "/create-post",
 86 |     name: "CreatePost",
 87 |     component: CreatePost,
 88 |     meta: {
 89 |       title: "Create Post",
 90 |       // requiresAuth: true,
 91 |       // requiresAdmin: true,
 92 |     },
 93 |   },
 94 |   {
 95 |     path: "/post-preview",
 96 |     name: "BlogPreview",
 97 |     component: BlogPreview,
 98 |     meta: {
 99 |       title: "Preview Blog Post",
100 |       // requiresAuth: true,
101 |       // requiresAdmin: true,
102 |     },
103 |   },
104 |   {
105 |     path: "/view-blog/:blogid",
106 |     name: "ViewBlog",
107 |     component: ViewBlog,
108 |     meta: {
109 |       title: "View Blog Post",
110 |       requiresAuth: false,
111 |     },
112 |   },
113 |   {
114 |     path: "/edit-blog/:blogid",
115 |     name: "EditBlog",
116 |     component: EditBlog,
117 |     meta: {
118 |       title: "Edit Blog Post",
119 |       // requiresAuth: true,
120 |       // requiresAdmin: true,
121 |     },
122 |   },
123 | ];
124 | 
125 | const router = new VueRouter({
126 |   mode: "history",
127 |   base: process.env.BASE_URL,
128 |   routes,
129 |   scrollBehavior() {
130 |     return { x: 0, y: 0 };
131 |   },
132 | });
133 | 
134 | router.beforeEach((to, from, next) => {
135 |   document.title = `${to.meta.title} | FireBlog`;
136 |   next();
137 | });
138 | 
139 | router.beforeEach(async (to, from, next) => {
140 |   let user = firebase.auth().currentUser;
141 |   let admin = null;
142 |   if (user) {
143 |     let token = await user.getIdTokenResult();
144 |     admin = token.claims.admin;
145 |   }
146 |   if (to.matched.some((res) => res.meta.requiresAuth)) {
147 |     if (user) {
148 |       if (to.matched.some((res) => res.meta.requiresAdmin)) {
149 |         if (admin) {
150 |           return next();
151 |         }
152 |         return next({ name: "Home" });
153 |       }
154 |       return next();
155 |     }
156 |     return next({ name: "Home" });
157 |   }
158 |   return next();
159 | });
160 | 
161 | export default router;
162 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import Vuex from "vuex";
  3 | import firebase from "firebase/app";
  4 | import "firebase/auth";
  5 | import db from "../firebase/firebaseInit";
  6 | 
  7 | Vue.use(Vuex);
  8 | 
  9 | export default new Vuex.Store({
 10 |   state: {
 11 |     blogPosts: [],
 12 |     postLoaded: null,
 13 |     blogHTML: "Write your blog title here...",
 14 |     blogTitle: "",
 15 |     blogPhotoName: "",
 16 |     blogPhotoFileURL: null,
 17 |     blogPhotoPreview: null,
 18 |     editPost: null,
 19 |     user: null,
 20 |     profileAdmin: null,
 21 |     profileEmail: null,
 22 |     profileFirstName: null,
 23 |     profileLastName: null,
 24 |     profileUsername: null,
 25 |     profileId: null,
 26 |     profileInitials: null,
 27 |   },
 28 |   getters: {
 29 |     blogPostsFeed(state) {
 30 |       return state.blogPosts.slice(0, 2);
 31 |     },
 32 |     blogPostsCards(state) {
 33 |       return state.blogPosts.slice(2, 6);
 34 |     },
 35 |   },
 36 |   mutations: {
 37 |     newBlogPost(state, payload) {
 38 |       state.blogHTML = payload;
 39 |     },
 40 |     updateBlogTitle(state, payload) {
 41 |       state.blogTitle = payload;
 42 |     },
 43 |     fileNameChange(state, payload) {
 44 |       state.blogPhotoName = payload;
 45 |     },
 46 |     createFileURL(state, payload) {
 47 |       state.blogPhotoFileURL = payload;
 48 |     },
 49 |     openPhotoPreview(state) {
 50 |       state.blogPhotoPreview = !state.blogPhotoPreview;
 51 |     },
 52 |     toggleEditPost(state, payload) {
 53 |       state.editPost = payload;
 54 |     },
 55 |     setBlogState(state, payload) {
 56 |       state.blogTitle = payload.blogTitle;
 57 |       state.blogHTML = payload.blogHTML;
 58 |       state.blogPhotoFileURL = payload.blogCoverPhoto;
 59 |       state.blogPhotoName = payload.blogCoverPhotoName;
 60 |     },
 61 |     filterBlogPost(state, payload) {
 62 |       state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
 63 |     },
 64 |     updateUser(state, payload) {
 65 |       state.user = payload;
 66 |     },
 67 |     setProfileAdmin(state, payload) {
 68 |       state.profileAdmin = payload;
 69 |       console.log(state.profileAdmin);
 70 |     },
 71 |     setProfileInfo(state, doc) {
 72 |       state.profileId = doc.id;
 73 |       state.profileEmail = doc.data().email;
 74 |       state.profileFirstName = doc.data().firstName;
 75 |       state.profileLastName = doc.data().lastName;
 76 |       state.profileUsername = doc.data().username;
 77 |       console.log(state.profileId);
 78 |     },
 79 |     setProfileInitials(state) {
 80 |       state.profileInitials =
 81 |         state.profileFirstName.match(/(\b\S)?/g).join("") + state.profileLastName.match(/(\b\S)?/g).join("");
 82 |     },
 83 |     changeFirstName(state, payload) {
 84 |       state.profileFirstName = payload;
 85 |     },
 86 |     changeLastName(state, payload) {
 87 |       state.profileLastName = payload;
 88 |     },
 89 |     changeUsername(state, payload) {
 90 |       state.profileUsername = payload;
 91 |     },
 92 |   },
 93 |   actions: {
 94 |     async getCurrentUser({ commit }, user) {
 95 |       const dataBase = await db.collection("users").doc(firebase.auth().currentUser.uid);
 96 |       const dbResults = await dataBase.get();
 97 |       commit("setProfileInfo", dbResults);
 98 |       commit("setProfileInitials");
 99 |       const token = await user.getIdTokenResult();
100 |       const admin = await token.claims.admin;
101 |       commit("setProfileAdmin", admin);
102 |     },
103 |     async getPost({ state }) {
104 |       const dataBase = await db.collection("blogPosts").orderBy("date", "desc");
105 |       const dbResults = await dataBase.get();
106 |       dbResults.forEach((doc) => {
107 |         if (!state.blogPosts.some((post) => post.blogID === doc.id)) {
108 |           const data = {
109 |             blogID: doc.data().blogID,
110 |             blogHTML: doc.data().blogHTML,
111 |             blogCoverPhoto: doc.data().blogCoverPhoto,
112 |             blogTitle: doc.data().blogTitle,
113 |             blogDate: doc.data().date,
114 |             blogCoverPhotoName: doc.data().blogCoverPhotoName,
115 |           };
116 |           state.blogPosts.push(data);
117 |         }
118 |       });
119 |       state.postLoaded = true;
120 |     },
121 |     async updatePost({ commit, dispatch }, payload) {
122 |       commit("filterBlogPost", payload);
123 |       await dispatch("getPost");
124 |     },
125 |     async deletePost({ commit }, payload) {
126 |       const getPost = await db.collection("blogPosts").doc(payload);
127 |       await getPost.delete();
128 |       commit("filterBlogPost", payload);
129 |     },
130 |     async updateUserSettings({ commit, state }) {
131 |       const dataBase = await db.collection("users").doc(state.profileId);
132 |       await dataBase.update({
133 |         firstName: state.profileFirstName,
134 |         lastName: state.profileLastName,
135 |         username: state.profileUsername,
136 |       });
137 |       commit("setProfileInitials");
138 |     },
139 |   },
140 |   modules: {},
141 | });
142 | 


--------------------------------------------------------------------------------
/src/views/Admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="admin">
 3 |     <div class="container">
 4 |       <h2>Administration</h2>
 5 |       <div class="admin-info">
 6 |         <h2>Add Admin</h2>
 7 |         <div class="input">
 8 |           <input placeholder="Enter user email to make them an admin" type="text" id="addAdmins" v-model="adminEmail" />
 9 |         </div>
10 |         <span>{{ this.functionMsg }}</span>
11 |         <button @click="addAdmin" class="button">Submit</button>
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import firebase from "firebase/app";
19 | import "firebase/functions";
20 | export default {
21 |   name: "Admin",
22 |   data() {
23 |     return {
24 |       adminEmail: "",
25 |       functionMsg: null,
26 |     };
27 |   },
28 |   methods: {
29 |     async addAdmin() {
30 |       const addAdmin = await firebase.functions().httpsCallable("addAdminRole");
31 |       const result = await addAdmin({ email: this.adminEmail });
32 |       this.functionMsg = result.data.message;
33 |     },
34 |   },
35 | };
36 | </script>
37 | 
38 | <style lang="scss" scoped>
39 | .admin {
40 |   .container {
41 |     max-width: 1000px;
42 |     padding: 60px 25px;
43 | 
44 |     h2 {
45 |       text-align: center;
46 |       margin-bottom: 16px;
47 |       font-weight: 300;
48 |       font-size: 32px;
49 |     }
50 | 
51 |     .admin-info {
52 |       border-radius: 8px;
53 |       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
54 |       padding: 32px;
55 |       background-color: #f1f1f1;
56 |       display: flex;
57 |       flex-direction: column;
58 |       max-width: 600px;
59 |       margin: 32px auto;
60 | 
61 |       span {
62 |         font-size: 14px;
63 |       }
64 | 
65 |       .input {
66 |         margin: 16px 0;
67 | 
68 |         label {
69 |           font-size: 14px;
70 |           display: block;
71 |           padding-bottom: 6px;
72 |         }
73 |         input {
74 |           width: 100%;
75 |           border: none;
76 |           background-color: #f2f7f6;
77 |           padding: 8px;
78 |           height: 50px;
79 |           @media (min-width: 900px) {
80 |           }
81 | 
82 |           &:focus {
83 |             outline: none;
84 |           }
85 |         }
86 |       }
87 | 
88 |       button {
89 |         align-self: center;
90 |       }
91 |     }
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/views/BlogPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="post-view">
 3 |     <div class="container quillWrapper">
 4 |       <h2>{{ this.blogTitle }}</h2>
 5 |       <img :src="blogCoverPhoto" alt="" />
 6 |       <div class="post-content ql-editor" v-html="blogHTML"></div>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "PostPreview",
14 |   computed: {
15 |     blogTitle() {
16 |       return this.$store.state.blogTitle;
17 |     },
18 |     blogHTML() {
19 |       return this.$store.state.blogHTML;
20 |     },
21 |     blogCoverPhoto() {
22 |       return this.$store.state.blogPhotoFileURL;
23 |     },
24 |   },
25 | };
26 | </script>
27 | 
28 | <style lang="scss">
29 | .post-view {
30 |   min-height: 100%;
31 | 
32 |   .container {
33 |     max-width: 1000px;
34 |     padding: 60px 25px;
35 |   }
36 | 
37 |   .ql-editor {
38 |     padding: 0;
39 |   }
40 | 
41 |   h2 {
42 |     margin-bottom: 16px;
43 |     font-weight: 300;
44 |     font-size: 32px;
45 |   }
46 | 
47 |   img {
48 |     width: 100%;
49 |     margin-bottom: 32px;
50 |   }
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/views/Blogs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="blog-card-wrap">
 3 |     <div class="blog-cards container">
 4 |       <div v-if="profileAdmin" class="toggle-edit">
 5 |         <span>Toggle Editing Post</span>
 6 |         <input type="checkbox" v-model="editPost" />
 7 |       </div>
 8 |       <BlogCard :post="post" v-for="(post, index) in blogPosts" :key="index" />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import BlogCard from "../components/BlogCard";
15 | export default {
16 |   name: "blogs",
17 |   components: { BlogCard },
18 |   computed: {
19 |     blogPosts() {
20 |       return this.$store.state.blogPosts;
21 |     },
22 |     editPost: {
23 |       get() {
24 |         return this.$store.state.editPost;
25 |       },
26 |       set(payload) {
27 |         this.$store.commit("toggleEditPost", payload);
28 |       },
29 |     },
30 |     profileAdmin() {
31 |       return this.$store.state.profileAdmin;
32 |     },
33 |   },
34 |   beforeDestroy() {
35 |     this.$store.commit("toggleEditPost", false);
36 |   },
37 | };
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 | .blog-cards {
42 |   position: relative;
43 | 
44 |   .toggle-edit {
45 |     display: flex;
46 |     align-items: center;
47 |     position: absolute;
48 |     top: -70px;
49 |     right: 0;
50 | 
51 |     span {
52 |       margin-right: 16px;
53 |     }
54 | 
55 |     input[type="checkbox"] {
56 |       position: relative;
57 |       border: none;
58 |       -webkit-appearance: none;
59 |       background: #fff;
60 |       outline: none;
61 |       width: 80px;
62 |       height: 30px;
63 |       border-radius: 20px;
64 |       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
65 |     }
66 | 
67 |     input[type="checkbox"]:before {
68 |       content: "";
69 |       position: absolute;
70 |       width: 30px;
71 |       height: 30px;
72 |       border-radius: 20px;
73 |       top: 0;
74 |       left: 0;
75 |       background: #303030;
76 |       transform: scale(1.1);
77 |       transition: 750ms ease all;
78 |       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
79 |     }
80 | 
81 |     input:checked[type="checkbox"]:before {
82 |       background: #fff;
83 |       left: 52px;
84 |     }
85 |   }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/views/CreatePost.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="create-post">
  3 |     <BlogCoverPreview v-show="this.$store.state.blogPhotoPreview" />
  4 |     <Loading v-show="loading" />
  5 |     <div class="container">
  6 |       <div :class="{ invisible: !error }" class="err-message">
  7 |         <p><span>Error:</span>{{ this.errorMsg }}</p>
  8 |       </div>
  9 |       <div class="blog-info">
 10 |         <input type="text" placeholder="Enter Blog Title" v-model="blogTitle" />
 11 |         <div class="upload-file">
 12 |           <label for="blog-photo">Upload Cover Photo</label>
 13 |           <input type="file" ref="blogPhoto" id="blog-photo" @change="fileChange" accept=".png, .jpg, ,jpeg" />
 14 |           <button @click="openPreview" class="preview" :class="{ 'button-inactive': !this.$store.state.blogPhotoFileURL }">
 15 |             Preview Photo
 16 |           </button>
 17 |           <span>File Chosen: {{ this.$store.state.blogPhotoName }}</span>
 18 |         </div>
 19 |       </div>
 20 |       <div class="editor">
 21 |         <vue-editor :editorOptions="editorSettings" v-model="blogHTML" useCustomImageHandler @image-added="imageHandler" />
 22 |       </div>
 23 |       <div class="blog-actions">
 24 |         <button @click="uploadBlog">Publish Blog</button>
 25 |         <router-link class="router-button" :to="{ name: 'BlogPreview' }">Post Preview</router-link>
 26 |       </div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import BlogCoverPreview from "../components/BlogCoverPreview";
 33 | import Loading from "../components/Loading";
 34 | import firebase from "firebase/app";
 35 | import "firebase/storage";
 36 | import db from "../firebase/firebaseInit";
 37 | import Quill from "quill";
 38 | window.Quill = Quill;
 39 | const ImageResize = require("quill-image-resize-module").default;
 40 | Quill.register("modules/imageResize", ImageResize);
 41 | export default {
 42 |   name: "CreatePost",
 43 |   data() {
 44 |     return {
 45 |       file: null,
 46 |       error: null,
 47 |       errorMsg: null,
 48 |       loading: null,
 49 |       editorSettings: {
 50 |         modules: {
 51 |           imageResize: {},
 52 |         },
 53 |       },
 54 |     };
 55 |   },
 56 |   components: {
 57 |     BlogCoverPreview,
 58 |     Loading,
 59 |   },
 60 |   methods: {
 61 |     fileChange() {
 62 |       this.file = this.$refs.blogPhoto.files[0];
 63 |       const fileName = this.file.name;
 64 |       this.$store.commit("fileNameChange", fileName);
 65 |       this.$store.commit("createFileURL", URL.createObjectURL(this.file));
 66 |     },
 67 | 
 68 |     openPreview() {
 69 |       this.$store.commit("openPhotoPreview");
 70 |     },
 71 | 
 72 |     imageHandler(file, Editor, cursorLocation, resetUploader) {
 73 |       const storageRef = firebase.storage().ref();
 74 |       const docRef = storageRef.child(`documents/blogPostPhotos/${file.name}`);
 75 |       docRef.put(file).on(
 76 |         "state_changed",
 77 |         (snapshot) => {
 78 |           console.log(snapshot);
 79 |         },
 80 |         (err) => {
 81 |           console.log(err);
 82 |         },
 83 |         async () => {
 84 |           const downloadURL = await docRef.getDownloadURL();
 85 |           Editor.insertEmbed(cursorLocation, "image", downloadURL);
 86 |           resetUploader();
 87 |         }
 88 |       );
 89 |     },
 90 | 
 91 |     uploadBlog() {
 92 |       if (this.blogTitle.length !== 0 && this.blogHTML.length !== 0) {
 93 |         if (this.file) {
 94 |           this.loading = true;
 95 |           const storageRef = firebase.storage().ref();
 96 |           const docRef = storageRef.child(`documents/BlogCoverPhotos/${this.$store.state.blogPhotoName}`);
 97 |           docRef.put(this.file).on(
 98 |             "state_changed",
 99 |             (snapshot) => {
100 |               console.log(snapshot);
101 |             },
102 |             (err) => {
103 |               console.log(err);
104 |               this.loading = false;
105 |             },
106 |             async () => {
107 |               const downloadURL = await docRef.getDownloadURL();
108 |               const timestamp = await Date.now();
109 |               const dataBase = await db.collection("blogPosts").doc();
110 | 
111 |               await dataBase.set({
112 |                 blogID: dataBase.id,
113 |                 blogHTML: this.blogHTML,
114 |                 blogCoverPhoto: downloadURL,
115 |                 blogCoverPhotoName: this.blogCoverPhotoName,
116 |                 blogTitle: this.blogTitle,
117 |                 profileId: this.profileId,
118 |                 date: timestamp,
119 |               });
120 |               await this.$store.dispatch("getPost");
121 |               this.loading = false;
122 |               this.$router.push({ name: "ViewBlog", params: { blogid: dataBase.id } });
123 |             }
124 |           );
125 |           return;
126 |         }
127 |         this.error = true;
128 |         this.errorMsg = "Please ensure you uploaded a cover photo!";
129 |         setTimeout(() => {
130 |           this.error = false;
131 |         }, 5000);
132 |         return;
133 |       }
134 |       this.error = true;
135 |       this.errorMsg = "Please ensure Blog Title & Blog Post has been filled!";
136 |       setTimeout(() => {
137 |         this.error = false;
138 |       }, 5000);
139 |       return;
140 |     },
141 |   },
142 |   computed: {
143 |     profileId() {
144 |       return this.$store.state.profileId;
145 |     },
146 |     blogCoverPhotoName() {
147 |       return this.$store.state.blogPhotoName;
148 |     },
149 |     blogTitle: {
150 |       get() {
151 |         return this.$store.state.blogTitle;
152 |       },
153 |       set(payload) {
154 |         this.$store.commit("updateBlogTitle", payload);
155 |       },
156 |     },
157 |     blogHTML: {
158 |       get() {
159 |         return this.$store.state.blogHTML;
160 |       },
161 |       set(payload) {
162 |         this.$store.commit("newBlogPost", payload);
163 |       },
164 |     },
165 |   },
166 | };
167 | </script>
168 | 
169 | <style lang="scss">
170 | .create-post {
171 |   position: relative;
172 |   height: 100%;
173 | 
174 |   button {
175 |     margin-top: 0;
176 |   }
177 | 
178 |   .router-button {
179 |     text-decoration: none;
180 |     color: #fff;
181 |   }
182 | 
183 |   label,
184 |   button,
185 |   .router-button {
186 |     transition: 0.5s ease-in-out all;
187 |     align-self: center;
188 |     font-size: 14px;
189 |     cursor: pointer;
190 |     border-radius: 20px;
191 |     padding: 12px 24px;
192 |     color: #fff;
193 |     background-color: #303030;
194 |     text-decoration: none;
195 | 
196 |     &:hover {
197 |       background-color: rgba(48, 48, 48, 0.7);
198 |     }
199 |   }
200 | 
201 |   .container {
202 |     position: relative;
203 |     height: 100%;
204 |     padding: 10px 25px 60px;
205 |   }
206 | 
207 |   // error styling
208 |   .invisible {
209 |     opacity: 0 !important;
210 |   }
211 | 
212 |   .err-message {
213 |     width: 100%;
214 |     padding: 12px;
215 |     border-radius: 8px;
216 |     color: #fff;
217 |     margin-bottom: 10px;
218 |     background-color: #303030;
219 |     opacity: 1;
220 |     transition: 0.5s ease all;
221 | 
222 |     p {
223 |       font-size: 14px;
224 |     }
225 | 
226 |     span {
227 |       font-weight: 600;
228 |     }
229 |   }
230 | 
231 |   .blog-info {
232 |     display: flex;
233 |     margin-bottom: 32px;
234 | 
235 |     input:nth-child(1) {
236 |       min-width: 300px;
237 |     }
238 | 
239 |     input {
240 |       transition: 0.5s ease-in-out all;
241 |       padding: 10px 4px;
242 |       border: none;
243 |       border-bottom: 1px solid #303030;
244 | 
245 |       &:focus {
246 |         outline: none;
247 |         box-shadow: 0 1px 0 0 #303030;
248 |       }
249 |     }
250 | 
251 |     .upload-file {
252 |       flex: 1;
253 |       margin-left: 16px;
254 |       position: relative;
255 |       display: flex;
256 | 
257 |       input {
258 |         display: none;
259 |       }
260 | 
261 |       .preview {
262 |         margin-left: 16px;
263 |         text-transform: initial;
264 |       }
265 | 
266 |       span {
267 |         font-size: 12px;
268 |         margin-left: 16px;
269 |         align-self: center;
270 |       }
271 |     }
272 |   }
273 | 
274 |   .editor {
275 |     height: 60vh;
276 |     display: flex;
277 |     flex-direction: column;
278 | 
279 |     .quillWrapper {
280 |       position: relative;
281 |       display: flex;
282 |       flex-direction: column;
283 |       height: 100%;
284 |     }
285 | 
286 |     .ql-container {
287 |       display: flex;
288 |       flex-direction: column;
289 |       height: 100%;
290 |       overflow: scroll;
291 |     }
292 | 
293 |     .ql-editor {
294 |       padding: 20px 16px 30px;
295 |     }
296 |   }
297 | 
298 |   .blog-actions {
299 |     margin-top: 32px;
300 | 
301 |     button {
302 |       margin-right: 16px;
303 |     }
304 |   }
305 | }
306 | </style>
307 | 


--------------------------------------------------------------------------------
/src/views/EditBlog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="create-post">
  3 |     <BlogCoverPreview v-show="this.$store.state.blogPhotoPreview" />
  4 |     <Loading v-show="loading" />
  5 |     <div class="container">
  6 |       <div :class="{ invisible: !error }" class="err-message">
  7 |         <p><span>Error:</span>{{ this.errorMsg }}</p>
  8 |       </div>
  9 |       <div class="blog-info">
 10 |         <input type="text" placeholder="Enter Blog Title" v-model="blogTitle" />
 11 |         <div class="upload-file">
 12 |           <label for="blog-photo">Upload Cover Photo</label>
 13 |           <input type="file" ref="blogPhoto" id="blog-photo" @change="fileChange" accept=".png, .jpg, ,jpeg" />
 14 |           <button @click="openPreview" class="preview" :class="{ 'button-inactive': !this.$store.state.blogPhotoFileURL }">
 15 |             Preview Photo
 16 |           </button>
 17 |           <span>File Chosen: {{ this.$store.state.blogPhotoName }}</span>
 18 |         </div>
 19 |       </div>
 20 |       <div class="editor">
 21 |         <vue-editor :editorOptions="editorSettings" v-model="blogHTML" useCustomImageHandler @image-added="imageHandler" />
 22 |       </div>
 23 |       <div class="blog-actions">
 24 |         <button @click="updateBlog">Save Changes</button>
 25 |         <router-link class="router-button" :to="{ name: 'BlogPreview' }">Preview Changes</router-link>
 26 |       </div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import BlogCoverPreview from "../components/BlogCoverPreview";
 33 | import Loading from "../components/Loading";
 34 | import firebase from "firebase/app";
 35 | import "firebase/storage";
 36 | import db from "../firebase/firebaseInit";
 37 | import Quill from "quill";
 38 | window.Quill = Quill;
 39 | const ImageResize = require("quill-image-resize-module").default;
 40 | Quill.register("modules/imageResize", ImageResize);
 41 | export default {
 42 |   name: "CreatePost",
 43 |   data() {
 44 |     return {
 45 |       file: null,
 46 |       error: null,
 47 |       errorMsg: null,
 48 |       loading: null,
 49 |       routeID: null,
 50 |       currentBlog: null,
 51 |       editorSettings: {
 52 |         modules: {
 53 |           imageResize: {},
 54 |         },
 55 |       },
 56 |     };
 57 |   },
 58 |   components: {
 59 |     BlogCoverPreview,
 60 |     Loading,
 61 |   },
 62 |   async mounted() {
 63 |     this.routeID = this.$route.params.blogid;
 64 |     this.currentBlog = await this.$store.state.blogPosts.filter((post) => {
 65 |       return post.blogID === this.routeID;
 66 |     });
 67 |     this.$store.commit("setBlogState", this.currentBlog[0]);
 68 |   },
 69 |   methods: {
 70 |     fileChange() {
 71 |       this.file = this.$refs.blogPhoto.files[0];
 72 |       const fileName = this.file.name;
 73 |       this.$store.commit("fileNameChange", fileName);
 74 |       this.$store.commit("createFileURL", URL.createObjectURL(this.file));
 75 |     },
 76 | 
 77 |     openPreview() {
 78 |       this.$store.commit("openPhotoPreview");
 79 |     },
 80 | 
 81 |     imageHandler(file, Editor, cursorLocation, resetUploader) {
 82 |       const storageRef = firebase.storage().ref();
 83 |       const docRef = storageRef.child(`documents/blogPostPhotos/${file.name}`);
 84 |       docRef.put(file).on(
 85 |         "state_changed",
 86 |         (snapshot) => {
 87 |           console.log(snapshot);
 88 |         },
 89 |         (err) => {
 90 |           console.log(err);
 91 |         },
 92 |         async () => {
 93 |           const downloadURL = await docRef.getDownloadURL();
 94 |           Editor.insertEmbed(cursorLocation, "image", downloadURL);
 95 |           resetUploader();
 96 |         }
 97 |       );
 98 |     },
 99 | 
100 |     async updateBlog() {
101 |       const dataBase = await db.collection("blogPosts").doc(this.routeID);
102 |       if (this.blogTitle.length !== 0 && this.blogHTML.length !== 0) {
103 |         if (this.file) {
104 |           this.loading = true;
105 |           const storageRef = firebase.storage().ref();
106 |           const docRef = storageRef.child(`documents/BlogCoverPhotos/${this.$store.state.blogPhotoName}`);
107 |           docRef.put(this.file).on(
108 |             "state_changed",
109 |             (snapshot) => {
110 |               console.log(snapshot);
111 |             },
112 |             (err) => {
113 |               console.log(err);
114 |               this.loading = false;
115 |             },
116 |             async () => {
117 |               const downloadURL = await docRef.getDownloadURL();
118 | 
119 |               await dataBase.update({
120 |                 blogHTML: this.blogHTML,
121 |                 blogCoverPhoto: downloadURL,
122 |                 blogCoverPhotoName: this.blogCoverPhotoName,
123 |                 blogTitle: this.blogTitle,
124 |               });
125 |               await this.$store.dispatch("updatePost", this.routeID);
126 |               this.loading = false;
127 |               this.$router.push({ name: "ViewBlog", params: { blogid: dataBase.id } });
128 |             }
129 |           );
130 |           return;
131 |         }
132 |         this.loading = true;
133 |         await dataBase.update({
134 |           blogHTML: this.blogHTML,
135 |           blogTitle: this.blogTitle,
136 |         });
137 |         await this.$store.dispatch("updatePost", this.routeID);
138 |         this.loading = false;
139 |         this.$router.push({ name: "ViewBlog", params: { blogid: dataBase.id } });
140 |         return;
141 |       }
142 |       this.error = true;
143 |       this.errorMsg = "Please ensure Blog Title & Blog Post has been filled!";
144 |       setTimeout(() => {
145 |         this.error = false;
146 |       }, 5000);
147 |       return;
148 |     },
149 |   },
150 |   computed: {
151 |     profileId() {
152 |       return this.$store.state.profileId;
153 |     },
154 |     blogCoverPhotoName() {
155 |       return this.$store.state.blogPhotoName;
156 |     },
157 |     blogTitle: {
158 |       get() {
159 |         return this.$store.state.blogTitle;
160 |       },
161 |       set(payload) {
162 |         this.$store.commit("updateBlogTitle", payload);
163 |       },
164 |     },
165 |     blogHTML: {
166 |       get() {
167 |         return this.$store.state.blogHTML;
168 |       },
169 |       set(payload) {
170 |         this.$store.commit("newBlogPost", payload);
171 |       },
172 |     },
173 |   },
174 | };
175 | </script>
176 | 
177 | <style lang="scss">
178 | .create-post {
179 |   position: relative;
180 |   height: 100%;
181 | 
182 |   button {
183 |     margin-top: 0;
184 |   }
185 | 
186 |   .router-button {
187 |     text-decoration: none;
188 |     color: #fff;
189 |   }
190 | 
191 |   label,
192 |   button,
193 |   .router-button {
194 |     transition: 0.5s ease-in-out all;
195 |     align-self: center;
196 |     font-size: 14px;
197 |     cursor: pointer;
198 |     border-radius: 20px;
199 |     padding: 12px 24px;
200 |     color: #fff;
201 |     background-color: #303030;
202 |     text-decoration: none;
203 | 
204 |     &:hover {
205 |       background-color: rgba(48, 48, 48, 0.7);
206 |     }
207 |   }
208 | 
209 |   .container {
210 |     position: relative;
211 |     height: 100%;
212 |     padding: 10px 25px 60px;
213 |   }
214 | 
215 |   // error styling
216 |   .invisible {
217 |     opacity: 0 !important;
218 |   }
219 | 
220 |   .err-message {
221 |     width: 100%;
222 |     padding: 12px;
223 |     border-radius: 8px;
224 |     color: #fff;
225 |     margin-bottom: 10px;
226 |     background-color: #303030;
227 |     opacity: 1;
228 |     transition: 0.5s ease all;
229 | 
230 |     p {
231 |       font-size: 14px;
232 |     }
233 | 
234 |     span {
235 |       font-weight: 600;
236 |     }
237 |   }
238 | 
239 |   .blog-info {
240 |     display: flex;
241 |     margin-bottom: 32px;
242 | 
243 |     input:nth-child(1) {
244 |       min-width: 300px;
245 |     }
246 | 
247 |     input {
248 |       transition: 0.5s ease-in-out all;
249 |       padding: 10px 4px;
250 |       border: none;
251 |       border-bottom: 1px solid #303030;
252 | 
253 |       &:focus {
254 |         outline: none;
255 |         box-shadow: 0 1px 0 0 #303030;
256 |       }
257 |     }
258 | 
259 |     .upload-file {
260 |       flex: 1;
261 |       margin-left: 16px;
262 |       position: relative;
263 |       display: flex;
264 | 
265 |       input {
266 |         display: none;
267 |       }
268 | 
269 |       .preview {
270 |         margin-left: 16px;
271 |         text-transform: initial;
272 |       }
273 | 
274 |       span {
275 |         font-size: 12px;
276 |         margin-left: 16px;
277 |         align-self: center;
278 |       }
279 |     }
280 |   }
281 | 
282 |   .editor {
283 |     height: 60vh;
284 |     display: flex;
285 |     flex-direction: column;
286 | 
287 |     .quillWrapper {
288 |       position: relative;
289 |       display: flex;
290 |       flex-direction: column;
291 |       height: 100%;
292 |     }
293 | 
294 |     .ql-container {
295 |       display: flex;
296 |       flex-direction: column;
297 |       height: 100%;
298 |       overflow: scroll;
299 |     }
300 | 
301 |     .ql-editor {
302 |       padding: 20px 16px 30px;
303 |     }
304 |   }
305 | 
306 |   .blog-actions {
307 |     margin-top: 32px;
308 | 
309 |     button {
310 |       margin-right: 16px;
311 |     }
312 |   }
313 | }
314 | </style>
315 | 


--------------------------------------------------------------------------------
/src/views/ForgotPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reset-password">
 3 |     <Modal v-if="modalActive" :modalMessage="modalMessage" v-on:close-modal="closeModal" />
 4 |     <Loading v-if="loading" />
 5 |     <div class="form-wrap">
 6 |       <form class="reset">
 7 |         <p class="login-register">
 8 |           Back to
 9 |           <router-link class="router-link" :to="{ name: 'Login' }">Login</router-link>
10 |         </p>
11 |         <h2>Reset Password</h2>
12 |         <p>Forgot your passowrd? Enter your email to reset it</p>
13 |         <div class="inputs">
14 |           <div class="input">
15 |             <input type="text" placeholder="Email" v-model="email" />
16 |             <email class="icon" />
17 |           </div>
18 |         </div>
19 |         <button @click.prevent="resetPassword">Reset</button>
20 |         <div class="angle"></div>
21 |       </form>
22 |       <div class="background"></div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import email from "../assets/Icons/envelope-regular.svg";
29 | import Modal from "../components/Modal";
30 | import Loading from "../components/Loading";
31 | import firebase from "firebase/app";
32 | import "firebase/auth";
33 | export default {
34 |   name: "ForgotPassword",
35 |   data() {
36 |     return {
37 |       email: "",
38 |       modalActive: false,
39 |       modalMessage: "",
40 |       loading: null,
41 |     };
42 |   },
43 |   components: {
44 |     email,
45 |     Modal,
46 |     Loading,
47 |   },
48 |   methods: {
49 |     resetPassword() {
50 |       this.loading = true;
51 |       firebase
52 |         .auth()
53 |         .sendPasswordResetEmail(this.email)
54 |         .then(() => {
55 |           this.modalMessage = "If your account exists, you will receive a email";
56 |           this.loading = false;
57 |           this.modalActive = true;
58 |         })
59 |         .catch((err) => {
60 |           this.modalMessage = err.message;
61 |           this.loading = false;
62 |           this.modalActive = true;
63 |         });
64 |     },
65 |     closeModal() {
66 |       this.modalActive = !this.modalActive;
67 |       this.email = "";
68 |     },
69 |   },
70 | };
71 | </script>
72 | 
73 | <style lang="scss" scoped>
74 | .reset-password {
75 |   position: relative;
76 |   .form-wrap {
77 |     .reset {
78 |       h2 {
79 |         margin-bottom: 8px;
80 |       }
81 |       p {
82 |         text-align: center;
83 |         margin-bottom: 32px;
84 |       }
85 |     }
86 |   }
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <BlogPost v-if="!user" :post="welcomeScreen" />
 4 |     <BlogPost :post="post" v-for="(post, index) in blogPostsFeed" :key="index" />
 5 |     <div class="blog-card-wrap">
 6 |       <div class="container">
 7 |         <h3>View More Recent Blogs</h3>
 8 |         <div class="blog-cards">
 9 |           <BlogCard :post="post" v-for="(post, index) in blogPostsCards" :key="index" />
10 |         </div>
11 |       </div>
12 |     </div>
13 |     <div v-if="!user" class="updates">
14 |       <div class="container">
15 |         <h2>never miss a post. Register for your free account today!</h2>
16 |         <router-link class="router-button" to="#"> Register for FireBlogs <Arrow class="arrow arrow-light" /> </router-link>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import BlogPost from "../components/BlogPost";
24 | import BlogCard from "../components/BlogCard";
25 | import Arrow from "../assets/Icons/arrow-right-light.svg";
26 | export default {
27 |   name: "Home",
28 |   components: { BlogPost, BlogCard, Arrow },
29 |   data() {
30 |     return {
31 |       welcomeScreen: {
32 |         title: "Welcome!",
33 |         blogPost:
34 |           "Weekly blog articles with all things programming including HTML, CSS, JavaScript and more. Register today to never miss a post!",
35 |         welcomeScreen: true,
36 |         photo: "coding",
37 |       },
38 |     };
39 |   },
40 |   computed: {
41 |     blogPostsFeed() {
42 |       return this.$store.getters.blogPostsFeed;
43 |     },
44 |     blogPostsCards() {
45 |       return this.$store.getters.blogPostsCards;
46 |     },
47 |     user() {
48 |       return this.$store.state.user;
49 |     },
50 |   },
51 | };
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | .blog-card-wrap {
56 |   h3 {
57 |     font-weight: 300;
58 |     font-size: 28px;
59 |     margin-bottom: 32px;
60 |   }
61 | }
62 | 
63 | .updates {
64 |   .container {
65 |     padding: 100px 25px;
66 |     display: flex;
67 |     flex-direction: column;
68 |     align-items: center;
69 |     @media (min-width: 800px) {
70 |       padding: 125px 25px;
71 |       flex-direction: row;
72 |     }
73 | 
74 |     .router-button {
75 |       display: flex;
76 |       font-size: 14px;
77 |       text-decoration: none;
78 |       @media (min-width: 800px) {
79 |         margin-left: auto;
80 |       }
81 |     }
82 | 
83 |     h2 {
84 |       font-weight: 300;
85 |       font-size: 32px;
86 |       max-width: 425px;
87 |       width: 100%;
88 |       text-align: center;
89 |       text-transform: uppercase;
90 |       @media (min-width: 800px) {
91 |         text-align: initial;
92 |         font-size: 40px;
93 |       }
94 |     }
95 |   }
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="form-wrap">
  3 |     <form class="login">
  4 |       <p class="login-register">
  5 |         Don't have an account?
  6 |         <router-link class="router-link" :to="{ name: 'Register' }">Register</router-link>
  7 |       </p>
  8 |       <h2>Login to FireBlogs</h2>
  9 |       <div class="inputs">
 10 |         <div class="input">
 11 |           <input type="text" placeholder="Email" v-model="email" />
 12 |           <email class="icon" />
 13 |         </div>
 14 |         <div class="input">
 15 |           <input type="password" placeholder="Password" v-model="password" />
 16 |           <password class="icon" />
 17 |         </div>
 18 |         <div v-show="error" class="error">{{ this.errorMsg }}</div>
 19 |       </div>
 20 |       <router-link class="forgot-password" :to="{ name: 'ForgotPassword' }"
 21 |         >Forgot your password?</router-link
 22 |       >
 23 |       <button @click.prevent="signIn">Sign In</button>
 24 |       <div class="angle"></div>
 25 |     </form>
 26 |     <div class="background"></div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import email from "../assets/Icons/envelope-regular.svg";
 32 | import password from "../assets/Icons/lock-alt-solid.svg";
 33 | import firebase from "firebase/app";
 34 | import "firebase/auth";
 35 | export default {
 36 |   name: "Login",
 37 |   components: {
 38 |     email,
 39 |     password,
 40 |   },
 41 |   data() {
 42 |     return {
 43 |       email: "",
 44 |       password: "",
 45 |       error: null,
 46 |       errorMsg: "",
 47 |     };
 48 |   },
 49 |   methods: {
 50 |     signIn() {
 51 |       firebase
 52 |         .auth()
 53 |         .signInWithEmailAndPassword(this.email, this.password)
 54 |         .then(() => {
 55 |           this.$router.push({ name: "Home" });
 56 |           this.error = false;
 57 |           this.errorMsg = "";
 58 |           console.log(firebase.auth().currentUser.uid);
 59 |         })
 60 |         .catch((err) => {
 61 |           this.error = true;
 62 |           this.errorMsg = err.message;
 63 |         });
 64 |     },
 65 |   },
 66 | };
 67 | </script>
 68 | 
 69 | <style lang="scss">
 70 | .form-wrap {
 71 |   overflow: hidden;
 72 |   display: flex;
 73 |   height: 100vh;
 74 |   justify-content: center;
 75 |   align-self: center;
 76 |   margin: 0 auto;
 77 |   width: 90%;
 78 |   @media (min-width: 900px) {
 79 |     width: 100%;
 80 |   }
 81 | 
 82 |   .login-register {
 83 |     margin-bottom: 32px;
 84 | 
 85 |     .router-link {
 86 |       color: #000;
 87 |     }
 88 |   }
 89 | 
 90 |   form {
 91 |     padding: 0 10px;
 92 |     position: relative;
 93 |     display: flex;
 94 |     flex-direction: column;
 95 |     justify-content: center;
 96 |     align-items: center;
 97 |     flex: 1;
 98 |     @media (min-width: 900px) {
 99 |       padding: 0 50px;
100 |     }
101 | 
102 |     h2 {
103 |       text-align: center;
104 |       font-size: 32px;
105 |       color: #303030;
106 |       margin-bottom: 40px;
107 |       @media (min-width: 900px) {
108 |         font-size: 40px;
109 |       }
110 |     }
111 | 
112 |     .inputs {
113 |       width: 100%;
114 |       max-width: 350px;
115 | 
116 |       .input {
117 |         position: relative;
118 |         display: flex;
119 |         justify-content: center;
120 |         align-items: center;
121 |         margin-bottom: 8px;
122 |         input {
123 |           width: 100%;
124 |           border: none;
125 |           background-color: #f2f7f6;
126 |           padding: 4px 4px 4px 30px;
127 |           height: 50px;
128 | 
129 |           &:focus {
130 |             outline: none;
131 |           }
132 |         }
133 | 
134 |         .icon {
135 |           width: 12px;
136 |           position: absolute;
137 |           left: 6px;
138 |         }
139 |       }
140 |     }
141 | 
142 |     .forgot-password {
143 |       text-decoration: none;
144 |       color: #000;
145 |       cursor: pointer;
146 |       font-size: 14px;
147 |       margin: 16px 0 32px;
148 |       border-bottom: 1px solid transparent;
149 |       transition: 0.5s ease all;
150 | 
151 |       &:hover {
152 |         border-color: #303030;
153 |       }
154 |     }
155 | 
156 |     .angle {
157 |       display: none;
158 |       position: absolute;
159 |       background-color: #fff;
160 |       transform: rotateZ(3deg);
161 |       width: 60px;
162 |       right: -30px;
163 |       height: 101%;
164 |       @media (min-width: 900px) {
165 |         display: initial;
166 |       }
167 |     }
168 |   }
169 | 
170 |   .background {
171 |     display: none;
172 |     flex: 2;
173 |     background-size: cover;
174 |     background-image: url("../assets/background.png");
175 |     width: 100%;
176 |     height: 100%;
177 |     @media (min-width: 900px) {
178 |       display: initial;
179 |     }
180 |   }
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/src/views/Profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="profile">
  3 |     <Modal v-if="modalActive" :modalMessage="modalMessage" v-on:close-modal="closeModal" />
  4 |     <div class="container">
  5 |       <h2>Account Settings</h2>
  6 |       <div class="profile-info">
  7 |         <div class="initials">{{ $store.state.profileInitials }}</div>
  8 |         <div class="admin-badge">
  9 |           <adminIcon class="icon" />
 10 |           <span>admin</span>
 11 |         </div>
 12 |         <div class="input">
 13 |           <label for="firstName">First Name:</label>
 14 |           <input type="text" id="firstName" v-model="firstName" />
 15 |         </div>
 16 |         <div class="input">
 17 |           <label for="lastName">Last Name:</label>
 18 |           <input type="text" id="lastName" v-model="lastName" />
 19 |         </div>
 20 |         <div class="input">
 21 |           <label for="username">Username:</label>
 22 |           <input type="text" id="username" v-model="username" />
 23 |         </div>
 24 |         <div class="input">
 25 |           <label for="email">Email:</label>
 26 |           <input disabled type="text" id="email" v-model="email" />
 27 |         </div>
 28 |         <button @click="updateProfile">Save Changes</button>
 29 |       </div>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | import Modal from "../components/Modal";
 36 | import adminIcon from "../assets/Icons/user-crown-light.svg";
 37 | export default {
 38 |   name: "Profile",
 39 |   components: {
 40 |     Modal,
 41 |     adminIcon,
 42 |   },
 43 |   data() {
 44 |     return {
 45 |       modalMessage: "Changes were saved!",
 46 |       modalActive: null,
 47 |     };
 48 |   },
 49 |   methods: {
 50 |     updateProfile() {
 51 |       this.$store.dispatch("updateUserSettings");
 52 |       this.modalActive = !this.modalActive;
 53 |     },
 54 |     closeModal() {
 55 |       this.modalActive = !this.modalActive;
 56 |     },
 57 |   },
 58 |   computed: {
 59 |     firstName: {
 60 |       get() {
 61 |         return this.$store.state.profileFirstName;
 62 |       },
 63 |       set(payload) {
 64 |         this.$store.commit("changeFirstName", payload);
 65 |       },
 66 |     },
 67 |     lastName: {
 68 |       get() {
 69 |         return this.$store.state.profileLastName;
 70 |       },
 71 |       set(payload) {
 72 |         this.$store.commit("changeLastName", payload);
 73 |       },
 74 |     },
 75 |     username: {
 76 |       get() {
 77 |         return this.$store.state.profileUsername;
 78 |       },
 79 |       set(payload) {
 80 |         this.$store.commit("changeUsername", payload);
 81 |       },
 82 |     },
 83 |     email() {
 84 |       return this.$store.state.profileEmail;
 85 |     },
 86 |   },
 87 | };
 88 | </script>
 89 | <style lang="scss" scoped>
 90 | .profile {
 91 |   .container {
 92 |     max-width: 1000px;
 93 |     padding: 60px 25px;
 94 | 
 95 |     h2 {
 96 |       text-align: center;
 97 |       margin-bottom: 16px;
 98 |       font-weight: 300;
 99 |       font-size: 32px;
100 |     }
101 | 
102 |     .profile-info {
103 |       border-radius: 8px;
104 |       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
105 |       padding: 32px;
106 |       background-color: #f1f1f1;
107 |       display: flex;
108 |       flex-direction: column;
109 |       max-width: 600px;
110 |       margin: 32px auto;
111 | 
112 |       .initials {
113 |         position: initial;
114 |         width: 80px;
115 |         height: 80px;
116 |         font-size: 32px;
117 |         background-color: #303030;
118 |         color: #fff;
119 |         display: flex;
120 |         align-self: center;
121 |         align-items: center;
122 |         justify-content: center;
123 |         border-radius: 50%;
124 |       }
125 | 
126 |       .admin-badge {
127 |         display: flex;
128 |         align-self: center;
129 |         color: #fff;
130 |         font-size: 14px;
131 |         padding: 8px 24px;
132 |         border-radius: 8px;
133 |         background-color: #303030;
134 |         margin: 16px 0;
135 |         text-align: center;
136 |         text-transform: capitalize;
137 | 
138 |         .icon {
139 |           width: 14px;
140 |           height: auto;
141 |           margin-right: 8px;
142 |         }
143 |       }
144 | 
145 |       .input {
146 |         margin: 16px 0;
147 | 
148 |         label {
149 |           font-size: 14px;
150 |           display: block;
151 |           padding-bottom: 6px;
152 |         }
153 |         input {
154 |           width: 100%;
155 |           border: none;
156 |           background-color: #f2f7f6;
157 |           padding: 8px;
158 |           height: 50px;
159 |           @media (min-width: 900px) {
160 |           }
161 | 
162 |           &:focus {
163 |             outline: none;
164 |           }
165 |         }
166 |       }
167 | 
168 |       button {
169 |         align-self: center;
170 |       }
171 |     }
172 |   }
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="form-wrap">
  3 |     <form class="register">
  4 |       <p class="login-register">
  5 |         Already have an account?
  6 |         <router-link class="router-link" :to="{ name: 'Login' }">Login</router-link>
  7 |       </p>
  8 |       <h2>Create Your FireBlog Account</h2>
  9 |       <div class="inputs">
 10 |         <div class="input">
 11 |           <input type="text" placeholder="First Name" v-model="firstName" />
 12 |           <user class="icon" />
 13 |         </div>
 14 |         <div class="input">
 15 |           <input type="text" placeholder="Last Name" v-model="lastName" />
 16 |           <user class="icon" />
 17 |         </div>
 18 |         <div class="input">
 19 |           <input type="text" placeholder="Username" v-model="username" />
 20 |           <user class="icon" />
 21 |         </div>
 22 |         <div class="input">
 23 |           <input type="text" placeholder="Email" v-model="email" />
 24 |           <email class="icon" />
 25 |         </div>
 26 |         <div class="input">
 27 |           <input type="password" placeholder="Password" v-model="password" />
 28 |           <password class="icon" />
 29 |         </div>
 30 |         <div v-show="error" class="error">{{ this.errorMsg }}</div>
 31 |       </div>
 32 |       <button @click.prevent="register">Sign Up</button>
 33 |       <div class="angle"></div>
 34 |     </form>
 35 |     <div class="background"></div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | import email from "../assets/Icons/envelope-regular.svg";
 41 | import password from "../assets/Icons/lock-alt-solid.svg";
 42 | import user from "../assets/Icons/user-alt-light.svg";
 43 | import firebase from "firebase/app";
 44 | import "firebase/auth";
 45 | import db from "../firebase/firebaseInit";
 46 | export default {
 47 |   name: "Register",
 48 |   components: {
 49 |     email,
 50 |     password,
 51 |     user,
 52 |   },
 53 |   data() {
 54 |     return {
 55 |       firstName: "",
 56 |       lastName: "",
 57 |       username: "",
 58 |       email: "",
 59 |       password: "",
 60 |       error: null,
 61 |       errorMsg: "",
 62 |     };
 63 |   },
 64 |   methods: {
 65 |     async register() {
 66 |       if (
 67 |         this.email !== "" &&
 68 |         this.password !== "" &&
 69 |         this.firstName !== "" &&
 70 |         this.lastName !== "" &&
 71 |         this.username !== ""
 72 |       ) {
 73 |         this.error = false;
 74 |         this.errorMsg = "";
 75 |         const firebaseAuth = await firebase.auth();
 76 |         const createUser = await firebaseAuth.createUserWithEmailAndPassword(this.email, this.password);
 77 |         const result = await createUser;
 78 |         const dataBase = db.collection("users").doc(result.user.uid);
 79 |         await dataBase.set({
 80 |           firstName: this.firstName,
 81 |           lastName: this.lastName,
 82 |           username: this.username,
 83 |           email: this.email,
 84 |         });
 85 |         this.$router.push({ name: "Home" });
 86 |         return;
 87 |       }
 88 |       this.error = true;
 89 |       this.errorMsg = "Please fill out all the fields!";
 90 |       return;
 91 |     },
 92 |   },
 93 | };
 94 | </script>
 95 | 
 96 | <style lang="scss" scoped>
 97 | .register {
 98 |   h2 {
 99 |     max-width: 350px;
100 |   }
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/views/ViewBlog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="post-view" v-if="currentBlog">
 3 |     <div class="container quillWrapper">
 4 |       <h2>{{ this.currentBlog[0].blogTitle }}</h2>
 5 |       <h4>Posted on: {{ new Date(this.currentBlog[0].blogDate).toLocaleString("en-us", { dateStyle: "long" }) }}</h4>
 6 |       <img :src="this.currentBlog[0].blogCoverPhoto" alt="" />
 7 |       <div class="post-content ql-editor" v-html="this.currentBlog[0].blogHTML"></div>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: "ViewBlog",
15 |   data() {
16 |     return {
17 |       currentBlog: null,
18 |     };
19 |   },
20 |   async mounted() {
21 |     this.currentBlog = await this.$store.state.blogPosts.filter((post) => {
22 |       return post.blogID === this.$route.params.blogid;
23 |     });
24 |   },
25 | };
26 | </script>
27 | 
28 | <style lang="scss">
29 | .post-view {
30 |   h4 {
31 |     font-weight: 400;
32 |     font-size: 14px;
33 |     margin-bottom: 24px;
34 |   }
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/storage.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service firebase.storage {
3 |   match /b/{bucket}/o {
4 |     match /{allPaths=**} {
5 |       allow read, write: if request.auth!=null;
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   chainWebpack: (config) => {
 3 |     const svgRule = config.module.rule("svg");
 4 | 
 5 |     svgRule.uses.clear();
 6 | 
 7 |     svgRule
 8 |       .use("babel-loader")
 9 |       .loader("babel-loader")
10 |       .end()
11 |       .use("vue-svg-loader")
12 |       .loader("vue-svg-loader");
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------