From 631987c21b2ea0da09e8e8426f19b18953526714 Mon Sep 17 00:00:00 2001
From: Joacim Breiler <joacim@breiler.com>
Date: Mon, 4 Nov 2024 14:10:23 +0100
Subject: [PATCH] Add initial version for uploading additional files during
 install

---
 src/components/editormodal/EditorModal.tsx    |  2 +-
 src/components/fields/BooleanField.tsx        | 29 ++++----
 src/components/fields/PinField.tsx            |  8 +-
 src/components/fields/SelectField.tsx         |  9 +--
 src/components/fields/TextField.tsx           |  6 +-
 src/components/fields/UnknownField.tsx        |  4 +-
 src/components/installermodal/ConfirmPage.tsx | 51 ++++++++-----
 .../installermodal/InstallerModal.tsx         | 45 ++++++++++-
 src/components/tooltip/ToolTip.tsx            | 27 +++++++
 src/pages/connection/Connection.tsx           | 37 +++++++---
 src/pages/wifisettings/WiFiSettings.tsx       |  4 +-
 src/panels/firmware/Firmware.tsx              | 16 +++-
 src/services/GitHubService.ts                 | 28 +++++--
 src/services/InstallService.ts                | 74 +++++++++++--------
 .../commands/GetAccessPointListCommand.ts     |  4 +-
 src/utils/flash.ts                            | 14 +++-
 16 files changed, 252 insertions(+), 106 deletions(-)
 create mode 100644 src/components/tooltip/ToolTip.tsx

diff --git a/src/components/editormodal/EditorModal.tsx b/src/components/editormodal/EditorModal.tsx
index 467b7f4..ed53953 100644
--- a/src/components/editormodal/EditorModal.tsx
+++ b/src/components/editormodal/EditorModal.tsx
@@ -26,7 +26,7 @@ const EditorModal = ({ file, fileData, onClose, onSave }: EditorModalProps) => {
     const [tab, setTab] = useState<ConfigurationTab>(ConfigurationTab.GENERAL);
 
     return (
-        <Modal show={!!file} size="lg" scrollable={true} centered={false}>
+        <Modal show={!!file} size="xl" scrollable={true} centered={false}>
             <Modal.Header
                 style={{
                     paddingBottom: "0px",
diff --git a/src/components/fields/BooleanField.tsx b/src/components/fields/BooleanField.tsx
index 701d130..46addd4 100644
--- a/src/components/fields/BooleanField.tsx
+++ b/src/components/fields/BooleanField.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Col, Form, Row } from "react-bootstrap";
+import { Col, Form, InputGroup, Row } from "react-bootstrap";
+import ToolTip from "../tooltip/ToolTip";
 
 type BooleanFieldProps = {
     label?: string;
@@ -18,19 +19,21 @@ const BooleanField = ({
 }: BooleanFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
-                <Form.Check
-                    type="switch"
-                    aria-label={placeholder}
-                    onChange={(event) =>
-                        setValue(Boolean(event.target.checked))
-                    }
-                    checked={Boolean(value)}
-                />
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
+            <Col sm="8">
+                <InputGroup>
+                    <Form.Check
+                        style={{ paddingTop: "8px" }}
+                        type="switch"
+                        aria-label={placeholder}
+                        onChange={(event) =>
+                            setValue(Boolean(event.target.checked))
+                        }
+                        checked={Boolean(value)}
+                    />
+                </InputGroup>
             </Col>
         </Form.Group>
     );
diff --git a/src/components/fields/PinField.tsx b/src/components/fields/PinField.tsx
index b1e3b99..557caa7 100644
--- a/src/components/fields/PinField.tsx
+++ b/src/components/fields/PinField.tsx
@@ -5,6 +5,7 @@ import { Board } from "../../model/Boards";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import ToolTip from "../tooltip/ToolTip";
 
 type SelectFieldProps = {
     label?: string;
@@ -56,10 +57,10 @@ const PinField = ({
 
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <InputGroup>
                     <Form.Select
                         aria-label={placeholder}
@@ -122,7 +123,6 @@ const PinField = ({
                         </InputGroup.Text>
                     )}
                 </InputGroup>
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
                 {hasConflict && (
                     <Form.Text muted>
                         <Alert variant="warning">
diff --git a/src/components/fields/SelectField.tsx b/src/components/fields/SelectField.tsx
index f53b869..9c8bcab 100644
--- a/src/components/fields/SelectField.tsx
+++ b/src/components/fields/SelectField.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from "react";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
+import ToolTip from "../tooltip/ToolTip";
 
 type Option = {
     name: string;
@@ -29,10 +30,10 @@ const SelectField = ({
 }: SelectFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <InputGroup>
                     <Form.Select
                         disabled={disabled}
@@ -60,8 +61,6 @@ const SelectField = ({
                     </Form.Select>
                     {groupedControls && groupedControls}
                 </InputGroup>
-
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
             </Col>
         </Form.Group>
     );
diff --git a/src/components/fields/TextField.tsx b/src/components/fields/TextField.tsx
index 7000df7..71a5be5 100644
--- a/src/components/fields/TextField.tsx
+++ b/src/components/fields/TextField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
 import { ReactElement } from "react-markdown/lib/react-markdown";
+import ToolTip from "../tooltip/ToolTip";
 
 type TextFieldProps = {
     label?: string;
@@ -31,8 +32,8 @@ const TextField = ({
 }: TextFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
             <Col>
                 <InputGroup hasValidation>
@@ -53,7 +54,6 @@ const TextField = ({
                     {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
                     {groupedControls && groupedControls}
                 </InputGroup>
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
             </Col>
         </Form.Group>
     );
diff --git a/src/components/fields/UnknownField.tsx b/src/components/fields/UnknownField.tsx
index e76b435..791538e 100644
--- a/src/components/fields/UnknownField.tsx
+++ b/src/components/fields/UnknownField.tsx
@@ -36,10 +36,10 @@ const UnknownField = <T extends unknown>({
     return (
         <Form.Group as={Row} className="mb-3">
             <h4>{label}</h4>
-            <Form.Label column sm="3">
+            <Form.Label column sm="4">
                 {label}
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <Form.Control
                     as="textarea"
                     rows={6}
diff --git a/src/components/installermodal/ConfirmPage.tsx b/src/components/installermodal/ConfirmPage.tsx
index 41b4db9..acecaa3 100644
--- a/src/components/installermodal/ConfirmPage.tsx
+++ b/src/components/installermodal/ConfirmPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,17 +10,25 @@ import {
     GithubReleaseManifest
 } from "../../services";
 import SelectField from "../fields/SelectField";
+import BooleanField from "../fields/BooleanField";
 
 type Props = {
     onCancel: () => void;
-    onInstall: (baud: number) => Promise<void>;
+    onInstall: (baud: number, files: string[]) => Promise<void>;
     release: GithubRelease;
     manifest: GithubReleaseManifest;
     choice: FirmwareChoice;
 };
 
-const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
+const ConfirmPage = ({
+    release,
+    choice,
+    manifest,
+    onInstall,
+    onCancel
+}: Props) => {
     const [baud, setBaud] = useLocalStorage("baud", "921600");
+    const [files, setFiles] = useState<string[]>([]);
 
     return (
         <>
@@ -34,23 +42,12 @@ const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
                 </p>
 
                 <Col lg={8}>
-                    <SelectField
-                        label="Baud rate"
-                        options={[
-                            {
-                                name: "921600",
-                                value: "921600"
-                            },
-                            { name: "115200", value: "115200" }
-                        ]}
-                        value={baud}
-                        setValue={(value) => setBaud(value)}
-                    ></SelectField>
-
-                    {/*manifest.files &&
+                    {manifest.files && <h5>Extra Options</h5>}
+                    {manifest.files &&
                         Object.keys(manifest.files).map((key) => {
                             return (
                                 <BooleanField
+                                    key={key}
                                     setValue={(value: boolean) => {
                                         if (value) {
                                             setFiles((files) => [
@@ -67,14 +64,30 @@ const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
                                     value={files.includes(key)}
                                 />
                             );
-                        })*/}
+                        })}
+                </Col>
+
+                <Col lg={8}>
+                    <SelectField
+                        label="Installation speed"
+                        options={[
+                            {
+                                name: "921600 baud",
+                                value: "921600"
+                            },
+                            { name: "115200 baud", value: "115200" }
+                        ]}
+                        value={baud}
+                        setValue={(value) => setBaud(value)}
+                        helpText="Some controllers need to be installed at a lower speed. If you are experiencing problems you can try and decrease the speed."
+                    ></SelectField>
                 </Col>
             </Modal.Body>
             <Modal.Footer>
                 <Button onClick={onCancel} variant="secondary">
                     <FontAwesomeIcon icon={faClose as IconDefinition} /> Cancel
                 </Button>
-                <Button onClick={() => onInstall(+baud)}>
+                <Button onClick={() => onInstall(+baud, files)}>
                     <FontAwesomeIcon
                         icon={faSave as IconDefinition}
                         style={{ marginRight: "8px" }}
diff --git a/src/components/installermodal/InstallerModal.tsx b/src/components/installermodal/InstallerModal.tsx
index 07e46ed..355cff5 100644
--- a/src/components/installermodal/InstallerModal.tsx
+++ b/src/components/installermodal/InstallerModal.tsx
@@ -4,10 +4,13 @@ import { Modal } from "react-bootstrap";
 import {
     ControllerStatus,
     FirmwareChoice,
+    FirmwareFile,
     GithubRelease,
     GithubReleaseManifest,
+    GithubService,
     InstallService,
-    InstallerState
+    InstallerState,
+    validateSignature
 } from "../../services";
 import { Progress } from "../../panels";
 import { FlashProgress } from "../../services/FlashService";
@@ -53,7 +56,7 @@ const InstallerModal = ({
         console.log(data);
     };
 
-    const onInstall = async (baud: number) => {
+    const onInstall = async (baud: number, files: string[]) => {
         try {
             await controllerService?.disconnect(false);
         } catch (error) {
@@ -85,6 +88,33 @@ const InstallerModal = ({
                 setState(InstallerState.ERROR);
             }
 
+            if (!hasErrors) {
+                setState(InstallerState.UPLOADING_FILES);
+            }
+
+            await Promise.all(
+                files.map((file) => {
+                    const extraFile = manifest.files?.[file] as FirmwareFile;
+
+                    if (!extraFile) {
+                        return;
+                    }
+
+                    console.log("Uploading: ", extraFile);
+                    return GithubService.getExtraFile(release, extraFile)
+                        .then((data) => {
+                            validateSignature(extraFile.signature, data);
+                            return data;
+                        })
+                        .then((data) =>
+                            controllerService?.uploadFile(
+                                extraFile["controller-path"],
+                                Buffer.from(data)
+                            )
+                        );
+                })
+            );
+
             if (!hasErrors) {
                 setState(InstallerState.DONE);
             }
@@ -146,6 +176,17 @@ const InstallerModal = ({
                     </Log>
                 </Modal.Body>
             )}
+            {state === InstallerState.UPLOADING_FILES && (
+                <Modal.Body>
+                    <h3>Uploading files</h3>
+                    <p>
+                        Uploading files... <Spinner />
+                    </p>
+                    <Log show={showLog} onShow={setShowLog}>
+                        {log}
+                    </Log>
+                </Modal.Body>
+            )}
             {state === InstallerState.DONE && (
                 <>
                     <Modal.Body>
diff --git a/src/components/tooltip/ToolTip.tsx b/src/components/tooltip/ToolTip.tsx
new file mode 100644
index 0000000..462ad64
--- /dev/null
+++ b/src/components/tooltip/ToolTip.tsx
@@ -0,0 +1,27 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { ReactNode } from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+
+type Props = {
+    children: ReactNode;
+};
+
+const ToolTip = ({ children }: Props) => {
+    return (
+        <span style={{ marginLeft: "2px" }}>
+            {children && (
+                <OverlayTrigger overlay={<Tooltip>{children}</Tooltip>}>
+                    <FontAwesomeIcon
+                        icon={faInfoCircle as IconDefinition}
+                        size="sm"
+                        color="#3e6cf8"
+                    />
+                </OverlayTrigger>
+            )}
+        </span>
+    );
+};
+
+export default ToolTip;
diff --git a/src/pages/connection/Connection.tsx b/src/pages/connection/Connection.tsx
index 4811183..572e4e0 100644
--- a/src/pages/connection/Connection.tsx
+++ b/src/pages/connection/Connection.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { useState } from "react";
-import { Button } from "../../components";
+import { Button, Spinner } from "../../components";
 import ConnectionState from "../../model/ConnectionState";
 import { ControllerService } from "../../services";
 import { SerialPort } from "../../utils/serialport/SerialPort";
@@ -8,7 +8,7 @@ import "./connection.scss";
 import PageTitle from "../../components/pagetitle/PageTitle";
 import usePageView from "../../hooks/usePageView";
 import ControllerLog from "../../components/controllerlog/ControllerLog";
-import { Col, Container, Row } from "react-bootstrap";
+import { Col, Container, Modal, Row } from "react-bootstrap";
 import LatestVersionCard from "../../components/cards/latestversioncard/LatestVersionCard";
 
 const connectImageUrl = new URL("../../assets/connect.svg", import.meta.url);
@@ -109,7 +109,8 @@ const Connection = ({ onConnect }: Props) => {
                                     }
                                     loading={
                                         connectionState ===
-                                        ConnectionState.CONNECTING
+                                            ConnectionState.CONNECTING &&
+                                        !!controllerService
                                     }
                                 >
                                     <>
@@ -124,14 +125,28 @@ const Connection = ({ onConnect }: Props) => {
                             </div>
                         )}
 
-                        {connectionState === ConnectionState.CONNECTING && (
-                            <ControllerLog
-                                show={showLog}
-                                onShow={setShowLog}
-                                controllerService={controllerService}
-                                onError={() => {}}
-                            />
-                        )}
+                        {connectionState === ConnectionState.CONNECTING &&
+                            controllerService && (
+                                <>
+                                    <Modal show={true} size="lg" centered>
+                                        <Modal.Body>
+                                            <h3>Connecting</h3>
+                                            <p>
+                                                Establishing connection to
+                                                controller <Spinner />
+                                            </p>
+                                            <ControllerLog
+                                                show={showLog}
+                                                onShow={setShowLog}
+                                                controllerService={
+                                                    controllerService
+                                                }
+                                                onError={() => {}}
+                                            />
+                                        </Modal.Body>
+                                    </Modal>
+                                </>
+                            )}
                     </div>
                 </Col>
                 <Col md={5} lg={4}>
diff --git a/src/pages/wifisettings/WiFiSettings.tsx b/src/pages/wifisettings/WiFiSettings.tsx
index ec03e27..265cfe8 100644
--- a/src/pages/wifisettings/WiFiSettings.tsx
+++ b/src/pages/wifisettings/WiFiSettings.tsx
@@ -263,7 +263,7 @@ const WiFiSettings = () => {
 
             <>
                 <Row>
-                    <Col lg={3} className="d-none d-lg-block"></Col>
+                    <Col lg={4} className="d-none d-lg-block"></Col>
                     {!isSaving && (
                         <Col>
                             <WiFiStats
@@ -286,7 +286,7 @@ const WiFiSettings = () => {
                         Client station settings
                     </h4>
                     <Form.Group as={Row} className="mb-3">
-                        <Form.Label column sm="3">
+                        <Form.Label column sm="4">
                             SSID
                         </Form.Label>
                         <Col>
diff --git a/src/panels/firmware/Firmware.tsx b/src/panels/firmware/Firmware.tsx
index 36a8da4..7c34aab 100644
--- a/src/panels/firmware/Firmware.tsx
+++ b/src/panels/firmware/Firmware.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 
-import { Card } from "../../components";
+import { Card, Spinner } from "../../components";
 import {
     FirmwareChoice,
     GithubRelease,
@@ -12,7 +12,7 @@ import Choice from "../../components/choice";
 import { Markdown } from "../../components/markdown/Markdown";
 import PageTitle from "../../components/pagetitle/PageTitle";
 import FirmwareBreadCrumbList from "./FirmwareBreadcrumbList";
-import { FormCheck } from "react-bootstrap";
+import { Col, FormCheck } from "react-bootstrap";
 import { useLocalStorage } from "../../hooks/useLocalStorage";
 
 type Props = {
@@ -37,6 +37,7 @@ const Firmware = ({ onInstall }: Props) => {
         "showPrerelease",
         false
     );
+    const [isLoading, setLoading] = useState<boolean>(false);
 
     const choice = useMemo(
         () => selectedChoices[selectedChoices.length - 1],
@@ -47,6 +48,7 @@ const Firmware = ({ onInstall }: Props) => {
         setSelectedRelease(release);
 
         if (release) {
+            setLoading(true);
             GithubService.getReleaseManifest(release)
                 .then((manifest) => {
                     setReleaseManifest(manifest);
@@ -56,7 +58,8 @@ const Firmware = ({ onInstall }: Props) => {
                     setErrorMessage(
                         "Could not download the release asset " + error
                     );
-                });
+                })
+                .finally(() => setLoading(false));
         }
     };
 
@@ -122,7 +125,12 @@ const Firmware = ({ onInstall }: Props) => {
                 </>
             )}
 
-            {selectedRelease && (
+            {isLoading && (
+                <Col>
+                    Fetching <Spinner />
+                </Col>
+            )}
+            {!isLoading && selectedRelease && (
                 <>
                     {choice && releaseManifest && !choice.images && (
                         <>
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 91fb9cd..f93ff4e 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -1,5 +1,3 @@
-import { convertUint8ArrayToBinaryString } from "../utils/utils";
-
 export type GithubReleaseAsset = {
     id: number;
     name: string;
@@ -114,7 +112,7 @@ export const GithubService = {
     getImageFiles: (
         release: GithubRelease,
         images: FirmwareImage[]
-    ): Promise<string[]> => {
+    ): Promise<Uint8Array[]> => {
         const baseUrl = RESOURCES_BASE_URL + "/" + release.name + "/";
 
         return Promise.all(
@@ -133,9 +131,29 @@ export const GithubService = {
                             );
                         }
                     })
-                    .then((buffer) => new Uint8Array(buffer))
-                    .then((buffer) => convertUint8ArrayToBinaryString(buffer));
+                    .then((buffer) => new Uint8Array(buffer));
             })
         );
+    },
+
+    getExtraFile: (
+        release: GithubRelease,
+        file: FirmwareFile
+    ): Promise<Uint8Array> => {
+        const baseUrl = RESOURCES_BASE_URL + "/" + release.name + "/";
+
+        return fetch(baseUrl + file.path, {
+            headers: {
+                Accept: "application/octet-stream"
+            }
+        })
+            .then((response) => {
+                if (response.status === 200 || response.status === 0) {
+                    return response.arrayBuffer();
+                } else {
+                    return Promise.reject(new Error(response.statusText));
+                }
+            })
+            .then((buffer) => new Uint8Array(buffer));
     }
 };
diff --git a/src/services/InstallService.ts b/src/services/InstallService.ts
index 78229f8..11d8849 100644
--- a/src/services/InstallService.ts
+++ b/src/services/InstallService.ts
@@ -1,6 +1,7 @@
 import {
     FirmwareChoice,
     FirmwareImage,
+    FirmwareImageSignature,
     GithubRelease,
     GithubReleaseManifest,
     GithubService
@@ -10,6 +11,7 @@ import { flashDevice } from "../utils/flash";
 import sha256 from "crypto-js/sha256";
 import { enc } from "crypto-js/core";
 import { analytics, logEvent } from "./FirebaseService";
+import { convertUint8ArrayToBinaryString } from "../utils/utils";
 
 export enum FirmwareType {
     WIFI = "wifi",
@@ -23,14 +25,15 @@ export enum InstallerState {
     ENTER_FLASH_MODE,
     FLASHING,
     RESTARTING,
+    UPLOADING_FILES,
     DONE,
     ERROR
 }
 
 const convertImagesToFlashFiles = (
     images: FirmwareImage[],
-    files: string[]
-) => {
+    files: Uint8Array[]
+): FlashFile[] => {
     if (images.length != files.length) {
         throw new Error("Could not extract files from package");
     }
@@ -69,9 +72,9 @@ export const InstallService = {
             (imageName) => manifest.images[imageName]
         ) as FirmwareImage[];
 
-        let files: string[] = [];
+        let imageFiles: Uint8Array[] = [];
         try {
-            files = await GithubService.getImageFiles(release, images);
+            imageFiles = await GithubService.getImageFiles(release, images);
         } catch (error) {
             logEvent(analytics, "install", {
                 version: release.name,
@@ -86,7 +89,7 @@ export const InstallService = {
 
         try {
             onState(InstallerState.CHECKING_SIGNATURES);
-            validateImageSignatures(images, files);
+            validateImageSignatures(images, imageFiles);
         } catch (error) {
             logEvent(analytics, "install", {
                 version: release.name,
@@ -99,7 +102,10 @@ export const InstallService = {
         }
 
         try {
-            const flashFiles = await convertImagesToFlashFiles(images, files);
+            const flashFiles = await convertImagesToFlashFiles(
+                images,
+                imageFiles
+            );
             await flashDevice(
                 serialPort.getNativeSerialPort(),
                 flashFiles,
@@ -129,32 +135,36 @@ export const InstallService = {
         return Promise.resolve();
     }
 };
-function validateImageSignatures(images: FirmwareImage[], files: string[]) {
+export const validateImageSignatures = (
+    images: FirmwareImage[],
+    files: Uint8Array[]
+) => {
     images.forEach((image, index) => {
-        if (image.signature.algorithm === "SHA2-256") {
-            const signature = sha256(enc.Latin1.parse(files[index])).toString();
-            if (image.signature.value !== signature) {
-                console.error(
-                    "The image " +
-                        image.path +
-                        " is possible corrupt. Signature was " +
-                        signature +
-                        " but manifest says " +
-                        image.signature.value
-                );
-                throw (
-                    "The image " +
-                    image.path +
-                    " might be corrupt as its signature does not match the manifest."
-                );
-            }
-        } else {
-            throw (
-                "The image " +
-                image.path +
-                " has an unknown signature algorithm: " +
-                image.signature.algorithm
+        validateSignature(image.signature, files[index]);
+    });
+};
+
+export const validateSignature = (
+    signature: FirmwareImageSignature,
+    data: Uint8Array
+) => {
+    if (signature.algorithm === "SHA2-256") {
+        const sign = sha256(
+            enc.Latin1.parse(convertUint8ArrayToBinaryString(data))
+        ).toString();
+        if (signature.value !== sign) {
+            console.error(
+                "The files is possible corrupt. Signature was " +
+                    sign +
+                    ", expected " +
+                    signature.value
             );
+            throw "The file might be corrupt as its signature does not match the manifest.";
         }
-    });
-}
+    } else {
+        throw (
+            "The file has an unknown signature algorithm: " +
+            signature.algorithm
+        );
+    }
+};
diff --git a/src/services/controllerservice/commands/GetAccessPointListCommand.ts b/src/services/controllerservice/commands/GetAccessPointListCommand.ts
index 5aaaa51..05c3a14 100644
--- a/src/services/controllerservice/commands/GetAccessPointListCommand.ts
+++ b/src/services/controllerservice/commands/GetAccessPointListCommand.ts
@@ -26,7 +26,9 @@ export class GetAccessPointListCommand extends Command {
             const r = this.response
                 .filter(
                     (line) =>
-                        !line.startsWith("[MSG") && !line.startsWith("[OPT")
+                        !line.startsWith("[MSG") &&
+                        !line.startsWith("[OPT") &&
+                        !line.startsWith("$Wifi")
                 )
                 .slice(0, -1)
                 .join("");
diff --git a/src/utils/flash.ts b/src/utils/flash.ts
index 462c486..a986ebc 100644
--- a/src/utils/flash.ts
+++ b/src/utils/flash.ts
@@ -3,10 +3,17 @@ import CryptoJS from "crypto-js";
 import { FlashProgress } from "../services/FlashService";
 import { NativeSerialPort } from "./serialport/typings";
 import { InstallerState } from "../services";
+import { convertUint8ArrayToBinaryString } from "./utils";
+
+type FlashFile = {
+    fileName: string;
+    data: Uint8Array;
+    address: number;
+};
 
 export const flashDevice = async (
     serialPort: NativeSerialPort,
-    files,
+    files: FlashFile[],
     erase: boolean,
     baud: number,
     onProgress: (progress: FlashProgress) => void,
@@ -38,7 +45,10 @@ export const flashDevice = async (
 
         onState(InstallerState.FLASHING);
         const flashOptions: FlashOptions = {
-            fileArray: files,
+            fileArray: files.map((f) => ({
+                address: f.address,
+                data: convertUint8ArrayToBinaryString(f.data)
+            })),
             flashSize: "keep",
             eraseAll: erase,
             compress: true,