refactored quasar config

Author: Brian Caffey

.env.template

@@ -21,4 +21,4 @@ DJANGO_EMAIL_PORT=1025
 
 # for local development, change ``localhost`` to your
 # local IP, such as ``196.168.1.16``
-LOCAL_IP_ADDRESS=localhost
+DOMAIN_NAME=localhost

docker-compose.yml

@@ -69,7 +69,11 @@ services:
       - db
     environment:
       - CHOKIDAR_USEPOLLING=true
-      - LOCAL_IP_ADDRESS=${LOCAL_IP_ADDRESS}
+      - GITHUB_KEY=${GITHUB_KEY}
+      - GOOGLE_KEY=${GOOGLE_KEY}
+      - HTTP_PROTOCOL=http
+      - WS_PROTOCOL=ws
+      - DOMAIN_NAME=${DOMAIN_NAME}
     restart: "no"
 
   backend: &backend

quasar/quasar.conf.js

@@ -56,12 +56,28 @@ module.exports = function(ctx) {
     build: {
       env: ctx.dev
         ? {
-            API_URL: `"http://${process.env.LOCAL_IP_ADDRESS}"`,
-            WS_PING_PONG: `"ws://${process.env.LOCAL_IP_ADDRESS}/ws/ping-pong/"`
+            API_URL: JSON.stringify(
+              `${process.env.HTTP_PROTOCOL}://${process.env.DOMAIN_NAME}`
+            ),
+            WS_PING_PONG: JSON.stringify(
+              `${process.env.WS_PROTOCOL}://${
+                process.env.LOCAL_IP_ADDRESS
+              }/ws/ping-pong/`
+            ),
+            GITHUB_KEY: JSON.stringify(process.env.GITHUB_KEY),
+            GOOGLE_KEY: JSON.stringify(process.env.GOOGLE_KEY)
           }
         : {
-            API_URL: `"http://nginx"`,
-            WS_PING_PONG: `"ws://nginx/ws/ping-pong/"`
+            API_URL: JSON.stringify(
+              `${process.env.HTTP_PROTOCOL}://${process.env.DOMAIN_NAME}`
+            ),
+            WS_PING_PONG: JSON.stringify(
+              `${process.env.WS_PROTOCOL}://${
+                process.env.LOCAL_IP_ADDRESS
+              }/ws/ping-pong/`
+            ),
+            GITHUB_KEY: JSON.stringify(process.env.GITHUB_KEY),
+            GOOGLE_KEY: JSON.stringify(process.env.GOOGLE_KEY)
           },
       scopeHoisting: true,
       useNotifier: false,

quasar/src/components/AuthModal.vue

@@ -69,14 +69,6 @@ export default {
   data() {
     return {
       tab: "login",
-      params: {
-        client_id: "d6639d522598d6bf20f4",
-        redirect_uri: "http://localhost/auth/github/callback",
-        login: "",
-        scope: "user",
-        state: "eworifjeovivoiej"
-      },
-      githuboauth2: "https://github.com/login/oauth/authorize",
       email: process.env.NODE_ENV === "production" ? "" : "admin@company.com",
       password: process.env.NODE_ENV === "production" ? "" : "password"
     };

quasar/src/layouts/primary/MainLeftDrawer.vue

@@ -68,6 +68,12 @@
             caption="Test redis connection"
           />
         </q-expansion-item>
+        <left-menu-link
+          label="Environment Variables"
+          to="/debug/environment-variables"
+          icon="offline_bolt"
+          caption="Displays Environment Variables for Debug Purposes"
+        />
       </q-list>
     </q-drawer>
   </div>

quasar/src/pages/Auth/Callback.vue

@@ -1,13 +1,13 @@
 <template>
-  <base-page>Logging in with GitHub...</base-page>
+  <base-page>Logging in with {{ provider }}...</base-page>
 </template>
 
 <script>
 import * as Cookies from "js-cookie";
 import axios from "axios";
 export default {
   methods: {
-    githubAuth() {
+    handleOauthCallback() {
       const provider = this.$route.params.provider;
       axios
         .post(`/api/social/${provider}/`, { code: this.$route.query.code })
@@ -19,7 +19,12 @@ export default {
     }
   },
   created() {
-    this.githubAuth();
+    this.handleOauthCallback();
+  },
+  computed: {
+    provider() {
+      return this.$route.params.provider;
+    }
   }
 };
 </script>

quasar/src/pages/Environment.vue

@@ -0,0 +1,20 @@
+<template>
+  <base-page>
+    <p v-for="(value, key) in env" :key="key">{{ key }}: {{ value }}</p>
+  </base-page>
+</template>
+
+<script>
+export default {
+  created() {
+    console.log(JSON.stringify(process.env));
+  },
+  data() {
+    return {
+      env: process.env
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

quasar/src/router/routes.js

@@ -30,12 +30,8 @@ const routes = [
     component: () => import("layouts/MainLayout.vue"),
     children: [
       {
-        path: "auth/github/callback",
-        component: () => import("pages/Auth/GitHub.vue")
-      },
-      {
-        path: "auth/google/callback",
-        component: () => import("pages/Auth/Google.vue")
+        path: "auth/:provider/callback",
+        component: () => import("pages/Auth/Callback.vue")
       },
       {
         path: "",
@@ -58,6 +54,10 @@ const routes = [
         path: "services",
         component: () => import("pages/Services/index.vue")
       },
+      {
+        path: "debug/environment-variables",
+        component: () => import("pages/Environment.vue")
+      },
       {
         path: "examples/",
         beforeEnter: ifAuthenticated,

quasar/src/store/social.js

@@ -0,0 +1,24 @@
+import oauth from "../utils/oauth";
+
+const state = {
+  oauth
+};
+
+const getters = {
+  oauthUrl: () => {
+    return provider => state.oauth[provider].sender;
+  },
+  getProfile: s => s.status,
+  getUrl: s => s.status
+};
+
+const actions = {};
+
+const mutations = {};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+};

quasar/src/utils/oauth.js

@@ -0,0 +1,18 @@
+const protocol = process.env.NODE_ENV === "production" ? "https://" : "http://";
+const url = process.env.SITE_URL;
+const baseUrl = protocol + url;
+
+const oauth = {
+  github: {
+    url: "https://github.com/oauth",
+    params: {
+      client_id: process.env.GITHUB_KEY,
+      redirect_uri: `${baseUrl}/auth/github/callback`,
+      login: "",
+      scope: "user",
+      state: "eworifjeovivoiej"
+    }
+  }
+};
+
+export default oauth;