diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/service/registration.js | 17 | ||||
-rw-r--r-- | js/view/settings.vue | 51 |
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: { |