Carlos
66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
import { useState } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
|
|
export default function Register() {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const handleSubmit = async e => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/api/signup', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.message || 'Signup failed');
|
|
alert('Conta criada com sucesso! Redirecionando para login...');
|
|
router.push('/');
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '2rem', maxWidth: '400px', margin: '2rem auto' }}>
|
|
<h1>Cadastro - Expedição Gold</h1>
|
|
{error && <p style={{ color: 'red' }}>{error}</p>}
|
|
<form onSubmit={handleSubmit}>
|
|
<div style={{ marginBottom: '1rem' }}>
|
|
<label>Usuário:</label><br />
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
|
|
required
|
|
/>
|
|
</div>
|
|
<div style={{ marginBottom: '1rem' }}>
|
|
<label>Senha:</label><br />
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
|
|
required
|
|
/>
|
|
</div>
|
|
<button type="submit" disabled={loading} style={{ padding: '0.5rem 1rem' }}>
|
|
{loading ? 'Criando...' : 'Criar conta'}
|
|
</button>
|
|
</form>
|
|
<p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#555' }}>
|
|
Já tem conta? <a href="/">Faça login</a>
|
|
</p>
|
|
</div>
|
|
);
|
|
} |