diff --git a/frontend/src/components/LoginPage.tsx b/frontend/src/components/LoginPage.tsx index ea80442..d52c5ca 100644 --- a/frontend/src/components/LoginPage.tsx +++ b/frontend/src/components/LoginPage.tsx @@ -33,6 +33,15 @@ export default function LoginPage() { } }; + /** + * Catch key events in order to trigger login on enter + */ + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === "Enter") { + executeLogin(); + } + }; + return (
@@ -43,12 +52,15 @@ export default function LoginPage() { placeholder="Benutzername" value={userName} onChange={(e) => setUserName(e.target.value)} + onKeyDown={handleKeyDown} /> + {/* error message */} {errorMessage && (

{errorMessage}

)} diff --git a/frontend/src/components/basics/PasswordField.tsx b/frontend/src/components/basics/PasswordField.tsx index 1c0175e..2a8ba51 100644 --- a/frontend/src/components/basics/PasswordField.tsx +++ b/frontend/src/components/basics/PasswordField.tsx @@ -3,12 +3,13 @@ import { useState } from "react"; type PasswordFieldProps = { onPasswordChanged: (password : string) => void + onKeyDown: (event: React.KeyboardEvent) => 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(""); 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} />