support multiple OTP sources

Author: felixevers

package.json

@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"

src/index.css

@@ -7,3 +7,7 @@
         @apply bg-background text-on-background;
     }
 }
+
+*:focus-visible {
+    @apply !outline-none;
+}

src/login/pages/LoginOtp.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Input, FormFieldLayout } from '@helpwave/hightide'
+import { Button, Input, FormFieldLayout, SelectUncontrolled, SelectOption } from '@helpwave/hightide'
 import type { KcContext } from '../KcContext'
 import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
@@ -13,6 +13,7 @@ type LoginOtpProps = {
 export default function LoginOtp({ kcContext }: LoginOtpProps) {
     const { i18n } = useI18n({ kcContext })
     const t = useTranslation()
+
     const [otp, setOtp] = useState('')
 
     const otpError = kcContext.messagesPerField?.existsError('otp')
@@ -21,6 +22,12 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
 
     const message = kcContext.message
 
+    const otpLogin = kcContext.otpLogin
+    const credentials = otpLogin?.userOtpCredentials ?? []
+    const hasMultipleSources = credentials.length > 1
+
+    const [selectedCredentialId, setSelectedCredentialId] = useState(credentials[0]?.id ?? '')
+
     return (
         <Template
             kcContext={kcContext}
@@ -44,7 +51,7 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                                 message.type === 'error'
                                     ? 'var(--hw-color-negative-900)'
                                     : 'var(--hw-color-positive-900)',
-                            marginBottom: '1rem'
+                            marginBottom: '1rem',
                         }}
                     >
                         {message.summary}
@@ -57,11 +64,33 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <FormFieldLayout
-                        label={t('otp')}
-                        invalidDescription={otpError}
-                        required
-                    >
+                    {hasMultipleSources ? (
+                        <>
+                            <input type="hidden" name="selectedCredentialId" value={selectedCredentialId} />
+
+                            <FormFieldLayout label={t('selectAuthenticatorTitle')} required>
+                                {({ id, ariaAttributes }) => (
+                                    <SelectUncontrolled
+                                        id={id}
+                                        value={selectedCredentialId}
+                                        onValueChange={(value) => setSelectedCredentialId(value)}
+                                        onEditComplete={() => { }}
+                                        {...ariaAttributes}
+                                    >
+                                        {credentials.map((c) => (
+                                            <SelectOption key={c.id} value={c.id}>
+                                                {c.userLabel}
+                                            </SelectOption>
+                                        ))}
+                                    </SelectUncontrolled>
+                                )}
+                            </FormFieldLayout>
+                        </>
+                    ) : credentials.length === 1 ? (
+                        <input type="hidden" name="selectedCredentialId" value={credentials[0].id} />
+                    ) : null}
+
+                    <FormFieldLayout label={t('otp')} invalidDescription={otpError} required>
                         {({ id, ariaAttributes }) => (
                             <Input
                                 id={id}
@@ -84,4 +113,5 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
             </PageLayout>
         </Template>
     )
-}
+}
+