add login with enter key

This commit is contained in:
Anika Raemer 2025-10-12 08:43:27 +02:00
parent 97b0e5bdd3
commit a224397079
3 changed files with 16 additions and 1 deletions

View file

@ -33,6 +33,15 @@ export default function LoginPage() {
}
};
/**
* Catch key events in order to trigger login on enter
*/
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
executeLogin();
}
};
return (
<div className="app-bg">
<div className="flex flex-col gap-3 max-w-sm w-full mx-auto p-6 bg-white rounded-2xl shadow-md">
@ -43,12 +52,15 @@ export default function LoginPage() {
placeholder="Benutzername"
value={userName}
onChange={(e) => setUserName(e.target.value)}
onKeyDown={handleKeyDown}
/>
<PasswordField
onPasswordChanged = {setPassword}
onKeyDown={handleKeyDown}
/>
{/* error message */}
{errorMessage && (
<p className="error-text text-center">{errorMessage}</p>
)}

View file

@ -3,12 +3,13 @@ import { useState } from "react";
type PasswordFieldProps = {
onPasswordChanged: (password : string) => void
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
}
/**
* Password field component
*/
export default function PasswordField({onPasswordChanged} : PasswordFieldProps){
export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
const [showPassword, setShowPassword] = useState(false);
const [password, setPassword] = useState<string>("");
const iconSize = 20;
@ -25,6 +26,7 @@ export default function PasswordField({onPasswordChanged} : PasswordFieldProps){
placeholder="Passwort"
value={password}
onChange={(e) => changePassword(e.target.value)}
onKeyDown={onKeyDown}
/>
<button
type="button"

View file

@ -1,5 +1,6 @@
/**
* SVG Icon component
* @todo replace by lucid react
*/
/**