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 { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||||
|
import Register from "./pages/Register";
|
||||||
import Login from "./pages/Login";
|
import Login from "./pages/Login";
|
||||||
import Tasks from "./pages/Tasks";
|
import Tasks from "./pages/Tasks";
|
||||||
import Profile from "./pages/Profile";
|
import Profile from "./pages/Profile";
|
||||||
@ -9,6 +10,7 @@ const App = () => {
|
|||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
<Route path="/register" element={<Register />} />
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
<Route path="/tasks" element={<Tasks />} />
|
<Route path="/tasks" element={<Tasks />} />
|
||||||
<Route path="/profile" element={<Profile />} />
|
<Route path="/profile" element={<Profile />} />
|
||||||
|
@ -49,6 +49,12 @@ const Login = () => {
|
|||||||
Zaloguj się
|
Zaloguj się
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p className="mt-4">
|
||||||
|
Nie masz jeszcze konta?{" "}
|
||||||
|
<a href="/register" className="text-blue-600 hover:underline">
|
||||||
|
Zarejestruj się
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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