From 711e8d7ecbe075eb7de93f906e79cd60146dfa8c Mon Sep 17 00:00:00 2001
From: Kristijan Mitrovic <kris@noreply.git.bubblev.org>
Date: Tue, 5 May 2020 14:46:20 +0000
Subject: [PATCH] Fix FE for download restore keys (#3)

Set loading image src in a single place

Add loading image when buttons are clicked

Prefill restore key code on query param

Clear info labels on new request for restore keys

Better UI elements for the restore key output

Add missing method import

Use proper button classes

Co-authored-by: Kristijan Mitrovic <kmitrovic@itekako.com>
Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/3
---
 src/_components/TotpModal.vue              |  8 ++--
 src/_store/index.js                        | 11 +++++
 src/_store/networks.module.js              |  4 ++
 src/account/DevicesPage.vue                |  6 ++-
 src/account/NetworkPage.vue                | 50 ++++++++++++++--------
 src/account/NewNetworkPage.vue             |  6 ++-
 src/account/profile/ChangePasswordPage.vue |  8 ++--
 src/account/profile/PolicyPage.vue         |  8 ++--
 src/account/profile/ProfilePage.vue        |  6 ++-
 src/account/profile/SetPasswordPage.vue    |  6 ++-
 src/account/profile/SshKeysPage.vue        |  6 ++-
 src/auth/ActivationPage.vue                |  7 ++-
 src/auth/ForgotPasswordPage.vue            |  6 ++-
 src/auth/LoginPage.vue                     |  8 ++--
 src/auth/RegisterPage.vue                  |  6 ++-
 15 files changed, 99 insertions(+), 47 deletions(-)

diff --git a/src/_components/TotpModal.vue b/src/_components/TotpModal.vue
index ee310c4..2fa2607 100644
--- a/src/_components/TotpModal.vue
+++ b/src/_components/TotpModal.vue
@@ -13,7 +13,7 @@
                 <button class="btn btn-primary" :disabled="status.authenticating || token === null || token.length < 6">
                     {{messages.button_label_submit_totp_code}}
                 </button>
-                <img v-show="status.authenticating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.authenticating" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -21,7 +21,8 @@
 
 <script>
     import { mapState, mapActions } from 'vuex';
-    import { util } from '../_helpers'
+    import { util } from '../_helpers';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data() {
@@ -29,7 +30,8 @@
                 submitted: false,
                 token: '',
                 refresher: null,
-                showTotpModal: false
+                showTotpModal: false,
+                loadingImgSrc: loadingImgSrc
             };
         },
         created() {
diff --git a/src/_store/index.js b/src/_store/index.js
index 2e2f651..d44a131 100644
--- a/src/_store/index.js
+++ b/src/_store/index.js
@@ -40,6 +40,17 @@ export const store = new Vuex.Store({
 });
 
 export const safeEval = require('safe-eval');
+export const loadingImgSrc = 'data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4'
+                             + 'wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2'
+                             + 'MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63'
+                             + 'P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAA'
+                             + 'EAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQo'
+                             + 'AAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TA'
+                             + 'AAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsG'
+                             + 'o/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3'
+                             + 'lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTA'
+                             + 'UkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMT'
+                             + 'CpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==';
 
 function evalInContext(vue, string) {
     try {
diff --git a/src/_store/networks.module.js b/src/_store/networks.module.js
index 1a60a56..0a9d91a 100644
--- a/src/_store/networks.module.js
+++ b/src/_store/networks.module.js
@@ -243,6 +243,8 @@ const mutations = {
 
     requestNetworkKeysRequest(state) {
         state.loading.requestNetworkKeys = true;
+        state.networkKeysRequested = null;
+        state.networkKeys = null;
     },
     requestNetworkKeysSuccess(state, networkId) {
         state.loading.requestNetworkKeys = false;
@@ -255,6 +257,8 @@ const mutations = {
 
     retrieveNetworkKeysRequest(state) {
         state.loading.retrieveNetworkKeys = true;
+        state.networkKeysRequested = null;
+        state.networkKeys = null;
     },
     retrieveNetworkKeysSuccess(state, keys) {
         state.loading.retrieveNetworkKeys = false;
diff --git a/src/account/DevicesPage.vue b/src/account/DevicesPage.vue
index e8e9b8e..e4ed7c7 100644
--- a/src/account/DevicesPage.vue
+++ b/src/account/DevicesPage.vue
@@ -86,7 +86,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading || !addDeviceReady">{{messages.button_label_add_device}}</button>
-                <img v-show="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading" :src="loadingImgSrc" />
             </div>
         </form>
 
@@ -119,6 +119,7 @@
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../_helpers';
     import config from 'config';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data () {
@@ -131,7 +132,8 @@
                 displayVpnConfig: {},
                 displayDeviceHelp: {},
                 config: config,
-                mitmLoading: true
+                mitmLoading: true,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/NetworkPage.vue b/src/account/NetworkPage.vue
index 6f727ea..b006b46 100644
--- a/src/account/NetworkPage.vue
+++ b/src/account/NetworkPage.vue
@@ -54,10 +54,14 @@
         </div>
 
         <div v-if="network.state === 'running' && configs.networkUuid && network.uuid === configs.networkUuid">
-            <button @click="requestRestoreKey()">{{messages.link_network_action_request_keys}}</button>
+            <button class="btn btn-secondary" @click="requestRestoreKey()"
+                    :disabled="loading && loading.requestNetworkKeys">
+                {{messages.link_network_action_request_keys}}
+            </button>
+            <img v-show="loading && loading.requestNetworkKeys" :src="loadingImgSrc" />
             <div v-if="errors.has('networkKeys')" class="invalid-feedback d-block">{{ errors.first('networkKeys') }}</div>
             <div v-if="networkKeysRequested && networkKeysRequested === networkId">{{messages.message_network_action_keys_requested}}</div>
-
+            <hr />
             <h5>{{messages.message_network_action_retrieve_keys}}</h5>
             <form @submit.prevent="retrieveRestoreKey()">
                 <div class="form-group">
@@ -67,17 +71,23 @@
                 </div>
                 <div class="form-group">
                     <label for="restoreKeyPassword">{{messages.field_network_key_download_password}}</label>
-                    <input type="text" v-model="restoreKeyPassword" v-validate="'required'" name="restoreKeyPassword" class="form-control" :class="{ 'is-invalid': errors.has('password') }" />
+                    <input type="text" v-model="restoreKeyPassword" v-validate="'required'" name="restoreKeyPassword"
+                           class="form-control" :class="{ 'is-invalid': errors.has('password') }"
+                           :autofocus="this.$route.query.hasOwnProperty('keys_code')"/>
                     <div v-if="errors.has('password')" class="invalid-feedback">{{ errors.first('password') }}</div>
                 </div>
-                <button>{{messages.button_label_retrieve_keys}}</button>
-                <div v-if="networkKeys">
-                    <hr/>
-                    <h4><b>{{messages.message_network_keys}}</b></h4>: {{networkKeys}}
-                    <hr/>
-                    {{messages.message_network_keys_description}}
-                </div>
+                <button class="btn btn-secondary" :disabled="loading && loading.retrieveNetworkKeys">
+                    {{ messages.button_label_retrieve_keys }}
+                </button>
+                <img v-show="loading && loading.retrieveNetworkKeys" :src="loadingImgSrc" />
             </form>
+            <div v-if="networkKeys">
+                <hr />
+                <h4><b>{{ messages.message_network_keys }}</b></h4>
+                <textarea v-model="networkKeys.data" name="networkKeys" class="form-control" cols="50"
+                          readonly="true" />
+                {{ messages.message_network_keys_description }}
+            </div>
         </div>
 
         <hr/>
@@ -92,13 +102,13 @@
             <div v-if="errors.has('accountPlan')" class="invalid-feedback d-block">{{ errors.first('accountPlan') }}</div>
             <div v-if="network.state === 'running' || network.state === 'starting'" style="border: 2px solid #000;">
                 <hr/>
-                <button @click="stopNet()" class="text-danger">{{messages.link_network_action_stop}}</button>
+                <button @click="stopNet()" class="btn btn-danger">{{messages.link_network_action_stop}}</button>
                 {{messages.link_network_action_stop_description}}
             </div>
             <div v-else></div>
             <hr/>
             <div v-if="network.state === 'stopped' || network.state === 'error_stopping'" style="border: 2px solid #000;">
-                <button @click="deleteNet()" class="text-danger">{{messages.link_network_action_delete}}</button>
+                <button @click="deleteNet()" class="btn btn-danger">{{messages.link_network_action_delete}}</button>
                 {{messages.link_network_action_delete_description}}
             </div>
         </div>
@@ -107,8 +117,9 @@
 </template>
 
 <script>
-    import { mapState, mapActions, mapGetters } from 'vuex'
-    import { util } from '../_helpers'
+    import { mapState, mapActions, mapGetters } from 'vuex';
+    import { util } from '../_helpers';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data() {
@@ -118,13 +129,14 @@
                 stats: null,
                 refresher: null,
                 restoreKeyCode: null,
-                restoreKeyPassword: null
+                restoreKeyPassword: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
             ...mapState('networks', [
                 'network', 'newNodeNotification', 'networkStatuses', 'networkNodes', 'networkKeysRequested',
-                'deletedNetwork', 'networkKeys'
+                'deletedNetwork', 'networkKeys', 'loading'
             ]),
             ...mapState('system', ['messages', 'configs']),
             showSetupHelp () {
@@ -134,9 +146,8 @@
         methods: {
             ...mapActions('networks', [
                 'getNetworkById', 'deleteNetwork', 'getStatusesByNetworkId', 'getNodesByNetworkId',
-                'stopNetwork', 'deleteNetwork', 'requestNetworkKeys'
+                'stopNetwork', 'deleteNetwork', 'requestNetworkKeys', 'retrieveNetworkKeys'
             ]),
-            ...mapGetters('networks', ['loading']),
             refreshStatus (userId) {
                 this.getNetworkById({userId: userId, networkId: this.networkId, messages: this.messages, errors: this.errors});
                 this.getStatusesByNetworkId({
@@ -200,6 +211,7 @@
             const user = util.currentUser();
             this.refreshStatus(user.uuid);
             this.startStatusRefresher(user);
+            this.restoreKeyCode = this.$route.query.keys_code;
         },
         beforeDestroy () {
             clearInterval(this.refresher);
@@ -240,4 +252,4 @@
             }
         }
     };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/account/NewNetworkPage.vue b/src/account/NewNetworkPage.vue
index ed44c1a..8fe6cf3 100644
--- a/src/account/NewNetworkPage.vue
+++ b/src/account/NewNetworkPage.vue
@@ -299,7 +299,7 @@
 
             <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="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
         </div>
@@ -309,6 +309,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex'
     import { util } from '../_helpers'
+    import { loadingImgSrc } from '../_store';
 
     // convenience methods
     import { isAuthenticator, isNotAuthenticator } from '../_store/users.module';
@@ -367,7 +368,8 @@
                 firstContact: null,
                 payMethods: null,
                 accountPayMethods: null,
-                selectedPaymentMethod: null
+                selectedPaymentMethod: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/profile/ChangePasswordPage.vue b/src/account/profile/ChangePasswordPage.vue
index 9a6848e..2dd819f 100644
--- a/src/account/profile/ChangePasswordPage.vue
+++ b/src/account/profile/ChangePasswordPage.vue
@@ -19,7 +19,7 @@
                 </div>
                 <div class="form-group">
                     <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_request_password_reset}}</button>
-                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                    <img v-show="loading()" :src="loadingImgSrc" />
                 </div>
             </div>
             <div v-else>
@@ -49,7 +49,7 @@
 
                 <div class="form-group">
                     <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_change_password}}</button>
-                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                    <img v-show="loading()" :src="loadingImgSrc" />
                 </div>
             </div>
 
@@ -60,6 +60,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -75,7 +76,8 @@
                 totpToken: null,
                 hasRequiredAuthenticator: null,
                 hasRequiredExternalAuth: null,
-                requiredExternalAuthContacts: []
+                requiredExternalAuthContacts: [],
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/PolicyPage.vue b/src/account/profile/PolicyPage.vue
index 5248ad7..f7cbb57 100644
--- a/src/account/profile/PolicyPage.vue
+++ b/src/account/profile/PolicyPage.vue
@@ -55,7 +55,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_update_policy}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -329,7 +329,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !newContactValid">{{messages.button_label_add_contact}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
 
@@ -339,6 +339,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     // convenience methods
     import { isAuthenticator, isNotAuthenticator } from '../../_store/users.module';
@@ -386,7 +387,8 @@
                 newContact: initNewContact(),
                 verifyingContact: null,
                 inboundAction: null,
-                watchedPolicy: null
+                watchedPolicy: null,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/ProfilePage.vue b/src/account/profile/ProfilePage.vue
index 6dd98d0..e7f531b 100644
--- a/src/account/profile/ProfilePage.vue
+++ b/src/account/profile/ProfilePage.vue
@@ -99,7 +99,7 @@
             <div class="form-group">
                 <button v-if="newUser === null || newUser === false || admin !== true" class="btn btn-primary" :disabled="loading()">{{messages.button_label_update_profile}}</button>
                 <button v-else class="btn btn-primary" :disabled="loading()">{{messages.button_label_create_account}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -108,6 +108,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     const BLANK_SUBJECT = {
         name: null,
@@ -136,7 +137,8 @@
                 admin: false,
                 newUser: null,
                 submitted: false,
-                subject: Object.assign({}, BLANK_SUBJECT)
+                subject: Object.assign({}, BLANK_SUBJECT),
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/profile/SetPasswordPage.vue b/src/account/profile/SetPasswordPage.vue
index d3925a9..528215f 100644
--- a/src/account/profile/SetPasswordPage.vue
+++ b/src/account/profile/SetPasswordPage.vue
@@ -25,7 +25,7 @@
 
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_set_password}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -36,6 +36,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -46,7 +47,8 @@
                 newPasswordConfirm: null,
                 code: null,
                 showTotp: false,
-                totpToken: null
+                totpToken: null,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/SshKeysPage.vue b/src/account/profile/SshKeysPage.vue
index 9b10ede..2a7d40b 100644
--- a/src/account/profile/SshKeysPage.vue
+++ b/src/account/profile/SshKeysPage.vue
@@ -53,7 +53,7 @@
 
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !newKeyValid">{{messages.button_label_add_ssh_key}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -64,6 +64,7 @@
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
     import { Settings } from 'luxon';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -77,7 +78,8 @@
                 expiration: null,
                 sshPublicKey: null,
                 minExpiration: (new Date()).toISOString(),
-                timezone: null
+                timezone: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/auth/ActivationPage.vue b/src/auth/ActivationPage.vue
index 65201e0..a7c4359 100644
--- a/src/auth/ActivationPage.vue
+++ b/src/auth/ActivationPage.vue
@@ -84,7 +84,7 @@
 
         <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.activating">{{messages.button_label_activate}}</button>
-                <img v-show="status.activating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.activating" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -92,6 +92,7 @@
 
 <script>
     import { mapState, mapActions } from 'vuex'
+    import { loadingImgSrc } from '../_store';
 
     function toCredentialsMap(creds) {
         const map = {};
@@ -127,7 +128,9 @@
                 domainName: null,
                 publicDns: null,
 
-                displayShowAllCheckbox: null
+                displayShowAllCheckbox: null,
+
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/auth/ForgotPasswordPage.vue b/src/auth/ForgotPasswordPage.vue
index ed23bb5..9fd21e4 100644
--- a/src/auth/ForgotPasswordPage.vue
+++ b/src/auth/ForgotPasswordPage.vue
@@ -11,7 +11,7 @@
             </div>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.sendingResetPasswordMessage === true">{{messages.button_label_resetPassword}}</button>
-                <img v-show="status.sendingResetPasswordMessage === true" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.sendingResetPasswordMessage === true" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -20,12 +20,14 @@
 <script>
     import { mapState, mapActions } from 'vuex'
     import { util } from '../_helpers'
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data () {
             return {
                 name: '',
-                submitted: false
+                submitted: false,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/auth/LoginPage.vue b/src/auth/LoginPage.vue
index dcd4ec3..76d6f1c 100644
--- a/src/auth/LoginPage.vue
+++ b/src/auth/LoginPage.vue
@@ -32,7 +32,7 @@
             <div class="form-group">
                 <div><small v-html="messages.message_login_agreeToTerms"></small><hr/></div>
                 <button class="btn btn-primary" :disabled="status.loggingIn">{{messages.button_label_login}}</button>
-                <img v-show="status.loggingIn" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.loggingIn" :src="loadingImgSrc" />
                 <router-link v-if="configs && configs.allowRegistration" to="/register" class="btn btn-link">{{messages.button_label_register}}</router-link>
             </div>
             <div class="form-group">
@@ -44,6 +44,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import { loadingImgSrc } from '../_store';
 
 export default {
     data () {
@@ -53,7 +54,8 @@ export default {
             totpToken: null,
             unlockKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
             showTotp: false,
-            submitted: false
+            submitted: false,
+            loadingImgSrc: loadingImgSrc
         }
     },
     created () {
@@ -88,4 +90,4 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/auth/RegisterPage.vue b/src/auth/RegisterPage.vue
index ef1c889..ef6307e 100644
--- a/src/auth/RegisterPage.vue
+++ b/src/auth/RegisterPage.vue
@@ -71,7 +71,7 @@
             </div>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.registering">{{messages.button_label_register}}</button>
-                <img v-show="status.registering" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.registering" :src="loadingImgSrc" />
                 <router-link to="/login" class="btn btn-link">{{messages.button_label_cancel}}</router-link>
             </div>
         </form>
@@ -81,6 +81,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { util } from '../_helpers';
+import { loadingImgSrc } from '../_store';
 
 export default {
     data () {
@@ -101,7 +102,8 @@ export default {
             selectedPaymentMethod: null,
             paymentMethodObject: null,
             confirmPassword: '',
-            submitted: false
+            submitted: false,
+            loadingImgSrc: loadingImgSrc
         }
     },
     computed: {