1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
{{define "modals/twoFactorModal"}}
<a-modal id="two-factor-modal" v-model="twoFactorModal.visible" :title="twoFactorModal.title" :closable="true"
:class="themeSwitcher.currentTheme">
<template v-if="twoFactorModal.type === 'set'">
<p>{{ i18n "pages.settings.security.twoFactorModalSteps" }}</p>
<a-divider></a-divider>
<p>{{ i18n "pages.settings.security.twoFactorModalFirstStep" }}</p>
<div :style="{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '12px' }">
<div
:style="{ border: '1px solid', borderRadius: '1rem', borderColor: themeSwitcher.isDarkTheme ? 'var(--dark-color-surface-300)' : '#d9d9d9', padding: 0 }">
<img :src="twoFactorModal.qrImage"
:style="{ filter: themeSwitcher.isDarkTheme ? 'invert(1)' : 'none'}"
:alt="twoFactorModal.token">
</div>
<span :style="{ fontSize: '12px', fontFamily: 'monospace' }">[[ twoFactorModal.token ]]</span>
</div>
<a-divider></a-divider>
<p>{{ i18n "pages.settings.security.twoFactorModalSecondStep" }}</p>
<a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
</template>
<template v-if="twoFactorModal.type === 'remove'">
<p>{{ i18n "pages.settings.security.twoFactorModalRemoveStep" }}</p>
<a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
</template>
<template slot="footer">
<a-button @click="twoFactorModal.cancel">
<span>{{ i18n "cancel" }}</span>
</a-button>
<a-button type="primary" :disabled="twoFactorModal.enteredCode.length < 6" @click="twoFactorModal.ok">
<span>{{ i18n "confirm" }}</span>
</a-button>
</template>
</a-modal>
<script>
const twoFactorModal = {
title: '',
fileName: '',
token: '',
enteredCode: '',
visible: false,
type: 'set',
confirm: null,
totpObject: null,
qrImage: "",
ok() {
if (twoFactorModal.totpObject.generate() === twoFactorModal.enteredCode) {
ObjectUtil.execute(twoFactorModal.confirm, true)
twoFactorModal.close()
switch (twoFactorModal.type) {
case 'set':
Vue.prototype.$message['success']('{{ i18n "pages.settings.security.twoFactorModalSetSuccess" }}')
break;
case 'remove':
Vue.prototype.$message['success']('{{ i18n "pages.settings.security.twoFactorModalDeleteSuccess" }}')
break;
default:
break;
}
} else {
Vue.prototype.$message['error']('{{ i18n "pages.settings.security.twoFactorModalError" }}')
}
},
cancel() {
ObjectUtil.execute(twoFactorModal.confirm, false)
twoFactorModal.close()
},
show: function ({
title = '',
token = '',
type = 'set',
confirm = (success) => { }
}) {
this.title = title;
this.token = token;
this.visible = true;
this.confirm = confirm;
this.type = type;
this.totpObject = new OTPAuth.TOTP({
issuer: "3x-ui",
label: "Administrator",
algorithm: "SHA1",
digits: 6,
period: 30,
secret: twoFactorModal.token,
});
if (type === 'set') {
this.qrImage = new QRious({
size: 150,
value: twoFactorModal.totpObject.toString(),
background: 'white',
backgroundAlpha: 0,
foreground: 'black',
padding: 12,
level: 'L'
}).toDataURL()
}
},
close: function () {
twoFactorModal.enteredCode = "";
twoFactorModal.visible = false;
},
};
const twoFactorModalApp = new Vue({
delimiters: ['[[', ']]'],
el: '#two-factor-modal',
data: {
twoFactorModal: twoFactorModal,
},
});
</script>
{{end}}
|
