Netlify Functions 2

functions/hello.js

@@ -0,0 +1,37 @@
+const { zipFunctions } = require("@netlify/zip-it-and-ship-it");
+
+zipFunctions("functions", "functions-dist")
+
+var admin = require("firebase-admin");
+
+var serviceAccount = require("./serviceAccountKey.json");
+
+admin.initializeApp({
+    credential: admin.credential.cert(serviceAccount),
+    databaseURL: "https://vue-hq.firebaseio.com"
+});
+
+
+exports.handler = function (event, context, callback) {
+    const firestore = admin.firestore();
+
+    firestore.collection('users').where('email', '==', 'test@designcode.io').limit(1).get().then(response => {
+        if (response.empty) { return Promise.reject() }
+
+        const userInfo = response.docs[0].data()
+
+        console.log(userInfo)
+
+        callback(null, {
+            statusCode: 200,
+            body: JSON.stringify(userInfo)
+        })
+    }).catch(error => {
+        console.log(error)
+
+        callback(null, {
+            statusCode: 500,
+            body: error
+        })
+    })
+}

functions/serviceAccountKey.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "vue-hq",
+  "private_key_id": "7f290e3e535486a33eca36efd6d642872bb93c54",
+  "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",
+  "client_email": "firebase-adminsdk-vgwbn@vue-hq.iam.gserviceaccount.com",
+  "client_id": "106063469757469881133",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-vgwbn%40vue-hq.iam.gserviceaccount.com"
+}

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+  functions = "./functions"

package.json

@@ -5,15 +5,26 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "start": "run-p start:**",
+    "start:app": "react-scripts start",
+    "start:lambda": "netlify-lambda serve src/functions",
+    "build2": "run-p build:**",
+    "build:app": "react-scripts build",
+    "build:lambda": "netlify-lambda build src/functions",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "dependencies": {
     "@firebase/app": "^0.3.8",
     "@firebase/firestore": "^1.0.2",
+    "@netlify/zip-it-and-ship-it": "^0.2.0",
     "animate.css": "^3.7.0",
     "apexcharts": "^3.2.2",
+    "firebase-admin": "^7.0.0",
     "gotrue-js": "^0.9.24",
     "netlify-identity-widget": "^1.5.2",
+    "netlify-lambda": "^1.4.2",
     "vue": "^2.5.21",
     "vue-apexcharts": "^1.2.9",
     "vue-firestore": "^0.3.16",
@@ -56,4 +67,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

src/App.vue

@@ -16,7 +16,7 @@ export default {
   },
   mounted() {
     const isDarkMode = this.$store.getters.isDarkMode;
-    document.body.style.background = isDarkMode ? "#212c4f" : "#f0f3f5";
+    document.body.style.background = isDarkMode ? "#212c4f" : "#f8f9fa";
   }
 };
 </script>
@@ -26,49 +26,50 @@ export default {
   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+#app {
+  font-family: $system-font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $white;
+}
+
 body {
   margin: 0;
   background: $dark-blue;
 }
 
