53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import { useContactForm } from './hooks/useContactForm'
|
|
import FormField from './components/FormField'
|
|
import './App.css'
|
|
|
|
function App() {
|
|
const { fields, errors, loginError, success, handlers, handleSubmit } = useContactForm()
|
|
|
|
return (
|
|
<div className="page">
|
|
<div className="card">
|
|
<h1 className="card__title">Bejelentkezés</h1>
|
|
<p className="card__subtitle">Add meg az adataidat.</p>
|
|
|
|
{success ? (
|
|
<div className="alert alert--success">
|
|
Sikeres bejelentkezés! Üdvözlünk, {fields.name}!
|
|
</div>
|
|
) : (
|
|
<form className="form" onSubmit={handleSubmit} noValidate>
|
|
<FormField
|
|
id="name"
|
|
label="Név"
|
|
value={fields.name}
|
|
onChange={handlers.setName}
|
|
error={errors.name}
|
|
/>
|
|
<FormField
|
|
id="email"
|
|
label="Email"
|
|
type="email"
|
|
value={fields.email}
|
|
onChange={handlers.setEmail}
|
|
error={errors.email}
|
|
/>
|
|
|
|
{loginError && (
|
|
<div className="alert alert--error" role="alert">
|
|
{loginError}
|
|
</div>
|
|
)}
|
|
|
|
<button className="form__submit" type="submit">
|
|
Bejelentkezés
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|