feat: implement support page

src/_pages/main/account/Support.vue

@@ -0,0 +1,100 @@
+<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
+<template>
+  <div>
+    <h1 class="title text-center white-text">{{ messages.title_support }}</h1>
+    <hr />
+    <h5 class="text-center white-text">
+      {{ messages.support_preamble }}
+    </h5>
+    <hr />
+    <div class="row">
+      <div
+        class="col-lg-6 col-md-6 col-sm-12 my-4 px-3"
+        v-if="configs && configs.support && configs.support.site"
+      >
+        <a :href="configs.support.site">
+          <div class="h-100 card-container">
+            <div class="d-flex justify-content-between align-items-center">
+              <span>{{ messages.support_site_link }}</span>
+              <span class="icon">
+                <i class="fa fa-plus"></i>
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div
+        v-if="configs && configs.support && configs.support.email"
+        class="col-lg-6 col-md-6 col-sm-12 my-4 px-3"
+      >
+        <a :href="'mailto:' + configs.support.email">
+          <div class="h-100 card-container">
+            <div class="d-flex justify-content-between align-items-center">
+              <span>{{ messages.support_email_link }}</span>
+              <span class="icon">
+                <i class="fa fa-plus"></i>
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div v-if="hasNoSupport">
+        <h4>{{ messages.support_not_available }}</h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  margin-top: 64px;
+  margin-bottom: 20px;
+}
+
+.card-container {
+  padding: 24px;
+  margin: 0 20px;
+
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  background: #fff;
+
+  color: #17aea6;
+}
+
+.icon {
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #eeeef0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+import { Card } from '~/_components/shared';
+
+export default {
+  components: {
+    Card,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState('system', ['messages', 'configs']),
+    hasNoSupport() {
+      const configs = this.configs;
+      if (configs && configs.support) {
+        if (configs.support.email) return false;
+        if (configs.support.site) return false;
+      }
+      return true;
+    },
+  },
+};
+</script>

src/_router/index.js

@@ -5,8 +5,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 
-import LegalPage from '~/app/LegalPage';
-import SupportPage from '~/app/SupportPage';
 import ActivationPage from '~/auth/ActivationPage';
 import ModelSetupPage from '~/admin/ModelSetupPage';
 // import RegisterPage from '~/auth/RegisterPage';
@@ -14,8 +12,6 @@ import ModelSetupPage from '~/admin/ModelSetupPage';
 import LogoutPage from '~/auth/LogoutPage';
 // import ForgotPasswordPage from '~/auth/ForgotPasswordPage';
 import MultifactorAuthPage from '~/auth/MultifactorAuthPage';
-import AppLoginPage from '~/auth/AppLoginPage';
-import RestorePage from '~/auth/RestorePage';
 import DashboardPage from '~/account/DashboardPage';
 import ProfilePage from '~/account/profile/ProfilePage';
 import ActionPage from '~/account/profile/ActionPage';
@@ -102,8 +98,8 @@ export const router = new Router({
                   component: () => import('~/_pages/main/account/Legal'),
                 },
                 {
-                  path: 'restore',
-                  component: () => import('~/_pages/main/bubble/Restore'),
+                  path: 'support',
+                  component: () => import('~/_pages/main/account/Support'),
                 },
               ],
             },
@@ -119,8 +115,8 @@ export const router = new Router({
     // existing pages
     { path: '', component: DashboardPage },
     { path: '/', component: DashboardPage },
-    { path: '/legal', component: LegalPage },
-    { path: '/support', component: SupportPage },
+    // { path: '/legal', component: LegalPage },
+    // { path: '/support', component: SupportPage },
 
     // { path: '/me', component: ProfilePage },
     // { path: '/me/policy', component: PolicyPage },
@@ -180,8 +176,8 @@ export const router = new Router({
     // { path: '/login', component: LoginPage },
     { path: '/logout', component: LogoutPage },
     // { path: '/forgotPassword', component: ForgotPasswordPage },
-    { path: '/appLogin', component: AppLoginPage },
-    { path: '/restore', component: RestorePage },
+    // { path: '/appLogin', component: AppLoginPage },
+    // { path: '/restore', component: RestorePage },
 
     { path: '/admin/accounts', component: AccountsPage },
     { path: '/admin/new_account', component: ProfilePage },
@@ -275,6 +271,23 @@ export const router = new Router({
                   path: 'devices',
                   component: () => import('~/_pages/main/account/Devices'),
                 },
+
+                {
+                  path: 'bubble/:id',
+                  component: () => import('~/_pages/main/bubble/Network'),
+                },
+                {
+                  path: 'restore',
+                  component: () => import('~/_pages/main/bubble/Restore'),
+                },
+                {
+                  path: 'legal',
+                  component: () => import('~/_pages/main/account/Legal'),
+                },
+                {
+                  path: 'support',
+                  component: () => import('~/_pages/main/account/Support'),
+                },
               ],
             },
             {

src/app/App.vue

@@ -182,7 +182,22 @@ export default {
       return this.configs ? this.configs.awaitingRestore : undefined;
     },
     isNewPage() {
-      const newPages = ['/new_pages', '/login', '/forgotPassword', '/register', '/me', '/devices', '/launch-bubble', '/launching-bubble', '/payment', '/verify-email'];
+      const newPages = [
+        '/new_pages',
+        '/login',
+        '/forgotPassword',
+        '/register',
+        '/me',
+        '/devices',
+        '/launch-bubble',
+        '/launching-bubble',
+        '/payment',
+        '/verify-email',
+        '/restore',
+        '/support',
+        'legal',
+        '/appLogin',
+      ];
       return (
         newPages.includes(this.$route.path) ||
         newPages.filter((p) => this.$route.path.startsWith(p)).length