frontend/frame: add abort button while opening a connection.

Author: ffreddow

frontend/src/components/Frame.tsx

@@ -10,6 +10,7 @@ import { ChargersState } from '../pages/chargers';
 import { Dispatch, StateUpdater, useEffect } from 'preact/hooks';
 import { showAlert } from './Alert';
 import { useLocation } from 'preact-iso';
+import { useTranslation } from 'react-i18next';
 
 interface VirtualNetworkInterfaceSetParentState {
     chargersState: Dispatch<StateUpdater<ChargersState>>,
@@ -260,6 +261,7 @@ export class Frame extends Component<FrameProps, FrameState> {
             setTimeout(() => sessionStorage.setItem("currentConnection", JSON.stringify(this.props.parentState)))
         }
 
+        const that = this;
         // this is used by the app to close the remote connection via the native app menu.
         (window as any).close = () => {
             this.props.setParentState({
@@ -268,6 +270,7 @@ export class Frame extends Component<FrameProps, FrameState> {
                 connectedName: "",
                 connectedPort: 0,
             });
+            clearTimeout(that.interface.timeout);
             this.route("/chargers");
             setAppNavigation();
             sessionStorage.removeItem("currentConnection");
@@ -289,6 +292,8 @@ export class Frame extends Component<FrameProps, FrameState> {
 
     render() {
         const { route } = useLocation();
+        const {t} = useTranslation("", {useSuspense: false, keyPrefix: "chargers"});
+
         useEffect(() => {
             this.route = route;
             this.interface = new VirtualNetworkInterface({
@@ -315,6 +320,14 @@ export class Frame extends Component<FrameProps, FrameState> {
                         i18n.t("chargers.connecting") :
                         i18n.t("chargers.loading_webinterface")}
                     </div>
+                    <Button className="col-lg-1 col-md-2 col-sm-3 col-6 mt-3"
+                        variant="outline-warning"
+                        type="button"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            (window as any).close();
+                        }}>{t("abort")}</Button>
                 </Row>
                 <Row className="flex-grow-1 m-0">
                     <iframe class="p-0" hidden={this.state.show_spinner} width="100%" height="100%" id="interface"></iframe>

frontend/src/locales/de.ts

@@ -66,6 +66,7 @@ export const de ={
         "decline": "Verwerfen",
         "show_more": "Mehr anzeigen",
         "show_less": "Weniger anzeigen",
+        "abort": "Abbrechen",
         "connecting": "Verbindung wird aufgebaut",
         "loading_webinterface": "Webinterface wird geladen",
         "invalid_key": "Die auf dem Gerät gespeicherten Schlüssel scheinen fehlerhaft zu sein",

frontend/src/locales/en.ts

@@ -69,6 +69,7 @@ export const en = {
         "decline": "Decline",
         "show_more": "Show more",
         "show_less": "Show less",
+        "abort": "Cancel",
         "connecting": "Connecting",
         "loading_webinterface": "Loading webinterface",
         "invalid_key": "The keys saved on the device seem to be corrupted",

frontend/tests/basic.spec.ts

@@ -65,7 +65,7 @@ test('charger lifecycle', async ({ page }) => {
   await page.getByRole('row', { name: testUser1Email }).getByRole('button').click();
   await page.getByRole('button', { name: 'Save' }).click();
   await page.getByRole('button', { name: 'Reboot' }).click();
-  await page.waitForTimeout(5000);
+  await page.waitForTimeout(6000);
   await page.goto(testDomain);
   await expect(page.getByText('NameDevice-IDNoteSortAscending')).toBeVisible();
 });
@@ -165,7 +165,7 @@ test('remove charger', async ({page}) => {
   await page.getByRole('row', { name: testUser1Email }).getByRole('button').click();
   await page.getByRole('button', { name: 'Save' }).click();
   await page.getByRole('button', { name: 'Reboot' }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(6000);
   await login(page, testUser2Email, testPassword2);
   await expect(page.getByText('NameDevice-IDNoteSortAscending')).toBeVisible();
 });