mfa.vue (4524B)
1 <template>
2 <div
3 v-if="readyInit && settings.available"
4 class="setting-item mfa-settings"
5 >
6 <div class="mfa-heading">
7 <h2>{{ $t('settings.mfa.title') }}</h2>
8 </div>
9
10 <div>
11 <div
12 v-if="!setupInProgress"
13 class="setting-item"
14 >
15 <!-- Enabled methods -->
16 <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
17 <totp-item
18 :settings="settings"
19 @deactivate="fetchSettings"
20 @activate="activateOTP"
21 />
22 <br>
23
24 <div v-if="settings.enabled">
25 <!-- backup codes block-->
26 <recovery-codes
27 v-if="!confirmNewBackupCodes"
28 :backup-codes="backupCodes"
29 />
30 <button
31 v-if="!confirmNewBackupCodes"
32 class="btn btn-default"
33 @click="getBackupCodes"
34 >
35 {{ $t('settings.mfa.generate_new_recovery_codes') }}
36 </button>
37
38 <div v-if="confirmNewBackupCodes">
39 <confirm
40 :disabled="backupCodes.inProgress"
41 @confirm="confirmBackupCodes"
42 @cancel="cancelBackupCodes"
43 >
44 <p class="warning">
45 {{ $t('settings.mfa.warning_of_generate_new_codes') }}
46 </p>
47 </confirm>
48 </div>
49 </div>
50 </div>
51
52 <div v-if="setupInProgress">
53 <!-- setup block-->
54
55 <h3>{{ $t('settings.mfa.setup_otp') }}</h3>
56
57 <recovery-codes
58 v-if="!setupOTPInProgress"
59 :backup-codes="backupCodes"
60 />
61
62 <button
63 v-if="canSetupOTP"
64 class="btn btn-default"
65 @click="cancelSetup"
66 >
67 {{ $t('general.cancel') }}
68 </button>
69
70 <button
71 v-if="canSetupOTP"
72 class="btn btn-default"
73 @click="setupOTP"
74 >
75 {{ $t('settings.mfa.setup_otp') }}
76 </button>
77
78 <template v-if="setupOTPInProgress">
79 <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>
80
81 <div v-if="confirmOTP">
82 <div class="setup-otp">
83 <div class="qr-code">
84 <h4>{{ $t('settings.mfa.scan.title') }}</h4>
85 <p>{{ $t('settings.mfa.scan.desc') }}</p>
86 <qrcode
87 :value="otpSettings.provisioning_uri"
88 :options="{ width: 200 }"
89 />
90 <p>
91 {{ $t('settings.mfa.scan.secret_code') }}:
92 {{ otpSettings.key }}
93 </p>
94 </div>
95
96 <div class="verify">
97 <h4>{{ $t('general.verify') }}</h4>
98 <p>{{ $t('settings.mfa.verify.desc') }}</p>
99 <input
100 v-model="otpConfirmToken"
101 type="text"
102 >
103
104 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
105 <input
106 v-model="currentPassword"
107 type="password"
108 >
109 <div class="confirm-otp-actions">
110 <button
111 class="btn btn-default"
112 @click="doConfirmOTP"
113 >
114 {{ $t('settings.mfa.confirm_and_enable') }}
115 </button>
116 <button
117 class="btn btn-default"
118 @click="cancelSetup"
119 >
120 {{ $t('general.cancel') }}
121 </button>
122 </div>
123 <div
124 v-if="error"
125 class="alert error"
126 >
127 {{ error }}
128 </div>
129 </div>
130 </div>
131 </div>
132 </template>
133 </div>
134 </div>
135 </div>
136 </template>
137
138 <script src="./mfa.js"></script>
139 <style lang="scss">
140 @import '../../_variables.scss';
141 .warning {
142 color: $fallback--cOrange;
143 color: var(--cOrange, $fallback--cOrange);
144 }
145 .mfa-settings {
146 .mfa-heading, .method-item {
147 overflow: hidden;
148 display: flex;
149 flex-wrap: wrap;
150 justify-content: space-between;
151 align-items: baseline;
152 }
153
154 .setup-otp {
155 display: flex;
156 justify-content: center;
157 flex-wrap: wrap;
158 .qr-code {
159 flex: 1;
160 padding-right: 10px;
161 }
162 .verify { flex: 1; }
163 .error { margin: 4px 0 0 0; }
164 .confirm-otp-actions {
165 button {
166 width: 15em;
167 margin-top: 5px;
168 }
169
170 }
171 }
172 }
173 </style>