add support page. streamline onboarding.

src/_helpers/router.js

@@ -6,6 +6,7 @@ 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'
@@ -67,6 +68,7 @@ export const router = new Router({
     { path: '', component: DashboardPage },
     { path: '/', component: DashboardPage },
     { path: '/legal', component: LegalPage },
+    { path: '/support', component: SupportPage },
 
     { path: '/me', component: ProfilePage },
     { path: '/me/policy', component: PolicyPage },

src/_store/system.module.js

@@ -20,7 +20,8 @@ const state = {
         locked: null,
         launchLock: null,
         promoCodePolicy: null,
-        requireSendMetrics: null
+        requireSendMetrics: null,
+        support: {}
     },
     entityConfigs: {},
     searchResults: [],

src/account/NetworksPage.vue

@@ -27,7 +27,7 @@
         </div>
 
         <div v-if="!networks || networks.length === 0">
-            {{messages.message_empty_networks}}
+            <span v-if="verifiedContacts">{{messages.message_empty_networks}}</span>
             <router-view></router-view>
         </div>
 
@@ -39,9 +39,15 @@
     import { util } from '../_helpers';
 
     export default {
+        data() {
+            return {
+                verifiedContacts: null
+            }
+        },
         computed: {
             ...mapState('networks', ['networks']),
-            ...mapState('system', ['messages'])
+            ...mapState('system', ['messages']),
+            ...mapState('users', ['policy'])
         },
         created () {
             const user = util.currentUser();
@@ -49,11 +55,23 @@
             this.getAllNetworks({userId: user.uuid, messages: this.messages, errors: this.errors});
             this.loadMessages('post_auth', selectedLocale);
             this.loadMessages('apps', selectedLocale);
+            this.getPolicyByUserId({userId: user.uuid, messages: this.messages, errors: this.errors});
         },
         methods: {
+            ...mapActions('users', ['getPolicyByUserId']),
             ...mapActions('networks', ['getAllNetworks', 'stopNetwork', 'deleteNetwork']),
             ...mapGetters('networks', ['loading']),
             ...mapActions('system', ['loadMessages']),
+            hasVerifiedContact(policy) {
+                if (policy && policy.accountContacts) {
+                    const contacts = policy.accountContacts;
+                    for (let i=0; i<contacts.length; i++) {
+                        if (contacts[i].verified && isNotAuthenticator(contacts[i])) return true;
+                    }
+                    return false;
+                }
+                return false;
+            }
         },
         watch: {
             networks (nets) {
@@ -64,6 +82,9 @@
                         this.$router.replace({path: '/bubble/' + nets[0].name});
                     }
                 }
+            },
+            policy (p) {
+                this.verifiedContacts = this.hasVerifiedContact(p);
             }
         }
     };

src/account/NewNetworkPage.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
     <div>
-        <h2>{{messages.form_title_new_network}}</h2>
+        <h2 v-if="verifiedContacts || user.admin">{{messages.form_title_new_network}}</h2>
 
         <div v-if="inboundAction" :class="`alert ${inboundAction.alertType}`">
             {{messages['message_inbound_'+inboundAction.actionType]}}
@@ -17,28 +17,29 @@
         <div v-else-if="!verifiedContacts && !user.admin">
             <h3>{{messages.message_no_verified_contacts}}</h3>
             {{messages.message_no_verified_contacts_subtext}}
-            <table border="1">
-                <tr>
-                    <td v-if="typeof firstContact.nick !== 'undefined' && firstContact.nick !== null && firstContact.nick !== ''">
-                        {{firstContact.nick}}
-                    </td>
-                    <td>{{messages['field_label_policy_contact_type_'+firstContact.type]}}</td>
-                    <td>{{firstContact.info}}</td>
-                    <td>
-                        <form @submit.prevent="submitVerification()">
-        <label htmlFor="verifyCode">{{messages.field_label_policy_contact_verify_code}}</label>
-        <input :disabled="actionStatus.requesting" :id="'verifyContactCode'" v-validate="'required'" name="verifyCode" type="text" size="8"/>
-        <div v-if="errors.has('approvalToken')" class="invalid-feedback d-block">{{ errors.first('approvalToken') }}</div>
-        <button class="btn btn-primary" :disabled="actionStatus.requesting">{{messages.button_label_submit_verify_code}}</button>
-        <button class="btn btn-primary" :disabled="actionStatus.requesting" @click="resendVerification(firstContact)">{{messages.button_label_resend_verify_code}}</button>
-                        </form>
-                    </td>
-                </tr>
-            </table>
+            <hr/>
+            <button class="btn btn-primary" :disabled="actionStatus.requesting" @click="resendVerification(firstContact)">{{messages.button_label_resend_verify_code}}</button>
         </div>
         <div v-else>
         <form @submit.prevent="handleSubmit">
 
