diff options
Diffstat (limited to 'src/components/user_settings/mfa.vue')
| -rw-r--r-- | src/components/user_settings/mfa.vue | 186 |
1 files changed, 119 insertions, 67 deletions
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue index 1f1be60d..14ea10a1 100644 --- a/src/components/user_settings/mfa.vue +++ b/src/components/user_settings/mfa.vue @@ -1,86 +1,138 @@ <template> -<div class="setting-item mfa-settings" v-if="readyInit && settings.available"> - - <div class="mfa-heading"> - <h2>{{$t('settings.mfa.title')}}</h2> - </div> - - <div> - <div class="setting-item" v-if="!setupInProgress"> - <!-- Enabled methods --> - <h3>{{$t('settings.mfa.authentication_methods')}}</h3> - <totp-item :settings="settings" @deactivate="fetchSettings" @activate="activateOTP"/> - <br /> - - <div v-if="settings.enabled"> <!-- backup codes block--> - <recovery-codes :backup-codes="backupCodes" v-if="!confirmNewBackupCodes" /> - <button class="btn btn-default" @click="getBackupCodes" v-if="!confirmNewBackupCodes"> - {{$t('settings.mfa.generate_new_recovery_codes')}} - </button> + <div + v-if="readyInit && settings.available" + class="setting-item mfa-settings" + > + <div class="mfa-heading"> + <h2>{{ $t('settings.mfa.title') }}</h2> + </div> - <div v-if="confirmNewBackupCodes"> - <confirm @confirm="confirmBackupCodes" @cancel="cancelBackupCodes" - :disabled="backupCodes.inProgress"> - <p class="warning">{{$t('settings.mfa.warning_of_generate_new_codes')}}</p> - </confirm> + <div> + <div + v-if="!setupInProgress" + class="setting-item" + > + <!-- Enabled methods --> + <h3>{{ $t('settings.mfa.authentication_methods') }}</h3> + <totp-item + :settings="settings" + @deactivate="fetchSettings" + @activate="activateOTP" + /> + <br> + + <div v-if="settings.enabled"> + <!-- backup codes block--> + <recovery-codes + v-if="!confirmNewBackupCodes" + :backup-codes="backupCodes" + /> + <button + v-if="!confirmNewBackupCodes" + class="btn btn-default" + @click="getBackupCodes" + > + {{ $t('settings.mfa.generate_new_recovery_codes') }} + </button> + + <div v-if="confirmNewBackupCodes"> + <confirm + :disabled="backupCodes.inProgress" + @confirm="confirmBackupCodes" + @cancel="cancelBackupCodes" + > + <p class="warning"> + {{ $t('settings.mfa.warning_of_generate_new_codes') }} + </p> + </confirm> + </div> </div> </div> - </div> - - <div v-if="setupInProgress"> <!-- setup block--> - <h3>{{$t('settings.mfa.setup_otp')}}</h3> + <div v-if="setupInProgress"> + <!-- setup block--> - <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/> + <h3>{{ $t('settings.mfa.setup_otp') }}</h3> + <recovery-codes + v-if="!setupOTPInProgress" + :backup-codes="backupCodes" + /> - <button class="btn btn-default" @click="cancelSetup" v-if="canSetupOTP"> - {{$t('general.cancel')}} - </button> - - <button class="btn btn-default" v-if="canSetupOTP" @click="setupOTP"> - {{$t('settings.mfa.setup_otp')}} - </button> - - <template v-if="setupOTPInProgress"> - <i v-if="prepareOTP">{{$t('settings.mfa.wait_pre_setup_otp')}}</i> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> - <div v-if="confirmOTP"> - <div class="setup-otp"> - <div class="qr-code"> - <h4>{{$t('settings.mfa.scan.title')}}</h4> - <p>{{$t('settings.mfa.scan.desc')}}</p> - <qrcode :value="otpSettings.provisioning_uri" :options="{ width: 200 }"></qrcode> - <p> - {{$t('settings.mfa.scan.secret_code')}}: - {{otpSettings.key}} - </p> - </div> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="setupOTP" + > + {{ $t('settings.mfa.setup_otp') }} + </button> - <div class="verify"> - <h4>{{$t('general.verify')}}</h4> - <p>{{$t('settings.mfa.verify.desc')}}</p> - <input type="text" v-model="otpConfirmToken"> + <template v-if="setupOTPInProgress"> + <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i> + + <div v-if="confirmOTP"> + <div class="setup-otp"> + <div class="qr-code"> + <h4>{{ $t('settings.mfa.scan.title') }}</h4> + <p>{{ $t('settings.mfa.scan.desc') }}</p> + <qrcode + :value="otpSettings.provisioning_uri" + :options="{ width: 200 }" + /> + <p> + {{ $t('settings.mfa.scan.secret_code') }}: + {{ otpSettings.key }} + </p> + </div> - <p>{{$t('settings.enter_current_password_to_confirm')}}:</p> - <input type="password" v-model="currentPassword"> - <div class="confirm-otp-actions"> - <button class="btn btn-default" @click="doConfirmOTP"> - {{$t('settings.mfa.confirm_and_enable')}} - </button> - <button class="btn btn-default" @click="cancelSetup"> - {{$t('general.cancel')}} - </button> + <div class="verify"> + <h4>{{ $t('general.verify') }}</h4> + <p>{{ $t('settings.mfa.verify.desc') }}</p> + <input + v-model="otpConfirmToken" + type="text" + > + + <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p> + <input + v-model="currentPassword" + type="password" + > + <div class="confirm-otp-actions"> + <button + class="btn btn-default" + @click="doConfirmOTP" + > + {{ $t('settings.mfa.confirm_and_enable') }} + </button> + <button + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> + </div> + <div + v-if="error" + class="alert error" + > + {{ error }} + </div> </div> - <div class="alert error" v-if="error">{{error}}</div> </div> </div> - </div> - </template> + </template> + </div> </div> - </div> -</div> </template> <script src="./mfa.js"></script> |