From 9ce155570d4de8ed28eb1db5bebd01c8bdcf168f Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Wed, 19 Jun 2024 10:23:02 +0200
Subject: [PATCH] feat(ux): :sparkles: allow user to deactivate passkey for
 login

---
 .vscode/settings.json |  2 +-
 islands/LoginForm.tsx | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 80257b1..98d42be 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -28,7 +28,7 @@
 	],
 	"cssvar.enable": true,
 	"cssvar.files": ["./_fresh/*"],
-	"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api"],
+	"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api", "ux"],
 	"[ignore]": {
 		"editor.defaultFormatter": "foxundermoon.shell-format"
 	}
diff --git a/islands/LoginForm.tsx b/islands/LoginForm.tsx
index 207b104..f1ec6a2 100644
--- a/islands/LoginForm.tsx
+++ b/islands/LoginForm.tsx
@@ -9,7 +9,12 @@ import { requestApi } from '../src/utils.ts'
 
 export default function LoginForm() {
 	return (
-		<form onSubmit={connect} method='POST' action=''>
+		<form
+			onSubmit={connect}
+			method='POST'
+			action=''
+			className='island__login_form__form'
+		>
 			<Input
 				label='Email'
 				name='email'
@@ -17,13 +22,20 @@ export default function LoginForm() {
 				type='email'
 				required
 			/>
-			<Button label='Connection' variant='primary'>Connection</Button>
+			<Input
+				label='Utiliser une Passkey'
+				name='passkey'
+				type='checkbox'
+				checked
+			/>
+			<Button label='Me connecter' variant='primary'>Me connecter</Button>
 		</form>
 	)
 }
 
 type LoginFormFields = {
 	email: string
+	passkey: boolean
 }
 
 async function connect(event: Event) {
@@ -33,6 +45,11 @@ async function connect(event: Event) {
 	const fields = formJSON<LoginFormFields>(form)
 
 	try {
+		// User disable passkey
+		if (!fields.passkey) {
+			throw new Error('User refused passkey')
+		}
+
 		// Try PassKey connection
 		if (!isWebAuthnSupported()) {
 			throw new Error('WebAuthn is not supported by your browser')
@@ -77,7 +94,7 @@ async function webAuthnLogin(fields: LoginFormFields) {
 	const verification = await requestApi<
 		WebAuthnLoginFinishPayload,
 		{ verified: boolean }
-	>('webauthn/login/finish', 'POST', { ...fields, authentication })
+	>('webauthn/login/finish', 'POST', authentication)
 
 	// Show UI appropriate for the `verified` status
 	if (verification.verified) {