add webauthn (passkey) support

frontend/src/views/LoginView.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import {computed, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {authStore} from "@/stores/auth";
 import router from '../router/index.js'
 import {notify} from "@kyvg/vue3-notification";
@@ -17,6 +17,11 @@ const usernameInvalid = computed(() => username.value === "")
 const passwordInvalid = computed(() => password.value === "")
 const disableLoginBtn = computed(() => username.value === "" || password.value === "" || loggingIn.value)
 
+
+onMounted(async () => {
+  await settings.LoadSettings()
+})
+
 const login = async function () {
   console.log("Performing login for user:", username.value);
   loggingIn.value = true;
@@ -28,7 +33,34 @@ const login = async function () {
           type: 'success',
         });
         loggingIn.value = false;
-        settings.LoadSettings(); // only logs errors, does not throw
+        settings.LoadSettings(); // reload full settings
+        router.push(auth.ReturnUrl);
+      })
+      .catch(error => {
+        notify({
+          title: "Login failed!",
+          text: "Authentication failed!",
+          type: 'error',
+        });
+
+        //loggingIn.value = false;
+        // delay the user from logging in for a short amount of time
+        setTimeout(() => loggingIn.value = false, 1000);
+      });
+}
+
+const loginWebAuthn = async function () {
+  console.log("Performing webauthn login");
+  loggingIn.value = true;
+  auth.LoginWebAuthn()
+      .then(uid => {
+        notify({
+          title: "Logged in",
+          text: "Authentication succeeded!",
+          type: 'success',
+        });
+        loggingIn.value = false;
+        settings.LoadSettings(); // reload full settings
         router.push(auth.ReturnUrl);
       })
       .catch(error => {
@@ -85,17 +117,25 @@ const externalLogin = function (provider) {
                 </div>
               </div>
 
-              <div class="row mt-5 d-flex">
-                <div :class="{'col-lg-4':auth.LoginProviders.length < 3, 'col-lg-12':auth.LoginProviders.length >= 3}" class="d-flex mb-2">
-                  <button :disabled="disableLoginBtn" class="btn btn-primary flex-fill" type="submit" @click.prevent="login">
+              <div class="row mt-5 mb-2">
+                <div class="col-lg-4">
+                  <button :disabled="disableLoginBtn" class="btn btn-primary" type="submit" @click.prevent="login">
                     {{ $t('login.button') }} <div v-if="loggingIn" class="d-inline"><i class="ms-2 fa-solid fa-circle-notch fa-spin"></i></div>
                   </button>
                 </div>
-                <div :class="{'col-lg-8':auth.LoginProviders.length < 3, 'col-lg-12':auth.LoginProviders.length >= 3}" class="d-flex mb-2">
+                <div class="col-lg-8 mb-2 text-end">
+                  <button v-if="settings.Setting('WebAuthnEnabled')" class="btn btn-primary" type="submit" @click.prevent="loginWebAuthn">
+                    {{ $t('login.button-webauthn') }} <div v-if="loggingIn" class="d-inline"><i class="ms-2 fa-solid fa-circle-notch fa-spin"></i></div>
+                  </button>
+                </div>
+              </div>
+
+              <div class="row mt-5 d-flex">
+                <div class="col-lg-12 d-flex mb-2">
                   <!-- OpenIdConnect / OAUTH providers -->
-                    <button v-for="(provider, idx) in auth.LoginProviders" :key="provider.Identifier" :class="{'ms-1':idx > 0}"
-                       :disabled="loggingIn" :title="provider.Name" class="btn btn-outline-primary flex-fill"
-                            v-html="provider.Name" @click.prevent="externalLogin(provider)"></button>
+                  <button v-for="(provider, idx) in auth.LoginProviders" :key="provider.Identifier" :class="{'ms-1':idx > 0}"
+                          :disabled="loggingIn" :title="provider.Name" class="btn btn-outline-primary flex-fill"
+                          v-html="provider.Name" @click.prevent="externalLogin(provider)"></button>
                 </div>
               </div>
 

frontend/src/views/SettingsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from "vue";
+import {onMounted, ref} from "vue";
 import { profileStore } from "@/stores/profile";
 import { settingsStore } from "@/stores/settings";
 import { authStore } from "../stores/auth";
@@ -10,8 +10,30 @@ const auth = authStore()
 
 onMounted(async () => {
   await profile.LoadUser()
+  await auth.LoadWebAuthnCredentials()
 })
 
+const selectedCredential = ref({})
+
+function enableRename(credential) {
+  credential.renameMode = true;
+  credential.tempName = credential.Name; // Store the original name
+}
+
+function cancelRename(credential) {
+  credential.renameMode = false;
+  credential.tempName = null; // Discard changes
+}
+
+async function saveRename(credential) {
+  try {
+    await auth.RenameWebAuthnCredential({ ...credential, Name: credential.tempName });
+    credential.Name = credential.tempName; // Update the name
+    credential.renameMode = false;
+  } catch (error) {
+    console.error("Failed to rename credential:", error);
+  }
+}
 </script>
 
 <template>
@@ -69,4 +91,86 @@ onMounted(async () => {
       </button>
     </div>
   </div>
+
+  <div class="bg-light p-5 mt-5" v-if="settings.Setting('WebAuthnEnabled')">
+    <h2 class="display-7">{{ $t('settings.webauthn.headline') }}</h2>
+    <p class="lead">{{ $t('settings.webauthn.abstract') }}</p>
+    <hr class="my-4">
+    <p v-if="auth.IsWebAuthnEnabled">{{ $t('settings.webauthn.active-description') }}</p>
+    <p v-else>{{ $t('settings.webauthn.inactive-description') }}</p>
+
+    <div class="row">
+      <div class="col-6">
+        <button class="input-group-text btn btn-primary" :title="$t('settings.webauthn.button-register-text')" @click.prevent="auth.RegisterWebAuthn" :disabled="auth.isFetching">
+          <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.webauthn.button-register-title') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="auth.WebAuthnCredentials.length > 0" class="mt-4">
+      <h3>{{ $t('settings.webauthn.credentials-list') }}</h3>
+      <table class="table table-striped">
+        <thead>
+        <tr>
+          <th style="width: 50%">{{ $t('settings.webauthn.table.name') }}</th>
+          <th style="width: 20%">{{ $t('settings.webauthn.table.created') }}</th>
+          <th style="width: 30%">{{ $t('settings.webauthn.table.actions') }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="credential in auth.webAuthnCredentials" :key="credential.ID">
+          <td class="align-middle">
+            <div v-if="credential.renameMode">
+              <input v-model="credential.tempName" class="form-control" type="text" />
+            </div>
+            <div v-else>
+              {{ credential.Name }}
+            </div>
+          </td>
+          <td class="align-middle">
+            {{ credential.CreatedAt }}
+          </td>
+          <td class="align-middle text-center">
+            <div v-if="credential.renameMode">
+              <button class="btn btn-success me-1" :title="$t('settings.webauthn.button-save-text')" @click.prevent="saveRename(credential)" :disabled="auth.isFetching">
+                {{ $t('settings.webauthn.button-save-title') }}
+              </button>
+              <button class="btn btn-secondary" :title="$t('settings.webauthn.button-cancel-text')" @click.prevent="cancelRename(credential)">
+                {{ $t('settings.webauthn.button-cancel-title') }}
+              </button>
+            </div>
+            <div v-else>
+              <button class="btn btn-secondary me-1" :title="$t('settings.webauthn.button-rename-text')" @click.prevent="enableRename(credential)">
+                {{ $t('settings.webauthn.button-rename-title') }}
+              </button>
+              <button class="btn btn-danger" :title="$t('settings.webauthn.button-delete-text')" data-bs-toggle="modal" data-bs-target="#webAuthnDeleteModal" :disabled="auth.isFetching" @click="selectedCredential=credential">
+                {{ $t('settings.webauthn.button-delete-title') }}
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="modal fade" id="webAuthnDeleteModal" tabindex="-1" aria-labelledby="webAuthnDeleteModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header bg-danger text-white">
+            <h5 class="modal-title" id="webAuthnDeleteModalLabel">{{ $t('settings.webauthn.modal-delete.headline') }}</h5>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" :aria-label="$t('settings.webauthn.modal-delete.button-cancel')"></button>
+          </div>
+          <div class="modal-body">
+            <h5 class="mb-3">{{ selectedCredential.Name }} <small class="text-body-secondary">({{ $t('settings.webauthn.modal-delete.created') }} {{ selectedCredential.CreatedAt }})</small></h5>
+            <p class="mb-0">{{ $t('settings.webauthn.modal-delete.abstract') }}</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('settings.webauthn.modal-delete.button-cancel') }}</button>
+            <button type="button" class="btn btn-danger" id="confirmWebAuthnDelete" @click="auth.DeleteWebAuthnCredential(selectedCredential.ID)" :disabled="auth.isFetching" data-bs-dismiss="modal">{{ $t('settings.webauthn.modal-delete.button-delete') }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>