feat/ui-layout (#50)

fix: check payment only when config is enabled

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement support page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement legal page

feat: app login page

feat: update header

feat: change header to have more links

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement Restore page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement my bubble page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: replace old pages with new pages

feat: implement devices page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement account policy page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement payment and bills page

Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: change config to accept env files

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: make a stripe element component

Merge branch 'master' into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement manage ssh key page

feat: set password page

feat: implement change password page

fix: change design

feat: implement my account page

feat: implement animation control for launching bubble screen

fix: navigating to network page

feat: implement Launching bubble page

feat: integrate launch bubble api

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement MFA in login

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement adding ssh key

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

fix: showing default values

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement selector placeholders and default values

Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

fix: getting user information after setting payment method

Merge branch 'master' into feat/ui-layout

feat: implement setting payment plan in payment page

Co-authored-by: Tyler <everdev0923@gmail.com>
Co-authored-by: jonathan <jonathan@noreply.git.bubblev.org>
Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/50

src/_pages/main/Layout.vue

@@ -37,6 +37,7 @@ export default {
   computed: {
     ...mapState('users', ['policy']),
     ...mapState('paymentMethods', ['accountPaymentMethods']),
+    ...mapSTate('system', ['configs']),
   },
 
   mounted() {
@@ -127,7 +128,7 @@ export default {
     },
 
     accountPaymentMethods(pms, oldpms) {
-      if (pms) {
+      if (pms && this.configs.paymentsEnabled) {
         const payMethods = [];
         for (let i = 0; i < pms.length; i++) {
           const pm = pms[i];

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