From 884735b9feac4cab3c4bfb4ef88aec9518b0e6c9 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Tue, 11 Jan 2022 15:39:44 +0100
Subject: [PATCH] Added recovery codes reset dialog for 2FA.

---
 frontend/src/api/account.js                   |   3 +
 .../user/RecoveryCodesResetDialog.vue         |  45 +++++
 .../src/components/user/TwoFactorAuthForm.vue | 179 ++++++++++--------
 3 files changed, 150 insertions(+), 77 deletions(-)
 create mode 100644 frontend/src/components/user/RecoveryCodesResetDialog.vue

diff --git a/frontend/src/api/account.js b/frontend/src/api/account.js
index fd56250e5..c4a1289e8 100644
--- a/frontend/src/api/account.js
+++ b/frontend/src/api/account.js
@@ -25,5 +25,8 @@ export default {
   },
   disableTFA () {
     return repository.post(`${resource}/tfa/disable/`)
+  },
+  resetRecoveryCodes () {
+    return repository.post(`${resource}/tfa/reset_codes/`)
   }
 }
diff --git a/frontend/src/components/user/RecoveryCodesResetDialog.vue b/frontend/src/components/user/RecoveryCodesResetDialog.vue
new file mode 100644
index 000000000..3a84e4d01
--- /dev/null
+++ b/frontend/src/components/user/RecoveryCodesResetDialog.vue
@@ -0,0 +1,45 @@
+<template>
+<v-card>
+  <v-card-title>
+    <span class="headline"><translate>New recovery codes</translate></span>
+  </v-card-title>
+  <v-card-text>
+    <v-alert type="info">
+      <translate>
+        The following recovery codes can be used one time each to let
+        you regain access to your account, in case you lose your phone
+        for example. Make sure to save them in a safe place, otherwise
+        you won't be able to access your account anymore.
+      </translate>
+    </v-alert>
+    <ul>
+      <li v-for="token in tokens" :key="token">
+        {{ token }}
+      </li>
+    </ul>
+  </v-card-text>
+  <v-card-actions>
+    <v-spacer></v-spacer>
+    <v-btn
+      color="grey darken-1"
+      text
+      @click="close"
+      >
+      <translate>Close</translate>
+    </v-btn>
+  </v-card-actions>
+</v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    tokens: Array
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
diff --git a/frontend/src/components/user/TwoFactorAuthForm.vue b/frontend/src/components/user/TwoFactorAuthForm.vue
index 1038bd0fd..025b6c19c 100644
--- a/frontend/src/components/user/TwoFactorAuthForm.vue
+++ b/frontend/src/components/user/TwoFactorAuthForm.vue
@@ -1,96 +1,114 @@
 <template>
