Add simple loading feedback

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

4 files changed, 58 insertions, 16 deletions

diff --git a/js/service/registration.js b/js/service/registration.js
new file mode 100644
index 0000000..87eac20
--- /dev/null
+++ b/js/service/registration.js
@@ -0,0 +1,17 @@
+import $ from 'jquery';
+
+export function startVerification() {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve();
+        }, 400);
+    })
+}
+
+export function tryVerification() {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve();
+        }, 400);
+    })
+}
diff --git a/js/view/settings.vue b/js/view/settings.vue
index 8d8dcac..9d40e56 100644
--- a/js/view/settings.vue
+++ b/js/view/settings.vue
@@ -1,28 +1,35 @@
 <template>
     <div class="section">
         <h2 data-anchor-name="sms-second-factor-auth"><l10n text="SMS second-factor auth"></l10n></h2>
-        <p v-if="state === 0">
-            <l10n text="You are not using SMS-based two-factor authentication at the moment"></l10n>
-            <button @click="enable"><l10n text="Enable"></l10n></button>
-        </p>
-        <p v-if="state === 1">
-            <l10n text="A confirmation code has been sent to {phone}. Please check your phone and insert the code here:"
-                  v-bind:options="{phone: phoneNumber}"></l10n>
-            <input v-model="confirmationCode">
-            <button @click="confirm"><l10n text="Confirm"></l10n></button>
-        </p>
-        <p v-if="state === 2">
-            <l10n text="SMS-based two-factor authentication is enabled for your account."></l10n>
-        </p>
+        <div v-if="loading">
+              <span class="icon-loading"></span>
+        </div>
+        <div v-else>
+          <p v-if="state === 0">
+              <l10n text="You are not using SMS-based two-factor authentication at the moment"></l10n>
+              <button @click="enable"><l10n text="Enable"></l10n></button>
+          </p>
+          <p v-if="state === 1">
+              <l10n text="A confirmation code has been sent to {phone}. Please check your phone and insert the code here:"
+                    v-bind:options="{phone: phoneNumber}"></l10n>
+              <input v-model="confirmationCode">
+              <button @click="confirm"><l10n text="Confirm"></l10n></button>
+          </p>
+          <p v-if="state === 2">
+              <l10n text="SMS-based two-factor authentication is enabled for your account."></l10n>
+          </p>
+        </div>
     </div>
 </template>
 
 <script>
-import l10n from "./l10n.vue";
+import l10n from "view/l10n.vue";
+import { startVerification, tryVerification } from "service/registration";
 
 export default {
   data() {
     return {
+      loading: false,
       state: 0,
       phoneNumber: "12344556",
       confirmationCode: ""
@@ -30,12 +37,24 @@ export default {
   },
   methods: {
     enable: function() {
-      this.state = 1;
+      this.loading = true;
+      startVerification().then(
+        function() {
+          this.state = 1;
+          this.loading = false;
+        }.bind(this)
+      );
     },
     confirm: function() {
+      this.loading = true;
       console.error(this.confirmationCode);
 
-      this.state = 2;
+      tryVerification().then(
+        function() {
+          this.state = 2;
+          this.loading = false;
+        }.bind(this)
+      );
     }
   },
   components: {
diff --git a/package-lock.json b/package-lock.json
index 79ae478..875b8a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4742,6 +4742,11 @@
         "is-object": "1.0.1"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
diff --git a/package.json b/package.json
index bd2ef79..6cf1f51 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "css-loader": "^0.28.11",
+    "jquery": "^3.3.1",
     "vue": "^2.5.16",
     "vue-loader": "^14.2.2",
     "vue-template-compiler": "^2.5.16"