Improve login input fields for better UX

Removed default email and password placeholders for security and replaced them with empty values. Added placeholders and proper `autoComplete` attributes to enhance user experience and browser compatibility.
This commit is contained in:
2026-02-12 10:19:46 +01:00
parent 3d8bbbb2d6
commit 7b011326a6

View File

@@ -5,8 +5,8 @@ import { useAuth } from "../state";
export function LoginPage() {
const { login } = useAuth();
const navigate = useNavigate();
const [email, setEmail] = useState("admin@example.com");
const [password, setPassword] = useState("ChangeMe123!");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
@@ -29,9 +29,21 @@ export function LoginPage() {
<form className="card login-card" onSubmit={submit}>
<h2>Login</h2>
<label>Email</label>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<input
type="email"
placeholder="E-Mail"
value={email}
onChange={(e) => setEmail(e.target.value)}
autoComplete="username"
/>
<label>Passwort</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"
/>
{error && <p className="error">{error}</p>}
<button disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
</form>