91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import axios from "axios";
|
|
import {useNavigate} from "react-router-dom";
|
|
import {getServiceAddress} from "../utils/consul";
|
|
|
|
const RegisterPage = () => {
|
|
const [apiUrl, setApiUrl] = useState(null);
|
|
const [username, setUsername] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
// Fetch the API address from Consul
|
|
const fetchApiUrl = async () => {
|
|
try {
|
|
const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
|
|
setApiUrl(`http://${ServiceAddress}:${ServicePort}/api/register`);
|
|
} catch (error) {
|
|
setErrorMessage("Failed to retrieve API information.");
|
|
}
|
|
};
|
|
|
|
fetchApiUrl();
|
|
}, []);
|
|
|
|
const handleRegister = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!apiUrl) {
|
|
setErrorMessage("API URL not available");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
|
|
const response = await axios.post(apiUrl, {
|
|
username,
|
|
email,
|
|
password,
|
|
});
|
|
alert("Registration successful! Please log in.");
|
|
navigate("/login"); // Redirect to login page
|
|
} catch (error) {
|
|
console.error("Registration failed:", error);
|
|
setErrorMessage("Registration failed. Please try again.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="register-container">
|
|
<h1>Register</h1>
|
|
<form onSubmit={handleRegister}>
|
|
<div>
|
|
<label>Username:</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Email:</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Password:</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
{errorMessage && <p className="error-message">{errorMessage}</p>}
|
|
<button type="submit">Register</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegisterPage;
|