add app links

src/_services/system.service.js

@@ -16,7 +16,8 @@ export const systemService = {
     loadMessages,
     loadTimezones,
     detectTimezone,
-    detectLocale
+    detectLocale,
+    getAppLinks
 };
 
 function loadIsActivated () {
@@ -108,3 +109,10 @@ function detectLocale () {
         .then(util.handleBasicResponse)
         .then(locales => { return locales; });
 }
+
+function getAppLinks (locale) {
+    const requestOptions = util.userLoggedIn() ? util.getWithAuth() : { method: 'GET' };
+    return fetch(`${config.apiUrl}/auth/appLinks/${locale}`, requestOptions)
+        .then(util.handleBasicResponse)
+        .then(links => { return links; });
+}

src/_store/system.module.js

@@ -53,7 +53,8 @@ const state = {
     accountDeletionOptions: [],
     timeDurationOptions: [],
     timeDurationOptionsReversed: [],
-    contactTypes: []
+    contactTypes: [],
+    appLinks: null
 };
 
 const actions = {
@@ -145,6 +146,13 @@ const actions = {
             locales => commit('detectLocaleSuccess', locales),
             error => commit('detectLocaleFailure', error)
         )
+    },
+    getAppLinks({ commit }, locale) {
+        commit('getAppLinksRequest');
+        systemService.getAppLinks(locale).then(
+            links => commit('getAppLinksSuccess', links),
+            error => commit('getAppLinksFailure', error)
+        )
     }
 };
 
@@ -385,6 +393,14 @@ const mutations = {
 
         // keep current value, or assign default if no current value
         if (state.detectedLocale === null && state.locales && state.locales.length > 0) state.detectedLocale = state.locales[0];
+    },
+
+    getAppLinksRequest(state) {},
+    getAppLinksSuccess(state, links) {
+        state.appLinks = links;
+    },
+    getAppLinksFailure(state, error) {
+        state.error = error;
     }
 };
 

src/account/NetworkPage.vue

@@ -21,37 +21,76 @@
             <div v-if="network && network.state === 'running'" v-html="messages.message_launch_success_help_html"></div>
             <div v-else v-html="messages.message_launch_help_html"></div>
             <hr/>
-        </div>
-
-        <div>
-            <div>
-                <div>{{messages.label_field_networks_locale}}: {{messages['locale_'+network.locale] || network.locale}}</div>
-                <div>{{messages.label_field_networks_timezone}}: {{messages['tz_name_'+network.timezone] || network.timezone}}</div>
+            <div v-if="appLinks">
+                <div v-if="network && network.state === 'running'" v-html="messages.message_launch_success_apps"></div>
+                <div v-else v-html="messages.message_launch_help_apps"></div>
+                <br/>
+                <table border="0" width="100%">
+                    <tr>
+                        <td align="center" width="20%">
+                            <a target="_blank" rel="noopener noreferrer" :href="appLinks['ios']">
+                                <i class="fab fa-apple bubble-app-icon"></i><br/>
+                                {{messages.device_type_ios}}
+                            </a>
+                        </td>
+                        <td align="center" width="20%">
+                            <a target="_blank" rel="noopener noreferrer" :href="appLinks['android']">
+                                <i class="fab fa-android bubble-app-icon"></i><br/>
+                                {{messages.device_type_android}}
+                            </a>
+                        </td>
+                        <td align="center" width="20%">
+                            <a target="_blank" rel="noopener noreferrer" :href="appLinks['windows']">
+                                <i class="fab fa-windows bubble-app-icon"></i><br/>
+                                {{messages.device_type_windows}}
+                            </a>
+                        </td>
+                        <td align="center" width="20%">
+                            <a target="_blank" rel="noopener noreferrer" :href="appLinks['macosx']">
+                                <i class="fab fa-apple bubble-app-icon"></i><br/>
+                                {{messages.device_type_macosx}}
+                            </a>
+                        </td>
+                        <td align="center" width="20%">
+                            <a target="_blank" rel="noopener noreferrer" :href="appLinks['linux']">
+                                <i class="fab fa-linux bubble-app-icon"></i><br/>
+                                {{messages.device_type_linux}}
+                            </a>
+                        </td>
+                    </tr>
+                </table>
             </div>
         </div>
 