-h1 {
-  @include heading-1;
+h1.dark {
+  @include heading-3($black);
 }
 
-p {
-  @include large-text-bold($purple);
-}
-
-line,
-text {
-  opacity: 0.2;
-}
-
-#app {
-  font-family: $system-font-family;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: $white;
+h1.light {
+  @include heading-3($white);
 }
 
 h4 {
   margin: 0;
   line-height: 34px;
   font-size: 24px;
   text-align: center;
-
   color: #ffffff;
 }
 
+p {
+  @include large-text-bold($purple);
+}
+
+line,
+text {
+  opacity: 0.2;
+}
+
 input {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-sizing: border-box;
   border-radius: 4px;
-
   height: 60px;
   width: 100%;
-
   font-size: 20px;
   color: white;
   padding-left: 20px;
@@ -77,17 +78,21 @@ input {
   &::placeholder {
     color: rgba(255, 255, 255, 0.3);
   }
+
+  &:focus {
+    border: 1px solid $blue;
+    box-shadow: 0 0 0 1px $blue;
+    outline: none;
+  }
 }
 
 button {
   background: #56ccf2;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   border: none;
-
   height: 60px;
   width: 100%;
-
   font-size: 20px;
   color: white;
   margin-top: 20px;
@@ -104,7 +109,7 @@ a {
 
 /* THEME */
 .light-background {
-  background-color: $light-gray;
+  background-color: #f8f9fa;
 
   line,
   text {
@@ -163,7 +168,7 @@ a {
 }
 
 .dark-box {
-  background: rgba(0, 0, 0, 0.1);
+  background: #c6d0eb40;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 </style>

src/components/Header.vue

@@ -48,11 +48,13 @@ export default {
 
 <style scoped lang="scss">
 .nav-light {
-  background: $white;
+  background: #f0f3f5;
+  box-shadow: 1px 3px 20px 4px #c6d0eb59;
 }
 
 .nav-dark {
   background: $super-dark-blue;
+  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
 }
 
 #nav {
@@ -74,6 +76,13 @@ export default {
       color: $middle-blue;
     }
   }
+
+  a,
+  img {
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 .nav-1 {

src/components/ThemeSwitch.vue

@@ -34,6 +34,7 @@ export default {
   box-sizing: border-box;
   margin: 50px auto;
   display: flex;
+  cursor: pointer;
 }
 
 .light-toggle {
@@ -61,7 +62,7 @@ export default {
 }
 
 .toggle-right {
-  transform: translateX(90%);
+  transform: translateX(92%);
   background: #1b233f;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }

src/functions/hello.js

@@ -0,0 +1,37 @@
+const { zipFunctions } = require("@netlify/zip-it-and-ship-it");
+
+zipFunctions("functions", "functions-dist")
+
+var admin = require("firebase-admin");
+
+var serviceAccount = require("./serviceAccountKey.json");
+
+admin.initializeApp({
+    credential: admin.credential.cert(serviceAccount),
+    databaseURL: "https://vue-hq.firebaseio.com"
+});
+
+
+exports.handler = function (event, context, callback) {
+    const firestore = admin.firestore();
+
+    firestore.collection('users').where('email', '==', 'test@designcode.io').limit(1).get().then(response => {
+        if (response.empty) { return Promise.reject() }
+
+        const userInfo = response.docs[0].data()
+
+        console.log(userInfo)
+
+        callback(null, {
+            statusCode: 200,
+            body: JSON.stringify(userInfo)
+        })
+    }).catch(error => {
+        console.log(error)
+
+        callback(null, {
+            statusCode: 500,
+            body: error
+        })
+    })
+}

src/functions/serviceAccountKey.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "vue-hq",
+  "private_key_id": "7f290e3e535486a33eca36efd6d642872bb93c54",
+  "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",
+  "client_email": "firebase-adminsdk-vgwbn@vue-hq.iam.gserviceaccount.com",
+  "client_id": "106063469757469881133",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-vgwbn%40vue-hq.iam.gserviceaccount.com"
+}

src/router.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
 import Team from "./views/Team.vue";
+import Manage from "./views/Manage.vue";
 import SignIn from "./views/SignInFlow/SignIn";
 import Request from "./views/SignInFlow/Request";
 import Recover from "./views/SignInFlow/Recover";
@@ -21,6 +22,14 @@ const router = new Router({
         requiresAuth: true
       }
     },
+    {
+      path: "/Manage",
+      name: "manage",
+      component: Manage,
+      meta: {
+        requiresAuth: true
+      }
+    },
     {
       path: "/team",
       name: "team",

src/store.js

@@ -26,11 +26,9 @@ const mutations = {
   toggleDarkMode(state) {
     if (state.isDarkMode === true) {
       state.isDarkMode = false;
-      document.body.style.background = "#f0f3f5";
       window.localStorage.setItem("isDarkMode", "false");
     } else {
       state.isDarkMode = true;
-      document.body.style.background = "#212c4f";
       window.localStorage.setItem("isDarkMode", "true");
     }
   }