74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export interface LoginFormValue {
|
|
username: string;
|
|
password: string;
|
|
}
|
|
|
|
interface LoginFormProps {
|
|
onSubmit: (data: LoginFormValue) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function LoginForm(props: LoginFormProps) {
|
|
const [form, setForm] = useState<LoginFormValue>({
|
|
username: "",
|
|
password: "",
|
|
});
|
|
|
|
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
const target = event.target;
|
|
const name = target.name;
|
|
const value = target.value;
|
|
|
|
setForm({
|
|
...form,
|
|
[name]: value,
|
|
});
|
|
}
|
|
|
|
function handleBtnClick() {
|
|
props.onSubmit({ ...form });
|
|
}
|
|
|
|
return (
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<form>
|
|
<div className="form-floating mb-3">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="username"
|
|
name="username"
|
|
value={form.username}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<label className="form-label">Nom d'utilisateur</label>
|
|
</div>
|
|
<div className="form-floating mb-3">
|
|
<input
|
|
type="password"
|
|
className="form-control"
|
|
id="password"
|
|
name="password"
|
|
onChange={handleInputChange}
|
|
value={form.password}
|
|
/>
|
|
<label className="form-label">Mot de passe</label>
|
|
</div>
|
|
</form>
|
|
<div className="d-grid">
|
|
<button
|
|
type="button"
|
|
disabled={props.disabled}
|
|
onClick={handleBtnClick}
|
|
className="btn btn-primary"
|
|
>
|
|
Connexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|