update version to 0.1.7

felixevers · felixevers · commit 8c92a11d4e94 · 2026-01-29T00:10:51.000+01:00
diff --git a/locales/de-DE.arb b/locales/de-DE.arb
@@ -184,6 +184,14 @@
   "@email": {
     "description": "Label für E-Mail Eingabefeld"
   },
+  "firstName": "Vorname",
+  "@firstName": {
+    "description": "Label für Vorname Eingabefeld"
+  },
+  "lastName": "Nachname",
+  "@lastName": {
+    "description": "Label für Nachname Eingabefeld"
+  },
   "oauthGrantTitle": "Zugriff gewähren",
   "@oauthGrantTitle": {
     "description": "OAuth-Gewährung Titel"
diff --git a/locales/en-US.arb b/locales/en-US.arb
@@ -184,6 +184,14 @@
   "@email": {
     "description": "Label for email input field"
   },
+  "firstName": "First name",
+  "@firstName": {
+    "description": "Label for first name input field"
+  },
+  "lastName": "Last name",
+  "@lastName": {
+    "description": "Label for last name input field"
+  },
   "oauthGrantTitle": "Grant Access",
   "@oauthGrantTitle": {
     "description": "OAuth grant title"
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -42,13 +42,15 @@ export type HelpwaveIdTranslationEntries = {
   'errorInvalidUsername': string,
   'errorInvalidUsernameOrPassword': string,
   'errorPasswordMismatch': string,
+  'firstName': string,
   'forgotPassword': string,
   'frontchannelLogoutMessage': string,
   'helpwaveId': string,
   'identity-provider-redirector': string,
   'idpLinkConfirmMessage': string,
   'idpLinkConfirmOverrideMessage': string,
   'imprint': string,
+  'lastName': string,
   'linkIdpMessage': string,
   'loginOtp': string,
   'loginTotpOneTime': string,
@@ -120,13 +122,15 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'errorInvalidUsername': `Ungültiger Benutzername`,
     'errorInvalidUsernameOrPassword': `Ungültiger Benutzername oder Passwort`,
     'errorPasswordMismatch': `Passwörter stimmen nicht überein`,
+    'firstName': `Vorname`,
     'forgotPassword': `Passwort vergessen?`,
     'frontchannelLogoutMessage': `Abmelden...`,
     'helpwaveId': `helpwave id`,
     'identity-provider-redirector': `Oder anmelden mit`,
     'idpLinkConfirmMessage': `Möchten Sie diesen Identitätsanbieter mit Ihrem Konto verknüpfen?`,
     'idpLinkConfirmOverrideMessage': `Dieser Identitätsanbieter ist bereits mit einem anderen Konto verknüpft. Möchten Sie dies überschreiben?`,
     'imprint': `Impressum`,
+    'lastName': `Nachname`,
     'linkIdpMessage': `Identitätsanbieter verknüpfen...`,
     'loginOtp': `Bestätigungscode`,
     'loginTotpOneTime': `Einmalcode`,
@@ -201,13 +205,15 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'errorInvalidUsername': `Invalid username`,
     'errorInvalidUsernameOrPassword': `Invalid username or password`,
     'errorPasswordMismatch': `Passwords do not match`,
+    'firstName': `First name`,
     'forgotPassword': `Forgot Password?`,
     'frontchannelLogoutMessage': `Logging out...`,
     'helpwaveId': `helpwave id`,
     'identity-provider-redirector': `Or sign in with`,
     'idpLinkConfirmMessage': `Do you want to link this identity provider to your account?`,
     'idpLinkConfirmOverrideMessage': `This identity provider is already linked to another account. Do you want to override it?`,
     'imprint': `Imprint`,
+    'lastName': `Last name`,
     'linkIdpMessage': `Linking identity provider...`,
     'loginOtp': `Verification Code`,
     'loginTotpOneTime': `One-time code`,
diff --git a/src/login/components/Branding.tsx b/src/login/components/Branding.tsx
@@ -2,7 +2,7 @@ import { HelpwaveLogo } from '@helpwave/hightide'
 
 export function Branding() {
     return (
-        <div className="flex flex-col items-center gap-4 mb-8 sm:gap-3 sm:mb-6">
+        <div className="flex flex-col items-center gap-4 mb-8 sm:gap-3 sm:mb-4">
             <HelpwaveLogo height={64} width={64} />
             <div className="font-space text-2xl font-bold tracking-[-0.5px] sm:text-xl">
                 helpwave id
diff --git a/src/login/pages/Code.tsx b/src/login/pages/Code.tsx
@@ -56,7 +56,7 @@ export default function Code({ kcContext }: CodeProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('loginOtp') || t('otp')}
                             invalidDescription={translateError(codeError)}
diff --git a/src/login/pages/ForgotPassword.tsx b/src/login/pages/ForgotPassword.tsx
@@ -64,7 +64,7 @@ export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t(
                                 kcContext.realm?.loginWithEmailAllowed
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
@@ -43,7 +43,7 @@ export default function IdpReviewUserProfile({ kcContext }: IdpReviewUserProfile
         const inputType = fieldType === 'email' ? 'email' : 'text'
 
         return (
-            <div key={attrName} className="mb-6">
+            <div key={attrName} className="mb-4">
                 <FormFieldLayout
                     label={attr.displayName ?? attrName}
                     invalidDescription={translateError(getFieldError(attrName))}
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
@@ -77,7 +77,7 @@ export default function Login({ kcContext }: LoginProps) {
                     }}
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t(
                                 kcContext.realm?.loginWithEmailAllowed
@@ -104,7 +104,7 @@ export default function Login({ kcContext }: LoginProps) {
                         </FormFieldLayout>
                     </div>
 
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('password')}
                             invalidDescription={translateError(passwordError)}
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
@@ -67,7 +67,7 @@ export default function LoginConfigTotp({ kcContext }: LoginConfigTotpProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('loginTotpOneTime')}
                             invalidDescription={translateError(totpError)}
diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx
@@ -58,7 +58,7 @@ export default function LoginIdpLinkEmail({ kcContext }: LoginIdpLinkEmailProps)
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('email')}
                             invalidDescription={translateError(emailError)}
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
@@ -70,7 +70,7 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                         <>
                             <input type="hidden" name="selectedCredentialId" value={selectedCredentialId} />
 
-                            <div className="mb-6">
+                            <div className="mb-4">
                                 <FormFieldLayout label={t('selectAuthenticatorTitle')} required>
                                     {({ id, ariaAttributes }) => (
                                         <SelectUncontrolled
@@ -94,7 +94,7 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                         <input type="hidden" name="selectedCredentialId" value={credentials[0].id} />
                     ) : null}
 
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout label={t('otp')} invalidDescription={translateError(otpError)} required>
                             {({ id, ariaAttributes }) => (
                                 <Input
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
@@ -58,7 +58,7 @@ export default function LoginPassword({ kcContext }: LoginPasswordProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('password')}
                             invalidDescription={translateError(passwordError)}
diff --git a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
@@ -62,7 +62,7 @@ export default function LoginRecoveryAuthnCodeConfig({ kcContext }: LoginRecover
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('recoveryCode')}
                             invalidDescription={translateError(recoveryCodeError)}
diff --git a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
@@ -58,7 +58,7 @@ export default function LoginRecoveryAuthnCodeInput({ kcContext }: LoginRecovery
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('recoveryCode')}
                             invalidDescription={translateError(recoveryCodeError)}
diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx
@@ -64,7 +64,7 @@ export default function LoginUpdatePassword({ kcContext }: LoginUpdatePasswordPr
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('passwordNew')}
                             invalidDescription={translateError(passwordError)}
@@ -86,7 +86,7 @@ export default function LoginUpdatePassword({ kcContext }: LoginUpdatePasswordPr
                         </FormFieldLayout>
                     </div>
 
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('passwordConfirm')}
                             invalidDescription={translateError(passwordConfirmError)}
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
@@ -43,7 +43,7 @@ export default function LoginUpdateProfile({ kcContext }: LoginUpdateProfileProp
         const inputType = fieldType === 'email' ? 'email' : 'text'
 
         return (
-            <div key={attrName} className="mb-6">
+            <div key={attrName} className="mb-4">
                 <FormFieldLayout
                     label={attr.displayName ?? attrName}
                     invalidDescription={translateError(getFieldError(attrName))}
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
@@ -58,7 +58,7 @@ export default function LoginUsername({ kcContext }: LoginUsernameProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t(
                                 kcContext.realm?.loginWithEmailAllowed
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
@@ -6,6 +6,7 @@ import Template from 'keycloakify/login/Template'
 import { PageLayout } from '../components/PageLayout'
 import { ArrowLeft } from 'lucide-react'
 import { useTranslation } from '../../i18n/useTranslation'
+import type { HelpwaveIdTranslationEntries } from '../../i18n/translations'
 import { useTranslatedFieldError } from '../utils/translateFieldError'
 
 type RegisterProps = {
@@ -25,8 +26,24 @@ export default function Register({ kcContext }: RegisterProps) {
         Object.values(attributes).forEach((attr) => {
             initial[attr.name] = attr.value ?? ''
         })
+        if (!('password' in initial)) initial['password'] = ''
+        if (!('password-confirm' in initial)) initial['password-confirm'] = ''
         return initial
     })
+    const [termsAccepted, setTermsAccepted] = useState(false)
+
+    const getFieldLabel = (attrName: string, displayName: string | undefined): string => {
+        const keyMap: Record<string, keyof HelpwaveIdTranslationEntries> = {
+            'username': 'username',
+            'email': 'email',
+            'firstName': 'firstName',
+            'lastName': 'lastName',
+            'password': 'password',
+            'password-confirm': 'passwordConfirm',
+        }
+        const key = keyMap[attrName]
+        return key ? t(key) : (displayName ?? attrName)
+    }
 
     const message = kcContext.message
 
@@ -45,9 +62,9 @@ export default function Register({ kcContext }: RegisterProps) {
         const inputType = isPassword ? 'password' : fieldType === 'email' ? 'email' : 'text'
 
         return (
-            <div key={attrName} className="mb-6">
+            <div key={attrName} className="mb-4">
                 <FormFieldLayout
-                    label={attr.displayName ?? attrName}
+                    label={getFieldLabel(attrName, attr.displayName)}
                     invalidDescription={translateError(getFieldError(attrName))}
                     required={attr.required}
                 >
@@ -111,26 +128,76 @@ export default function Register({ kcContext }: RegisterProps) {
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
                     {Object.keys(attributes).map((attrName) => {
-                        if (attrName === 'password-confirm') return null
+                        if (attrName === 'password' || attrName === 'password-confirm') return null
                         return renderField(attrName)
                     })}
 
-                    {attributes['password-confirm'] && renderField('password-confirm')}
+                    {attributes['password'] ? renderField('password') : (
+                        <div className="mb-4">
+                            <FormFieldLayout
+                                label={t('password')}
+                                invalidDescription={translateError(getFieldError('password'))}
+                                required
+                            >
+                                {({ id, ariaAttributes }) => (
+                                    <Input
+                                        id={id}
+                                        name="password"
+                                        type="password"
+                                        value={formData['password'] ?? ''}
+                                        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                        autoComplete="new-password"
+                                        required
+                                        {...ariaAttributes}
+                                    />
+                                )}
+                            </FormFieldLayout>
+                        </div>
+                    )}
+
+                    {attributes['password-confirm'] ? renderField('password-confirm') : (
+                        <div className="mb-4">
+                            <FormFieldLayout
+                                label={t('passwordConfirm')}
+                                invalidDescription={translateError(getFieldError('password-confirm'))}
+                                required
+                            >
+                                {({ id, ariaAttributes }) => (
+                                    <Input
+                                        id={id}
+                                        name="password-confirm"
+                                        type="password"
+                                        value={formData['password-confirm'] ?? ''}
+                                        onChange={(e) => setFormData({ ...formData, 'password-confirm': e.target.value })}
+                                        autoComplete="new-password"
+                                        required
+                                        {...ariaAttributes}
+                                    />
+                                )}
+                            </FormFieldLayout>
+                        </div>
+                    )}
 
                     {kcContext.termsAcceptanceRequired && (
                         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                             <CheckboxUncontrolled
-                                value={false}
-                                onValueChange={() => {}}
+                                value={termsAccepted}
+                                onValueChange={(value) => setTermsAccepted(value)}
                                 onEditComplete={() => {}}
                                 size="md"
                             />
-                            <label>
+                            <label
+                                onClick={() => setTermsAccepted(!termsAccepted)}
+                                onKeyDown={(e) => e.key === 'Enter' && setTermsAccepted((prev) => !prev)}
+                                style={{ cursor: 'pointer', userSelect: 'none' }}
+                                role="button"
+                                tabIndex={0}
+                            >
                                 <a href={(() => {
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     const url = kcContext.url as any
                                     return url.termsUrl ?? kcContext.url.loginUrl.replace('/login', '/terms')
-                                })()} target="_blank" rel="noopener noreferrer">
+                                })()} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                                     {t('acceptTerms')}
                                 </a>
                             </label>
diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx
@@ -49,7 +49,15 @@ export default function Terms({ kcContext }: TermsProps) {
                                 onEditComplete={() => {}}
                                 size="md"
                             />
-                            <label>{t('acceptTerms')}</label>
+                            <label
+                                onClick={() => setAccepted(!accepted)}
+                                onKeyDown={(e) => e.key === 'Enter' && setAccepted((prev) => !prev)}
+                                style={{ cursor: 'pointer', userSelect: 'none' }}
+                                role="button"
+                                tabIndex={0}
+                            >
+                                {t('acceptTerms')}
+                            </label>
                         </div>
 
                         <Button type="submit" color="primary" disabled={!accepted}>
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
@@ -58,7 +58,7 @@ export default function UpdateEmail({ kcContext }: UpdateEmailProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
-                    <div className="mb-6">
+                    <div className="mb-4">
                         <FormFieldLayout
                             label={t('email')}
                             invalidDescription={translateError(emailError)}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "id.helpwave.de",`
`3`		`- "version": "0.1.6",`
	`3`	`+ "version": "0.1.7",`
`4`	`4`	`"repository": {`
`5`	`5`	`"type": "git",`
`6`	`6`	`"url": "git://github.com/helpwave/id.helpwave.de.git"`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ export default function Code({ kcContext }: CodeProps) {`
`56`	`56`	`method="post"`
`57`	`57`	`style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}`
`58`	`58`	`>`
`59`		`- <div className="mb-6">`
	`59`	`+ <div className="mb-4">`
`60`	`60`	`<FormFieldLayout`
`61`	`61`	`label={t('loginOtp') \|\| t('otp')}`
`62`	`62`	`invalidDescription={translateError(codeError)}`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {`
`64`	`64`	`method="post"`
`65`	`65`	`style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}`
`66`	`66`	`>`
`67`		`- <div className="mb-6">`
	`67`	`+ <div className="mb-4">`
`68`	`68`	`<FormFieldLayout`
`69`	`69`	`label={t(`
`70`	`70`	`kcContext.realm?.loginWithEmailAllowed`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ export default function LoginConfigTotp({ kcContext }: LoginConfigTotpProps) {`
`67`	`67`	`method="post"`
`68`	`68`	`style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}`
`69`	`69`	`>`
`70`		`- <div className="mb-6">`
	`70`	`+ <div className="mb-4">`
`71`	`71`	`<FormFieldLayout`
`72`	`72`	`label={t('loginTotpOneTime')}`
`73`	`73`	`invalidDescription={translateError(totpError)}`