Carlos
102 lines
2.9 KiB
React
102 lines
2.9 KiB
React
import { useState } from "react"
|
|
import { useRouter } from "next/router"
|
|
|
|
export default function SignUp() {
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [confirmPassword, setConfirmPassword] = useState("")
|
|
const [error, setError] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setError("")
|
|
setLoading(true)
|
|
try {
|
|
if (password !== confirmPassword) {
|
|
setError("Senhas não coincidem")
|
|
return
|
|
}
|
|
|
|
if (password.length < 6) {
|
|
setError("Senha deve ter pelo menos 6 caracteres")
|
|
return
|
|
}
|
|
|
|
const res = await fetch("/api/auth/register", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password })
|
|
})
|
|
|
|
const data = await res.json()
|
|
|
|
if (res.ok) {
|
|
router.push("/signin")
|
|
} else {
|
|
setError(data.error || "Erro ao cadastrar")
|
|
}
|
|
} catch (err) {
|
|
setError("Erro de conexão")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="bg-white p-8 rounded-lg shadow-md w-96">
|
|
<h2 className="text-2xl font-bold mb-6">Cadastrar - 1000Apps</h2>
|
|
|
|
{error && (
|
|
<div className="mb-4 bg-red-100 text-red-700 p-3 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Nome de usuário"
|
|
className="w-full p-2 border rounded"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Senha"
|
|
className="w-full p-2 border rounded"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
minLength={6}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Confirmar senha"
|
|
className="w-full p-2 border rounded"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-green-600 text-white py-2 rounded-lg disabled:opacity-50"
|
|
>
|
|
{loading ? "Cadastrando..." : "Cadastrar"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="text-center mt-4 text-sm">
|
|
Já tem conta?{" "}
|
|
<a href="/signin" className="text-blue-600 hover:underline">
|
|
Entrar
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |