toniebox-reverse-engineeringgh-189 prepared esp32 flashing form for u…

…pcoming functionality
henryk86 · Dec 14, 2024 · b1e3495 · b1e3495
1 parent e5ea290
commit b1e3495
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 2 deletions.
diff --git a/public/translations/de.json b/public/translations/de.json
@@ -1167,6 +1167,8 @@
                 "hintPatchHost": "Gib den gewünschten Hostnamen deiner TeddyCloud-Instanz ein.",
                 "hintPatchWifi": "Gib optional die WiFi Zugangsdaten für deine Toniebox ein.",
                 "hintReadESP32ImportFlash": "Trenne die Stromversorgung deiner Toniebox. Stelle sicher, dass der UART im 3.3V Modus arbeitet. Verbinde dein UART mit deinem PC und der Toniebox. Schliesse die J100-Pinlöcher kurz. Klicke auf \"Flash lesen\" oder \"Datei laden\" und wähle dann den COM-Port. Schließe dann deine Toniebox an die Stromversorgung an und warte, bis der Schritt abgeschlossen ist!",
+                "flagPreviousHostname": "Das Flash-Image enthält einen zuvor festgelegten TeddyCloud-Hostname (WIP, wird derzeit nicht verarbeitet)",
+                "previousHostname": "Alter TeddyCloud-Hostname:",
                 "hostname": "TeddyCloud-Hostname:",
                 "hostnameSettings": "Hostname TeddyCloud",
                 "hostnameTooLong": "Der Hostname sollte weniger als 13 Zeichen lang sein.",

diff --git a/public/translations/en.json b/public/translations/en.json
@@ -1168,6 +1168,8 @@
                 "hintPatchWifi": "Optionally enter the WiFi credentials for your Toniebox.",
                 "hintReadESP32ImportFlash": "Now disconnect the powersource of your Toniebox. Make sure that the UART operates in 3.3V mode. Connect your UART with your PC and Toniebox. Short cut the J100 pinholes. Click on \"Read Flash\" or \"Load File\", then choose the COM-Port. Then connect your Toniebox to power and wait till the step is done!",
                 "hostname": "TeddyCloud Hostname:",
+                "flagPreviousHostname": "Flash image contains a previous set hostname of TeddyCloud (WIP, not processed currently)",
+                "previousHostname": "Old TeddyCloud hostname:",
                 "hostnameSettings": "Hostname TeddyCloud",
                 "hostnameTooLong": "The hostname should be less than 13 characters long.",
                 "infoTable": "ESP32 info",

diff --git a/public/translations/es.json b/public/translations/es.json
@@ -1167,6 +1167,8 @@
                 "hintPatchHost": "Introduce el nombre de host deseado para tu instancia de TeddyCloud.",
                 "hintPatchWifi": "Opcionalmente ingresa las credenciales WiFi para tu Toniebox.",
                 "hintReadESP32ImportFlash": "Ahora desconecta la fuente de alimentación de tu Toniebox. Asegúrate de que el UART opere en modo 3.3V. Conecta tu UART con tu PC y Toniebox. Haz un cortocircuito en los pines J100. Haz clic en \"Leer Flash\" o \"Cargar archivo\", luego elige el puerto COM. Luego conecta tu Toniebox a la alimentación y espera hasta que se complete el paso.",
+                "flagPreviousHostname": "La imagen de flash contiene un nombre de host de TeddyCloud establecido previamente (WIP, actualmente no procesado)",
+                "previousHostname": "Nombre de host antiguo de TeddyCloud:",
                 "hostname": "Nombre de host de TeddyCloud:",
                 "hostnameSettings": "Configuración del nombre de host",
                 "hostnameTooLong": "El nombre de host debe tener menos de 13 caracteres.",

diff --git a/public/translations/fr.json b/public/translations/fr.json
@@ -1167,6 +1167,8 @@
                 "hintPatchHost": "Entrez le nom d'hôte souhaité pour votre instance TeddyCloud.",
                 "hintPatchWifi": "Entrez optionnellement les identifiants WiFi pour votre Toniebox.",
                 "hintReadESP32ImportFlash": "Déconnecte l'alimentation de ta Toniebox. Assure-toi que l'UART fonctionne en mode 3.3V. Connecte ton UART à ton PC et à la Toniebox. Court-circuite les trous de broche J100. Clique sur \"Lire le Flash\" ou \"Charger le fichier\", puis choisis le port COM. Ensuite, connecte ta Toniebox à l'alimentation et attends que l'étape soit terminée !",
+                "flagPreviousHostname": "L'image flash contient un nom d'hôte TeddyCloud défini précédemment (WIP, non traité actuellement)",
+                "previousHostname": "Ancien nom d'hôte TeddyCloud :",
                 "hostname": "Nom d'hôte TeddyCloud:",
                 "hostnameSettings": "Nom d'hôte TeddyCloud",
                 "hostnameTooLong": "Le nom d'hôte doit être inférieur à 13 caractères.",

