add login with enter key
This commit is contained in:
parent
97b0e5bdd3
commit
a224397079
3 changed files with 16 additions and 1 deletions
|
|
@ -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 (
|
return (
|
||||||
<div className="app-bg">
|
<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">
|
<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"
|
placeholder="Benutzername"
|
||||||
value={userName}
|
value={userName}
|
||||||
onChange={(e) => setUserName(e.target.value)}
|
onChange={(e) => setUserName(e.target.value)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<PasswordField
|
<PasswordField
|
||||||
onPasswordChanged = {setPassword}
|
onPasswordChanged = {setPassword}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* error message */}
|
||||||
{errorMessage && (
|
{errorMessage && (
|
||||||
<p className="error-text text-center">{errorMessage}</p>
|
<p className="error-text text-center">{errorMessage}</p>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,13 @@ import { useState } from "react";
|
||||||
|
|
||||||
type PasswordFieldProps = {
|
type PasswordFieldProps = {
|
||||||
onPasswordChanged: (password : string) => void
|
onPasswordChanged: (password : string) => void
|
||||||
|
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Password field component
|
* Password field component
|
||||||
*/
|
*/
|
||||||
export default function PasswordField({onPasswordChanged} : PasswordFieldProps){
|
export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [password, setPassword] = useState<string>("");
|
const [password, setPassword] = useState<string>("");
|
||||||
const iconSize = 20;
|
const iconSize = 20;
|
||||||
|
|
@ -25,6 +26,7 @@ export default function PasswordField({onPasswordChanged} : PasswordFieldProps){
|
||||||
placeholder="Passwort"
|
placeholder="Passwort"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => changePassword(e.target.value)}
|
onChange={(e) => changePassword(e.target.value)}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* SVG Icon component
|
* SVG Icon component
|
||||||
|
* @todo replace by lucid react
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue