Add simple loading feedback

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

2 files changed, 52 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: {