From de787899de1126b97fff1375ea957d5c6861c12a Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Thu, 21 Nov 2024 16:31:51 +0100 Subject: [PATCH] auth method change --- apps/login/locales/de.json | 4 + apps/login/locales/en.json | 4 + apps/login/locales/es.json | 4 + apps/login/locales/it.json | 4 + .../authentication-method-radio.tsx | 109 ++++++++---------- apps/login/src/components/register-form.tsx | 5 +- 6 files changed, 68 insertions(+), 62 deletions(-) diff --git a/apps/login/locales/de.json b/apps/login/locales/de.json index 62691051a95..4d5f0c1530d 100644 --- a/apps/login/locales/de.json +++ b/apps/login/locales/de.json @@ -122,6 +122,10 @@ } }, "register": { + "methods": { + "passkey": "Passkey", + "password": "Password" + }, "disabled": { "title": "Registrierung deaktiviert", "description": "Die Registrierung ist deaktiviert. Bitte wenden Sie sich an den Administrator." diff --git a/apps/login/locales/en.json b/apps/login/locales/en.json index 68fa95e8102..c7fd5e30b9a 100644 --- a/apps/login/locales/en.json +++ b/apps/login/locales/en.json @@ -122,6 +122,10 @@ } }, "register": { + "methods": { + "passkey": "Passkey", + "password": "Password" + }, "disabled": { "title": "Registration disabled", "description": "The registration is disabled. Please contact your administrator." diff --git a/apps/login/locales/es.json b/apps/login/locales/es.json index 4b658bbdd06..e722db5812c 100644 --- a/apps/login/locales/es.json +++ b/apps/login/locales/es.json @@ -122,6 +122,10 @@ } }, "register": { + "methods": { + "passkey": "Clave de acceso", + "password": "Contraseña" + }, "disabled": { "title": "Registro deshabilitado", "description": "Registrarse está deshabilitado en este momento." diff --git a/apps/login/locales/it.json b/apps/login/locales/it.json index 2e6a7686b25..9467f0ba840 100644 --- a/apps/login/locales/it.json +++ b/apps/login/locales/it.json @@ -122,6 +122,10 @@ } }, "register": { + "methods": { + "passkey": "Passkey", + "password": "Password" + }, "disabled": { "title": "Registration disabled", "description": "Registrazione disabilitata. Contatta l'amministratore di sistema per assistenza." diff --git a/apps/login/src/components/authentication-method-radio.tsx b/apps/login/src/components/authentication-method-radio.tsx index 9e0af959215..1b2af2d167f 100644 --- a/apps/login/src/components/authentication-method-radio.tsx +++ b/apps/login/src/components/authentication-method-radio.tsx @@ -1,16 +1,16 @@ "use client"; import { RadioGroup } from "@headlessui/react"; +import { useTranslations } from "next-intl"; + +export enum AuthenticationMethod { + Passkey = "passkey", + Password = "password", +} export const methods = [ - { - name: "Passkeys", - description: "Authenticate with your device.", - }, - { - name: "Password", - description: "Authenticate with a password", - }, + AuthenticationMethod.Passkey, + AuthenticationMethod.Password, ]; export function AuthenticationMethodRadio({ @@ -20,58 +20,68 @@ export function AuthenticationMethodRadio({ selected: any; selectionChanged: (value: any) => void; }) { + const t = useTranslations("register"); + return (
Server size -
+
{methods.map((method) => ( `${ active - ? "h-full ring-2 ring-opacity-60 ring-primary-light-500 dark:ring-white/20" - : "h-full " + ? "ring-2 ring-opacity-60 ring-primary-light-500 dark:ring-white/20" + : "" } ${ checked - ? "bg-background-light-400 dark:bg-background-dark-400" + ? "bg-background-light-400 dark:bg-background-dark-400 ring-2 ring-primary-light-500 dark:ring-primary-dark-500" : "bg-background-light-400 dark:bg-background-dark-400" } - relative border boder-divider-light dark:border-divider-dark flex cursor-pointer rounded-lg px-5 py-4 focus:outline-none hover:shadow-lg dark:hover:bg-white/10` + h-full flex-1 relative border boder-divider-light dark:border-divider-dark flex cursor-pointer rounded-lg px-5 py-4 focus:outline-none hover:shadow-lg dark:hover:bg-white/10` } > {({ active, checked }) => ( <> -
-
-
- - {method.name} - - - {method.description} - {" "} - -
-
- {checked && ( -
- -
+
+ {method === "passkey" && ( + + + )} + {method === "password" && ( + + form-textbox-password + + + )} + + {t(`methods.${method}`)} +
)} @@ -83,24 +93,3 @@ export function AuthenticationMethodRadio({
); } - -function CheckIcon(props: any) { - return ( - - - - - ); -} diff --git a/apps/login/src/components/register-form.tsx b/apps/login/src/components/register-form.tsx index 0655a15f4be..cf3f1631da1 100644 --- a/apps/login/src/components/register-form.tsx +++ b/apps/login/src/components/register-form.tsx @@ -12,6 +12,7 @@ import { useState } from "react"; import { FieldValues, useForm } from "react-hook-form"; import { Alert } from "./alert"; import { + AuthenticationMethod, AuthenticationMethodRadio, methods, } from "./authentication-method-radio"; @@ -60,7 +61,7 @@ export function RegisterForm({ }); const [loading, setLoading] = useState(false); - const [selected, setSelected] = useState(methods[0]); + const [selected, setSelected] = useState(methods[0]); const [error, setError] = useState(""); const router = useRouter(); @@ -189,7 +190,7 @@ export function RegisterForm({ const usePasswordToContinue: boolean = loginSettings?.allowUsernamePassword && loginSettings?.passkeysType === PasskeysType.ALLOWED - ? !!!(selected.name === methods[0].name) // choose selection if both available + ? !!!(selected === methods[0]) // choose selection if both available : !!loginSettings?.allowUsernamePassword; // if password is chosen // set password as default if only password is allowed return submitAndContinue(values, usePasswordToContinue);