81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<template>
|
|
<div class="2fa">
|
|
<p>%i18n:@intro%<a href="%i18n:@url%" target="_blank">%i18n:@detail%</a></p>
|
|
<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
|
|
<p v-if="!data && !$store.state.i.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:@register%</button></p>
|
|
<template v-if="$store.state.i.twoFactorEnabled">
|
|
<p>%i18n:@already-registered%</p>
|
|
<button @click="unregister" class="ui">%i18n:@unregister%</button>
|
|
</template>
|
|
<div v-if="data">
|
|
<ol>
|
|
<li>%i18n:@authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:@howtoinstall%</a></li>
|
|
<li>%i18n:@scan%<br><img :src="data.qr"></li>
|
|
<li>%i18n:@done%<br>
|
|
<input type="number" v-model="token" class="ui">
|
|
<button @click="submit" class="ui primary">%i18n:@submit%</button>
|
|
</li>
|
|
</ol>
|
|
<div class="ui info"><p>%fa:info-circle%%i18n:@info%</p></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
data: null,
|
|
token: null
|
|
};
|
|
},
|
|
methods: {
|
|
register() {
|
|
(this as any).apis.input({
|
|
title: '%i18n:@enter-password%',
|
|
type: 'password'
|
|
}).then(password => {
|
|
(this as any).api('i/2fa/register', {
|
|
password: password
|
|
}).then(data => {
|
|
this.data = data;
|
|
});
|
|
});
|
|
},
|
|
|
|
unregister() {
|
|
(this as any).apis.input({
|
|
title: '%i18n:@enter-password%',
|
|
type: 'password'
|
|
}).then(password => {
|
|
(this as any).api('i/2fa/unregister', {
|
|
password: password
|
|
}).then(() => {
|
|
(this as any).apis.notify('%i18n:@unregistered%');
|
|
this.$store.state.i.twoFactorEnabled = false;
|
|
});
|
|
});
|
|
},
|
|
|
|
submit() {
|
|
(this as any).api('i/2fa/done', {
|
|
token: this.token
|
|
}).then(() => {
|
|
(this as any).apis.notify('%i18n:@success%');
|
|
this.$store.state.i.twoFactorEnabled = true;
|
|
}).catch(() => {
|
|
(this as any).apis.notify('%i18n:@failed%');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.2fa
|
|
color #4a535a
|
|
|
|
</style>
|