├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── cover.png
├── functions
    ├── getUserData.js
    ├── hello.js
    └── serviceAccountKey.json
├── netlify.toml
├── package.json
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── DCHQ-dark.svg
    │   ├── DCHQ-small-dark.svg
    │   ├── DCHQ-small.svg
    │   ├── DCHQ.svg
    │   ├── contentful.png
    │   ├── dropbox.png
    │   ├── figma.png
    │   ├── logo.png
    │   ├── logout.svg
    │   ├── moon.svg
    │   ├── notion.png
    │   ├── slack.png
    │   └── sun.svg
    ├── components
    │   ├── Header.vue
    │   ├── HelloWorld.vue
    │   ├── Notification.vue
    │   ├── RequestAccount.vue
    │   └── ThemeSwitch.vue
    ├── firebase.js
    ├── functions
    │   ├── getUserData.js
    │   ├── hello.js
    │   └── serviceAccountKey.json
    ├── global-styles
    │   ├── colors.scss
    │   └── typography.scss
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
    │   ├── Home.vue
    │   ├── Manage.vue
    │   ├── SignInFlow
    │       ├── Recover.vue
    │       ├── Request.vue
    │       └── SignIn.vue
    │   └── Team.vue
├── vue.config.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Thomas Wang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://designcode.io/vue">
 3 |     <img alt="Vue.js" src="./cover.png"/>
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Vue.js for Designers
 8 | </h1>
 9 | 
