Merge pull request #819 from Cooldude2606/feature/login-screen-name

Display cluster name on login screen

packages/controller/src/routes.ts

@@ -134,6 +134,12 @@ function getPlugins(req: Request, res: Response) {
 	res.send(plugins);
 }
 
+function getClusterName(req: Request, res: Response) {
+	const controller: Controller = req.app.locals.controller;
+	const clusterName = controller.config.get("controller.name");
+	res.json({ name: clusterName });
+}
+
 function validateHostToken(req: Request, res: Response, next: any) {
 	let token = req.header("x-access-token");
 	if (!token) {
@@ -662,6 +668,7 @@ async function uploadMod(req: Request, res: Response) {
 export function addRouteHandlers(app: Application) {
 	app.get("/metrics", (req:Request, res:Response, next:any) => getMetrics(req, res, next).catch(next));
 	app.get("/api/plugins", getPlugins);
+	app.get("/api/cluster-name", getClusterName);
 	app.put("/api/upload-export",
 		validateHostToken,
 		(req:Request, res:Response, next:any) => uploadExport(req, res).catch(next)

packages/web_ui/src/components/LoginForm.tsx

@@ -1,7 +1,8 @@
-import React, { Fragment, useContext } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import { Button, Card, Divider, Form, Image, Input, Space, Typography } from "antd";
 import LockOutlined from "@ant-design/icons/LockOutlined";
 
+import notify from "../util/notify";
 import logo from "../images/logo.png";
 import ControlContext from "./ControlContext";
 
@@ -36,6 +37,23 @@ function TokenAuth(props: SetTokenProps) {
 
 export default function LoginForm(props: SetTokenProps) {
 	let plugins = useContext(ControlContext).plugins;
+	const [clusterName, setClusterName] = useState<string>("Clusterio");
+
+	useEffect(() => {
+		(async () => {
+			try {
+				let response = await fetch(`${webRoot}api/cluster-name`);
+				if (response.ok) {
+					let data = await response.json();
+					if (data.name) {
+						setClusterName(data.name);
+					}
+				}
+			} catch (err) {
+				notify("Failed to load cluster name");
+			}
+		})();
+	}, []);
 
 	let loginForms = [];
 	for (let plugin of plugins.values()) {
@@ -50,7 +68,7 @@ export default function LoginForm(props: SetTokenProps) {
 
 	return <Card style={{ maxWidth: "30em" }}>
 		<Space style={{ width: "100%" }} direction="vertical" align="center">
-			<h1>Clusterio</h1>
+			<h1>{clusterName}</h1>
 			<Image width={128} height={123} src={logo} />
 			Log in to the cluster using one of the methods below.
 		</Space>
@@ -60,4 +78,3 @@ export default function LoginForm(props: SetTokenProps) {
 		</Fragment>)}
 	</Card>;
 }
-

test/controller/routes.js

@@ -74,6 +74,19 @@ describe("controller/src/routes", function() {
 			assert.equal(await responses[1].text(), "test content");
 		});
 	});
+	describe("/api/cluster-name", function() {
+		let endpoint;
+		beforeEach(function() {
+			endpoint = `http://localhost:${port}/api/cluster-name`;
+		});
+		it("should return the cluster name from config", async function() {
+			controller.mockConfigEntries.set("controller.name", "Test Cluster");
+			let response = await fetch(endpoint);
+			assert.equal(response.status, 200);
+			let data = await response.json();
+			assert.deepEqual(data, { name: "Test Cluster" });
+		});
+	});
 	describe("/api/upload-save", function() {
 		let endpoint;
 		beforeEach(function() {