-        <div v-if="networkNodes">
-            <table border="1">
-                <thead>
-                <tr>
-                    <th nowrap="nowrap">{{messages.label_field_nodes_name}}</th>
-                    <th nowrap="nowrap">{{messages.label_field_nodes_region}}</th>
-                    <th nowrap="nowrap">{{messages.label_field_nodes_ip4}}</th>
-                    <th nowrap="nowrap">{{messages.label_field_nodes_ip6}}</th>
-                    <th nowrap="nowrap">{{messages.label_field_nodes_state}}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="node in networkNodes">
-                    <td>{{node.fqdn}}</td>
-                    <td nowrap="nowrap">{{node.region}}</td>
-                    <td>{{node.ip4}}</td>
-                    <td>{{node.ip6}}</td>
-                    <td>{{messages['msg_node_state_'+node.state]}}</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
+<!--        <div>-->
+<!--            <div>-->
+<!--                <div>{{messages.label_field_networks_locale}}: {{messages['locale_'+network.locale] || network.locale}}</div>-->
+<!--                <div>{{messages.label_field_networks_timezone}}: {{messages['tz_name_'+network.timezone] || network.timezone}}</div>-->
+<!--            </div>-->
+<!--        </div>-->
+
+<!--        <div v-if="networkNodes">-->
+<!--            <table border="1">-->
+<!--                <thead>-->
+<!--                <tr>-->
+<!--                    <th nowrap="nowrap">{{messages.label_field_nodes_name}}</th>-->
+<!--                    <th nowrap="nowrap">{{messages.label_field_nodes_region}}</th>-->
+<!--                    <th nowrap="nowrap">{{messages.label_field_nodes_ip4}}</th>-->
+<!--                    <th nowrap="nowrap">{{messages.label_field_nodes_ip6}}</th>-->
+<!--                    <th nowrap="nowrap">{{messages.label_field_nodes_state}}</th>-->
+<!--                </tr>-->
+<!--                </thead>-->
+<!--                <tbody>-->
+<!--                <tr v-for="node in networkNodes">-->
+<!--                    <td>{{node.fqdn}}</td>-->
+<!--                    <td nowrap="nowrap">{{node.region}}</td>-->
+<!--                    <td>{{node.ip4}}</td>-->
+<!--                    <td>{{node.ip6}}</td>-->
+<!--                    <td>{{messages['msg_node_state_'+node.state]}}</td>-->
+<!--                </tr>-->
+<!--                </tbody>-->
+<!--            </table>-->
+<!--        </div>-->
 
         <div v-if="network.state === 'running' && configs.networkUuid && network.uuid === configs.networkUuid">
             <button class="btn btn-secondary" @click="requestRestoreKey()"
@@ -138,7 +177,7 @@
                 'network', 'newNodeNotification', 'networkStatuses', 'networkNodes', 'networkKeysRequested',
                 'deletedNetwork', 'networkKeys', 'loading'
             ]),
-            ...mapState('system', ['messages', 'configs']),
+            ...mapState('system', ['messages', 'configs', 'appLinks']),
             showSetupHelp () {
                 return (this.network !== null && (this.network.state === 'running' || this.network.state === 'starting'));
             }
@@ -148,6 +187,7 @@
                 'getNetworkById', 'deleteNetwork', 'getStatusesByNetworkId', 'getNodesByNetworkId',
                 'stopNetwork', 'deleteNetwork', 'requestNetworkKeys', 'retrieveNetworkKeys'
             ]),
+            ...mapActions('system', ['getAppLinks']),
             refreshStatus (userId) {
                 this.getNetworkById({userId: userId, networkId: this.networkId, messages: this.messages, errors: this.errors});
                 this.getStatusesByNetworkId({
@@ -212,6 +252,7 @@
             this.refreshStatus(user.uuid);
             this.startStatusRefresher(user);
             this.restoreKeyCode = this.$route.query.keys_code;
+            this.getAppLinks(user.locale);
         },
         beforeDestroy () {
             clearInterval(this.refresher);

src/app/App.vue

@@ -30,7 +30,7 @@
             </div>
         </div>
         <div class="bubble-footer">
-            <a href="https://getbubblenow.com/">getbubblenow.com</a> |
+            <a target="_blank" rel="noopener noreferrer" 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>

src/index.html

@@ -98,6 +98,9 @@
         .bubble-field-help {
             font-size: small;
         }
+        .bubble-app-icon {
+            font-size: x-large;
+        }
     </style>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">