- add: frontend webpage for login/register

2024-12-17 17:03:55 -05:00
parent c67cdd5b2a
commit 9c61b1b3f2
20 changed files with 29819 additions and 0 deletions
--- a/frontend/src/components/RegisterPage.js
+++ b/frontend/src/components/RegisterPage.js
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import {getServiceAddress} from "../utils/consul";
+
+const RegisterPage = () => {
+    const [username, setUsername] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [errorMessage, setErrorMessage] = useState("");
+
+    const navigate = useNavigate();
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+
+        try {
+            const { ServiceAddress, ServicePort } = await getServiceAddress("api-service");
+            const response = await axios.post(`http://${ServiceAddress}:${ServicePort}/api/register`, {
+                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;