diff --git a/src/pages/community/ChangelogPage.tsx b/src/pages/community/ChangelogPage.tsx
@@ -45,6 +45,7 @@ export const ChangelogPage = () => {
                 "gui: Overworked mobile menu layout: section menus now part of the drawer and not shown always on each page, use + icon in mobile to expand menu",
                 "gui: Added How to Create a Good Support Request page",
                 "gui: Added reset shortcut in esp32 flashing process https://github.com/toniebox-reverse-engineering/teddycloud_web/issues/190",
+                "gui: Prepared esp32 flashing with previously set TeddyCloud hostname instead of original one https://github.com/toniebox-reverse-engineering/teddycloud_web/issues/189",
                 "gui: Some refactoring",
             ],
             commits: [

diff --git a/src/pages/tonieboxes/boxsetup/esp32/ESP32BoxFlashingPage.tsx b/src/pages/tonieboxes/boxsetup/esp32/ESP32BoxFlashingPage.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import {
     Alert,
     Button,
+    Checkbox,
     Col,
     Collapse,
     Divider,
@@ -68,6 +69,8 @@ interface ESP32Flasher {
     showDownload: boolean;
     showFlash: boolean;
     connected: boolean;
+    flagPreviousHostname: boolean;
+    previousHostname: string;
     hostname: string;
     wifi_ssid: string;
     wifi_pass: string;
@@ -102,7 +105,7 @@ export const ESP32BoxFlashingPage = () => {
 
     const [extractCertificateErrorMessage, setExtractCertificateErrorMessage] = useState<string>("");
 
-    const [currentStep, setCurrent] = useState(0);
+    const [currentStep, setCurrent] = useState(1);
 
     const [isOpenAvailableBoxesModal, setIsOpenAvailableBoxesModal] = useState(false);
 
@@ -125,6 +128,8 @@ export const ESP32BoxFlashingPage = () => {
         showDownload: false,
         showFlash: false,
         connected: false,
+        flagPreviousHostname: false,
+        previousHostname: "",
         hostname: window.location.hostname,
         wifi_ssid: "",
         wifi_pass: "",
@@ -1293,6 +1298,51 @@ export const ESP32BoxFlashingPage = () => {
                 <Form>
                     <Divider>{t("tonieboxes.esp32BoxFlashing.esp32flasher.hostnameSettings")}</Divider>
                     <Paragraph>{t("tonieboxes.esp32BoxFlashing.esp32flasher.hintPatchHost")}</Paragraph>
+                    <Form.Item>
+                        <Row align="middle" style={{ display: "flex", alignItems: "center" }}>
+                            <Col>
+                                <Checkbox
+                                    checked={state.flagPreviousHostname}
+                                    onChange={(e) => {
+                                        setState((prevState) => ({
+                                            ...prevState,
+                                            flagPreviousHostname: e.target.checked,
+                                        }));
+                                    }}
+                                >
+                                    {t("tonieboxes.esp32BoxFlashing.esp32flasher.flagPreviousHostname")}
+                                </Checkbox>
+                            </Col>
+                        </Row>
+                    </Form.Item>
+                    {state.flagPreviousHostname && (
+                        <Form.Item>
+                            <Row align="middle" style={{ display: "flex", alignItems: "center" }}>
+                                <Col style={{ flex: "0 0 200px" }}>
+                                    <label>{t("tonieboxes.esp32BoxFlashing.esp32flasher.previousHostname")}</label>
+                                </Col>
+                                <Col style={{ flex: "1 1 auto" }}>
+                                    <Input
+                                        type="text"
+                                        value={state.previousHostname}
+                                        onChange={(e) => {
+                                            let value = sanitizeHostname(e.target.value);
+                                            setState((prevState) => ({
+                                                ...prevState,
+                                                previousHostname: value,
+                                            }));
+                                        }}
+                                    />
+                                </Col>
+                            </Row>
+                            {state.warningTextHostname && (
+                                <p style={{ color: "#CC3010" }}>
+                                    {t("tonieboxes.esp32BoxFlashing.esp32flasher.hostnameTooLong")}
+                                </p>
+                            )}
+                        </Form.Item>
+                    )}
+
                     <Form.Item>
                         <Row align="middle" style={{ display: "flex", alignItems: "center" }}>
                             <Col style={{ flex: "0 0 200px", color: state.warningTextHostname ? "#CC3010" : "unset" }}>
@@ -1772,7 +1822,11 @@ cp ${certDirWithMac}/ca.der ${certDir}/ca.der`}
                         <div style={{ display: "flex", gap: 8 }}>
                             <Button
                                 icon={<CodeOutlined />}
-                                disabled={disableButtons}
+                                disabled={
+                                    disableButtons ||
+                                    state.hostname === "" ||
+                                    (state.flagPreviousHostname && state.previousHostname === "")
+                                }
                                 type="primary"
                                 onClick={() => patchImage()}
                             >