diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/service/registration.js | 93 | ||||
-rw-r--r-- | js/view/settings.vue | 212 |
2 files changed, 168 insertions, 137 deletions
diff --git a/js/service/registration.js b/js/service/registration.js index fb741fb..2b45fd7 100644 --- a/js/service/registration.js +++ b/js/service/registration.js @@ -1,55 +1,58 @@ import $ from 'jquery'; -import { nc_fetch_json } from 'nextcloud_fetch'; +import {nc_fetch_json} from 'nextcloud_fetch'; -export function getState() { - let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification') +export function getState () { + let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification') - return nc_fetch_json(url).then(function (resp) { - if (resp.ok) { - return resp.json(); - } - throw resp; - }) + return nc_fetch_json(url).then(function (resp) { + if (resp.ok) { + return resp.json(); + } + throw resp; + }) } -export function startVerification() { - let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/start') - - return nc_fetch_json(url, { - method: 'POST' - }).then(function (resp) { - if (resp.ok) { - return resp.json(); - } - throw resp; - }) +export function startVerification (identifier) { + let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/start') + + return nc_fetch_json(url, { + method: 'POST', + body: JSON.stringify({ + identifier: identifier + }) + }).then(function (resp) { + if (resp.ok) { + return resp.json(); + } + throw resp; + }) } -export function tryVerification(code) { - let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/finish') - - return nc_fetch_json(url, { - method: 'POST', - body: JSON.stringify({ - verificationCode: code - }) - }).then(function (resp) { - if (resp.ok) { - return resp.json(); - } - throw resp; - }) +export function tryVerification (code) { + let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/finish') + + return nc_fetch_json(url, { + method: 'POST', + body: JSON.stringify({ + verificationCode: code + }) + }).then(function (resp) { + if (resp.ok) { + return resp.json(); + } + throw resp; + }) } -export function disable() { - let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification') - - return nc_fetch_json(url, { - method: 'DELETE' - }).then(function (resp) { - if (resp.ok) { - return resp.json(); - } - throw resp; - }) +export function disable () { + let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification') + + return nc_fetch_json(url, { + method: 'DELETE' + }).then(function (resp) { + if (resp.ok) { + return resp.json(); + } + throw resp; + }) } diff --git a/js/view/settings.vue b/js/view/settings.vue index ee63145..adeff27 100644 --- a/js/view/settings.vue +++ b/js/view/settings.vue @@ -1,104 +1,132 @@ <template> - <div class="section"> - <h2 data-anchor-name="sms-second-factor-auth"><l10n text="SMS second-factor auth"></l10n></h2> - <div v-if="loading"> - <span class="icon-loading-small"></span> - </div> - <div v-else> - <p v-if="state === 0"> - <strong v-if="verificationError === true"><l10n text="Could not verify your code. Please try again."></l10n></strong> - <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> - <button @click="disable"><l10n text="Disable"></l10n></button> - </p> - </div> - </div> + <div class="section"> + <h2 data-anchor-name="sms-second-factor-auth"> + <l10n text="SMS second-factor auth"></l10n> + </h2> + <div v-if="loading"> + <span class="icon-loading-small"></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"> + <strong v-if="verificationError === true"> + <l10n text="Could not verify your code. Please try again."></l10n> + </strong> + <l10n text="Enter your identification (e.g. phone number to start the verification):"></l10n> + <input v-model="identifier"> + <button @click="verify"> + <l10n text="Verify"></l10n> + </button> + </p> + <p v-if="state === 2"> + <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 === 3"> + <l10n text="SMS-based two-factor authentication is enabled for your account."></l10n> + <button @click="disable"> + <l10n text="Disable"></l10n> + </button> + </p> + </div> + </div> </template> <script> -import l10n from "view/l10n.vue"; -import { - getState, - startVerification, - tryVerification, - disable -} from "service/registration"; + import l10n from "view/l10n.vue"; + import { + getState, + startVerification, + tryVerification, + disable + } from "service/registration"; -export default { - data() { - return { - loading: true, - state: 0, - phoneNumber: "", - confirmationCode: "", - verificationError: false - }; - }, - mounted: function() { - getState() - .then(res => { - this.state = res.state; - this.phoneNumber = res.phoneNumber; - this.loading = false; - }) - .catch(console.error.bind(this)); - }, - methods: { - enable: function() { - this.loading = true; - this.verificationError = false; - startVerification() - .then(res => { - this.state = 1; - this.phoneNumber = res.phoneNumber; - this.loading = false; - }) - .catch(console.error.bind(this)); - }, - confirm: function() { - this.loading = true; + export default { + data () { + return { + loading: true, + state: 0, + phoneNumber: '', + confirmationCode: '', + identifier: '', + verificationError: false + }; + }, + mounted: function () { + getState() + .then(res => { + this.state = res.state; + this.phoneNumber = res.phoneNumber; + this.loading = false; + }) + .catch(console.error.bind(this)); + }, + methods: { + enable: function () { + this.state = 1; + this.verificationError = false; + this.loading = false; + }, + verify: function () { + this.loading = true; + this.verificationError = false; + startVerification(this.identifier) + .then(res => { + this.state = 2; + this.phoneNumber = res.phoneNumber; + this.loading = false; + }) + .catch(e => { + console.error(e); + this.state = 1; + this.verificationError = true; + this.loading = false; + }); + }, + confirm: function () { + this.loading = true; - tryVerification(this.confirmationCode) - .then(res => { - this.state = 2; - this.loading = false; - }) - .catch(res => { - this.state = 0; - this.verificationError = true; - this.loading = false; - }); - }, + tryVerification(this.confirmationCode) + .then(res => { + this.state = 3; + this.loading = false; + }) + .catch(res => { + this.state = 1; + this.verificationError = true; + this.loading = false; + }); + }, - disable: function() { - this.loading = true; + disable: function () { + this.loading = true; - disable() - .then(res => { - this.state = res.state; - this.phoneNumber = res.phoneNumber; - this.loading = false; - }) - .catch(console.error.bind(this)); - } - }, - components: { - l10n - } -}; + disable() + .then(res => { + this.state = res.state; + this.phoneNumber = res.phoneNumber; + this.loading = false; + }) + .catch(console.error.bind(this)); + } + }, + components: { + l10n + } + }; </script> <style> -.icon-loading-small { - padding-left: 15px; -} + .icon-loading-small { + padding-left: 15px; + } </style> |