From 2a281113650977f6e40f4f7a4daa2a11dea61d8a Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 22 Jul 2023 07:49:09 -0700
Subject: Fix server selection issues

---
 modern/src/Navigation.js             |  2 +-
 modern/src/login/ChangeServerPage.js | 83 ++++++++++++++++++++++++++++++++++++
 modern/src/other/ChangeServerPage.js | 75 --------------------------------
 3 files changed, 84 insertions(+), 76 deletions(-)
 create mode 100644 modern/src/login/ChangeServerPage.js
 delete mode 100644 modern/src/other/ChangeServerPage.js

diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js
index d9ca1817..ad02106c 100644
--- a/modern/src/Navigation.js
+++ b/modern/src/Navigation.js
@@ -48,7 +48,7 @@ import AccumulatorsPage from './settings/AccumulatorsPage';
 import CommandDevicePage from './settings/CommandDevicePage';
 import CommandGroupPage from './settings/CommandGroupPage';
 import App from './App';
-import ChangeServerPage from './other/ChangeServerPage';
+import ChangeServerPage from './login/ChangeServerPage';
 import DevicesPage from './settings/DevicesPage';
 import ScheduledPage from './reports/ScheduledPage';
 import DeviceConnectionsPage from './settings/DeviceConnectionsPage';
diff --git a/modern/src/login/ChangeServerPage.js b/modern/src/login/ChangeServerPage.js
new file mode 100644
index 00000000..a92536d0
--- /dev/null
+++ b/modern/src/login/ChangeServerPage.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
+import { makeStyles } from '@mui/styles';
+import {
+  Autocomplete, Button, Container, createFilterOptions, TextField,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from '../common/components/LocalizationProvider';
+
+const currentServer = `${window.location.protocol}//${window.location.host}`;
+
+const officialServers = [
+  currentServer,
+  'https://demo.traccar.org',
+  'https://demo2.traccar.org',
+  'https://demo3.traccar.org',
+  'https://demo4.traccar.org',
+  'https://server.traccar.org',
+  'http://localhost:8082',
+  'http://localhost:3000',
+];
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    textAlign: 'center',
+    fontSize: '128px',
+    color: theme.palette.colors.neutral,
+  },
+  container: {
+    textAlign: 'center',
+    padding: theme.spacing(5, 3),
+  },
+  field: {
+    margin: theme.spacing(3, 0),
+  },
+}));
+
+const ChangeServerPage = () => {
+  const classes = useStyles();
+  const navigate = useNavigate();
+  const t = useTranslation();
+
+  const filter = createFilterOptions();
+
+  const handleSubmit = (url) => {
+    if (window.webkit && window.webkit.messageHandlers.appInterface) {
+      window.webkit.messageHandlers.appInterface.postMessage(`server|${url}`);
+    } else if (window.appInterface) {
+      window.appInterface.postMessage(`server|${url}`);
+    } else {
+      window.location.replace(url);
+    }
+  };
+
+  return (
+    <Container maxWidth="xs" className={classes.container}>
+      <ElectricalServicesIcon className={classes.icon} />
+      <Autocomplete
+        freeSolo
+        className={classes.field}
+        options={officialServers}
+        renderInput={(params) => <TextField {...params} label={t('settingsServer')} />}
+        value={currentServer}
+        onChange={(_, value) => value && handleSubmit(value)}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+          if (params.inputValue && !filtered.includes(params.inputValue)) {
+            filtered.push(params.inputValue);
+          }
+          return filtered;
+        }}
+      />
+      <Button
+        onClick={() => navigate(-1)}
+        color="secondary"
+      >
+        {t('sharedCancel')}
+      </Button>
+    </Container>
+  );
+};
+
+export default ChangeServerPage;
diff --git a/modern/src/other/ChangeServerPage.js b/modern/src/other/ChangeServerPage.js
deleted file mode 100644
index 0343a941..00000000
--- a/modern/src/other/ChangeServerPage.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
-import { makeStyles } from '@mui/styles';
-import {
-  Autocomplete, Container, createFilterOptions, TextField,
-} from '@mui/material';
-import { useTranslation } from '../common/components/LocalizationProvider';
-
-const currentServer = `${window.location.protocol}//${window.location.host}`;
-
-const officialServers = [
-  currentServer,
-  'https://demo.traccar.org',
-  'https://demo2.traccar.org',
-  'https://demo3.traccar.org',
-  'https://demo4.traccar.org',
-  'https://server.traccar.org',
-  'http://localhost:8082',
-  'http://localhost:3000',
-];
-
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    textAlign: 'center',
-    fontSize: '128px',
-    color: theme.palette.colors.neutral,
-  },
-  container: {
-    textAlign: 'center',
-    padding: theme.spacing(5, 3),
-  },
-  field: {
-    margin: theme.spacing(3, 0),
-  },
-}));
-
-const ChangeServerPage = () => {
-  const classes = useStyles();
-  const t = useTranslation();
-
-  const filter = createFilterOptions();
-
-  const handleSubmit = (url) => {
-    if (window.webkit && window.webkit.messageHandlers.appInterface) {
-      window.webkit.messageHandlers.appInterface.postMessage(`server|${url}`);
-    } else if (window.appInterface) {
-      window.appInterface.postMessage(`server|${url}`);
-    } else {
-      window.location.replace(url);
-    }
-  };
-
-  return (
-    <Container maxWidth="xs" className={classes.container}>
-      <ElectricalServicesIcon className={classes.icon} />
-      <Autocomplete
-        freeSolo
-        className={classes.field}
-        options={officialServers}
-        renderInput={(params) => <TextField {...params} label={t('settingsServer')} />}
-        value={currentServer}
-        onChange={(_, value) => handleSubmit(value)}
-        filterOptions={(options, params) => {
-          const filtered = filter(options, params);
-          if (params.inputValue && !filtered.includes(params.inputValue)) {
-            filtered.push(params.inputValue);
-          }
-          return filtered;
-        }}
-      />
-    </Container>
-  );
-};
-
-export default ChangeServerPage;
-- 
cgit v1.2.3