Improved webauthn support

frontend/src/components/account/BackupCodeAuthForm.vue

@@ -11,7 +11,7 @@
           <v-alert type="info" class="mb-2">
             {{
               $gettext(
-                "You already have generated backup codes for this account. If you don't remember them or have used them all, you generate new ones."
+                "You already have generated backup codes for this account. If you don't remember them or have used them all, you can generate new ones."
               )
             }}
           </v-alert>
@@ -22,6 +22,7 @@
               autocomplete="new-password"
               type="password"
               variant="outlined"
+              density="compact"
               :rules="[rules.required]"
               :error-messages="passwordError"
             />

frontend/src/components/account/FidoAuthForm.vue

@@ -12,7 +12,7 @@
             <div tag="p" class="my-4">
               {{
                 $gettext(
-                  "You don't have any WebAuthN registered as a second authentication method."
+                  "You don't have any WebAuthN device registered as a second authentication method."
                 )
               }}
             </div>
@@ -22,7 +22,6 @@
             <v-data-table-virtual
               :headers="headers"
               :items="fidoCreds"
-              height="400"
               item-value="id"
             >
               <template #[`item.added_on`]="{ item }">

frontend/src/components/account/RecoveryCodesResetDialog.vue

@@ -11,11 +11,13 @@
           )
         }}
       </v-alert>
-      <ul>
-        <li v-for="token in tokens" :key="token">
-          {{ token }}
-        </li>
-      </ul>
+      <v-table class="mt-4" density="compact">
+        <tbody>
+          <tr v-for="token in tokens" :key="token">
+            <td>{{ token }}</td>
+          </tr>
+        </tbody>
+      </v-table>
     </v-card-text>
     <v-card-actions>
       <v-spacer></v-spacer>

frontend/src/components/account/TotpAuthForm.vue

@@ -87,6 +87,7 @@
               autocomplete="new-password"
               type="password"
               variant="outlined"
+              density="compact"
               :rules="[rules.required]"
               :error-messages="passwordError"
             />

frontend/src/views/account/SettingsView.vue

@@ -26,8 +26,8 @@
       </v-window-item>
       <v-window-item value="security">
         <TotpAuthForm />
-        <BackupCodeAuthForm />
         <FidoAuthForm />
+        <BackupCodeAuthForm />
       </v-window-item>
       <v-window-item v-if="authStore.userHasMailbox" value="forward">
         <ForwardForm />