- {t("header.title")} {view === 1 && setDialog({
- title: t("header.beta.title"),
- description:
+ {config.viewMode ? props.showNodePage(true)} className="h2-click">
}
+
{t("header.title")} {view === 1 && setDialog({
- title: t("header.beta.title"),
- description:
+ {config.viewMode ? {t("header.title")}
: props.showNodePage(true)} className="h2-click">
}
+
{updateAvailable ?
{
-
const [config, setConfig] = useState({});
const [setDialog] = useContext(InputDialogContext);
const [dialogShown, setDialogShown] = useState(false);
@@ -15,15 +14,20 @@ export const ConfigProvider = (props) => {
request("/config").then(async res => {
if (res.status === 401) throw 1;
if (!res.ok) throw 2;
-
+
try {
return JSON.parse(await res.text());
} catch (e) {
throw 2;
}
- })
- .then(result => config !== result ? setConfig(result) : null)
- .catch((code) => setDialog(code === 1 ? passwordRequiredDialog() : apiErrorDialog()));
+ }).then(result => {
+ if (config !== result)
+ result.viewMode && localStorage.getItem("currentNode") !== null && localStorage.getItem("currentNode") !== "0"
+ ? props.showNodePage(true) : setConfig(result);
+ }).catch((code) => {
+ localStorage.getItem("currentNode") !== null && localStorage.getItem("currentNode") !== "0"
+ ? props.showNodePage(true) : setDialog(code === 1 ? passwordRequiredDialog() : apiErrorDialog());
+ });
}
const checkConfig = async () => (await request("/config")).json();
diff --git a/client/src/common/contexts/InputDialog/InputDialog.jsx b/client/src/common/contexts/InputDialog/InputDialog.jsx
index 411b422a..c14f9be8 100644
--- a/client/src/common/contexts/InputDialog/InputDialog.jsx
+++ b/client/src/common/contexts/InputDialog/InputDialog.jsx
@@ -16,16 +16,22 @@ const DialogArea = ({dialog}) => {
if (dialog.value) setValue(dialog.value);
}, [dialog.value]);
- document.onkeyup = e => {
- if (e.key === "Enter") {
- e.preventDefault();
- submit();
+ useEffect(() => {
+ document.onkeyup = e => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ submit();
+ }
+ if (e.key === "Escape" && !dialog.disableCloseButton) {
+ e.preventDefault();
+ closeDialog();
+ }
}
- if (e.key === "Escape" && !dialog.disableCloseButton) {
- e.preventDefault();
- closeDialog();
+
+ return () => {
+ document.onkeyup = null;
}
- }
+ });
function updateValue(e) {
if (dialog.updateDescription) dialog.description = dialog.updateDescription(e.target.value);
@@ -72,7 +78,7 @@ const DialogArea = ({dialog}) => {
+ {props.children}
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/common/contexts/Node/index.js b/client/src/common/contexts/Node/index.js
new file mode 100644
index 00000000..9e36400d
--- /dev/null
+++ b/client/src/common/contexts/Node/index.js
@@ -0,0 +1 @@
+export * from "./NodeContext";
\ No newline at end of file
diff --git a/client/src/common/utils/RequestUtil.js b/client/src/common/utils/RequestUtil.js
index b0b0b786..cc54973f 100644
--- a/client/src/common/utils/RequestUtil.js
+++ b/client/src/common/utils/RequestUtil.js
@@ -1,4 +1,8 @@
-const API_ROOT = "/api";
+const getApiRoot = () => {
+ if (localStorage.getItem("currentNode") !== null && localStorage.getItem("currentNode") !== "0") {
+ return "/api/nodes/" + localStorage.getItem("currentNode");
+ } else return "/api";
+}
// Get the default headers of the request
const getHeaders = () => {
@@ -8,9 +12,17 @@ const getHeaders = () => {
return headers;
}
+// Run a plain request with all default values using the base path
+export const baseRequest = async (path, method = "GET", body = {}, headers = {}) => {
+ return await fetch("/api" + path, {
+ headers: {...getHeaders(), ...headers}, method,
+ body: method !== "GET" ? JSON.stringify(body) : undefined
+ });
+}
+
// Run a plain request with all default values
export const request = async (path, method = "GET", body = {}, headers = {}) => {
- return await fetch(API_ROOT + path, {
+ return await fetch(getApiRoot() + path, {
headers: {...getHeaders(), ...headers}, method,
body: method !== "GET" ? JSON.stringify(body) : undefined
});
diff --git a/client/src/pages/Error/styles.sass b/client/src/pages/Error/styles.sass
index 3e74f78a..11e798f2 100644
--- a/client/src/pages/Error/styles.sass
+++ b/client/src/pages/Error/styles.sass
@@ -1,15 +1,14 @@
@import "@/common/styles/colors"
.error-page
- width: 100vw
- height: 100vh
- position: absolute
+ min-height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
color: $white
text-align: center
+ margin: 0
.no-reload
width: unset
diff --git a/client/src/pages/Nodes/Nodes.jsx b/client/src/pages/Nodes/Nodes.jsx
new file mode 100644
index 00000000..1c0a4ac2
--- /dev/null
+++ b/client/src/pages/Nodes/Nodes.jsx
@@ -0,0 +1,33 @@
+import "./styles.sass";
+import NodeHeader from "@/pages/Nodes/components/NodeHeader";
+import NodeContainer from "@/pages/Nodes/components/NodeContainer";
+import {useContext, useEffect, useState} from "react";
+import {NodeContext} from "@/common/contexts/Node";
+import {t} from "i18next";
+import CreateNodeDialog from "@/pages/Nodes/components/CreateNodeDialog";
+
+export const Nodes = (props) => {
+ const [nodes, updateNodes] = useContext(NodeContext);
+ const [createDialogOpen, setCreateDialogOpen] = useState(false);
+
+ useEffect(() => {
+ updateNodes();
+ }, []);
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/CreateNodeDialog/index.js b/client/src/pages/Nodes/components/CreateNodeDialog/index.js
new file mode 100644
index 00000000..88ea8ca0
--- /dev/null
+++ b/client/src/pages/Nodes/components/CreateNodeDialog/index.js
@@ -0,0 +1 @@
+export {CreateNodeDialog as default} from './CreateNodeDialog';
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/CreateNodeDialog/styles.sass b/client/src/pages/Nodes/components/CreateNodeDialog/styles.sass
new file mode 100644
index 00000000..fdfb25ad
--- /dev/null
+++ b/client/src/pages/Nodes/components/CreateNodeDialog/styles.sass
@@ -0,0 +1,47 @@
+@import "@/common/styles/colors"
+
+.server-input
+ font-size: 18pt
+ padding: 15px
+ font-weight: 700
+ margin-top: 15px
+ background-color: $darker-gray
+ color: $darker-white
+ border: none
+ border-radius: 15px
+
+.server-dialog
+ transition: all 0.3s ease-in-out
+ padding-left: 1rem
+ padding-right: 1rem
+ padding-top: 1rem
+ display: flex
+ flex-direction: column
+
+.server-group
+ display: flex
+ flex-direction: column
+ align-items: flex-start
+ margin: 0 0 15px 0
+
+.server-group h2
+ margin: 0
+ color: $green
+ font-weight: 700
+ display: flex
+ align-items: center
+ gap: 0.5rem
+
+.server-error
+ .server-input
+ border: 1px solid $red
+ color: $red
+
+@media screen and (max-width: 425px)
+ .server-dialog
+ padding-left: 0.5rem
+ padding-right: 0.5rem
+ .server-group h2
+ font-size: 16pt
+ .server-input
+ font-size: 16pt
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeContainer/NodeContainer.jsx b/client/src/pages/Nodes/components/NodeContainer/NodeContainer.jsx
new file mode 100644
index 00000000..eeae65b5
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeContainer/NodeContainer.jsx
@@ -0,0 +1,173 @@
+import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+ faArrowDown,
+ faArrowUp,
+ faCircleNotch,
+ faClock,
+ faExclamationTriangle,
+ faKey,
+ faServer,
+ faTableTennisPaddleBall
+} from "@fortawesome/free-solid-svg-icons";
+import React, {useContext, useEffect, useState} from "react";
+import {NodeContext} from "@/common/contexts/Node";
+import {InputDialogContext} from "@/common/contexts/InputDialog";
+import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
+import {baseRequest} from "@/common/utils/RequestUtil";
+import {t} from "i18next";
+import {Trans} from "react-i18next";
+import {getIconBySpeed} from "@/common/utils/TestUtil";
+import {ConfigContext} from "@/common/contexts/Config";
+
+export const NodeContainer = (node) => {
+ const updateNodes = useContext(NodeContext)[1];
+ const updateCurrentNode = useContext(NodeContext)[3];
+ const reloadConfig = useContext(ConfigContext)[1];
+ const updateToast = useContext(ToastNotificationContext);
+ const [setDialog] = useContext(InputDialogContext);
+ const [nodeData, setNodeData] = useState(null);
+ const [nodeError, setNodeError] = useState(undefined);
+
+ const prefix = node.currentNode ? "" : "/nodes/" + node.id;
+
+ const updateData = async () => {
+ const testRequest = await baseRequest(prefix + "/speedtests?limit=1");
+
+ if (!testRequest.ok) return setNodeError("SERVER_NOT_REACHABLE");
+ const tests = await testRequest.json();
+
+ if (tests.length < 0) return setNodeError("SERVER_NOT_REACHABLE");
+
+ const configRequest = await baseRequest(prefix + "/config");
+
+ if (!configRequest.ok) return setNodeError("SERVER_NOT_REACHABLE");
+ const config = await configRequest.json();
+
+ if (config.viewMode) return setNodeError("PASSWORD_CHANGED");
+
+ if (tests[0] === undefined) return setNodeData({pending: true});
+
+ setNodeError(undefined);
+ setNodeData({
+ ping: tests[0]?.ping,
+ download: Math.round(tests[0]?.download),
+ upload: Math.round(tests[0]?.upload),
+ pingIcon: getIconBySpeed(tests[0]?.ping, config.ping, false),
+ downloadIcon: getIconBySpeed(tests[0]?.download, config.download, true),
+ uploadIcon: getIconBySpeed(tests[0]?.upload, config.upload, true)
+ });
+ }
+
+ const updatePassword = (wrong = false) => {
+ setDialog({
+ title: t("nodes.password_outdated"),
+ type: "password",
+ description: wrong ?
+ {t("dialog.password.wrong")} : t("nodes.update_password"),
+ placeholder: t("dialog.password.placeholder"),
+ buttonText: t("dialog.update"),
+ onSuccess: async (password) => {
+ const res = await (await baseRequest(`/nodes/${node.id}/password`, "PATCH", {password: password})).json();
+
+ if (res.type === "PASSWORD_UPDATED") {
+ updateData().catch(() => setNodeError("SERVER_NOT_REACHABLE"));
+ updateToast(t("nodes.password_updated"), "green", faKey);
+ } else {
+ updatePassword(true);
+ }
+ }
+ });
+ }
+
+ useEffect(() => {
+ updateData().catch(() => setNodeError("SERVER_NOT_REACHABLE"));
+ const interval = setInterval(() => updateData().catch(() => setNodeError("SERVER_NOT_REACHABLE")), 10000);
+ return () => clearInterval(interval);
+ }, []);
+
+ const switchNode = () => {
+ if (nodeError || !nodeData) {
+ if (nodeError === "PASSWORD_CHANGED") updatePassword();
+ return;
+ }
+
+ node.setShowNodePage(false);
+ updateCurrentNode(node.id);
+ reloadConfig();
+ }
+
+ const onContext = (event) => {
+ event.preventDefault();
+
+ if (node.currentNode) return;
+ setDialog({
+ title: t("nodes.delete.title"),
+ description:
-
+
diff --git a/server/controller/node.js b/server/controller/node.js
new file mode 100644
index 00000000..56a880fb
--- /dev/null
+++ b/server/controller/node.js
@@ -0,0 +1,31 @@
+const nodes = require('../models/Node');
+
+// Gets all node entries
+module.exports.list = async (excludePassword) => {
+ return await nodes.findAll({attributes: {exclude: excludePassword ? ['password'] : []}});
+}
+
+// Create a new node entry
+module.exports.create = async (name, url, password) => {
+ return await nodes.create({name: name, url: url, password: password});
+}
+
+// Delete a node entry
+module.exports.delete = async (nodeId) => {
+ return await nodes.destroy({where: {id: nodeId}});
+}
+
+// Get a specific node entry
+module.exports.get = async (nodeId) => {
+ return await nodes.findOne({where: {id: nodeId}});
+}
+
+// Update the name of the node entry
+module.exports.updateName = async (nodeId, name) => {
+ return await nodes.update({name: name}, {where: {id: nodeId}});
+}
+
+// Update the password of the node entry
+module.exports.updatePassword = async (nodeId, password) => {
+ return await nodes.update({password: password}, {where: {id: nodeId}});
+}
\ No newline at end of file
diff --git a/server/controller/speedtests.js b/server/controller/speedtests.js
index cf93cbb4..5ffe9634 100644
--- a/server/controller/speedtests.js
+++ b/server/controller/speedtests.js
@@ -15,8 +15,10 @@ module.exports.get = async (id) => {
}
// Lists all speedtests from the database
-module.exports.list = async (hours = 24) => {
- let dbEntries = (await tests.findAll({order: [["created", "DESC"]]}))
+module.exports.list = async (hours = 24, start, limit) => {
+ const whereClause = start ? {id: {[Op.lt]: start}} : undefined;
+
+ let dbEntries = (await tests.findAll({where: whereClause, order: [["created", "DESC"]], limit}))
.filter((entry) => new Date(entry.created) > new Date().getTime() - hours * 3600000);
for (let dbEntry of dbEntries)
diff --git a/server/index.js b/server/index.js
index 3c37ff80..f005e99f 100755
--- a/server/index.js
+++ b/server/index.js
@@ -22,6 +22,7 @@ app.use("/api/speedtests", require('./routes/speedtests'));
app.use("/api/info", require('./routes/system'));
app.use("/api/export", require('./routes/export'));
app.use("/api/recommendations", require('./routes/recommendations'));
+app.use("/api/nodes", require('./routes/nodes'));
app.use("/api*", (req, res) => res.status(404).json({message: "Route not found"}));
// Enable production
diff --git a/server/models/Node.js b/server/models/Node.js
new file mode 100644
index 00000000..fb543b11
--- /dev/null
+++ b/server/models/Node.js
@@ -0,0 +1,17 @@
+const Sequelize = require('sequelize');
+const db = require("../config/database");
+
+module.exports = db.define("nodes", {
+ name: {
+ type: Sequelize.STRING,
+ defaultValue: "MySpeed Server"
+ },
+ url: {
+ type: Sequelize.STRING,
+ allowNull: false
+ },
+ password: {
+ type: Sequelize.STRING,
+ allowNull: true
+ }
+}, {createdAt: false, updatedAt: false});
\ No newline at end of file
diff --git a/server/routes/nodes.js b/server/routes/nodes.js
new file mode 100644
index 00000000..42487df1
--- /dev/null
+++ b/server/routes/nodes.js
@@ -0,0 +1,97 @@
+const app = require('express').Router();
+const nodes = require('../controller/node');
+const password = require("../middlewares/password");
+
+// List all nodes
+app.get("/", password(false), async (req, res) => {
+ return res.json(await nodes.list(true));
+});
+
+// Create a node
+app.put("/", password(false), async (req, res) => {
+ if (!req.body.name || !req.body.url) return res.status(400).json({message: "Missing parameters", type: "MISSING_PARAMETERS"});
+
+ const url = req.body.url.replace(/\/+$/, "");
+
+ const headers = req.body.password ? {password: req.body.password} : {};
+
+ fetch(url + "/api/config", {headers}).then(async api => {
+ if (api.status !== 200)
+ return res.status(400).json({message: "Invalid URL", type: "INVALID_URL"});
+
+ if ((await api.json()).viewMode)
+ return res.status(400).json({message: "Invalid password", type: "PASSWORD_REQUIRED"});
+
+ res.json({id: (await nodes.create(req.body.name, url, req.body.password)).id, type: "NODE_CREATED"});
+ }).catch(async () => {
+ res.status(400).json({message: "Invalid URL", type: "INVALID_URL"});
+ });
+});
+
+// Delete a node
+app.delete("/:nodeId", password(false), async (req, res) => {
+ const node = await nodes.get(req.params.nodeId);
+ if (node === null) return res.status(404).json({message: "Node not found"});
+
+ await nodes.delete(req.params.nodeId);
+ res.json({message: "Node successfully deleted"});
+});
+
+// Update the node name
+app.patch("/:nodeId/name", password(false), async (req, res) => {
+ if (!req.body.name) return res.status(400).json({message: "Missing parameters", type: "MISSING_PARAMETERS"});
+
+ const node = await nodes.get(req.params.nodeId);
+ if (node === null) return res.status(404).json({message: "Node not found"});
+
+ await nodes.updateName(req.params.nodeId, req.body.name);
+ res.json({message: "Node name successfully updated"});
+});
+
+// Update the node password
+app.patch("/:nodeId/password", password(false), async (req, res) => {
+ if (!req.body.password) return res.status(400).json({message: "Missing parameters", type: "MISSING_PARAMETERS"});
+
+ const node = await nodes.get(req.params.nodeId);
+ if (node === null) return res.status(404).json({message: "Node not found"});
+
+ fetch(node.url + "/api/config", {headers: {password: req.body.password}}).then(async api => {
+ if (api.status !== 200)
+ return res.status(400).json({message: "Invalid URL", type: "INVALID_URL"});
+
+ if ((await api.json()).viewMode)
+ return res.status(400).json({message: "Invalid password", type: "PASSWORD_REQUIRED"});
+
+ await nodes.updatePassword(req.params.nodeId, req.body.password);
+ res.json({message: "Node password successfully updated", type: "PASSWORD_UPDATED"});
+ }).catch(async () => {
+ res.status(400).json({message: "Invalid URL", type: "INVALID_URL"});
+ });
+});
+
+// Get information from the node
+app.all("/:nodeId/*", password(false), async (req, res) => {
+ const node = await nodes.get(req.params.nodeId);
+ if (node === null) return res.status(404).json({message: "Node not found"});
+
+ const url = node.url + req.originalUrl.replace("/api/nodes/" + req.params.nodeId, "/api");
+
+ req.headers['password'] = node.password;
+ delete req.headers['host'];
+
+ fetch(url, {
+ method: req.method,
+ headers: req.headers,
+ body: req.method === "GET" ? undefined : JSON.stringify(req.body),
+ signal: req.signal
+ }).then(async api => {
+ if (api.headers.get("content-disposition"))
+ res.setHeader("content-disposition", api.headers.get("content-disposition"));
+
+ res.status(api.status).json(await api.json());
+ }).catch(() => {
+ res.status(500).json({message: "Internal server error"});
+ });
+});
+
+module.exports = app;
\ No newline at end of file
diff --git a/server/routes/speedtests.js b/server/routes/speedtests.js
index e81f8347..2ee053d0 100644
--- a/server/routes/speedtests.js
+++ b/server/routes/speedtests.js
@@ -7,7 +7,10 @@ const password = require('../middlewares/password');
// List all speedtests
app.get("/", password(true), async (req, res) => {
- res.json(await tests.list(req.query.hours || 24));
+ if (req.query.limit && isNaN(req.query.limit))
+ return res.status(400).json({message: "You need to provide a correct number in the limit parameter"});
+
+ res.json(await tests.list(req.query.hours || 24, req.query.start, req.query.limit));
});
// List all speedtests by average
{dialog.unsetButton ? : ""}
-
+
)
diff --git a/client/src/common/contexts/Node/NodeContext.jsx b/client/src/common/contexts/Node/NodeContext.jsx
new file mode 100644
index 00000000..4fe9c483
--- /dev/null
+++ b/client/src/common/contexts/Node/NodeContext.jsx
@@ -0,0 +1,32 @@
+import React, {useState, createContext, useEffect, useContext} from "react";
+import {baseRequest} from "@/common/utils/RequestUtil";
+import {ConfigContext} from "@/common/contexts/Config";
+
+export const NodeContext = createContext({});
+
+export const NodeProvider = (props) => {
+
+ const [config] = useContext(ConfigContext);
+ const [nodes, setNodes] = useState([]);
+ const [currentNode, setCurrentNode] = useState(parseInt(localStorage.getItem("currentNode")) || 0);
+
+ const updateNodes = async () => baseRequest("/nodes").then(async nodes => {
+ if (nodes.ok) setNodes(await nodes.json());
+ });
+
+ useEffect(() => {
+ if (Object.keys(config).length === 0) return;
+ if (!config.viewMode) updateNodes();
+ }, [config]);
+
+ const updateCurrentNode = (node) => {
+ localStorage.setItem("currentNode", node);
+ setCurrentNode(parseInt(node));
+ }
+
+ return (
+
+ {createDialogOpen && setCreateDialogOpen(false)}/>}
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/CreateNodeDialog/CreateNodeDialog.jsx b/client/src/pages/Nodes/components/CreateNodeDialog/CreateNodeDialog.jsx
new file mode 100644
index 00000000..6e466024
--- /dev/null
+++ b/client/src/pages/Nodes/components/CreateNodeDialog/CreateNodeDialog.jsx
@@ -0,0 +1,102 @@
+import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
+import React, {useContext, useState} from "react";
+import "./styles.sass";
+import {t} from "i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCircleInfo, faClose, faServer} from "@fortawesome/free-solid-svg-icons";
+import {baseRequest} from "@/common/utils/RequestUtil";
+import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
+import {InputDialogContext} from "@/common/contexts/InputDialog";
+import {NodeContext} from "@/common/contexts/Node";
+
+export const Dialog = () => {
+ const close = useContext(DialogContext);
+
+ const [invalidUrl, setInvalidUrl] = useState(false);
+
+ const updateNodes = useContext(NodeContext)[1];
+ const [setDialog] = useContext(InputDialogContext);
+ const updateToast = useContext(ToastNotificationContext);
+
+ const [serverName, setServerName] = useState("");
+ const [serverUrl, setServerUrl] = useState("");
+
+ const runPasswordProcess = (wrong = false) => {
+ setDialog({
+ title: t("dialog.password.title"),
+ type: "password",
+ description: wrong ? {t("dialog.password.wrong")} : t("nodes.password_required"),
+ placeholder: t("dialog.password.placeholder"),
+ buttonText: t("nodes.create"),
+ onSuccess: async (password) => {
+ const res = await (await baseRequest("/nodes", "PUT", {
+ name: serverName, url: serverUrl,
+ password: password
+ })).json();
+
+ if (res.type === "PASSWORD_REQUIRED") {
+ runPasswordProcess(true);
+ } else if (res.type === "NODE_CREATED") {
+ updateNodes();
+ updateToast(t("nodes.created"), "green", faServer);
+ }
+ }
+ });
+ }
+
+ const createNode = async () => {
+ const response = await (await baseRequest("/nodes", "PUT", {
+ name: serverName,
+ url: serverUrl
+ })).json();
+
+ const type = await response.type;
+
+ if (type === "INVALID_URL") {
+ setInvalidUrl(true);
+ } else if (type === "PASSWORD_REQUIRED") {
+ close();
+ runPasswordProcess();
+ } else if (type === "NODE_CREATED") {
+ updateNodes();
+ close();
+ updateToast(t("nodes.created"), "green", faServer);
+ }
+ }
+
+ return (
+ <>
+
+
+
+ {nodes.map(node =>
+ setCreateDialogOpen(true)}>
+
+ {t("nodes.add")}
+
+ close()}/>
+
+ {t("nodes.add")}
+
+
+
+
+ setServerName(event.target.value)}/>
+
+ {t("nodes.group.name")}
+ setServerName(event.target.value)}/>
+
+
+ {
+ setServerUrl(event.target.value);
+ setInvalidUrl(false);
+ }}/>
+
+ {t("nodes.group.url")}
+ {
+ setServerUrl(event.target.value);
+ setInvalidUrl(false);
+ }}/>
+
+
+
+
+ );
+
+}
+
+export const CreateNodeDialog = (props) => {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeContainer/index.js b/client/src/pages/Nodes/components/NodeContainer/index.js
new file mode 100644
index 00000000..a4231161
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeContainer/index.js
@@ -0,0 +1 @@
+export {NodeContainer as default} from "./NodeContainer";
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeContainer/styles.sass b/client/src/pages/Nodes/components/NodeContainer/styles.sass
new file mode 100644
index 00000000..4268fb83
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeContainer/styles.sass
@@ -0,0 +1,89 @@
+@import "@/common/styles/colors"
+
+.node-item
+ border: 2px solid $gray
+ border-radius: 15px
+ display: flex
+ width: 50rem
+ cursor: pointer
+ padding: 1rem 1.5rem
+ justify-content: space-between
+ align-items: center
+ user-select: none
+
+.hover-green:hover
+ border: 2px solid $green-hover
+
+.hover-orange:hover
+ border: 2px solid $orange-hover
+
+.hover-red:hover
+ border: 2px solid $red-hover
+
+.node-info-area
+ display: flex
+ align-items: center
+ gap: 1rem
+
+.node-info-area svg
+ font-size: 30pt
+
+.node-info-area h1
+ margin: 0
+ font-size: 16pt
+
+.node-info-area p
+ margin: 0
+ font-size: 11pt
+ color: $darker-white
+
+.node-info
+ display: flex
+ flex-direction: column
+ align-items: flex-start
+
+.node-info *
+ max-width: 11rem
+ text-overflow: ellipsis
+ overflow: hidden
+ white-space: nowrap
+
+.speed-area
+ display: flex
+ gap: 1rem
+
+.icon-text
+ display: flex
+ gap: 0.5rem
+ align-items: center
+
+.icon-text h2
+ margin: 0
+ color: $darker-white
+
+.speed-item
+ display: flex
+ gap: 0.5rem
+
+.speed-item svg
+ font-size: 24pt
+
+.speed-item h1
+ margin: 0
+ font-size: 20pt
+ color: $darker-white
+
+.speed-icon
+ font-size: 28pt
+
+@media screen and (max-width: 862px)
+ .node-item
+ width: calc(20vw + 8rem)
+ flex-direction: column
+ gap: 1rem
+
+ .speed-area
+ flex-direction: column
+ gap: 0.5rem
+ .icon-text h2
+ font-size: 14pt
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeHeader/NodeHeader.jsx b/client/src/pages/Nodes/components/NodeHeader/NodeHeader.jsx
new file mode 100644
index 00000000..a277ec50
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeHeader/NodeHeader.jsx
@@ -0,0 +1,10 @@
+import "./styles.sass";
+
+export const NodeHeader = () => {
+ return (
+
+
+
+
+ {node.name}
+{node.url.replace(/(^\w+:|^)\/\//, '')}
+
+
+ {nodeError === "SERVER_NOT_REACHABLE" && ()}
+
+ {nodeData && nodeData.pending && !nodeError && (
+
+
+
)}
+
+ {nodeError === "PASSWORD_CHANGED" && ({t("nodes.messages.not_reachable")}
+
+
)}
+
+ {!nodeError && !nodeData && (
+ {t("nodes.messages.password_changed")}
+
+
)}
+
+ {nodeData && !nodeData.pending && !nodeError && (
+ <>
+ {t("nodes.messages.tests_pending")}
+
+
+
+ {nodeData.ping} {t("latest.ping_unit")}
+
+
+
+ {nodeData.download} {t("latest.speed_unit")}
+
+
+
+ )}
+ {nodeData.upload} {t("latest.speed_unit")}
+
+ 
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeHeader/index.js b/client/src/pages/Nodes/components/NodeHeader/index.js
new file mode 100644
index 00000000..ec75da73
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeHeader/index.js
@@ -0,0 +1 @@
+export {NodeHeader as default} from "./NodeHeader";
\ No newline at end of file
diff --git a/client/src/pages/Nodes/components/NodeHeader/styles.sass b/client/src/pages/Nodes/components/NodeHeader/styles.sass
new file mode 100644
index 00000000..e5cd99ce
--- /dev/null
+++ b/client/src/pages/Nodes/components/NodeHeader/styles.sass
@@ -0,0 +1,14 @@
+.node-header
+ display: flex
+ align-items: center
+ gap: 1rem
+
+.node-header img
+ width: 5.3rem
+ height: 5.3rem
+ border-radius: 50%
+
+.node-header h1
+ font-size: 38pt
+ font-weight: 700
+ margin: 0
\ No newline at end of file
diff --git a/client/src/pages/Nodes/index.js b/client/src/pages/Nodes/index.js
new file mode 100644
index 00000000..2cdb6a05
--- /dev/null
+++ b/client/src/pages/Nodes/index.js
@@ -0,0 +1 @@
+export {Nodes as default} from './Nodes';
\ No newline at end of file
diff --git a/client/src/pages/Nodes/styles.sass b/client/src/pages/Nodes/styles.sass
new file mode 100644
index 00000000..5481532d
--- /dev/null
+++ b/client/src/pages/Nodes/styles.sass
@@ -0,0 +1,55 @@
+@import "@/common/styles/colors"
+
+.node-page
+ min-height: 100vh
+ display: flex
+ flex-direction: column
+ justify-content: center
+ align-items: center
+ color: $white
+ text-align: center
+ margin: 0
+ gap: 0.7rem
+
+.node-page hr
+ margin: 0
+
+.node-area
+ display: flex
+ flex-direction: column
+ gap: 1.5rem
+ margin-top: 1rem
+
+.node-add
+ width: 53rem
+ border: 2px dashed #696C73
+ border-radius: 15px
+ cursor: pointer
+
+.node-add h1
+ font-size: 24pt
+ font-weight: 700
+ margin: 1rem
+ color: $darker-white
+
+.node-add:hover
+ border: 2px dashed $green-hover
+
+ h1
+ color: $white
+
+@media screen and (max-width: 862px)
+ .node-add
+ width: calc(20vw + 11rem)
+ border: 2px dashed #696C73
+ border-radius: 15px
+ cursor: pointer
+
+ .node-add h1
+ font-size: 22pt
+
+ .node-add:hover
+ border: 2px dashed $green-hover
+
+ h1
+ color: $white
\ No newline at end of file
diff --git a/client/src/pages/Statistics/Statistics.jsx b/client/src/pages/Statistics/Statistics.jsx
index 18c9f7f6..ca51f638 100644
--- a/client/src/pages/Statistics/Statistics.jsx
+++ b/client/src/pages/Statistics/Statistics.jsx
@@ -67,7 +67,7 @@ export const Statistics = () => {
+