Added registration form
This commit is contained in:
parent
ac9af4a4e9
commit
29b7c0d394
@ -1,4 +1,5 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import Register from "./pages/Register";
|
||||
import Login from "./pages/Login";
|
||||
import Tasks from "./pages/Tasks";
|
||||
import Profile from "./pages/Profile";
|
||||
@ -9,6 +10,7 @@ const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/tasks" element={<Tasks />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
|
@ -49,6 +49,12 @@ const Login = () => {
|
||||
Zaloguj się
|
||||
</button>
|
||||
</form>
|
||||
<p className="mt-4">
|
||||
Nie masz jeszcze konta?{" "}
|
||||
<a href="/register" className="text-blue-600 hover:underline">
|
||||
Zarejestruj się
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
99
frontend/src/pages/Register.tsx
Normal file
99
frontend/src/pages/Register.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import api from "../api/api";
|
||||
|
||||
const Register = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: ""
|
||||
});
|
||||
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
setError("Hasła muszą być takie same.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await api.post("/users", {
|
||||
username: formData.username,
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
role: "User" // in frontend only regular users can be created
|
||||
});
|
||||
|
||||
navigate("/login");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Rejestracja nie powiodła się.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-md mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-4">Rejestracja</h2>
|
||||
|
||||
{error && <p className="text-red-500 mb-2">{error}</p>}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Nazwa użytkownika"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border p-2 rounded"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border p-2 rounded"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Hasło"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border p-2 rounded"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder="Potwierdź hasło"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border p-2 rounded"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700"
|
||||
>
|
||||
Zarejestruj się
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
Loading…
x
Reference in New Issue
Block a user