1 files changed, 121 insertions, 0 deletions
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
new file mode 100644
index 00000000..ded426dd
--- /dev/null
+++ b/src/components/user_settings/mfa.vue
@@ -0,0 +1,121 @@
+<template>
+<div class="setting-item mfa-settings" v-if="readyInit">
+
+  <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="confirmNewBackupCodes">
+          <confirm @confirm="confirmBackupCodes" @cancel="cancelBackupCodes"
+                   :disabled="backupCodes.inProgress">
+            <p class="warning">{{$t('settings.mfa.warning_of_generate_new_codes')}}</p>
+          </confirm>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="setupInProgress"> <!-- setup block-->
+
+      <h3>{{$t('settings.mfa.setup_otp')}}</h3>
+
+      <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/>
+
+
+      <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>
+
+        <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>
+
+            <div class="verify">
+              <h4>{{$t('general.verify')}}</h4>
+              <p>{{$t('settings.mfa.verify.desc')}}</p>
+              <input type="text" v-model="otpConfirmToken">
+
+              <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>
+              <div class="alert error" v-if="error">{{error}}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</div>
+</template>
+
+<script src="./mfa.js"></script>
+<style lang="scss">
+@import '../../_variables.scss';
+.warning {
+  color: $fallback--cOrange;
+  color: var(--cOrange, $fallback--cOrange);
+}
+.mfa-settings {
+  .mfa-heading, .method-item {
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .setup-otp {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    .qr-code {
+      flex: 1;
+      padding-right: 10px;
+    }
+    .verify { flex: 1; }
+    .error { margin: 4px 0 0 0; }
+    .confirm-otp-actions {
+      button {
+        width: 15em;
+        margin-top: 5px;
+      }
+
+    }
+  }
+}
+</style>