Support password-less login with WebAuthn (#5112)

* Support password-less login with WebAuthn

* Fix initial value of usePasswordLessLogin

2 files changed, 21 insertions, 1 deletions

diff --git a/src/client/app/common/views/components/settings/2fa.vue b/src/client/app/common/views/components/settings/2fa.vue
index eb645898e2..813a91b5c0 100644
--- a/src/client/app/common/views/components/settings/2fa.vue
+++ b/src/client/app/common/views/components/settings/2fa.vue
@@ -28,6 +28,10 @@
 				</div>
 			</div>
 
+			<ui-switch v-model="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">
+				{{ $t('use-password-less-login') }}
+			</ui-switch>
+
 			<ui-info warn v-if="registration && registration.error">{{ $t('something-went-wrong') }} {{ registration.error }}</ui-info>
 			<ui-button v-if="!registration || registration.error" @click="addSecurityKey">{{ $t('register') }}</ui-button>
 
@@ -80,6 +84,7 @@ export default Vue.extend({
 		return {
 			data: null,
 			supportsCredentials: !!navigator.credentials,
+			usePasswordLessLogin: this.$store.state.i.usePasswordLessLogin,
 			registration: null,
 			keyName: '',
 			token: null
@@ -113,6 +118,9 @@ export default Vue.extend({
 				this.$root.api('i/2fa/unregister', {
 					password: password
 				}).then(() => {
+					this.usePasswordLessLogin = false;
+					this.updatePasswordLessLogin();
+				}).then(() => {
 					this.$notify(this.$t('unregistered'));
 					this.$store.state.i.twoFactorEnabled = false;
 				});
@@ -158,6 +166,9 @@ export default Vue.extend({
 					password,
 					credentialId: key.id
 				}).then(() => {
+					this.usePasswordLessLogin = false;
+					this.updatePasswordLessLogin();
+				}).then(() => {
 					this.$notify(this.$t('key-unregistered'));
 				});
 			});
@@ -213,6 +224,11 @@ export default Vue.extend({
 					this.registration.stage = -1;
 				});
 			});
+		},
+		updatePasswordLessLogin() {
+			this.$root.api('i/2fa/password-less', {
+				value: !!this.usePasswordLessLogin
+			});
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 8498a1dc3e..f76f989d6d 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -7,7 +7,7 @@
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</ui-input>
-		<ui-input v-model="password" type="password" :with-password-toggle="true" required>
+		<ui-input v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 			<span>{{ $t('password') }}</span>
 			<template #prefix><fa icon="lock"/></template>
 		</ui-input>
@@ -28,6 +28,10 @@
 		</div>
 		<div class="twofa-group totp-group">
 			<p style="margin-bottom:0;">{{ $t('enter-2fa-code') }}</p>
+			<ui-input v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+				<span>{{ $t('password') }}</span>
+				<template #prefix><fa icon="lock"/></template>
+			</ui-input>
 			<ui-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
 				<span>{{ $t('@.2fa') }}</span>
 				<template #prefix><fa icon="gavel"/></template>