+            <div class="form-group">
+                <button class="btn btn-primary" :disabled="loading() || !isComplete" @click="launchBubble()">{{messages.button_label_create_new_network}}</button>
+                <img v-show="loading()" :src="loadingImgSrc" />
+            </div>
+            <hr/>
+
+            <div v-if="promos && promos.length && promos.length > 0">
+                <h5>{{messages.title_account_promotions}}</h5>
+                <table border="0">
+                    <tr v-for="promo in promos">
+                        <td><b>{{messages['label_promotion_'+promo.name]}}</b>:</td>
+                        <td>{{messages['label_promotion_'+promo.name+'_description']}}</td>
+                    </tr>
+                </table>
+                <hr/>
+            </div>
+
             <div v-if="showAdvanced || showForkOption">
 
             <div v-if="showForkOption">
@@ -308,17 +309,6 @@
             </div>
 
             <hr/>
-            <div v-if="promos && promos.length && promos.length > 0">
-                <h5>{{messages.title_account_promotions}}</h5>
-                <table border="0">
-                    <tr v-for="promo in promos">
-                        <td><b>{{messages['label_promotion_'+promo.name]}}</b>:</td>
-                        <td>{{messages['label_promotion_'+promo.name+'_description']}}</td>
-                    </tr>
-                </table>
-                <hr/>
-            </div>
-
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !isComplete" @click="launchBubble()">{{messages.button_label_create_new_network}}</button>
                 <img v-show="loading()" :src="loadingImgSrc" />

src/app/App.vue

@@ -32,12 +32,13 @@
         <div class="bubble-footer">
             <a href="https://getbubblenow.com/">getbubblenow.com</a> |
             <router-link to="/legal">{{messages.title_legal_topics}}</router-link>
+            <b v-if="configs.support.site"> | <router-link to="/support">{{messages.title_support}}</router-link></b>
         </div>
     </div>
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import { util } from '../_helpers'
 
 export default {

src/app/SupportPage.vue

@@ -0,0 +1,40 @@
+<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
+<template>
+    <div>
+        <h2>{{messages.title_support}}</h2>
+        <hr/>
+        <h5>{{messages.support_preamble}}</h5>
+        <hr/>
+        <div v-if="configs && configs.support && configs.support.site">
+            <h4><a :href="configs.support.site">{{messages.support_site_link}}</a></h4>
+            <hr/>
+        </div>
+        <div v-if="configs && configs.support && configs.support.email">
+            <h4><a :href="'mailto:'+configs.support.email">{{messages.support_email_link}}</a></h4>
+            <hr/>
+        </div>
+        <div v-if="hasNoSupport">
+            <h4>{{messages.support_not_available}}</h4>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { mapState } from 'vuex'
+    export default {
+        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/auth/RegisterPage.vue

@@ -12,6 +12,7 @@
                 <label htmlFor="password">{{messages.field_label_password}}</label>
                 <input type="password" v-model="user.password" v-validate="{ required: true, min: 6 }" name="password" class="form-control" :class="{ 'is-invalid': submitted && errors.has('password') }" />
                 <div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">{{ errors.first('password') }}</div>
+                <span class="bubble-field-help" v-html="messages.field_label_password_guidance"></span>
             </div>
             <div class="form-group">
                 <label htmlFor="password">{{messages.field_label_confirm_password}}</label>

src/index.html

@@ -95,6 +95,9 @@
             bottom: 6px;
             right: 10px;
         }
+        .bubble-field-help {
+            font-size: small;
+        }
     </style>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">