83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { NewUser, User } from "../Types/Users";
|
||
|
|
|
||
|
|
export default function Register() {
|
||
|
|
const [username, setUsername] = useState('')
|
||
|
|
const [password, setPassword] = useState('')
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const handleRegister = async () => {
|
||
|
|
try {
|
||
|
|
const newUser: NewUser = { username, password };
|
||
|
|
const registeredUser: User = await api.registerUser(newUser);
|
||
|
|
console.log("User registered:", registeredUser);
|
||
|
|
// Optionally, you can navigate to another page or show a success message here
|
||
|
|
} catch (error) {
|
||
|
|
setError("Registration failed. Please try again."); // Handle error appropriately
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="w-full max-w-xs">
|
||
|
|
<form
|
||
|
|
className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
|
||
|
|
onSubmit={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
handleRegister();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<h3 className="pb-2">Register new user</h3>
|
||
|
|
<div className="mb-4">
|
||
|
|
<label
|
||
|
|
className="block text-gray-700 text-sm font-bold mb-2"
|
||
|
|
htmlFor="username"
|
||
|
|
>
|
||
|
|
Username
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||
|
|
id="username"
|
||
|
|
type="text"
|
||
|
|
placeholder="Username"
|
||
|
|
value={username}
|
||
|
|
onChange={(e) => setUsername(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="mb-6">
|
||
|
|
<label
|
||
|
|
className="block text-gray-700 text-sm font-bold mb-2"
|
||
|
|
htmlFor="password"
|
||
|
|
>
|
||
|
|
Password
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
className="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
|
||
|
|
id="password"
|
||
|
|
type="password"
|
||
|
|
placeholder="Choose your password"
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
/>
|
||
|
|
<p className="text-red-500 text-xs italic">
|
||
|
|
Please choose a password.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<button
|
||
|
|
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||
|
|
type="submit"
|
||
|
|
>
|
||
|
|
Register
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{error && <p className="text-red-500 text-xs italic">{error}</p>}
|
||
|
|
</form>
|
||
|
|
<p className="text-center text-gray-500 text-xs"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|