- add: frontend webpage for login/register
This commit is contained in:
38
frontend/src/App.css
Normal file
38
frontend/src/App.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
18
frontend/src/App.js
Normal file
18
frontend/src/App.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import LoginPage from "./components/LoginPage";
|
||||
import RegisterPage from "./components/RegisterPage";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/" element={<h1>Welcome to the Game!</h1>} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
80
frontend/src/components/LoginPage.js
Normal file
80
frontend/src/components/LoginPage.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import axios from "axios";
|
||||
import {getServiceAddress} from "../utils/consul";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const LoginPage = () => {
|
||||
const [apiUrl, setApiUrl] = useState(null);
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch the API address from Consul
|
||||
const fetchApiUrl = async () => {
|
||||
try {
|
||||
const { ServiceAddress, ServicePort } = await getServiceAddress("api-service");
|
||||
setApiUrl(`http://${ServiceAddress}:${ServicePort}/api/login`);
|
||||
} catch (error) {
|
||||
setMessage("Failed to retrieve API information.");
|
||||
}
|
||||
};
|
||||
|
||||
fetchApiUrl();
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!apiUrl) {
|
||||
setMessage("API URL not available");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(apiUrl, { username, password });
|
||||
|
||||
// Extract token and server info from response
|
||||
const { token, serverIp } = response.data;
|
||||
|
||||
setMessage("Login successful! Launching game...");
|
||||
|
||||
const { ServiceAddress, ServicePort } = await getServiceAddress("packet-service");
|
||||
window.location.href = `osirose-launcher://launch?otp=${encodeURIComponent(token)}&ip=${encodeURIComponent(ServiceAddress)}&port=${encodeURIComponent(ServicePort)}&username=${encodeURIComponent(username)}`;
|
||||
} catch (error) {
|
||||
setMessage("Login failed: " + error.response?.data?.error || error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"register-container"}>
|
||||
<h1>Login</h1>
|
||||
<form onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label>Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<p>{message}</p>
|
||||
<p>
|
||||
Don't have an account? <Link to="/register">Register here</Link>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
70
frontend/src/components/RegisterPage.js
Normal file
70
frontend/src/components/RegisterPage.js
Normal file
@@ -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;
|
||||
58
frontend/src/index.css
Normal file
58
frontend/src/index.css
Normal file
@@ -0,0 +1,58 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
width: 300px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.register-container h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-container label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.register-container input {
|
||||
width: 94%;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-container button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.register-container button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
11
frontend/src/index.js
Normal file
11
frontend/src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
23
frontend/src/utils/consul.js
Normal file
23
frontend/src/utils/consul.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import axios from "axios";
|
||||
|
||||
const CONSUL_URL = process.env.REACT_APP_CONSUL_URL;
|
||||
|
||||
/**
|
||||
* Fetch the IP and port of the service from Consul.
|
||||
* @param {string} serviceName - The name of the registered service.
|
||||
* @returns {Promise<{Address: string, ServicePort: number}>}
|
||||
*/
|
||||
export async function getServiceAddress(serviceName) {
|
||||
try {
|
||||
const response = await axios.get(`${CONSUL_URL}/v1/catalog/service/${serviceName}`);
|
||||
if (response.data && response.data.length > 0) {
|
||||
const { ServiceAddress, ServicePort } = response.data[0]; // Get the first instance
|
||||
return { ServiceAddress, ServicePort };
|
||||
} else {
|
||||
throw new Error("Service not found in Consul");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch service address from Consul:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user