refactor: remove univoq components until jsr-io/jsr#24

components/Button.tsx

@@ -0,0 +1,9 @@
+import { JSX } from 'preact'
+
+export function Button(
+	{ variant, ...props }:
+		& { variant: 'primary' | 'secondary' | 'tertiary' }
+		& JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+) {
+	return <button class={`button button-${variant}`} {...props}></button>
+}

components/Input.tsx

@@ -0,0 +1,42 @@
+import { useSignal, useSignalEffect } from '@preact/signals'
+import { JSX } from 'preact'
+
+export function Input(
+	{ label, name, ...props }:
+		& { label: string; name: string }
+		& JSX.InputHTMLAttributes<HTMLInputElement>,
+) {
+	if (props.type === 'password') {
+		const password = useSignal('')
+		const hash = useSignal('')
+		const salt = crypto.randomUUID()
+
+		useSignalEffect(() => {
+			crypto.subtle.digest(
+				'SHA-256',
+				new TextEncoder().encode(salt + password.value),
+			).then((digest) => hash.value = new TextDecoder().decode(digest))
+		})
+
+		return (
+			<label>
+				<span>{label}</span>
+				<input
+					{...props}
+					spellcheck={false}
+					onInput={(event) =>
+						password.value = (event.target as HTMLInputElement).value}
+				/>
+				<input type='text' hidden value={hash} name={name} />
+				<input type='text' hidden value={salt} name={`${name}_salt`} />
+			</label>
+		)
+	}
+
+	return (
+		<label>
+			<span>{label}</span>
+			<input {...props} name={name} />
+		</label>
+	)
+}

deno.json

@@ -48,8 +48,6 @@
 		"@std/json": "jsr:@std/json@^1.0.1",
 		"@std/streams": "jsr:@std/streams@^0.224.5",
 		"preact": "npm:preact@^10.24.2",
-		"@univoq/": "https://deno.land/x/univoq@0.2.0/",
-		"univoq": "https://deno.land/x/univoq@0.2.0/mod.ts",
 		"web-push": "npm:web-push@^3.6.7"
 	},
 	"compilerOptions": {

islands/LoginForm.tsx

@@ -1,11 +1,12 @@
 import { requestApi } from ':src/utils.ts'
 import { startAuthentication } from '@simplewebauthn/browser'
 import { PublicKeyCredentialRequestOptionsJSON } from '@simplewebauthn/types'
-import { Button, Input } from 'univoq'
 import type {
 	WebAuthnLoginFinishPayload,
 	WebAuthnLoginStartPayload,
 } from '../routes/api/webauthn/login/[step].ts'
+import { Button } from ':components/Button.tsx'
+import { Input } from ':components/Input.tsx'
 
 export default function LoginForm() {
 	return (
@@ -28,7 +29,7 @@ export default function LoginForm() {
 				type='checkbox'
 				checked
 			/>
-			<Button label='Me connecter' variant='primary'>Me connecter</Button>
+			<Button variant='primary'>Me connecter</Button>
 		</form>
 	)
 }

islands/PassKeyRegister.tsx

@@ -1,11 +1,12 @@
 import { requestApi } from ':src/utils.ts'
 import { startRegistration } from '@simplewebauthn/browser'
 import { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'
-import { Button, Input } from 'univoq'
 import type {
 	WebAuthnRegisterFinishPayload,
 	WebAuthnRegisterStartPayload,
 } from '../routes/api/webauthn/register/[step].ts'
+import { Button } from ':components/Button.tsx'
+import { Input } from ':components/Input.tsx'
 
 function isWebAuthnSupported(): boolean {
 	return 'credentials' in navigator
@@ -16,7 +17,6 @@ function RegisterForm({ disabled }: { disabled?: boolean }) {
 		<form onSubmit={register} method='POST' action=''>
 			<Input label='Nom de la clé' name='name' required></Input>
 			<Button
-				label='Enregistrer une PassKey'
 				variant='primary'
 				disabled={disabled}
 			>

islands/Suspens.tsx

@@ -1,4 +1,3 @@
-// import { Suspense } from '@univoq // Error - mismatch in imports version
 import { JSX } from 'preact'
 import { useSignal } from '@preact/signals'
 

routes/profil/index.tsx

@@ -2,7 +2,7 @@ import LoginForm from ':islands/LoginForm.tsx'
 import PassKeyRegister from ':islands/PassKeyRegister.tsx'
 import type { SessionPageProps } from ':src/session/mod.ts'
 import type { User } from '@cohabit/resources-manager/models'
-import { Button } from 'univoq'
+import { Button } from ':components/Button.tsx'
 
 export default function Profil({ state }: SessionPageProps) {
 	const user = state.session?.get<User>('user')
@@ -16,7 +16,7 @@ export default function Profil({ state }: SessionPageProps) {
 				</section>
 				<div>
 					<PassKeyRegister />
-					<Button label='Disconnect' variant='primary'>
+					<Button variant='primary'>
 						Disconnect
 					</Button>
 				</div>