-<v-card>
-  <v-card-title>
-    <span class="text-subtitle-1"><translate>Two factor authentication</translate></span>
-  </v-card-title>
-  <v-card-text>
-    <template v-if="qrCode">
-      <v-row>
-        <v-col cols="4">
-          <div v-html="qrCode"></div>
-        </v-col>
-        <v-col cols="6">
-          <v-alert color="grey lighten-2">
-            <translate>
-              Install a soft token authenticator like FreeOTP or Google
-              Authenticator from your application repository and use that
-              app to scan this QR code.
-            </translate>
-          </v-alert>
-          <label class="m-label"><translate>Pin code</translate></label>
-          <validation-observer ref="observer">
-            <validation-provider
-              v-slot="{ errors }"
-              rules="required"
-              >
-              <v-text-field
-                v-model="pinCode"
-                outlined
-                :error-messages="errors"
-                />
-            </validation-provider>
-          </validation-observer>
-          <v-btn color="primary" @click="finalizeTFASetup">
-            <translate>Register</translate>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </template>
-    <template v-else-if="tokens.length">
-      <v-alert color="success">
-        <translate>
-          Congratulations! Two-Factor Authentication is now enabled for your account.
+<div>
+  <v-card>
+    <v-card-title>
+      <span class="text-subtitle-1"><translate>Two factor authentication</translate></span>
+    </v-card-title>
+    <v-card-text>
+      <template v-if="qrCode">
+        <v-row>
+          <v-col cols="4">
+            <div v-html="qrCode"></div>
+          </v-col>
+          <v-col cols="6">
+            <v-alert type="info">
+              <translate>
+                Install a soft token authenticator like FreeOTP or Google
+                Authenticator from your application repository and use that
+                app to scan this QR code.
+              </translate>
+            </v-alert>
+            <label class="m-label"><translate>Pin code</translate></label>
+            <validation-observer ref="observer">
+              <validation-provider
+                v-slot="{ errors }"
+                rules="required"
+                >
+                <v-text-field
+                  v-model="pinCode"
+                  outlined
+                  :error-messages="errors"
+                  />
+              </validation-provider>
+            </validation-observer>
+            <v-btn color="primary" @click="finalizeTFASetup">
+              <translate>Register</translate>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </template>
+      <template v-else-if="tokens.length">
+        <v-alert type="success">
+          <translate>
+            Congratulations! Two-Factor Authentication is now enabled for your account.
+          </translate>
+        </v-alert>
+        <p>
+          <translate>
+            The following recovery codes can be used one time each to
+            let you regain access to your account, in case you lose your
+            phone for example. Make sure to save them in a safe place,
+            otherwise you won't be able to access your account anymore.
+          </translate>
+        </p>
+        <ul>
+          <li v-for="token in tokens" :key="token">
+            {{ token }}
+          </li>
+        </ul>
+      </template>
+      <template v-else-if="account.tfa_enabled">
+        <v-alert type="info">
+          Two-Factor Authentication is enabled for your account.
+        </v-alert>
+        <v-btn color="error" @click="disableTFA" class="mr-2">
+          <translate>Disable 2FA</translate>
+        </v-btn>
+        <v-btn @click="resetRecoveryCodes">
+          <translate>Reset recovery codes</translate>
+        </v-btn>
+      </template>
+      <template v-else>
+        <translate tag="p" class="my-4">
+          Two-Factor Authentication (2FA) is not yet activated for your account. Enabling this feature will increase your account's security.
         </translate>
-      </v-alert>
-      <p>
-        <translate>
-          The following recovery codes can be used one time each to
-          let you regain access to your account, in case you lose your
-          phone for example. Make sure to save them in a safe place,
-          otherwise you won't be able to access your account anymore.
-        </translate>
-      </p>
-      <ul>
-        <li v-for="token in tokens" :key="token">
-          {{ token }}
-        </li>
-      </ul>
-    </template>
-    <template v-else-if="account.tfa_enabled">
-      <v-alert color="grey lighten-2">
-        Two-Factor Authentication is enabled for your account.
-      </v-alert>
-      <v-btn color="error" @click="disableTFA" class="mr-2">
-        <translate>Disable 2FA</translate>
-      </v-btn>
-      <v-btn @click="resetRecoveryCodes">
-        <translate>Reset recovery codes</translate>
-      </v-btn>
-    </template>
-    <template v-else>
-      <translate tag="p" class="my-4">
-        Two-Factor Authentication (2FA) is not yet activated for your account. Enabling this feature will increase your account's security.
-      </translate>
-      <v-btn color="success" @click="startTFASetup">
+        <v-btn color="success" @click="startTFASetup">
         <translate>Enable 2FA</translate>
-      </v-btn>
-    </template>
-  </v-card-text>
-</v-card>
+        </v-btn>
+      </template>
+    </v-card-text>
+  </v-card>
+  <v-dialog
+    v-model="showCodesResetDialog"
+    max-width="800px"
+    persistent
+    >
+    <recovery-codes-reset-dialog
+      :tokens="newTokens"
+      @close="closeRecoveryCodesResetDialog"
+      />
+  </v-dialog>
+</div>
 </template>
 
 <script>
 import account from '@/api/account'
 import Cookies from 'js-cookie'
+import RecoveryCodesResetDialog from './RecoveryCodesResetDialog'
 
 export default {
+  components: {
+    RecoveryCodesResetDialog
+  },
   props: {
     account: Object
   },
   data () {
     return {
+      newTokens: [],
       pinCode: null,
       qrCode: null,
+      showCodesResetDialog: false,
       tokens: []
     }
   },
@@ -123,7 +141,14 @@ export default {
       })
     },
     resetRecoveryCodes () {
-
+      account.resetRecoveryCodes().then(resp => {
+        this.newTokens = resp.data.tokens
+        this.showCodesResetDialog = true
+      })
+    },
+    closeRecoveryCodesResetDialog () {
+      this.newTokens = []
+      this.showCodesResetDialog = false
     }
   },
   created () {