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:
@@ -5,8 +5,8 @@ import { useAuth } from "../state";
|
|||||||
export function LoginPage() {
|
export function LoginPage() {
|
||||||
const { login } = useAuth();
|
const { login } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [email, setEmail] = useState("admin@example.com");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("ChangeMe123!");
|
const [password, setPassword] = useState("");
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
@@ -29,9 +29,21 @@ export function LoginPage() {
|
|||||||
<form className="card login-card" onSubmit={submit}>
|
<form className="card login-card" onSubmit={submit}>
|
||||||
<h2>Login</h2>
|
<h2>Login</h2>
|
||||||
<label>Email</label>
|
<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>
|
<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>}
|
{error && <p className="error">{error}</p>}
|
||||||
<button disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
|
<button disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
Reference in New Issue
Block a user