From 690e566556b7ee1d38a3513fd073f7c8445420ac Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Wed, 28 Oct 2020 18:09:49 +0100 Subject: [PATCH 1/4] Move web interface to its own package Create clusterio/web_ui package and move all of the web interface files to it in order to be able to share the interface components with plugins. --- packages/master/package.json | 6 +--- packages/master/web/index.jsx | 2 +- packages/master/webpack.config.js | 3 +- packages/web_ui/package.json | 30 +++++++++++++++++++ .../{master/web => web_ui/src}/basename.jsx | 0 .../{master/web => web_ui/src}/bootstrap.jsx | 0 .../web => web_ui/src}/components/App.jsx | 0 .../src}/components/data-table.jsx | 0 packages/{master/web => web_ui/src}/index.css | 0 .../web => web_ui/src}/layout/index.jsx | 0 .../web => web_ui/src}/pages/dashboard.jsx | 0 .../src}/pages/instances/instance.jsx | 0 .../src}/pages/instances/instancesTable.jsx | 0 .../pages/permissions/permissionsTable.jsx | 0 .../web => web_ui/src}/pages/roles/role.jsx | 0 .../src}/pages/roles/rolesTable.jsx | 0 .../src}/pages/settings/settings.jsx | 0 .../src}/pages/slaves/slavesTable.jsx | 0 .../web => web_ui/src}/pages/users/user.jsx | 0 .../src}/pages/users/usersTable.jsx | 0 .../web => web_ui/src}/util/notify.jsx | 0 .../web => web_ui/src}/util/websocket.jsx | 0 .../web => web_ui/src}/util/wslink.jsx | 0 packages/{master => web_ui}/webpack.common.js | 0 plugins/global_chat/package.json | 5 +--- plugins/global_chat/webpack.config.js | 3 +- plugins/research_sync/package.json | 5 +--- plugins/research_sync/webpack.config.js | 3 +- plugins/statistics_exporter/package.json | 5 +--- plugins/statistics_exporter/webpack.config.js | 3 +- plugins/subspace_storage/package.json | 5 +--- plugins/subspace_storage/webpack.config.js | 3 +- 32 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 packages/web_ui/package.json rename packages/{master/web => web_ui/src}/basename.jsx (100%) rename packages/{master/web => web_ui/src}/bootstrap.jsx (100%) rename packages/{master/web => web_ui/src}/components/App.jsx (100%) rename packages/{master/web => web_ui/src}/components/data-table.jsx (100%) rename packages/{master/web => web_ui/src}/index.css (100%) rename packages/{master/web => web_ui/src}/layout/index.jsx (100%) rename packages/{master/web => web_ui/src}/pages/dashboard.jsx (100%) rename packages/{master/web => web_ui/src}/pages/instances/instance.jsx (100%) rename packages/{master/web => web_ui/src}/pages/instances/instancesTable.jsx (100%) rename packages/{master/web => web_ui/src}/pages/permissions/permissionsTable.jsx (100%) rename packages/{master/web => web_ui/src}/pages/roles/role.jsx (100%) rename packages/{master/web => web_ui/src}/pages/roles/rolesTable.jsx (100%) rename packages/{master/web => web_ui/src}/pages/settings/settings.jsx (100%) rename packages/{master/web => web_ui/src}/pages/slaves/slavesTable.jsx (100%) rename packages/{master/web => web_ui/src}/pages/users/user.jsx (100%) rename packages/{master/web => web_ui/src}/pages/users/usersTable.jsx (100%) rename packages/{master/web => web_ui/src}/util/notify.jsx (100%) rename packages/{master/web => web_ui/src}/util/websocket.jsx (100%) rename packages/{master/web => web_ui/src}/util/wslink.jsx (100%) rename packages/{master => web_ui}/webpack.common.js (100%) diff --git a/packages/master/package.json b/packages/master/package.json index 98bf25e4..3f9dbc7f 100644 --- a/packages/master/package.json +++ b/packages/master/package.json @@ -35,17 +35,13 @@ "yargs": "^14.2.0" }, "devDependencies": { - "@ant-design/icons": "^4.2.2", "@babel/core": "^7.11.6", "@babel/preset-react": "^7.10.4", - "antd": "^4.6.5", + "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.3.0", - "events": "^3.2.0", "fast-deep-equal": "^3.1.3", "null-loader": "^4.0.0", - "path-browserify": "^1.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", diff --git a/packages/master/web/index.jsx b/packages/master/web/index.jsx index 50599f7a..30fdbf62 100644 --- a/packages/master/web/index.jsx +++ b/packages/master/web/index.jsx @@ -1 +1 @@ -import("./bootstrap"); +import("@clusterio/web_ui/src/bootstrap"); diff --git a/packages/master/webpack.config.js b/packages/master/webpack.config.js index 6ed48d69..01ebb289 100644 --- a/packages/master/webpack.config.js +++ b/packages/master/webpack.config.js @@ -3,7 +3,7 @@ const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); -const common = require("./webpack.common"); +const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { entry: "./web/index.jsx", @@ -19,6 +19,7 @@ module.exports = (env = {}) => merge(common(env), { name: "master", shared: { "@clusterio/lib": { singleton: true }, + "@clusterio/web_ui": { singleton: true }, "ajv": {}, "antd": { singleton: true }, "react": { singleton: true }, diff --git a/packages/web_ui/package.json b/packages/web_ui/package.json new file mode 100644 index 00000000..47b10086 --- /dev/null +++ b/packages/web_ui/package.json @@ -0,0 +1,30 @@ +{ + "name": "@clusterio/web_ui", + "description": "Clusterio web interface implementation", + "author": "Hornwitser", + "license": "MIT", + "version": "2.0.0-alpha.1", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "clusterio" + ], + "engines": { + "node": ">=10.16 <11 || >= 12" + }, + "dependencies": { + "@ant-design/icons": "^4.2.2", + "@clusterio/lib": "^2.0.0-alpha.1", + "antd": "^4.6.5", + "clean-webpack-plugin": "^3.0.0", + "events": "^3.2.0", + "path-browserify": "^1.0.1", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-router-dom": "^5.2.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/master/web/basename.jsx b/packages/web_ui/src/basename.jsx similarity index 100% rename from packages/master/web/basename.jsx rename to packages/web_ui/src/basename.jsx diff --git a/packages/master/web/bootstrap.jsx b/packages/web_ui/src/bootstrap.jsx similarity index 100% rename from packages/master/web/bootstrap.jsx rename to packages/web_ui/src/bootstrap.jsx diff --git a/packages/master/web/components/App.jsx b/packages/web_ui/src/components/App.jsx similarity index 100% rename from packages/master/web/components/App.jsx rename to packages/web_ui/src/components/App.jsx diff --git a/packages/master/web/components/data-table.jsx b/packages/web_ui/src/components/data-table.jsx similarity index 100% rename from packages/master/web/components/data-table.jsx rename to packages/web_ui/src/components/data-table.jsx diff --git a/packages/master/web/index.css b/packages/web_ui/src/index.css similarity index 100% rename from packages/master/web/index.css rename to packages/web_ui/src/index.css diff --git a/packages/master/web/layout/index.jsx b/packages/web_ui/src/layout/index.jsx similarity index 100% rename from packages/master/web/layout/index.jsx rename to packages/web_ui/src/layout/index.jsx diff --git a/packages/master/web/pages/dashboard.jsx b/packages/web_ui/src/pages/dashboard.jsx similarity index 100% rename from packages/master/web/pages/dashboard.jsx rename to packages/web_ui/src/pages/dashboard.jsx diff --git a/packages/master/web/pages/instances/instance.jsx b/packages/web_ui/src/pages/instances/instance.jsx similarity index 100% rename from packages/master/web/pages/instances/instance.jsx rename to packages/web_ui/src/pages/instances/instance.jsx diff --git a/packages/master/web/pages/instances/instancesTable.jsx b/packages/web_ui/src/pages/instances/instancesTable.jsx similarity index 100% rename from packages/master/web/pages/instances/instancesTable.jsx rename to packages/web_ui/src/pages/instances/instancesTable.jsx diff --git a/packages/master/web/pages/permissions/permissionsTable.jsx b/packages/web_ui/src/pages/permissions/permissionsTable.jsx similarity index 100% rename from packages/master/web/pages/permissions/permissionsTable.jsx rename to packages/web_ui/src/pages/permissions/permissionsTable.jsx diff --git a/packages/master/web/pages/roles/role.jsx b/packages/web_ui/src/pages/roles/role.jsx similarity index 100% rename from packages/master/web/pages/roles/role.jsx rename to packages/web_ui/src/pages/roles/role.jsx diff --git a/packages/master/web/pages/roles/rolesTable.jsx b/packages/web_ui/src/pages/roles/rolesTable.jsx similarity index 100% rename from packages/master/web/pages/roles/rolesTable.jsx rename to packages/web_ui/src/pages/roles/rolesTable.jsx diff --git a/packages/master/web/pages/settings/settings.jsx b/packages/web_ui/src/pages/settings/settings.jsx similarity index 100% rename from packages/master/web/pages/settings/settings.jsx rename to packages/web_ui/src/pages/settings/settings.jsx diff --git a/packages/master/web/pages/slaves/slavesTable.jsx b/packages/web_ui/src/pages/slaves/slavesTable.jsx similarity index 100% rename from packages/master/web/pages/slaves/slavesTable.jsx rename to packages/web_ui/src/pages/slaves/slavesTable.jsx diff --git a/packages/master/web/pages/users/user.jsx b/packages/web_ui/src/pages/users/user.jsx similarity index 100% rename from packages/master/web/pages/users/user.jsx rename to packages/web_ui/src/pages/users/user.jsx diff --git a/packages/master/web/pages/users/usersTable.jsx b/packages/web_ui/src/pages/users/usersTable.jsx similarity index 100% rename from packages/master/web/pages/users/usersTable.jsx rename to packages/web_ui/src/pages/users/usersTable.jsx diff --git a/packages/master/web/util/notify.jsx b/packages/web_ui/src/util/notify.jsx similarity index 100% rename from packages/master/web/util/notify.jsx rename to packages/web_ui/src/util/notify.jsx diff --git a/packages/master/web/util/websocket.jsx b/packages/web_ui/src/util/websocket.jsx similarity index 100% rename from packages/master/web/util/websocket.jsx rename to packages/web_ui/src/util/websocket.jsx diff --git a/packages/master/web/util/wslink.jsx b/packages/web_ui/src/util/wslink.jsx similarity index 100% rename from packages/master/web/util/wslink.jsx rename to packages/web_ui/src/util/wslink.jsx diff --git a/packages/master/webpack.common.js b/packages/web_ui/webpack.common.js similarity index 100% rename from packages/master/webpack.common.js rename to packages/web_ui/webpack.common.js diff --git a/plugins/global_chat/package.json b/plugins/global_chat/package.json index 49fec954..21e3955c 100644 --- a/plugins/global_chat/package.json +++ b/plugins/global_chat/package.json @@ -19,12 +19,9 @@ "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-react": "^7.10.4", - "@clusterio/master": "^2.0.0-alpha.1", + "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", - "events": "^3.2.0", "null-loader": "^4.0.0", - "path-browserify": "^1.0.1", "webpack-cli": "^3.3.12", "webpack-merge": "^5.2.0" }, diff --git a/plugins/global_chat/webpack.config.js b/plugins/global_chat/webpack.config.js index f338be0e..c036c0a2 100644 --- a/plugins/global_chat/webpack.config.js +++ b/plugins/global_chat/webpack.config.js @@ -3,7 +3,7 @@ const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); -const common = require("@clusterio/master/webpack.common"); +const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { entry: "./web/index.jsx", @@ -21,6 +21,7 @@ module.exports = (env = {}) => merge(common(env), { }, shared: { "@clusterio/lib": { import: false }, + "@clusterio/web_ui": { import: false }, "ajv": { import: false }, }, }), diff --git a/plugins/research_sync/package.json b/plugins/research_sync/package.json index 8c7a4e59..8933c81c 100644 --- a/plugins/research_sync/package.json +++ b/plugins/research_sync/package.json @@ -22,12 +22,9 @@ "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-react": "^7.10.4", - "@clusterio/master": "^2.0.0-alpha.1", + "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", - "events": "^3.2.0", "null-loader": "^4.0.0", - "path-browserify": "^1.0.1", "webpack-cli": "^3.3.12", "webpack-merge": "^5.2.0" }, diff --git a/plugins/research_sync/webpack.config.js b/plugins/research_sync/webpack.config.js index a3151f33..f4de2479 100644 --- a/plugins/research_sync/webpack.config.js +++ b/plugins/research_sync/webpack.config.js @@ -3,7 +3,7 @@ const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); -const common = require("@clusterio/master/webpack.common"); +const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { entry: "./web/index.jsx", @@ -21,6 +21,7 @@ module.exports = (env = {}) => merge(common(env), { }, shared: { "@clusterio/lib": { import: false }, + "@clusterio/web_ui": { import: false }, "ajv": { import: false }, }, }), diff --git a/plugins/statistics_exporter/package.json b/plugins/statistics_exporter/package.json index f1945a65..0083efcd 100644 --- a/plugins/statistics_exporter/package.json +++ b/plugins/statistics_exporter/package.json @@ -19,12 +19,9 @@ "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-react": "^7.10.4", - "@clusterio/master": "^2.0.0-alpha.1", + "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", - "events": "^3.2.0", "null-loader": "^4.0.0", - "path-browserify": "^1.0.1", "webpack-cli": "^3.3.12", "webpack-merge": "^5.2.0" }, diff --git a/plugins/statistics_exporter/webpack.config.js b/plugins/statistics_exporter/webpack.config.js index 129dcf0f..4f231c84 100644 --- a/plugins/statistics_exporter/webpack.config.js +++ b/plugins/statistics_exporter/webpack.config.js @@ -3,7 +3,7 @@ const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); -const common = require("@clusterio/master/webpack.common"); +const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { entry: "./web/index.jsx", @@ -21,6 +21,7 @@ module.exports = (env = {}) => merge(common(env), { }, shared: { "@clusterio/lib": { import: false }, + "@clusterio/web_ui": { import: false }, "ajv": { import: false }, }, }), diff --git a/plugins/subspace_storage/package.json b/plugins/subspace_storage/package.json index bbacb929..540db0b0 100644 --- a/plugins/subspace_storage/package.json +++ b/plugins/subspace_storage/package.json @@ -22,13 +22,10 @@ "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-react": "^7.10.4", - "@clusterio/master": "^2.0.0-alpha.1", + "@clusterio/web_ui": "^2.0.0-alpha.1", "antd": "^4.6.5", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", - "events": "^3.2.0", "null-loader": "^4.0.0", - "path-browserify": "^1.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", "webpack-cli": "^3.3.12", diff --git a/plugins/subspace_storage/webpack.config.js b/plugins/subspace_storage/webpack.config.js index 05814382..cc88fe4e 100644 --- a/plugins/subspace_storage/webpack.config.js +++ b/plugins/subspace_storage/webpack.config.js @@ -3,7 +3,7 @@ const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); -const common = require("@clusterio/master/webpack.common"); +const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { entry: "./web/index.jsx", @@ -21,6 +21,7 @@ module.exports = (env = {}) => merge(common(env), { }, shared: { "@clusterio/lib": { import: false }, + "@clusterio/web_ui": { import: false }, "ajv": { import: false }, "antd": { import: false }, "react": { import: false }, From 019ffc25f014294bce7c80fb36bb164aa99c5984 Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Wed, 28 Oct 2020 19:01:23 +0100 Subject: [PATCH 2/4] Add context to webpack configs Fix the issue with paths resolving incorrectly for the webpack config when running the master server with the --dev option from the project root folder through either npx clusteriomaster or node packages/master --- package.json | 2 ++ packages/master/package.json | 2 -- packages/master/webpack.config.js | 1 + plugins/global_chat/package.json | 2 -- plugins/global_chat/webpack.config.js | 1 + plugins/research_sync/package.json | 2 -- plugins/research_sync/webpack.config.js | 1 + plugins/statistics_exporter/package.json | 2 -- plugins/statistics_exporter/webpack.config.js | 1 + plugins/subspace_storage/package.json | 2 -- plugins/subspace_storage/webpack.config.js | 1 + 11 files changed, 7 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index bf526b27..8d33925a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "node": ">=10.16 <11 || >= 12" }, "devDependencies": { + "@babel/core": "^7.12.3", + "@babel/preset-react": "^7.12.1", "@clusterio/ctl": "file:./packages/ctl", "@clusterio/lib": "file:./packages/lib", "@clusterio/master": "file:packages/master", diff --git a/packages/master/package.json b/packages/master/package.json index 3f9dbc7f..68cdb84e 100644 --- a/packages/master/package.json +++ b/packages/master/package.json @@ -35,8 +35,6 @@ "yargs": "^14.2.0" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/preset-react": "^7.10.4", "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", "css-loader": "^4.3.0", diff --git a/packages/master/webpack.config.js b/packages/master/webpack.config.js index 01ebb289..756d809d 100644 --- a/packages/master/webpack.config.js +++ b/packages/master/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require("webpack-merge"); const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { + context: __dirname, entry: "./web/index.jsx", devServer: { contentBase: "./static", diff --git a/plugins/global_chat/package.json b/plugins/global_chat/package.json index 21e3955c..c3c11791 100644 --- a/plugins/global_chat/package.json +++ b/plugins/global_chat/package.json @@ -17,8 +17,6 @@ "@clusterio/lib": "^2.0.0-alpha.0" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/preset-react": "^7.10.4", "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", "null-loader": "^4.0.0", diff --git a/plugins/global_chat/webpack.config.js b/plugins/global_chat/webpack.config.js index c036c0a2..042295a4 100644 --- a/plugins/global_chat/webpack.config.js +++ b/plugins/global_chat/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require("webpack-merge"); const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { + context: __dirname, entry: "./web/index.jsx", output: { filename: "bundle.js", diff --git a/plugins/research_sync/package.json b/plugins/research_sync/package.json index 8933c81c..bca53ca3 100644 --- a/plugins/research_sync/package.json +++ b/plugins/research_sync/package.json @@ -20,8 +20,6 @@ "fs-extra": "^8.1.0" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/preset-react": "^7.10.4", "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", "null-loader": "^4.0.0", diff --git a/plugins/research_sync/webpack.config.js b/plugins/research_sync/webpack.config.js index f4de2479..4a519c63 100644 --- a/plugins/research_sync/webpack.config.js +++ b/plugins/research_sync/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require("webpack-merge"); const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { + context: __dirname, entry: "./web/index.jsx", output: { filename: "bundle.js", diff --git a/plugins/statistics_exporter/package.json b/plugins/statistics_exporter/package.json index 0083efcd..3d271cd2 100644 --- a/plugins/statistics_exporter/package.json +++ b/plugins/statistics_exporter/package.json @@ -17,8 +17,6 @@ "@clusterio/lib": "^2.0.0-alpha.0" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/preset-react": "^7.10.4", "@clusterio/web_ui": "^2.0.0-alpha.1", "babel-loader": "^8.1.0", "null-loader": "^4.0.0", diff --git a/plugins/statistics_exporter/webpack.config.js b/plugins/statistics_exporter/webpack.config.js index 4f231c84..3198c71e 100644 --- a/plugins/statistics_exporter/webpack.config.js +++ b/plugins/statistics_exporter/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require("webpack-merge"); const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { + context: __dirname, entry: "./web/index.jsx", output: { filename: "bundle.js", diff --git a/plugins/subspace_storage/package.json b/plugins/subspace_storage/package.json index 540db0b0..afb3e970 100644 --- a/plugins/subspace_storage/package.json +++ b/plugins/subspace_storage/package.json @@ -20,8 +20,6 @@ "fs-extra": "^8.1.0" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/preset-react": "^7.10.4", "@clusterio/web_ui": "^2.0.0-alpha.1", "antd": "^4.6.5", "babel-loader": "^8.1.0", diff --git a/plugins/subspace_storage/webpack.config.js b/plugins/subspace_storage/webpack.config.js index cc88fe4e..4a7b4901 100644 --- a/plugins/subspace_storage/webpack.config.js +++ b/plugins/subspace_storage/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require("webpack-merge"); const common = require("@clusterio/web_ui/webpack.common"); module.exports = (env = {}) => merge(common(env), { + context: __dirname, entry: "./web/index.jsx", output: { filename: "bundle.js", From 0c0626564a2685be4f6d1ede99e23666cddcbb4c Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Thu, 29 Oct 2020 19:11:10 +0100 Subject: [PATCH 3/4] Add login flow Present user with a login form to input token when connection fails or the token is not present in local storage. Replaces the settings page. --- .eslintrc.js | 2 +- packages/web_ui/src/bootstrap.jsx | 11 +-- packages/web_ui/src/components/App.jsx | 84 +++++++++++++++++-- .../web_ui/src/components/ControlContext.jsx | 3 + packages/web_ui/src/components/LoginForm.jsx | 27 ++++++ packages/web_ui/src/index.css | 6 ++ packages/web_ui/src/layout/index.jsx | 6 -- .../web_ui/src/pages/settings/settings.jsx | 70 ---------------- packages/web_ui/src/util/websocket.jsx | 15 ++-- 9 files changed, 128 insertions(+), 96 deletions(-) create mode 100644 packages/web_ui/src/components/ControlContext.jsx create mode 100644 packages/web_ui/src/components/LoginForm.jsx delete mode 100644 packages/web_ui/src/pages/settings/settings.jsx diff --git a/.eslintrc.js b/.eslintrc.js index 14045381..ba9eaec6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,7 +21,7 @@ module.exports = { }, }, { - "files": ["packages/master/web/**/*.jsx"], + "files": ["packages/web_ui/src/**/*.jsx", "plugins/*/web/**/*.jsx"], "env": { "browser": true, }, diff --git a/packages/web_ui/src/bootstrap.jsx b/packages/web_ui/src/bootstrap.jsx index f534ccac..4036075c 100644 --- a/packages/web_ui/src/bootstrap.jsx +++ b/packages/web_ui/src/bootstrap.jsx @@ -8,6 +8,7 @@ import libConfig from "@clusterio/lib/config"; import App from "./components/App"; import { Control, ControlConnector } from "./util/websocket"; + async function loadScript(url) { let script = document.createElement("script"); script.src = url; @@ -61,17 +62,11 @@ async function load() { let wsUrl = new URL(window.webRoot, document.location); wsUrl.protocol = wsUrl.protocol.replace("http", "ws"); - let controlConnector = new ControlConnector(wsUrl, 10, localStorage.getItem("master_token")); + let controlConnector = new ControlConnector(wsUrl, 10); // XXX come up with a better way of sharing this window.control = new Control(controlConnector, []); - try { - await controlConnector.connect(); - } catch (err) { - // XXX: What now? - console.log(err); - } - ReactDOM.render(, document.getElementById("root")); + ReactDOM.render(, document.getElementById("root")); } load().catch(console.log); diff --git a/packages/web_ui/src/components/App.jsx b/packages/web_ui/src/components/App.jsx index 10c155b0..113cd2cf 100644 --- a/packages/web_ui/src/components/App.jsx +++ b/packages/web_ui/src/components/App.jsx @@ -1,13 +1,85 @@ -import React from "react"; +import events from "events"; +import React, { useEffect, useState } from "react"; import { BrowserRouter } from "react-router-dom"; import basename from "../basename"; -import Layout from "../layout"; +import SiteLayout from "../layout"; +import ControlContext from "./ControlContext"; +import LoginForm from "./LoginForm"; + +import { Card, Spin } from "antd"; + + +export default function App(props) { + let [connected, setConnected] = useState(false); + let [token, setToken] = useState(localStorage.getItem("master_token") || null); + let connector = props.control.connector; + + function clearToken() { + setToken(null); + localStorage.removeItem("master_token"); + } + + useEffect(() => { + console.log("Effect called"); + + function onConnect() { + localStorage.setItem("master_token", token); + setConnected(true); + } + + function onClose() { + setConnected(false); + } + + function onError(err) { + console.error("Unexpected error in connector", err); + clearToken(); + setConnected(false); + } + + connector.on("connect", onConnect); + connector.on("close", onClose); + connector.on("error", onError); + + if (token && !connected) { + connector.token = token; + connector.connect(); + } + + return () => { + connector.off("error", onError); + connector.off("close", onClose); + connector.off("connect", onConnect); + }; + }); + + let page; + if (connected) { + page = ; + + } else if (token) { + page =
+ +

Connecting

+ + +
; + + } else { + page =
+ +

Clusterio

+ + +
; + } -export default function App() { return ( - - - + + + {page} + + ); } diff --git a/packages/web_ui/src/components/ControlContext.jsx b/packages/web_ui/src/components/ControlContext.jsx new file mode 100644 index 00000000..979faf93 --- /dev/null +++ b/packages/web_ui/src/components/ControlContext.jsx @@ -0,0 +1,3 @@ +import React from "react"; + +export default React.createContext(); diff --git a/packages/web_ui/src/components/LoginForm.jsx b/packages/web_ui/src/components/LoginForm.jsx new file mode 100644 index 00000000..6a5a13cf --- /dev/null +++ b/packages/web_ui/src/components/LoginForm.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Form, Input, Button } from "antd"; +import LockOutlined from "@ant-design/icons/LockOutlined"; + +export default function LoginForm(props) { + return ( +
{ props.setToken(values.token); }} + > + + } + type="password" + placeholder="Authentication Token" + /> + + +
+ ); +} + diff --git a/packages/web_ui/src/index.css b/packages/web_ui/src/index.css index fa33de59..f79dd7ad 100644 --- a/packages/web_ui/src/index.css +++ b/packages/web_ui/src/index.css @@ -23,3 +23,9 @@ code { cursor: pointer; } +.login-container { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/packages/web_ui/src/layout/index.jsx b/packages/web_ui/src/layout/index.jsx index 76f6ce24..1dd23a73 100644 --- a/packages/web_ui/src/layout/index.jsx +++ b/packages/web_ui/src/layout/index.jsx @@ -12,7 +12,6 @@ import { PermissionsTable } from "../pages/permissions/permissionsTable"; import { InstanceView } from "../pages/instances/instance"; import { UserView } from "../pages/users/user"; import { RoleView } from "../pages/roles/role"; -import { Settings } from "../pages/settings/settings"; const { Content, Footer, Sider } = Layout; const { SubMenu } = Menu; @@ -118,10 +117,6 @@ class SiteLayout extends Component { Permissions - - Settings - - ) : ( @@ -149,7 +144,6 @@ class SiteLayout extends Component { -