10 | [Vue.js](https://github.com/vuejs/vue) is a powerful, easy-to-use JavaScript framework that is component-based, just like React. This course will walk you through how to build a beautiful admin dashboard that you can use for your own data on the web. Create stunning charts, delightful animations, and powerful administrative commands. Full video tutorials: https://designcode.io/vue.
11 | 
12 | ## ⚡️ Course Downloads
13 | 
14 | 1. [Intro to Vue.js](https://github.com/thomaswangio/vue-admin-dashboard/tree/293b57a08ab745a3d42dfd99c098833541719772)
15 | 2. [Global Styling with Sass](https://github.com/thomaswangio/vue-admin-dashboard/tree/ab0f7dcfe575b338a443ca3680f8ba99111a52a8)
16 | 3. [Single File Components](https://github.com/thomaswangio/vue-admin-dashboard/tree/05dbe70a9745edcf42be96d02e238b83ae5143bf)
17 | 4. [Dark Mode Part 1](https://github.com/thomaswangio/vue-admin-dashboard/tree/a4ab92e0f5a6ad186d5a785c3f86228455651c4a)
18 | 5. [Dark Mode Part 2](https://github.com/thomaswangio/vue-admin-dashboard/tree/f3366f209d1388ce73a51a7bf70056eb78d52de4)
19 | 6. [Animations and Transitions](https://github.com/thomaswangio/vue-admin-dashboard/tree/ec9ac65ece01830d5d2060c610a210d3a2a71b3f)
20 | 7. [Accounts with Netlify](https://github.com/thomaswangio/vue-admin-dashboard/tree/5700810705c56fa8a4a8657cb00cee89a14d4ee3)
21 | 8. [Accounts with Slack](https://github.com/thomaswangio/vue-admin-dashboard/tree/ea78a10cac69f8c3053c1f9fa8538c63143197e2)
22 | 9. [Charts and Data Visualization](https://github.com/thomaswangio/vue-admin-dashboard/tree/71d8bb1e0f8763222554d85ab7b14541cb9bcd60)
23 | 10. [Database with Firestore](https://github.com/thomaswangio/vue-admin-dashboard/tree/bc61877bfda94bb112fd5afa362eb2d37275ab13)
24 | 11. [Lambda Functions with Netlify](https://github.com/thomaswangio/vue-admin-dashboard/tree/0df2be6068f9160e90fa2a4d46011b1d7717597d)
25 | 
26 | ## ⚙️ Install Yarn and Vue CLI
27 | 
28 | Make sure that you have the [Yarn](https://yarnpkg.com/en/) installed, then install the [Vue CLI](https://cli.vuejs.org/):
29 | 
30 | ```sh
31 | yarn global add @vue/cli
32 | ```
33 | 
34 | If you have trouble with getting this project to run, please run the version of `@vue/cli` used in the course:
35 | 
36 | ```sh
37 | yarn global add @vue/cli@3.3.0
38 | ```
39 | 
40 | ## ✏️ Manage your Project from the Vue CLI GUI
41 | 
42 | After installing the Vue CLI, you can open the Vue Project Manager by using the following command:
43 | 
44 | ```sh
45 | vue ui
46 | ```
47 | 
48 | Note: If you are importing this project instead of installing a new project from scratch, first run `yarn` in your project to install the dependencies.
49 | 
50 | ```sh
51 | yarn
52 | ```
53 | 
54 | Then you can run the project with:
55 | 
56 | ```sh
57 | yarn serve
58 | ```
59 | 
60 | ## 🎓 Learning Vue.js
61 | 
62 | The Design+Code Vue.js course lives [here](https://designcode.io/vue). Start learning by creating this Web App!
63 | 
64 | Looking for more guidance? Full documentation for Vue is [on their website](https://vuejs.org/). To see the documentation for the Vue CLL, which was used to create and configure this project, go [here](https://cli.vuejs.org/guide/).
65 | 
66 | ## 👾 Demo
67 | 
68 | Feel free to play around with the finished website at: https://vue-hq-2.netlify.app. The username is `support@designcode.io` and password is `123456789`.
69 | 
70 | ## 🚀 Deploy
71 | 
72 | Launch this site to Netlify by clicking below! Or go to [Netlify](https://www.netlify.app/) to deploy your own project.
73 | 
74 | [![Deploy to Netlify](https://www.netlify.app/img/deploy/button.svg)](https://app.netlify.app/start/deploy?repository=https://github.com/thomaswangio/vue-admin-dashboard)
75 | 
76 | ## 💭 Q&A and Issues
77 | 
78 | Feel free to [ask any questions or note issues](https://github.com/thomaswangio/vue-admin-dashboard/issues/new)!
79 | 
80 | - [Fixing dark and light text](https://github.com/thomaswangio/vue-admin-dashboard/issues/2)
81 | - [Using rem units instead of px](https://github.com/thomaswangio/vue-admin-dashboard/issues/3)
82 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/cover.png


--------------------------------------------------------------------------------
/functions/getUserData.js:
--------------------------------------------------------------------------------
 1 | const { zipFunctions } = require("@netlify/zip-it-and-ship-it");
 2 | 
 3 | zipFunctions("functions", "functions-dist")
 4 | 
 5 | var admin = require("firebase-admin");
 6 | 
 7 | var serviceAccount = require("./serviceAccountKey.json");
 8 | 
 9 | admin.initializeApp({
10 |     credential: admin.credential.cert(serviceAccount),
11 |     databaseURL: "https://vue-hq.firebaseio.com"
12 | });
13 | 
14 | 
15 | exports.handler = function (event, context, callback) {
16 |     const { user } = context.clientContext;
17 | 
18 |     // Do the user check here
19 |     // If not user, callback a status code of 401, meaning unauthorized
20 | 
21 |     const { email, subscriptionId } = event.queryStringParameters;
22 | 
23 |     console.log("Searched email: " + email);
24 |     console.log("Searched subscription ID: " + subscriptionId);
25 | 
26 |     const searchKey = email.length > 0 ? "email" : "subscriptionId"
27 |     const searchQuery = email.length > 0 ? email : subscriptionId
28 | 
29 |     const firestore = admin.firestore();
30 | 
31 |     firestore.collection('users').where(searchKey, '==', searchQuery).limit(1).get().then(response => {
32 |         if (response.empty) { return Promise.reject() }
33 | 
34 |         const userInfo = response.docs[0].data()
35 | 
36 |         console.log(userInfo)
37 | 
38 |         callback(null, {
39 |             statusCode: 200,
40 |             headers: {
41 |                 "Access-Control-Allow-Origin": "*", // Required for CORS support to work
42 |                 "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
43 |             },
44 |             body: JSON.stringify(userInfo)
45 |         })
46 |     }).catch(error => {
47 |         console.log(error)
48 | 
49 |         callback(null, {
50 |             statusCode: 500,
51 |             headers: {
52 |                 "Access-Control-Allow-Origin": "*", // Required for CORS support to work
53 |                 "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
54 |             },
55 |             body: error
56 |         })
57 |     })
58 | }
59 | 


--------------------------------------------------------------------------------
/functions/hello.js:
--------------------------------------------------------------------------------
 1 | exports.handler = function (event, context, callback) {
 2 |     callback(null, {
 3 |         statusCode: 200,
 4 |         headers: {
 5 |             "Access-Control-Allow-Origin": "*", // Required for CORS support to work
 6 |             "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
 7 |         },
 8 |         body: "Hello, World"
 9 |     });
10 | }


--------------------------------------------------------------------------------
/functions/serviceAccountKey.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "service_account",
 3 |   "project_id": "vue-hq",
 4 |   "private_key_id": "7f290e3e535486a33eca36efd6d642872bb93c54",
 5 |   "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDRKX1OTPLUB/gZ\nJlU7VgffVTiPuD6F3WsEgRpJ1o0BK4crGP1+R4VjdKcXgFyG9Mlt2S6Kzy2j/vLZ\ntjl7QdP72btOCr28+SlOYKLfz3i+HmzXMb+T1koJtfOAU/WVCR02Bhmx6asNq1Cy\nsUvuqFOFyCpI6iv8TgAiKKOUqLW1EUE/1mPOGbv9ToFdPaUpQNVfcpBUdO4dt9WF\nJf9gshuO2GgU4gIm3vY6RQtQ/ymOEYYKpVmU6PH+EIIjB2m8xkoR9tpYDGAsrps2\nznVIP6XNfqNWqic00BUF9QswhTMu1ti2G198RxGsv74dc/c80kb84TwIpNg1Je93\nftCm4ZmtAgMBAAECggEAAyd+sJqaeDYdOLaKRy3Mn+1CFXDFiJvxNuKCNKYxVC4w\nM1HaKM2ypkWma2/6dT07IxaeYWYvHa+vloxCoP2Pe9cpwEs11065SmmiAIFkJGyD\nCa/CCtxgG3YMqQfFxqyaLda5C897+Tsh1BVhEW/6anm9TCzejZyDhgBaOdiy0iXc\ndv3bx7VIIfGsapcHoVreUizwWUjmLfrSOKV/H+DT6QK2tcrECWJMRpEtlue6aNwT\nXK9qG1F6bUxomDKRy+hWnnVGZBcceMI+QoJdV9w5AOSMUkX/vUy1HpaJV2dTvgqb\nLp9BRUFBV98P9yES1bbbmiQ7nKLDlHhizpGXbZQc5QKBgQD7KvdMCzwbY5XBtvOq\n8aUgK2O947KpS+A4y94EKMd04qrDVJOm1Rk+HRb/T0h50979OXZpuOIkkTuujiXI\n/bkhazX2Q/qF+WnH5v4jp8WF8b+VX5wzGRd7mIRUEclCx+7dC38Hfuct80MHxA3s\nr9QTwtICuLfHq+slVjbyQn3HawKBgQDVL6O/5G+rrg/b/MXn0Dc0dUOc8AwOXr/9\nN8HH69zkMGB79Cjt4xVTvBoPyLuc1tK5qVoTJ9rVr3FNrtPQoMwYIG9Wjs1pTOZH\nEoXYWKrxNFySHMnp7dhDnVyz2siX5MlyaXul/vcW+mWHaqgZ41OuhXpDiNBB3LrY\n5+8GaP+hRwKBgQDnsu4ox2Buf8KBzi0gcAR9FanQXYHOLUGuA1tPCPNev076HEaN\nK546r4ksgs4AHNRjUyQKSVTMmPGuiFERBgZHbuh7wqAUAU5064FcEQPlGWs799RX\nSvlfugWwrCu2oEuYvGc12fqXaAZY3qJdyqHgjONBQXfACbdFXTAY8f+n+wKBgQCM\n74ezzpM8zj/R0VQMoow8c+GVGOT/gwgtoPTM9FL90DWY/JsqWVu6FbqtAKl3UFXT\nQ/A2hbyYU/n1v0RswkDrGlZAxPtrR9lc1xQBKO0ptNIWDk42BnVYjenBRTwjnq7G\nopGJ9froB/WjBpHHO5AQ6lEf4Iy9Xe1whDRy6mtE9QKBgGW3amuZRaBfWRhYQZqN\ne6PMXQP9DFce+HCa/f5d96AU8nORyOn10Wkd/D4DZYFqqbE/DEE5BeEdtk1WXvWb\nNtFpCdiNaV12iDEPrJ2aLElqKRlYDD6Q/Ckp6vNuFHcyA8Twr+FwSeqlQvAoHBHF\nlhdRoJO8b7rb3Ij1iGEaU9qy\n-----END PRIVATE KEY-----\n",
 6 |   "client_email": "firebase-adminsdk-vgwbn@vue-hq.iam.gserviceaccount.com",
 7 |   "client_id": "106063469757469881133",
 8 |   "auth_uri": "https://accounts.google.com/o/oauth2/auth",
 9 |   "token_uri": "https://oauth2.googleapis.com/token",
10 |   "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
11 |   "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-vgwbn%40vue-hq.iam.gserviceaccount.com"
12 | }
13 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   functions = "./functions"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-admin-dashboard",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "lint": "vue-cli-service lint",
 8 |     "start:lambda": "netlify-lambda serve src/functions",
 9 |     "build:lambda": "netlify-lambda build src/functions",
10 |     "build:vue": "vue-cli-service build"
11 |   },
12 |   "dependencies": {
13 |     "@firebase/app": "^0.6.5",
14 |     "@firebase/firestore": "^1.15.0",
15 |     "@netlify/zip-it-and-ship-it": "^0.2.0",
16 |     "animate.css": "^3.7.0",
17 |     "apexcharts": "^3.2.2",
18 |     "firebase-admin": "^7.0.0",
19 |     "gotrue-js": "^0.9.24",
20 |     "netlify-identity-widget": "^1.5.2",
21 |     "netlify-lambda": "^1.4.2",
22 |     "vue": "^2.5.21",
23 |     "vue-apexcharts": "^1.2.9",
24 |     "vue-firestore": "^0.3.16",
25 |     "vue-github-buttons": "^3.0.1",
26 |     "vue-router": "^3.0.1",
27 |     "vuex": "^3.0.1"
28 |   },
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "^3.3.0",
31 |     "@vue/cli-plugin-eslint": "^3.3.0",
32 |     "@vue/cli-service": "^3.3.0",
33 |     "@vue/eslint-config-prettier": "^4.0.1",
34 |     "babel-eslint": "^10.0.1",
35 |     "eslint": "^5.8.0",
36 |     "eslint-plugin-vue": "^5.0.0",
37 |     "node-sass": "^4.9.0",
38 |     "sass-loader": "^7.0.1",
39 |     "vue-template-compiler": "^2.5.21"
40 |   },
41 |   "eslintConfig": {
42 |     "root": true,
43 |     "env": {
44 |       "node": true
45 |     },
46 |     "extends": [
47 |       "plugin:vue/essential"
48 |     ],
49 |     "rules": {},
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     }
53 |   },
54 |   "postcss": {
55 |     "plugins": {
56 |       "autoprefixer": {}
57 |     }
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 8"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | # Netlify settings for single-page application
2 | /*    /index.html   200
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Primary Meta Tags -->
 5 |     <title>Vue HQ Demo Site by Design+Code</title>
 6 |     <meta name="title" content="Vue HQ Demo Site by Design+Code" />
 7 |     <meta
 8 |       name="description"
 9 |       content="A modern admin dashboard powered by Vue, Sass, Firestore, and Netlify."
10 |     />
11 |     <meta charset="utf-8" />
12 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
13 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
14 | 
15 |     <!-- Open Graph / Facebook -->
16 |     <meta property="og:type" content="website" />
17 |     <meta property="og:url" content="https://vue-hq.netlify.app/" />
18 |     <meta property="og:title" content="Vue HQ Demo Site by Design+Code" />
19 |     <meta
20 |       property="og:description"
21 |       content="A modern admin dashboard powered by Vue, Sass, Firestore, and Netlify."
22 |     />
23 |     <meta
24 |       property="og:image"
25 |       content="https://www.dropbox.com/s/ar080bq87jdf4oi/01.%20vue-intro.jpg?raw=1"
26 |     />
27 | 
28 |     <!-- Twitter -->
29 |     <meta property="twitter:card" content="summary_large_image" />
30 |     <meta property="twitter:url" content="https://vue-hq.netlify.app/" />
31 |     <meta property="twitter:title" content="Vue HQ Demo Site by Design+Code" />
32 |     <meta
33 |       property="twitter:description"
34 |       content="A modern admin dashboard powered by Vue, Sass, Firestore, and Netlify."
35 |     />
36 |     <meta
37 |       property="twitter:image"
38 |       content="https://www.dropbox.com/s/ar080bq87jdf4oi/01.%20vue-intro.jpg?raw=1"
39 |     />
40 | 
41 |     <!-- Favicon -->
42 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
43 |   </head>
44 |   <body>
45 |     <noscript>
46 |       <strong
47 |         >We're sorry but vue-admin-dashboard doesn't work properly without
48 |         JavaScript enabled. Please enable it to continue.</strong
49 |       >
50 |     </noscript>
51 |     <div id="app"></div>
52 |     <!-- built files will be auto injected -->
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" :class="{'light-background' : !isDarkMode, 'dark-background' : isDarkMode}">
  3 |     <router-view/>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import "animate.css";
  9 | 
 10 | export default {
 11 |   name: "App",
 12 |   computed: {
 13 |     isDarkMode() {
 14 |       return this.$store.getters.isDarkMode;
 15 |     }
 16 |   },
 17 |   mounted() {
 18 |     const isDarkMode = this.$store.getters.isDarkMode;
 19 |     document.body.style.background = isDarkMode ? "#212c4f" : "#f8f9fa";
 20 |   }
 21 | };
 22 | </script>
 23 | 
 24 | <style lang="scss">
 25 | * {
 26 |   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 27 | }
 28 | 
 29 | #app {
 30 |   font-family: $system-font-family;
 31 |   -webkit-font-smoothing: antialiased;
 32 |   -moz-osx-font-smoothing: grayscale;
 33 |   color: $white;
 34 | }
 35 | 
 36 | body {
 37 |   margin: 0;
 38 |   background: $dark-blue;
 39 | }
 40 | 
 41 | h1.dark {
 42 |   @include heading-3($black);
 43 | }
 44 | 
 45 | h1.light {
 46 |   @include heading-3($white);
 47 | }
 48 | 
 49 | h4 {
 50 |   margin: 0;
 51 |   line-height: 34px;
 52 |   font-size: 24px;
 53 |   text-align: center;
 54 |   color: #ffffff;
 55 | }
 56 | 
 57 | p {
 58 |   @include large-text-bold($purple);
 59 | }
 60 | 
 61 | line,
 62 | text {
 63 |   opacity: 0.2;
 64 | }
 65 | 
 66 | input {
 67 |   background: rgba(255, 255, 255, 0.2);
 68 |   border: 1px solid rgba(255, 255, 255, 0.2);
 69 |   box-sizing: border-box;
 70 |   border-radius: 4px;
 71 |   height: 60px;
 72 |   width: 100%;
 73 |   font-size: 20px;
 74 |   color: white;
 75 |   padding-left: 20px;
 76 |   margin-top: 20px;
 77 | 
 78 |   &::placeholder {
 79 |     color: rgba(255, 255, 255, 0.3);
 80 |   }
 81 | 
 82 |   &:focus {
 83 |     border: 1px solid $blue;
 84 |     box-shadow: 0 0 0 1px $blue;
 85 |     outline: none;
 86 |   }
 87 | }
 88 | 
 89 | button {
 90 |   background: #56ccf2;
 91 |   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 92 |   border-radius: 4px;
 93 |   border: none;
 94 |   height: 60px;
 95 |   width: 100%;
 96 |   font-size: 20px;
 97 |   color: white;
 98 |   margin-top: 20px;
 99 |   margin-bottom: 40px;
100 | }
101 | 
102 | a {
103 |   line-height: 25px;
104 |   font-size: 16px;
105 |   text-align: center;
106 | 
107 |   text-decoration: none;
108 | }
109 | 
110 | /* THEME */
111 | .light-background {
112 |   background-color: #f8f9fa;
113 | 
114 |   line,
115 |   text {
116 |     stroke: $black;
117 |   }
118 | }
119 | 
120 | .dark-background {
121 |   background-color: $dark-blue;
122 | 
123 |   line,
124 |   text {
125 |     stroke: $light-gray;
126 |   }
127 | }
128 | 
129 | .light-text {
130 |   color: $white;
131 | }
132 | 
133 | .dark-text {
134 |   color: $black;
135 | }
136 | 
137 | .light-field {
138 |   background: rgba(255, 255, 255, 0.2);
139 |   border: 1px solid rgba(255, 255, 255, 0.2);
140 |   color: $white;
141 | 
142 |   &::placeholder {
143 |     color: rgba(255, 255, 255, 0.3);
144 |   }
145 | }
146 | 
147 | .dark-field {
148 |   background: rgba(198, 208, 235, 0.2);
149 |   border: 1px solid rgba(0, 0, 0, 0.2);
150 |   color: $black;
151 | 
152 |   &::placeholder {
153 |     color: rgba(0, 0, 0, 0.3);
154 |   }
155 | }
156 | 
157 | .light-link {
158 |   color: rgba(255, 255, 255, 0.3);
159 | }
160 | 
161 | .dark-link {
162 |   color: rgba(0, 0, 0, 0.3);
163 | }
164 | 
165 | .light-box {
166 |   background: rgba(255, 255, 255, 0.1);
167 |   border: 1px solid rgba(255, 255, 255, 0.1);
168 | }
169 | 
170 | .dark-box {
171 |   background: #c6d0eb40;
172 |   border: 1px solid rgba(0, 0, 0, 0.1);
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/assets/DCHQ-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="156" height="140" viewBox="0 0 156 140" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M20 10H70C97.6142 10 120 32.3858 120 60C120 87.6142 97.6142 110 70 110H20V10Z" fill="#7B42F6"/>
 4 | </g>
 5 | <path d="M20 60L70 10C82.5342 10 93.9912 14.6121 102.767 22.2319C102.765 22.244 90.1765 34.8333 65 60C90.1777 85.1667 102.766 97.7565 102.765 97.7696C93.9897 105.388 82.5334 110 70 110L20 60Z" fill="url(#paint0_linear)"/>
 6 | <path d="M102.768 22.2328C113.325 31.4002 120 44.9205 120 60C120 75.0804 113.324 88.6015 102.766 97.7689C102.767 97.7563 90.1784 85.1667 65 60L102.768 22.2328Z" fill="url(#paint1_linear)"/>
 7 | <path d="M136.184 27V10.0898H133.172V17.1211H124.945V10.0898H121.922V27H124.945V19.6641H133.172V27H136.184ZM146.613 27.2812C147.715 27.2812 148.711 27.1172 149.613 26.7891L151.02 28.7109H153.984L151.711 25.6289C153.633 24.1406 154.641 21.668 154.641 18.5508C154.641 13.1484 151.535 9.80859 146.613 9.80859C141.703 9.80859 138.598 13.1836 138.598 18.5508C138.598 23.918 141.656 27.2812 146.613 27.2812ZM146.613 24.75C143.578 24.75 141.656 22.3242 141.656 18.5508C141.656 14.7656 143.578 12.3398 146.613 12.3398C149.66 12.3398 151.594 14.7656 151.594 18.5508C151.594 20.5781 151.008 22.2422 149.941 23.2852L148.781 21.7031H145.816L147.938 24.5625C147.527 24.6797 147.094 24.75 146.613 24.75Z" fill="#3672F8"/>
 8 | <defs>
 9 | <filter id="filter0_d" x="1.90735e-06" y="9.53674e-07" width="140" height="140" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
10 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
11 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
12 | <feOffset dy="10"/>
13 | <feGaussianBlur stdDeviation="10"/>
14 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
15 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
16 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
17 | </filter>
18 | <linearGradient id="paint0_linear" x1="20" y1="60" x2="120.225" y2="60" gradientUnits="userSpaceOnUse">
19 | <stop stop-color="#4899F7"/>
20 | <stop offset="1" stop-color="#2457F5"/>
21 | </linearGradient>
22 | <linearGradient id="paint1_linear" x1="65" y1="22.2328" x2="134.689" y2="58.5171" gradientUnits="userSpaceOnUse">
23 | <stop stop-color="#9DE1E5"/>
24 | <stop offset="1" stop-color="#B8DFB2"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/src/assets/DCHQ-small-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="57" height="42" viewBox="0 0 57 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M6 3H21C29.2843 3 36 9.71573 36 18C36 26.2843 29.2843 33 21 33H6V3Z" fill="#7B42F6"/>
 4 | </g>
 5 | <path d="M6 18L21 3C24.7603 3 28.1974 4.38364 30.83 6.66956C30.8296 6.67319 27.053 10.45 19.5 18C27.0533 25.55 30.8298 29.327 30.8294 29.3309C28.1969 31.6165 24.76 33 21 33L6 18Z" fill="url(#paint0_linear)"/>
 6 | <path d="M30.8303 6.66992C33.9974 9.42012 36 13.4762 36 18.0001C36 22.5242 33.9971 26.5805 30.8297 29.3307C30.8301 29.327 27.0535 25.5501 19.5 18.0001L30.8303 6.66992Z" fill="url(#paint1_linear)"/>
 7 | <path d="M46.375 12V3.54492H44.8691V7.04297H40.7559V3.54492H39.2441V12H40.7559V8.34961H44.8691V12H46.375ZM52.1172 12.2109C52.6562 12.2109 53.1602 12.1289 53.6113 11.9707L54.291 12.873H55.7676L54.6602 11.373C55.5859 10.6523 56.1074 9.38672 56.1074 7.77539C56.1074 5.03906 54.5605 3.33398 52.1172 3.33398C49.6621 3.33398 48.1094 5.0332 48.1094 7.77539C48.1094 10.5234 49.6445 12.2109 52.1172 12.2109ZM52.1172 10.9102C50.5938 10.9102 49.627 9.70898 49.627 7.77539C49.627 5.84766 50.5996 4.63477 52.1172 4.63477C53.623 4.63477 54.5898 5.84766 54.5898 7.77539C54.5898 8.82422 54.2969 9.66797 53.7812 10.1543L53.1426 9.32812H51.6602L52.7793 10.8281C52.5684 10.8867 52.3457 10.9102 52.1172 10.9102Z" fill="#3672F8"/>
 8 | <defs>
 9 | <filter id="filter0_d" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
10 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
11 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
12 | <feOffset dy="3"/>
13 | <feGaussianBlur stdDeviation="3"/>
14 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
15 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
16 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
17 | </filter>
18 | <linearGradient id="paint0_linear" x1="6" y1="18" x2="36.0674" y2="18" gradientUnits="userSpaceOnUse">
19 | <stop stop-color="#4899F7"/>
20 | <stop offset="1" stop-color="#2457F5"/>
21 | </linearGradient>
22 | <linearGradient id="paint1_linear" x1="19.5" y1="6.66992" x2="40.4066" y2="17.5552" gradientUnits="userSpaceOnUse">
23 | <stop stop-color="#9DE1E5"/>
24 | <stop offset="1" stop-color="#B8DFB2"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/src/assets/DCHQ-small.svg:
--------------------------------------------------------------------------------
 1 | <svg width="57" height="42" viewBox="0 0 57 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M6 3H21C29.2843 3 36 9.71573 36 18C36 26.2843 29.2843 33 21 33H6V3Z" fill="white"/>
 4 | </g>
 5 | <path d="M6 18L21 3C24.7603 3 28.1974 4.38364 30.83 6.66956C30.8296 6.67319 27.053 10.45 19.5 18C27.0533 25.55 30.8298 29.327 30.8294 29.3309C28.1969 31.6165 24.76 33 21 33L6 18Z" fill="url(#paint0_linear)"/>
 6 | <path d="M30.8303 6.66992C33.9974 9.42012 36 13.4762 36 18.0001C36 22.5242 33.9971 26.5805 30.8297 29.3307C30.8301 29.327 27.0535 25.5501 19.5 18.0001L30.8303 6.66992Z" fill="url(#paint1_linear)"/>
 7 | <path d="M46.375 12V3.54492H44.8691V7.04297H40.7559V3.54492H39.2441V12H40.7559V8.34961H44.8691V12H46.375ZM52.1172 12.2109C52.6562 12.2109 53.1602 12.1289 53.6113 11.9707L54.291 12.873H55.7676L54.6602 11.373C55.5859 10.6523 56.1074 9.38672 56.1074 7.77539C56.1074 5.03906 54.5605 3.33398 52.1172 3.33398C49.6621 3.33398 48.1094 5.0332 48.1094 7.77539C48.1094 10.5234 49.6445 12.2109 52.1172 12.2109ZM52.1172 10.9102C50.5938 10.9102 49.627 9.70898 49.627 7.77539C49.627 5.84766 50.5996 4.63477 52.1172 4.63477C53.623 4.63477 54.5898 5.84766 54.5898 7.77539C54.5898 8.82422 54.2969 9.66797 53.7812 10.1543L53.1426 9.32812H51.6602L52.7793 10.8281C52.5684 10.8867 52.3457 10.9102 52.1172 10.9102Z" fill="#3672F8"/>
 8 | <defs>
 9 | <filter id="filter0_d" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
10 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
11 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
12 | <feOffset dy="3"/>
13 | <feGaussianBlur stdDeviation="3"/>
14 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
15 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
16 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
17 | </filter>
18 | <linearGradient id="paint0_linear" x1="6" y1="18" x2="36.0674" y2="18" gradientUnits="userSpaceOnUse">
19 | <stop stop-color="#4899F7"/>
20 | <stop offset="1" stop-color="#2457F5"/>
21 | </linearGradient>
22 | <linearGradient id="paint1_linear" x1="19.5" y1="6.66992" x2="40.4066" y2="17.5552" gradientUnits="userSpaceOnUse">
23 | <stop stop-color="#9DE1E5"/>
24 | <stop offset="1" stop-color="#B8DFB2"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/src/assets/DCHQ.svg:
--------------------------------------------------------------------------------
 1 | <svg width="156" height="140" viewBox="0 0 156 140" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M20 10H70C97.6142 10 120 32.3858 120 60C120 87.6142 97.6142 110 70 110H20V10Z" fill="white"/>
 4 | </g>
 5 | <path d="M20 60L70 10C82.5342 10 93.9912 14.6121 102.767 22.2319C102.765 22.244 90.1765 34.8333 65 60C90.1777 85.1667 102.766 97.7565 102.765 97.7696C93.9897 105.388 82.5334 110 70 110L20 60Z" fill="url(#paint0_linear)"/>
 6 | <path d="M102.768 22.2328C113.325 31.4002 120 44.9205 120 60C120 75.0804 113.324 88.6015 102.766 97.7689C102.767 97.7563 90.1784 85.1667 65 60L102.768 22.2328Z" fill="url(#paint1_linear)"/>
 7 | <path d="M136.184 27V10.0898H133.172V17.1211H124.945V10.0898H121.922V27H124.945V19.6641H133.172V27H136.184ZM146.613 27.2812C147.715 27.2812 148.711 27.1172 149.613 26.7891L151.02 28.7109H153.984L151.711 25.6289C153.633 24.1406 154.641 21.668 154.641 18.5508C154.641 13.1484 151.535 9.80859 146.613 9.80859C141.703 9.80859 138.598 13.1836 138.598 18.5508C138.598 23.918 141.656 27.2812 146.613 27.2812ZM146.613 24.75C143.578 24.75 141.656 22.3242 141.656 18.5508C141.656 14.7656 143.578 12.3398 146.613 12.3398C149.66 12.3398 151.594 14.7656 151.594 18.5508C151.594 20.5781 151.008 22.2422 149.941 23.2852L148.781 21.7031H145.816L147.938 24.5625C147.527 24.6797 147.094 24.75 146.613 24.75Z" fill="#3672F8"/>
 8 | <defs>
 9 | <filter id="filter0_d" x="1.90735e-06" y="9.53674e-07" width="140" height="140" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
10 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
11 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
12 | <feOffset dy="10"/>
13 | <feGaussianBlur stdDeviation="10"/>
14 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
15 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
16 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
17 | </filter>
18 | <linearGradient id="paint0_linear" x1="20" y1="60" x2="120.225" y2="60" gradientUnits="userSpaceOnUse">
19 | <stop stop-color="#4899F7"/>
20 | <stop offset="1" stop-color="#2457F5"/>
21 | </linearGradient>
22 | <linearGradient id="paint1_linear" x1="65" y1="22.2328" x2="134.689" y2="58.5171" gradientUnits="userSpaceOnUse">
23 | <stop stop-color="#9DE1E5"/>
24 | <stop offset="1" stop-color="#B8DFB2"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/src/assets/contentful.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/contentful.png


--------------------------------------------------------------------------------
/src/assets/dropbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/dropbox.png


--------------------------------------------------------------------------------
/src/assets/figma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/figma.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logout.svg:
--------------------------------------------------------------------------------
1 | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M11 12.4139L15.414 7.99994L11 3.58594L9.586 4.99994L11.586 6.99994H5V8.99994H11.586L9.586 10.9999L11 12.4139Z" fill="#5B6175"/>
3 | <path d="M12 14H3V2H12V0H2C1.448 0 1 0.448 1 1V15C1 15.552 1.448 16 2 16H12V14Z" fill="#5B6175"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/assets/moon.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M6.75 0C2.8125 1.0125 0 4.6125 0 8.8875C0 13.95 4.05 18 9.1125 18C13.3875 18 16.875 15.1875 18 11.25C11.1375 13.1625 4.8375 6.8625 6.75 0Z" fill="#546BFB"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/notion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/notion.png


--------------------------------------------------------------------------------
/src/assets/slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomaswang-archive/vue-admin-dashboard/2aecdd70b7cf7385b6a74daeed15a36a1fc60b50/src/assets/slack.png


--------------------------------------------------------------------------------
/src/assets/sun.svg:
--------------------------------------------------------------------------------
 1 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M10.125 0H7.875V2.25H10.125V0Z" fill="#7D8FFF"/>
 3 | <path d="M16.0809 3.43302L14.4904 1.84137L12.8987 3.43189L14.4892 5.02354L16.0809 3.43302Z" fill="#7D8FFF"/>
 4 | <path d="M18 7.875H15.75V10.125H18V7.875Z" fill="#7D8FFF"/>
 5 | <path d="M12.9772 14.6468L14.5688 16.2374L16.1594 14.6457L14.5677 13.0552L12.9772 14.6468Z" fill="#7D8FFF"/>
 6 | <path d="M10.125 15.75H7.875V18H10.125V15.75Z" fill="#7D8FFF"/>
 7 | <path d="M1.76189 14.5671L3.35242 16.1588L4.94407 14.5682L3.35354 12.9766L1.76189 14.5671Z" fill="#7D8FFF"/>
 8 | <path d="M2.25 7.875H0V10.125H2.25V7.875Z" fill="#7D8FFF"/>
 9 | <path d="M5.02268 3.51039L3.43103 1.91986L1.84051 3.51151L3.43216 5.10204L5.02268 3.51039Z" fill="#7D8FFF"/>
10 | <path d="M9 4.5C6.525 4.5 4.5 6.525 4.5 9C4.5 11.475 6.525 13.5 9 13.5C11.475 13.5 13.5 11.475 13.5 9C13.5 6.525 11.475 4.5 9 4.5Z" fill="#546BFB"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="nav" :class="{'nav-light' : !isDarkMode, 'nav-dark' : isDarkMode}">
  3 |     <div class="nav-1">
  4 |       <img src="@/assets/DCHQ-small.svg">
  5 |       <router-link to="/" :class="{'light-nav' : !isDarkMode, 'dark-nav' : isDarkMode}">Home</router-link>
  6 |       <router-link
  7 |         to="/manage"
  8 |         :class="{'light-nav' : !isDarkMode, 'dark-nav' : isDarkMode}"
  9 |       >Manage Users</router-link>
 10 |       <router-link to="/team" :class="{'light-nav' : !isDarkMode, 'dark-nav' : isDarkMode}">Team</router-link>
 11 |     </div>
 12 |     <a @click="onClick">
 13 |       Logout
 14 |       <img src="@/assets/logout.svg">
 15 |     </a>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import { auth } from "@/main";
 21 | 
 22 | export default {
 23 |   name: "Header",
 24 |   computed: {
 25 |     isDarkMode() {
 26 |       return this.$store.getters.isDarkMode;
 27 |     }
 28 |   },
 29 |   methods: {
 30 |     onClick() {
 31 |       const user = auth.currentUser();
 32 | 
 33 |       user
 34 |         .logout()
 35 |         .then(response => {
 36 |           this.$router.push({
 37 |             name: "signin",
 38 |             params: { userLoggedOut: true }
 39 |           });
 40 |         })
 41 |         .catch(error => {
 42 |           alert("Error: ", error);
 43 |         });
 44 |     }
 45 |   }
 46 | };
 47 | </script>
 48 | 
 49 | <style scoped lang="scss">
 50 | .nav-light {
 51 |   background: #f0f3f5;
 52 |   box-shadow: 1px 3px 20px 4px #c6d0eb59;
 53 | }
 54 | 
 55 | .nav-dark {
 56 |   background: $super-dark-blue;
 57 |   box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
 58 | }
 59 | 
 60 | #nav {
 61 |   padding: 30px;
 62 |   display: flex;
 63 |   justify-content: space-between;
 64 |   align-items: center;
 65 |   box-sizing: border-box;
 66 |   width: 100%;
 67 |   padding: 15px 15%;
 68 | 
 69 |   a {
 70 |     font-weight: bold;
 71 |     color: $dark-gray;
 72 |     &.router-link-exact-active.dark-nav {
 73 |       color: $white;
 74 |     }
 75 |     &.router-link-exact-active.light-nav {
 76 |       color: $middle-blue;
 77 |     }
 78 |   }
 79 | 
 80 |   a,
 81 |   img {
 82 |     &:hover {
 83 |       cursor: pointer;
 84 |     }
 85 |   }
 86 | }
 87 | 
 88 | .nav-1 {
 89 |   display: flex;
 90 |   align-items: center;
 91 | 
 92 |   a {
 93 |     margin-left: 20px;
 94 |     margin-right: 20px;
 95 |     @media all and (max-width: 767px) {
 96 |       display: none;
 97 |     }
 98 |   }
 99 | 
100 |   img {
101 |     margin-right: 20px;
102 |   }
103 | }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">{{ msg }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "HelloWorld",
 8 |   props: {
 9 |     msg: String
10 |   }
11 | };
12 | </script>
13 | 
14 | <!-- Add "scoped" attribute to limit CSS to this component only -->
15 | <style scoped lang="scss">
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/Notification.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutRight">
 3 |     <div v-show="show" class="bubble">
 4 |       <div class="message">{{text}}</div>
 5 |     </div>
 6 |   </transition>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "Notification",
12 |   data() {
13 |     return {
14 |       show: false
15 |     };
16 |   },
17 |   mounted() {
18 |     this.show = true;
19 |     setTimeout(() => {
20 |       this.show = false;
21 |     }, 3000);
22 |   },
23 |   props: {
24 |     text: String
25 |   }
26 | };
27 | </script>
28 | 
29 | <style scoped lang="scss">
30 | .bubble {
31 |   border-radius: 6px;
32 |   position: absolute;
33 |   top: 10%;
34 |   padding: 5px 10px 5px 10px;
35 |   background-color: $blue;
36 | }
37 | 
38 | .message {
39 |   @include medium-text;
40 |   color: $white;
41 | 
42 |   display: flex;
43 |   justify-content: center;
44 |   align-items: center;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/RequestAccount.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="slide-in-right" enter-active-class="animated slideInRight">
 3 |     <div
 4 |       v-show="show"
 5 |       class="request"
 6 |       :class="{'light-request' : isDarkMode, 'dark-request' : !isDarkMode}"
 7 |     >Don't have a Design+Code HQ account?
 8 |       <router-link to="/request">Request an account</router-link>
 9 |     </div>
10 |   </transition>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: "RequestAccount",
16 |   data() {
17 |     return {
18 |       show: false
19 |     };
20 |   },
21 |   mounted() {
22 |     this.show = true;
23 |   },
24 |   computed: {
25 |     isDarkMode() {
26 |       return this.$store.getters.isDarkMode;
27 |     }
28 |   }
29 | };
30 | </script>
31 | 
32 | <style scoped lang="scss">
33 | .request {
34 |   position: absolute;
35 |   top: 40px;
36 |   right: 40px;
37 |   
38 |   @media all and (max-width: 767px) {
39 |     display: none;
40 |   }
41 | }
42 | 
43 | .light-request {
44 |   color: rgba(255, 255, 255, 0.3);
45 | 
46 |   a {
47 |     color: white;
48 |   }
49 | }
50 | 
51 | .dark-request {
52 |   color: rgba(0, 0, 0, 0.3);
53 | 
54 |   a {
55 |     color: $black;
56 |   }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/ThemeSwitch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     @click="toggleDarkMode"
 4 |     class="toggle"
 5 |     :class="{'light-toggle' : !isDarkMode, 'dark-toggle' : isDarkMode}"
 6 |   >
 7 |     <div class="toggle-switch" :class="{'toggle-left' : !isDarkMode, 'toggle-right' : isDarkMode}">
 8 |       <img v-if="!isDarkMode" src="@/assets/sun.svg">
 9 |       <img v-if="isDarkMode" src="@/assets/moon.svg">
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "ThemeSwitch",
17 |   computed: {
18 |     isDarkMode() {
19 |       return this.$store.getters.isDarkMode;
20 |     }
21 |   },
22 |   methods: {
23 |     toggleDarkMode() {
24 |       this.$store.commit("toggleDarkMode");
25 |     }
26 |   }
27 | };
28 | </script>
29 | 
30 | <style scoped lang="scss">
31 | .toggle {
32 |   border-radius: 10px;
33 |   width: 175px;
34 |   box-sizing: border-box;
35 |   margin: 50px auto;
36 |   display: flex;
37 |   cursor: pointer;
38 | }
39 | 
40 | .light-toggle {
41 |   background: linear-gradient(346.78deg, #f7fcfc 0%, #fafcfa 100%);
42 |   border: 1px solid rgba(0, 0, 0, 0.04);
43 |   box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.1);
44 | }
45 | 
46 | .dark-toggle {
47 |   background: rgba(255, 255, 255, 0.1);
48 |   border: 1px solid rgba(255, 255, 255, 0.1);
49 |   box-shadow: inset 0px 5px 10px rgba(255, 255, 255, 0.1);
50 | }
51 | 
52 | .toggle-switch {
53 |   margin: 2px;
54 |   padding: 15px 35px;
55 |   border-radius: 8px;
56 | }
57 | 
58 | .toggle-left {
59 |   transform: translateX(0);
60 |   background: #ffffff;
61 |   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
62 | }
63 | 
64 | .toggle-right {
65 |   transform: translateX(92%);
66 |   background: #1b233f;
67 |   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | import { firebase } from "@firebase/app";
 2 | import "@firebase/firestore";
 3 | 
 4 | const firebaseApp = firebase.initializeApp({
 5 |     apiKey: "AIzaSyBZcqLLNNKG-Gpcdr-2he4QAX8q1yvgEww",
 6 |     authDomain: "vue-hq.firebaseapp.com",
 7 |     databaseURL: "https://vue-hq.firebaseio.com",
 8 |     projectId: "vue-hq",
 9 |     storageBucket: "vue-hq.appspot.com",
10 |     messagingSenderId: "857669172723"
11 | });
12 | 
13 | export const db = firebaseApp.firestore();


--------------------------------------------------------------------------------
/src/functions/getUserData.js:
--------------------------------------------------------------------------------
 1 | const { zipFunctions } = require("@netlify/zip-it-and-ship-it");
 2 | 
 3 | zipFunctions("functions", "functions-dist")
 4 | 
 5 | var admin = require("firebase-admin");
 6 | 
 7 | var serviceAccount = require("./serviceAccountKey.json");
 8 | 
 9 | admin.initializeApp({
10 |     credential: admin.credential.cert(serviceAccount),
11 |     databaseURL: "https://vue-hq.firebaseio.com"
12 | });
13 | 
14 | 
15 | exports.handler = function (event, context, callback) {
16 |     const { user } = context.clientContext;
17 | 
18 |     // Do the user check here
19 |     // If not user, callback a status code of 401, meaning unauthorized
20 | 
21 |     const { email, subscriptionId } = event.queryStringParameters;
22 | 
23 |     console.log("Searched email: " + email);
24 |     console.log("Searched subscription ID: " + subscriptionId);
25 | 
26 |     const searchKey = email.length > 0 ? "email" : "subscriptionId"
27 |     const searchQuery = email.length > 0 ? email : subscriptionId
28 | 
29 |     const firestore = admin.firestore();
30 | 
31 |     firestore.collection('users').where(searchKey, '==', searchQuery).limit(1).get().then(response => {
32 |         if (response.empty) { return Promise.reject() }
33 | 
34 |         const userInfo = response.docs[0].data()
35 | 
36 |         console.log(userInfo)
37 | 
38 |         callback(null, {
39 |             statusCode: 200,
40 |             headers: {
41 |                 "Access-Control-Allow-Origin": "*", // Required for CORS support to work
42 |                 "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
43 |             },
44 |             body: JSON.stringify(userInfo)
45 |         })
46 |     }).catch(error => {
47 |         console.log(error)
48 | 
49 |         callback(null, {
50 |             statusCode: 500,
51 |             headers: {
52 |                 "Access-Control-Allow-Origin": "*", // Required for CORS support to work
53 |                 "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
54 |             },
55 |             body: error
56 |         })
57 |     })
58 | }
59 | 


--------------------------------------------------------------------------------
/src/functions/hello.js:
--------------------------------------------------------------------------------
 1 | exports.handler = function (event, context, callback) {
 2 |     callback(null, {
 3 |         statusCode: 200,
 4 |         headers: {
 5 |             "Access-Control-Allow-Origin": "*", // Required for CORS support to work
 6 |             "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS 
 7 |         },
 8 |         body: "Hello, World"
 9 |     });
10 | }


--------------------------------------------------------------------------------
/src/functions/serviceAccountKey.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "service_account",
 3 |   "project_id": "vue-hq",
 4 |   "private_key_id": "7f290e3e535486a33eca36efd6d642872bb93c54",
 5 |   "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDRKX1OTPLUB/gZ\nJlU7VgffVTiPuD6F3WsEgRpJ1o0BK4crGP1+R4VjdKcXgFyG9Mlt2S6Kzy2j/vLZ\ntjl7QdP72btOCr28+SlOYKLfz3i+HmzXMb+T1koJtfOAU/WVCR02Bhmx6asNq1Cy\nsUvuqFOFyCpI6iv8TgAiKKOUqLW1EUE/1mPOGbv9ToFdPaUpQNVfcpBUdO4dt9WF\nJf9gshuO2GgU4gIm3vY6RQtQ/ymOEYYKpVmU6PH+EIIjB2m8xkoR9tpYDGAsrps2\nznVIP6XNfqNWqic00BUF9QswhTMu1ti2G198RxGsv74dc/c80kb84TwIpNg1Je93\nftCm4ZmtAgMBAAECggEAAyd+sJqaeDYdOLaKRy3Mn+1CFXDFiJvxNuKCNKYxVC4w\nM1HaKM2ypkWma2/6dT07IxaeYWYvHa+vloxCoP2Pe9cpwEs11065SmmiAIFkJGyD\nCa/CCtxgG3YMqQfFxqyaLda5C897+Tsh1BVhEW/6anm9TCzejZyDhgBaOdiy0iXc\ndv3bx7VIIfGsapcHoVreUizwWUjmLfrSOKV/H+DT6QK2tcrECWJMRpEtlue6aNwT\nXK9qG1F6bUxomDKRy+hWnnVGZBcceMI+QoJdV9w5AOSMUkX/vUy1HpaJV2dTvgqb\nLp9BRUFBV98P9yES1bbbmiQ7nKLDlHhizpGXbZQc5QKBgQD7KvdMCzwbY5XBtvOq\n8aUgK2O947KpS+A4y94EKMd04qrDVJOm1Rk+HRb/T0h50979OXZpuOIkkTuujiXI\n/bkhazX2Q/qF+WnH5v4jp8WF8b+VX5wzGRd7mIRUEclCx+7dC38Hfuct80MHxA3s\nr9QTwtICuLfHq+slVjbyQn3HawKBgQDVL6O/5G+rrg/b/MXn0Dc0dUOc8AwOXr/9\nN8HH69zkMGB79Cjt4xVTvBoPyLuc1tK5qVoTJ9rVr3FNrtPQoMwYIG9Wjs1pTOZH\nEoXYWKrxNFySHMnp7dhDnVyz2siX5MlyaXul/vcW+mWHaqgZ41OuhXpDiNBB3LrY\n5+8GaP+hRwKBgQDnsu4ox2Buf8KBzi0gcAR9FanQXYHOLUGuA1tPCPNev076HEaN\nK546r4ksgs4AHNRjUyQKSVTMmPGuiFERBgZHbuh7wqAUAU5064FcEQPlGWs799RX\nSvlfugWwrCu2oEuYvGc12fqXaAZY3qJdyqHgjONBQXfACbdFXTAY8f+n+wKBgQCM\n74ezzpM8zj/R0VQMoow8c+GVGOT/gwgtoPTM9FL90DWY/JsqWVu6FbqtAKl3UFXT\nQ/A2hbyYU/n1v0RswkDrGlZAxPtrR9lc1xQBKO0ptNIWDk42BnVYjenBRTwjnq7G\nopGJ9froB/WjBpHHO5AQ6lEf4Iy9Xe1whDRy6mtE9QKBgGW3amuZRaBfWRhYQZqN\ne6PMXQP9DFce+HCa/f5d96AU8nORyOn10Wkd/D4DZYFqqbE/DEE5BeEdtk1WXvWb\nNtFpCdiNaV12iDEPrJ2aLElqKRlYDD6Q/Ckp6vNuFHcyA8Twr+FwSeqlQvAoHBHF\nlhdRoJO8b7rb3Ij1iGEaU9qy\n-----END PRIVATE KEY-----\n",
 6 |   "client_email": "firebase-adminsdk-vgwbn@vue-hq.iam.gserviceaccount.com",
 7 |   "client_id": "106063469757469881133",
 8 |   "auth_uri": "https://accounts.google.com/o/oauth2/auth",
 9 |   "token_uri": "https://oauth2.googleapis.com/token",
10 |   "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
11 |   "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-vgwbn%40vue-hq.iam.gserviceaccount.com"
12 | }
13 | 


--------------------------------------------------------------------------------
/src/global-styles/colors.scss:
--------------------------------------------------------------------------------
 1 | // Background Colors
 2 | $dark-blue: #212c4f;
 3 | $super-dark-blue: #1b233f;
 4 | $light-gray: #f0f3f5;
 5 | 
 6 | // Text Colors
 7 | $dark-green: #205284;
 8 | $dark-gray: #5b6175;
 9 | $light-blue: #c6d0eb;
10 | $black: #000000;
11 | $white: #ffffff;
12 | 
13 | // Button Colors
14 | $purple: #7b42f6;
15 | $violet: #b01eff;
16 | $pink: #e1467c;
17 | $blue: #3672f8;
18 | $middle-blue: #546bfb;
19 | $teal: #56ccf2;
20 | $green: #a6e1d5;
21 | $turquoise: #14f1d9;
22 | 


--------------------------------------------------------------------------------
/src/global-styles/typography.scss:
--------------------------------------------------------------------------------
 1 | // Font Family
 2 | $system-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 3 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 4 | 
 5 | // Headings
 6 | @mixin heading-1($color: $white) {
 7 | 	font-size: 80px;
 8 | 	line-height: 86px;
 9 | 	font-weight: bold;
10 | 	color: $color;
11 | }
12 | 
13 | @mixin heading-2($color: $white) {
14 | 	font-size: 60px;
15 | 	line-height: 86px;
16 | 	font-weight: bold;
17 | 	color: $color;
18 | }
19 | 
20 | @mixin heading-3($color: $white) {
21 | 	font-size: 30px;
22 | 	line-height: 43px;
23 | 	font-weight: bold;
24 | 	color: $color;
25 | }
26 | 
27 | @mixin heading-4($color: $white) {
28 | 	font-size: 24px;
29 | 	line-height: 34px;
30 | 	font-weight: bold;
31 | 	color: $color;
32 | }
33 | 
34 | // Body Text
35 | %large {
36 | 	line-height: 37px;
37 | 	font-size: 24px;
38 | }
39 | 
40 | @mixin large-text($color: $white) {
41 | 	@extend %large;
42 | 	color: $color;
43 | }
44 | 
45 | @mixin large-text-bold($color: $white) {
46 | 	@extend %large;
47 | 	font-weight: bold;
48 | 	color: $color;
49 | }
50 | 
51 | %medium {
52 | 	line-height: 31px;
53 | 	font-size: 20px;
54 | }
55 | 
56 | @mixin medium-text($color: $white) {
57 | 	@extend %medium;
58 | 	color: $color;
59 | }
60 | 
61 | @mixin medium-text-bold($color: $white) {
62 | 	@extend %medium;
63 | 	font-weight: bold;
64 | 	color: $color;
65 | }
66 | 


--------------------------------------------------------------------------------
/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 * as netlifyIdentityWidget from "netlify-identity-widget";
 6 | import GoTrue from "gotrue-js";
 7 | import VueFirestore from "vue-firestore";
 8 | import "vue-github-buttons/dist/vue-github-buttons.css"; // Stylesheet
 9 | import VueGitHubButtons from "vue-github-buttons"; // Component plugin
10 | 
11 | Vue.config.productionTip = false;
12 | 
13 | // Initialize Netlify Identity
14 | netlifyIdentityWidget.init();
15 | 
16 | // Initialize GoTrue JS for Netlify
17 | export const auth = new GoTrue({
18 |   APIUrl: "https://vue-hq.netlify.app/.netlify/identity",
19 |   setCookie: true,
20 | });
21 | 
22 | // Initialize Vue Firestore
23 | Vue.use(VueFirestore);
24 | 
25 | // Initialize Github Buttons
26 | Vue.use(VueGitHubButtons);
27 | 
28 | new Vue({
29 |   router,
30 |   store,
31 |   render: (h) => h(App),
32 | }).$mount("#app");
33 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import Home from "./views/Home.vue";
 4 | import Team from "./views/Team.vue";
 5 | import Manage from "./views/Manage.vue";
 6 | import SignIn from "./views/SignInFlow/SignIn";
 7 | import Request from "./views/SignInFlow/Request";
 8 | import Recover from "./views/SignInFlow/Recover";
 9 | import * as netlifyIdentityWidget from "netlify-identity-widget";
10 | 
11 | Vue.use(Router);
12 | 
13 | const router = new Router({
14 |   mode: "history",
15 |   base: process.env.BASE_URL,
16 |   routes: [
17 |     {
18 |       path: "/",
19 |       name: "home",
20 |       component: Home,
21 |       meta: {
22 |         requiresAuth: true
23 |       }
24 |     },
25 |     {
26 |       path: "/Manage",
27 |       name: "manage",
28 |       component: Manage,
29 |       meta: {
30 |         requiresAuth: true
31 |       }
32 |     },
33 |     {
34 |       path: "/team",
35 |       name: "team",
36 |       component: Team,
37 |       meta: {
38 |         requiresAuth: true
39 |       }
40 |     },
41 |     {
42 |       path: "/signin",
43 |       name: "signin",
44 |       component: SignIn
45 |     },
46 |     {
47 |       path: "/request",
48 |       name: "request",
49 |       component: Request
50 |     },
51 |     {
52 |       path: "/recover",
53 |       name: "recover",
54 |       component: Recover
55 |     }
56 |   ]
57 | });
58 | 
59 | router.beforeEach((to, from, next) => {
60 |   const currentUser = netlifyIdentityWidget.currentUser();
61 |   const requiresAuth = to.matched.some(record => {
62 |     return record.meta.requiresAuth
63 |   })
64 | 
65 |   if (requiresAuth && !currentUser) {
66 |     next("signin");
67 |   } else {
68 |     next();
69 |   }
70 | })
71 | 
72 | export default router;
73 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | // Initial State
 7 | if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
 8 |   window.localStorage.setItem("isDarkMode", "true");
 9 | }
10 | 
11 | const userSelectedDarkMode = window.localStorage.getItem("isDarkMode") === "true";
12 | 
13 | const state = {
14 |   isDarkMode: userSelectedDarkMode
15 | }
16 | 
17 | // Getters
18 | const getters = {
19 |   isDarkMode(state) {
20 |     return state.isDarkMode
21 |   }
22 | }
23 | 
24 | // Mutations
25 | const mutations = {
26 |   toggleDarkMode(state) {
27 |     if (state.isDarkMode === true) {
28 |       state.isDarkMode = false;
29 |       window.localStorage.setItem("isDarkMode", "false");
30 |     } else {
31 |       state.isDarkMode = true;
32 |       window.localStorage.setItem("isDarkMode", "true");
33 |     }
34 |   }
35 | }
36 | 
37 | // Actions
38 | const actions = {
39 |   triggerDarkMode(context) {
40 |     context.commit('toggleDarkMode');
41 |   }
42 | }
43 | 
44 | export default new Vuex.Store({
45 |   state,
46 |   getters,
47 |   mutations,
48 |   actions
49 | });
50 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <Header/>
  4 |     <div class="container">
  5 |       <div class="spread">
  6 |         <h1 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Traffic Overview</h1>
  7 |         <div class="toggle" :class="{'light-box' : isDarkMode, 'dark-box' : !isDarkMode}">
  8 |           <div ref="days" class="days" @click="toggleDays">Days</div>
  9 |           <div ref="weeks" class="weeks" @click="toggleWeeks">Weeks</div>
 10 |           <div ref="months" class="months" @click="toggleMonths">Months</div>
 11 |         </div>
 12 |       </div>
 13 |       <apexchart
 14 |         class="chart1"
 15 |         width="100%"
 16 |         height="500px"
 17 |         type="area"
 18 |         :options="chartOptions"
 19 |         :series="series"
 20 |       ></apexchart>
 21 |       <div class="gchart-container">
 22 |         <iframe
 23 |           v-if="!isDarkMode"
 24 |           width="600"
 25 |           height="450"
 26 |           src="https://datastudio.google.com/embed/reporting/10dPbyKycKf2EmMRSg9mse0nGX4kjqUpe/page/AbTf"
 27 |           frameborder="0"
 28 |           style="border:0"
 29 |           allowfullscreen
 30 |         ></iframe>
 31 |         
 32 |         <iframe
 33 |           v-if="isDarkMode"
 34 |           width="600"
 35 |           height="450"
 36 |           src="https://datastudio.google.com/embed/reporting/1Ef0GvClANil2gofuOkNVz2d0aLh9RRQO/page/AbTf"
 37 |           frameborder="0"
 38 |           style="border:0"
 39 |           allowfullscreen
 40 |         ></iframe>
 41 |         
 42 |         <iframe
 43 |           v-if="!isDarkMode"
 44 |           width="450"
 45 |           height="450"
 46 |           src="https://datastudio.google.com/embed/reporting/1eoUicGI1r9Bp8fceuao3vwB9a7K8-rGK/page/4hTf"
 47 |           frameborder="0"
 48 |           style="border:0"
 49 |           allowfullscreen
 50 |         ></iframe>
 51 |         
 52 |         <iframe
 53 |           v-if="isDarkMode"
 54 |           width="450"
 55 |           height="450"
 56 |           src="https://datastudio.google.com/embed/reporting/1DkX7kx7rwqiqP0TdHYCGHGYiVNqNdXk0/page/4hTf"
 57 |           frameborder="0"
 58 |           style="border:0"
 59 |           allowfullscreen
 60 |         ></iframe>
 61 |       </div>
 62 |     </div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import VueApexCharts from "vue-apexcharts";
 68 | import Header from "@/components/Header.vue";
 69 | import { db } from "@/firebase";
 70 | 
 71 | export default {
 72 |   name: "home",
 73 |   computed: {
 74 |     isDarkMode() {
 75 |       return this.$store.getters.isDarkMode;
 76 |     }
 77 |   },
 78 |   components: {
 79 |     Header,
 80 |     apexchart: VueApexCharts
 81 |   },
 82 |   firestore() {
 83 |     return {
 84 |       traffic: {
 85 |         // collection reference.
 86 |         ref: db.collection("traffic"),
 87 |         // Bind the collection as an object if you would like to.
 88 |         objects: true,
 89 |         resolve: traffic => {
 90 |           const todaysDate = new Date();
 91 |           const lastWeekDate = todaysDate.setDate(todaysDate.getDate() - 7);
 92 | 
 93 |           const activeUsers = [];
 94 |           Object.keys(traffic.activeUsers).map(key => {
 95 |             if (new Date(traffic.activeUsers[key][0]) > lastWeekDate) {
 96 |               activeUsers.push(traffic.activeUsers[key]);
 97 |             }
 98 |           });
 99 | 
100 |           const newUsers = [];
101 |           Object.keys(traffic.newUsers).map(key => {
102 |             if (new Date(traffic.newUsers[key][0]) > lastWeekDate) {
103 |               newUsers.push(traffic.newUsers[key]);
104 |             }
105 |           });
106 | 
107 |           this.series = [
108 |             {
109 |               name: "Active Users",
110 |               data: activeUsers
111 |             },
112 |             {
113 |               name: "New Users",
114 |               data: newUsers
115 |             }
116 |           ];
117 |         },
118 |         reject: err => {
119 |           // collection is rejected
120 |         }
121 |       }
122 |     };
123 |   },
124 |   data() {
125 |     return {
126 |       chartOptions: {
127 |         colors: ["#14f1d9", "#7b42f6"],
128 |         legend: {
129 |           height: 40,
130 |           fontSize: "18px",
131 |           horizontalAlign: "left",
132 |           labels: {
133 |             colors: [this.$store.getters.isDarkMode ? "white" : "black"]
134 |           },
135 |           position: "top"
136 |         },
137 |         tooltip: {
138 |           theme: "dark"
139 |         },
140 |         grid: {
141 |           xaxis: {
142 |             lines: {
143 |               show: true
144 |             }
145 |           },
146 |           yaxis: {
147 |             lines: {
148 |               show: false
149 |             }
150 |           }
151 |         },
152 |         chart: {
153 |           id: "users"
154 |         },
155 |         xaxis: {
156 |           type: "datetime"
157 |         }
158 |       },
159 |       series: []
160 |     };
161 |   },
162 |   methods: {
163 |     toggleDays() {
164 |       this.$refs.days.style.color = "white";
165 |       this.$refs.days.style.background = "#56CCF2";
166 |       this.$refs.days.style.borderRadius = "4px";
167 | 
168 |       this.$refs.weeks.style.color = "#5b6175";
169 |       this.$refs.weeks.style.background = "none";
170 |       this.$refs.weeks.style.borderRadius = "none";
171 | 
172 |       this.$refs.months.style.color = "#5b6175";
173 |       this.$refs.months.style.background = "none";
174 |       this.$refs.months.style.borderRadius = "none";
175 | 
176 |       const activeUsers = [];
177 |       const newUsers = [];
178 | 
179 |       // Binding Docs
180 |       this.$binding("activeUsers", db.collection("traffic").doc("activeUsers"))
181 |         .then(data => {
182 |           const todaysDate = new Date();
183 |           const lastWeekDate = todaysDate.setDate(todaysDate.getDate() - 7);
184 | 
185 |           Object.keys(data).map(key => {
186 |             if (new Date(data[key][0]) > lastWeekDate) {
187 |               activeUsers.push(data[key]);
188 |             }
189 |           });
190 |         })
191 |         .catch(err => {
192 |           console.error(err);
193 |         });
194 | 
195 |       // Binding Docs
196 |       this.$binding("newUsers", db.collection("traffic").doc("newUsers"))
197 |         .then(data => {
198 |           const todaysDate = new Date();
199 |           const lastWeekDate = todaysDate.setDate(todaysDate.getDate() - 7);
200 | 
201 |           Object.keys(data).map(key => {
202 |             if (new Date(data[key][0]) > lastWeekDate) {
203 |               newUsers.push(data[key]);
204 |             }
205 |           });
206 |         })
207 |         .catch(err => {
208 |           console.error(err);
209 |         });
210 | 
211 |       this.series = [
212 |         {
213 |           name: "active users",
214 |           data: activeUsers
215 |         },
216 |         {
217 |           name: "new users",
218 |           data: newUsers
219 |         }
220 |       ];
221 |     },
222 |     toggleWeeks() {
223 |       this.$refs.weeks.style.color = "white";
224 |       this.$refs.weeks.style.background = "#56CCF2";
225 |       this.$refs.weeks.style.borderRadius = "4px";
226 | 
227 |       this.$refs.days.style.color = "#5b6175";
228 |       this.$refs.days.style.background = "none";
229 |       this.$refs.days.style.borderRadius = "none";
230 | 
231 |       this.$refs.months.style.color = "#5b6175";
232 |       this.$refs.months.style.background = "none";
233 |       this.$refs.months.style.borderRadius = "none";
234 | 
235 |       const activeUsers = [];
236 |       const newUsers = [];
237 | 
238 |       // Binding Docs
239 |       this.$binding("activeUsers", db.collection("traffic").doc("activeUsers"))
240 |         .then(data => {
241 |           const todaysDate = new Date();
242 |           const lastMonthDate = todaysDate.setDate(todaysDate.getDate() - 30);
243 | 
244 |           Object.keys(data).map(key => {
245 |             if (new Date(data[key][0]) > lastMonthDate) {
246 |               activeUsers.push(data[key]);
247 |             }
248 |           });
249 |         })
250 |         .catch(err => {
251 |           console.error(err);
252 |         });
253 | 
254 |       // Binding Docs
255 |       this.$binding("newUsers", db.collection("traffic").doc("newUsers"))
256 |         .then(data => {
257 |           const todaysDate = new Date();
258 |           const lastMonthDate = todaysDate.setDate(todaysDate.getDate() - 30);
259 | 
260 |           Object.keys(data).map(key => {
261 |             if (new Date(data[key][0]) > lastMonthDate) {
262 |               newUsers.push(data[key]);
263 |             }
264 |           });
265 |         })
266 |         .catch(err => {
267 |           console.error(err);
268 |         });
269 | 
270 |       this.series = [
271 |         {
272 |           name: "active users",
273 |           data: activeUsers
274 |         },
275 |         {
276 |           name: "new users",
277 |           data: newUsers
278 |         }
279 |       ];
280 |     },
281 |     toggleMonths() {
282 |       this.$refs.months.style.color = "white";
283 |       this.$refs.months.style.background = "#56CCF2";
284 |       this.$refs.months.style.borderRadius = "4px";
285 | 
286 |       this.$refs.days.style.color = "#5b6175";
287 |       this.$refs.days.style.background = "none";
288 |       this.$refs.days.style.borderRadius = "none";
289 | 
290 |       this.$refs.weeks.style.color = "#5b6175";
291 |       this.$refs.weeks.style.background = "none";
292 |       this.$refs.weeks.style.borderRadius = "none";
293 | 
294 |       const activeUsers = [];
295 |       const newUsers = [];
296 | 
297 |       // Binding Docs
298 |       this.$binding("activeUsers", db.collection("traffic").doc("activeUsers"))
299 |         .then(data => {
300 |           const todaysDate = new Date();
301 |           const lastYearDate = todaysDate.setDate(todaysDate.getDate() - 365);
302 | 
303 |           Object.keys(data).map(key => {
304 |             if (new Date(data[key][0]) > lastYearDate) {
305 |               activeUsers.push(data[key]);
306 |             }
307 |           });
308 |         })
309 |         .catch(err => {
310 |           console.error(err);
311 |         });
312 | 
313 |       // Binding Docs
314 |       this.$binding("newUsers", db.collection("traffic").doc("newUsers"))
315 |         .then(data => {
316 |           const todaysDate = new Date();
317 |           const lastYearDate = todaysDate.setDate(todaysDate.getDate() - 365);
318 | 
319 |           Object.keys(data).map(key => {
320 |             if (new Date(data[key][0]) > lastYearDate) {
321 |               newUsers.push(data[key]);
322 |             }
323 |           });
324 |         })
325 |         .catch(err => {
326 |           console.error(err);
327 |         });
328 | 
329 |       this.series = [
330 |         {
331 |           name: "active users",
332 |           data: activeUsers
333 |         },
334 |         {
335 |           name: "new users",
336 |           data: newUsers
337 |         }
338 |       ];
339 |     }
340 |   }
341 | };
342 | </script>
343 | 
344 | <style scoped lang="scss">
345 | .container {
346 |   padding-left: 15%;
347 |   padding-right: 15%;
348 | }
349 | 
350 | .spread {
351 |   display: flex;
352 |   justify-content: space-between;
353 |   margin-top: 40px;
354 |   width: 100%;
355 |   
356 |   @media all and (max-width: 767px) {
357 |     flex-direction: column;
358 |   }
359 | }
360 | 
361 | .toggle {
362 |   @include medium-text;
363 |   color: $dark-gray;
364 |   height: 50px;
365 |   width: 240px;
366 |   border-radius: 6px;
367 |   padding: 5px;
368 |   display: flex;
369 |   flex-wrap: nowrap;
370 | 
371 |   &:hover {
372 |     cursor: pointer;
373 |   }
374 | }
375 | 
376 | @mixin toggle-settings {
377 |   display: flex;
378 |   justify-content: center;
379 |   align-items: center;
380 |   width: 33.33%;
381 |   height: 100%;
382 |   font-weight: 600;
383 | }
384 | 
385 | .days {
386 |   @include toggle-settings;
387 |   background: $teal;
388 |   border-radius: 4px;
389 |   color: $white;
390 | }
391 | 
392 | .weeks {
393 |   @include toggle-settings;
394 | }
395 | 
396 | .months {
397 |   @include toggle-settings;
398 | }
399 | 
400 | .chart1 {
401 |   margin-top: 30px;
402 |   margin-bottom: 60px;
403 | }
404 | 
405 | .apexcharts-legend {
406 |   @media all and (max-width: 767px) {
407 |     display: none;
408 |   }
409 | }
410 | 
411 | .gchart-container {
412 |   display: flex;
413 |   flex-direction: row;
414 |   justify-content: space-evenly;
415 |   padding-bottom: 120px;
416 |   
417 |   @media all and (max-width: 767px) {
418 |     display: none;
419 |   }
420 | }
421 | </style>
422 | 


--------------------------------------------------------------------------------
/src/views/Manage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="manage">
  3 |     <Header />
  4 |     <div class="container">
  5 |       <h1 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Manage Users</h1>
  6 |       <p
  7 |         :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
  8 |       >Enter either customer email or subscription ID</p>
  9 |       <form @submit.prevent="getUserData" class="manage-container">
 10 |         <input
 11 |           v-model="email"
 12 |           :disabled="subscriptionId.length > 0"
 13 |           type="email"
 14 |           style="margin: 0"
 15 |           class="field"
 16 |           :class="{'light-field': isDarkMode, 'dark-field': !isDarkMode}"
 17 |           placeholder="Customer Email"
 18 |         />
 19 |         <p
 20 |           :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 21 |           style="margin: 0 20px 0 20px"
 22 |         >or</p>
 23 |         <input
 24 |           v-model="subscriptionId"
 25 |           :disabled="email.length > 0"
 26 |           type="text"
 27 |           style="margin: 0"
 28 |           class="field"
 29 |           :class="{'light-field': isDarkMode, 'dark-field': !isDarkMode}"
 30 |           placeholder="Subscription ID"
 31 |         />
 32 |         <button
 33 |           class="manage-button button"
 34 |           :disabled="!email && !subscriptionId"
 35 |         >Get Customer Details</button>
 36 |       </form>
 37 |       <hr class="line-break" />
 38 |       <h1 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Customer Details</h1>
 39 |       <div class="details-container">
 40 |         <div class="detail">
 41 |           <div
 42 |             class="detail-title"
 43 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 44 |           >Subscription State</div>
 45 |           <div
 46 |             class="detail-text"
 47 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 48 |           >{{subscriptionState}}</div>
 49 |         </div>
 50 |         <div class="detail">
 51 |           <div
 52 |             class="detail-title"
 53 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 54 |           >Seated</div>
 55 |           <div
 56 |             class="detail-text"
 57 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 58 |           >{{seated}}</div>
 59 |         </div>
 60 |         <div class="detail">
 61 |           <div
 62 |             class="detail-title"
 63 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 64 |           >On Trial</div>
 65 |           <div
 66 |             class="detail-text"
 67 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 68 |           >{{onTrial}}</div>
 69 |         </div>
 70 |         <div class="detail">
 71 |           <div
 72 |             class="detail-title"
 73 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 74 |           >Trial End Date</div>
 75 |           <div
 76 |             class="detail-text"
 77 |             :class="{'light-text': isDarkMode, 'dark-text': !isDarkMode}"
 78 |           >{{trialEndDate}}</div>
 79 |         </div>
 80 |       </div>
 81 |     </div>
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script>
 86 | import Header from "@/components/Header.vue";
 87 | 
 88 | export default {
 89 |   name: "manage",
 90 |   components: {
 91 |     Header
 92 |   },
 93 |   computed: {
 94 |     isDarkMode() {
 95 |       return this.$store.getters.isDarkMode;
 96 |     }
 97 |   },
 98 |   data() {
 99 |     return {
100 |       email: "",
101 |       subscriptionId: "",
102 |       subscriptionState: "",
103 |       seated: "",
104 |       onTrial: "",
105 |       trialEndDate: ""
106 |     };
107 |   },
108 |   methods: {
109 |     getUserData() {
110 |       let url = new URL("http://vue-hq.netlify.app/.netlify/functions/hello");
111 | 
112 |       const data = {
113 |         email: this.email,
114 |         subscriptionId: this.subscriptionId
115 |       };
116 | 
117 |       url.search = new URLSearchParams(data);
118 | 
119 |       this.subscriptionState = "Loading...";
120 |       this.seated = "Loading...";
121 |       this.onTrial = "Loading...";
122 |       this.trialEndDate = "Loading...";
123 | 
124 |       fetch(url)
125 |         .then(response => {
126 |           return response.json();
127 |         })
128 |         .then(data => {
129 |           console.log(data);
130 |           this.subscriptionState = data.subscriptionStatus;
131 |           this.seated = data.seated;
132 |           this.onTrial = data.onTrial;
133 |           this.trialEndDate = data.trialEndDate;
134 |         })
135 |         .catch(error => {
136 |           this.subscriptionState = "";
137 |           this.seated = "";
138 |           this.onTrial = "";
139 |           this.trialEndDate = "";
140 |           alert(error);
141 |         });
142 |     }
143 |   }
144 | };
145 | </script>
146 | 
147 | <style scoped lang="scss">
148 | .container {
149 |   padding-left: 15%;
150 |   padding-right: 15%;
151 | }
152 | 
153 | h1 {
154 |   margin-top: 40px;
155 | }
156 | 
157 | p {
158 |   line-height: 25px;
159 |   font-size: 16px;
160 |   font-weight: 400;
161 | }
162 | 
163 | .manage-container {
164 |   display: flex;
165 |   align-items: center;
166 |   flex-direction: row;
167 |   margin-top: 20px;
168 | 
169 |   @media all and (max-width: 767px) {
170 |     flex-direction: column;
171 |   }
172 | }
173 | 
174 | .manage-button {
175 |   margin: 0 0 0 25px;
176 | 
177 |   @media all and (max-width: 767px) {
178 |     margin: 25px;
179 |   }
180 | }
181 | 
182 | .line-break {
183 |   opacity: 0.2;
184 |   height: 1px;
185 |   width: 100%;
186 |   margin-top: 40px;
187 |   margin-bottom: 40px;
188 | }
189 | 
190 | .details-container {
191 |   margin: 0 -40px;
192 |   width: 100%;
193 |   display: flex;
194 |   flex-wrap: wrap;
195 |   justify-content: flex-start;
196 |   align-items: space-evenly;
197 | }
198 | 
199 | .detail {
200 |   width: 400px;
201 |   max-width: 35%;
202 |   margin: 20px 40px;
203 | }
204 | 
205 | .detail-title {
206 |   opacity: 0.3;
207 |   margin-bottom: 16px;
208 | }
209 | 
210 | .detail-text {
211 |   margin-top: -12px;
212 |   line-height: 31px;
213 |   font-size: 20px;
214 | }
215 | </style>
216 | 


--------------------------------------------------------------------------------
/src/views/SignInFlow/Recover.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="container"
 4 |     :class="{'light-background' : !isDarkMode, 'dark-background' : isDarkMode}"
 5 |   >
 6 |     <RequestAccount/>
 7 |     <div class="recover">
 8 |       <img src="@/assets/DCHQ.svg" v-show="isDarkMode">
 9 |       <img src="@/assets/DCHQ-dark.svg" v-show="!isDarkMode">
10 |       <h4 :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}">Recover Account</h4>
11 |       <form @submit.prevent="onSubmit">
12 |         <input
13 |           type="email"
14 |           placeholder="Email"
15 |           :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
16 |           v-model="email"
17 |           required
18 |         >
19 |         <button>Send Email</button>
20 |       </form>
21 |       <router-link
22 |         to="/signin"
23 |         :class="{'light-link': isDarkMode, 'dark-link' : !isDarkMode}"
24 |       >Already have an account? Sign in now.</router-link>
25 |       <ThemeSwitch/>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import RequestAccount from "@/components/RequestAccount";
32 | import ThemeSwitch from "@/components/ThemeSwitch";
33 | import { auth } from "@/main";
34 | 
35 | export default {
36 |   name: "Recover",
37 |   components: {
38 |     RequestAccount,
39 |     ThemeSwitch
40 |   },
41 |   data() {
42 |     return {
43 |       email: null
44 |     };
45 |   },
46 |   computed: {
47 |     isDarkMode() {
48 |       return this.$store.getters.isDarkMode;
49 |     }
50 |   },
51 |   methods: {
52 |     onSubmit() {
53 |       const email = this.email;
54 | 
55 |       auth
56 |         .requestPasswordRecovery(email)
57 |         .then(() => {
58 |           this.$router.push({
59 |             name: "signin",
60 |             params: {
61 |               userRecoveredAccount: true,
62 |               email: email
63 |             }
64 |           });
65 |         })
66 |         .catch(error => {
67 |           alert("Error: " + error);
68 |         });
69 |     }
70 |   }
71 | };
72 | </script>
73 | 
74 | <style scoped lang="scss">
75 | .container {
76 |   display: flex;
77 |   justify-content: center;
78 |   align-items: center;
79 |   min-height: 100vh;
80 | }
81 | 
82 | .recover {
83 |   width: 400px;
84 |   text-align: center;
85 |   margin-left: 16px;
86 |   margin-right: 16px;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/views/SignInFlow/Request.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="container"
 4 |     :class="{'light-background' : !isDarkMode, 'dark-background' : isDarkMode}"
 5 |   >
 6 |     <div class="request">
 7 |       <img src="@/assets/DCHQ.svg" v-show="isDarkMode">
 8 |       <img src="@/assets/DCHQ-dark.svg" v-show="!isDarkMode">
 9 |       <h4 :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}">Request Account</h4>
10 |       <form @submit.prevent="onSubmit">
11 |         <input
12 |           type="email"
13 |           placeholder="Email"
14 |           :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
15 |           v-model="email"
16 |           required
17 |         >
18 |         <button>Request Account</button>
19 |       </form>
20 |       <router-link
21 |         to="/signin"
22 |         :class="{'light-link': isDarkMode, 'dark-link' : !isDarkMode}"
23 |       >Already have an account? Sign in now.</router-link>
24 |       <ThemeSwitch/>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import ThemeSwitch from "@/components/ThemeSwitch";
31 | 
32 | export default {
33 |   name: "Request",
34 |   components: {
35 |     ThemeSwitch
36 |   },
37 |   data() {
38 |     return {
39 |       email: null
40 |     };
41 |   },
42 |   computed: {
43 |     isDarkMode() {
44 |       return this.$store.getters.isDarkMode;
45 |     }
46 |   },
47 |   methods: {
48 |     onSubmit() {
49 |       const email = this.email;
50 | 
51 |       // Slack API logic
52 |       let slackURL = new URL("https://slack.com/api/chat.postMessage");
53 | 
54 |       const data = {
55 |         token:
56 |           "xoxp-508777505489-508777506257-535958789393-2195aecd752d7c05f0881e42759e7541",
57 |         channel: "hq",
58 |         text: `${email} has requested admin access to HQ. Please go to Netlify to invite them.`
59 |       };
60 | 
61 |       slackURL.search = new URLSearchParams(data);
62 | 
63 |       fetch(slackURL)
64 |         .then(() => {
65 |           this.$router.push({
66 |             name: "signin",
67 |             params: {
68 |               userRequestedAccount: true,
69 |               email: email
70 |             }
71 |           });
72 |         })
73 |         .catch(error => {
74 |           alert("Error: " + error);
75 |         });
76 |     }
77 |   }
78 | };
79 | </script>
80 | 
81 | <style scoped lang="scss">
82 | .container {
83 |   display: flex;
84 |   justify-content: center;
85 |   align-items: center;
86 | 
87 |   min-height: 100vh;
88 | }
89 | 
90 | .request {
91 |   width: 400px;
92 |   text-align: center;
93 |   margin-left: 16px;
94 |   margin-right: 16px;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/views/SignInFlow/SignIn.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="container"
  4 |     :class="{'light-background' : !isDarkMode, 'dark-background' : isDarkMode}"
  5 |   >
  6 |     <Notification v-if="hasText" :text="text"/>
  7 |     <RequestAccount/>
  8 |     <div class="login">
  9 |       <img src="@/assets/DCHQ.svg" v-show="isDarkMode">
 10 |       <img src="@/assets/DCHQ-dark.svg" v-show="!isDarkMode">
 11 |       <h4
 12 |         :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}"
 13 |       >Sign into Design+Code HQ [DEMO]</h4>
 14 |       <form @submit.prevent="onSubmit">
 15 |         <input
 16 |           type="email"
 17 |           placeholder="Email"
 18 |           :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
 19 |           v-model="email"
 20 |           required
 21 |         >
 22 |         <input
 23 |           type="password"
 24 |           placeholder="Password"
 25 |           :class="{'light-field' : isDarkMode, 'dark-field' : !isDarkMode}"
 26 |           v-model="password"
 27 |           required
 28 |         >
 29 |         <button>Sign In</button>
 30 |       </form>
 31 |       <router-link
 32 |         to="/recover"
 33 |         :class="{'light-link': isDarkMode, 'dark-link' : !isDarkMode}"
 34 |       >Forgot your password?</router-link>
 35 |       <ThemeSwitch/>
 36 |       <div class="github-container">
 37 |         <gh-btns-star slug="thomaswangio/vue-admin-dashboard" show-count/>
 38 |         <gh-btns-fork slug="thomaswangio/vue-admin-dashboard" show-count/>
 39 |       </div>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import RequestAccount from "@/components/RequestAccount";
 46 | import ThemeSwitch from "@/components/ThemeSwitch";
 47 | import Notification from "@/components/Notification";
 48 | import { auth } from "@/main";
 49 | 
 50 | export default {
 51 |   name: "SignIn",
 52 |   components: {
 53 |     RequestAccount,
 54 |     ThemeSwitch,
 55 |     Notification
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       email: null,
 60 |       password: null,
 61 |       hasText: false,
 62 |       text: ""
 63 |     };
 64 |   },
 65 |   computed: {
 66 |     isDarkMode() {
 67 |       return this.$store.getters.isDarkMode;
 68 |     }
 69 |   },
 70 |   methods: {
 71 |     onSubmit() {
 72 |       const email = this.email;
 73 |       const password = this.password;
 74 | 
 75 |       auth
 76 |         .login(email, password, true)
 77 |         .then(response => {
 78 |           this.$router.replace("/");
 79 |         })
 80 |         .catch(error => {
 81 |           alert("Error: " + error);
 82 |         });
 83 |     }
 84 |   },
 85 |   mounted() {
 86 |     const params = this.$route.params;
 87 | 
 88 |     if (params.userLoggedOut) {
 89 |       this.hasText = true;
 90 |       this.text = "You have logged out!";
 91 |     } else if (params.userRecoveredAccount) {
 92 |       this.hasText = true;
 93 |       this.text = `A recovery email has been sent to ${params.email}`;
 94 |     } else if (params.userRequestedAccount) {
 95 |       this.hasText = true;
 96 |       this.text = `Your request has been sent to an administator for ${
 97 |         params.email
 98 |       }`;
 99 |     }
100 |   }
101 | };
102 | </script>
103 | 
104 | <style scoped lang="scss">
105 | .container {
106 |   display: flex;
107 |   justify-content: center;
108 |   align-items: center;
109 |   min-height: 100vh;
110 |   padding-top: 16px;
111 |   padding-bottom: 24px;
112 | }
113 | 
114 | .login {
115 |   width: 400px;
116 |   text-align: center;
117 |   margin-left: 16px;
118 |   margin-right: 16px;
119 | }
120 | 
121 | .github-container {
122 |   width: 100%;
123 |   display: flex;
124 |   justify-content: center;
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/views/Team.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="manage">
  3 |     <Header/>
  4 |     <div class="container">
  5 |       <h1 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Team</h1>
  6 |       <div class="cards">
  7 |         <transition appear appear-active-class="animated flipInX">
  8 |           <a class="card card-1" :class="{'light-card' : !isDarkMode, 'dark-card' : isDarkMode}">
  9 |             <img
 10 |               src="@/assets/slack.png"
 11 |               class="card-header"
 12 |               :class="{'light-header' : !isDarkMode, 'dark-header' : isDarkMode}"
 13 |             >
 14 |             <h3 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Slack</h3>
 15 |             <p
 16 |               :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}"
 17 |             >Messaging app for all team communication.</p>
 18 |           </a>
 19 |         </transition>
 20 |         <transition appear appear-active-class="animated flipInX">
 21 |           <a class="card card-2" :class="{'light-card' : !isDarkMode, 'dark-card' : isDarkMode}">
 22 |             <img
 23 |               src="@/assets/notion.png"
 24 |               class="card-header"
 25 |               :class="{'light-header' : !isDarkMode, 'dark-header' : isDarkMode}"
 26 |             >
 27 |             <h3 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Notion</h3>
 28 |             <p :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}">All-in-one workspace.</p>
 29 |           </a>
 30 |         </transition>
 31 |         <transition appear appear-active-class="animated flipInX">
 32 |           <a class="card card-3" :class="{'light-card' : !isDarkMode, 'dark-card' : isDarkMode}">
 33 |             <img
 34 |               src="@/assets/figma.png"
 35 |               class="card-header"
 36 |               :class="{'light-header' : !isDarkMode, 'dark-header' : isDarkMode}"
 37 |             >
 38 |             <h3 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Figma</h3>
 39 |             <p
 40 |               :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}"
 41 |             >Collaborative design tool.</p>
 42 |           </a>
 43 |         </transition>
 44 |         <transition appear appear-active-class="animated flipInX">
 45 |           <a class="card card-4" :class="{'light-card' : !isDarkMode, 'dark-card' : isDarkMode}">
 46 |             <img
 47 |               src="@/assets/contentful.png"
 48 |               class="card-header"
 49 |               :class="{'light-header' : !isDarkMode, 'dark-header' : isDarkMode}"
 50 |             >
 51 |             <h3 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Contentful</h3>
 52 |             <p
 53 |               :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}"
 54 |             >Content management system.</p>
 55 |           </a>
 56 |         </transition>
 57 |         <transition appear appear-active-class="animated flipInX">
 58 |           <a class="card card-5" :class="{'light-card' : !isDarkMode, 'dark-card' : isDarkMode}">
 59 |             <img
 60 |               src="@/assets/dropbox.png"
 61 |               class="card-header"
 62 |               :class="{'light-header' : !isDarkMode, 'dark-header' : isDarkMode}"
 63 |             >
 64 |             <h3 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Dropbox</h3>
 65 |             <p
 66 |               :class="{'light-text' : isDarkMode, 'dark-text' : !isDarkMode}"
 67 |             >Storage space in the cloud.</p>
 68 |           </a>
 69 |         </transition>
 70 |       </div>
 71 |     </div>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | import Header from "@/components/Header.vue";
 77 | 
 78 | export default {
 79 |   name: "Team",
 80 |   components: {
 81 |     Header
 82 |   },
 83 |   computed: {
 84 |     isDarkMode() {
 85 |       return this.$store.getters.isDarkMode;
 86 |     }
 87 |   }
 88 | };
 89 | </script>
 90 | 
 91 | <style scoped lang="scss">
 92 | .container {
 93 |   padding-left: 15%;
 94 |   padding-right: 10%;
 95 | }
 96 | 
 97 | .cards {
 98 |   margin: 0 -20px;
 99 |   display: flex;
100 |   flex-wrap: wrap;
101 |   justify-content: flex-start;
102 |   align-items: space-evenly;
103 | }
104 | 
105 | .card-1 {
106 |   animation-delay: 0s;
107 | }
108 | .card-2 {
109 |   animation-delay: 0.5s;
110 | }
111 | .card-3 {
112 |   animation-delay: 1s;
113 | }
114 | .card-4 {
115 |   animation-delay: 1.5s;
116 | }
117 | .card-5 {
118 |   animation-delay: 2s;
119 | }
120 | 
121 | .card {
122 |   width: 100%;
123 |   max-width: 300px;
124 |   height: 400px;
125 |   border-radius: 10px;
126 |   margin: 20px;
127 | }
128 | 
129 | .light-card {
130 |   background: #ffffff;
131 |   box-shadow: 0px 15px 30px rgba(103, 110, 144, 0.15);
132 |   &:hover {
133 |     box-shadow: 0 4px 4px rgba(103, 110, 144, 0.05),
134 |       0 2px 2px rgba(103, 110, 144, 0.05);
135 |   }
136 | }
137 | 
138 | .dark-card {
139 |   background: $super-dark-blue;
140 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px;
141 |   &:hover {
142 |     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.25);
143 |   }
144 | }
145 | 
146 | .card-header {
147 |   width: 100%;
148 |   border-radius: 10px 10px 0 0;
149 | }
150 | 
151 | .light-header {
152 |   background: $light-gray;
153 | }
154 | 
155 | .dark-header {
156 |   background: #283049;
157 | }
158 | 
159 | h1 {
160 |   margin-top: 40px;
161 | }
162 | 
163 | h3 {
164 |   margin-bottom: 16px;
165 | }
166 | 
167 | h3.dark {
168 |   @include heading-3($black);
169 | }
170 | 
171 | h3.light {
172 |   @include heading-3($white);
173 | }
174 | 
175 | p {
176 |   font-size: 15px;
177 |   line-height: 24px;
178 |   text-align: left;
179 |   margin-left: 16px;
180 |   margin-top: 0;
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   css: {
 3 |     loaderOptions: {
 4 |       sass: {
 5 |         data: `
 6 |                   @import "@/global-styles/colors.scss";
 7 |                   @import "@/global-styles/typography.scss";
 8 |               `
 9 |       }
10 |     }
11 |   }
12 | };
13 | 


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