Add disconnect button if authentication is enabled

Fix Upload file dialog box not show if authentication failed initially

src/components/about/index.js

@@ -158,13 +158,13 @@ function processUpload() {
     var formData = new FormData()
     var url = pathUpload
     formData.append("path", "/")
-    showDialog({
+    let progressDlg = {
         type: "progress",
         progress: 0,
         title: T("S32"),
         button1text: T("S28"),
         next: cancelUpload,
-    })
+    }
     for (var i = 0; i < uploadFiles.length; i++) {
         var file = uploadFiles[i]
         var arg = "/" + file.name + "S"
@@ -172,7 +172,14 @@ function processUpload() {
         formData.append(arg, file.size)
         formData.append("myfile", file, "/" + file.name)
     }
-    SendPostHttp(url, formData, successUpload, errorUpload, progressUpload)
+    SendPostHttp(
+        url,
+        formData,
+        successUpload,
+        errorUpload,
+        progressUpload,
+        progressDlg
+    )
 }
 
 /*

src/components/dialog/index.js

@@ -32,7 +32,6 @@ import { SubmitCredentials } from "../http"
  */
 let loginvalue = ""
 let passwordvalue = ""
-let passwordvisible = false
 
 /*
  * Some constants
@@ -43,7 +42,9 @@ let passwordvisible = false
  *
  */
 function goLogIn() {
+    hideDialog()
     SubmitCredentials(loginvalue, passwordvalue)
+    passwordvalue = ""
 }
 
 /*
@@ -74,13 +75,12 @@ const LoginEntry = () => {
  *
  */
 const PasswordEntry = () => {
-    const [isvisible, setVisible] = useState(passwordvisible)
+    const [isvisible, setVisible] = useState(false)
     const onInput = e => {
         passwordvalue = e.target.value
     }
     const onToggle = e => {
-        passwordvisible = !passwordvisible
-        setVisible(passwordvisible)
+        setVisible(!isvisible)
         showDialog({ displayDialog: false })
         showDialog({ type: "login" })
     }

src/components/header/index.js

@@ -21,12 +21,18 @@
 import { h } from "preact"
 import { Page, customdata } from "../app"
 import { ESP3DLogo, ESP3DBanner } from "../images"
-import { Server, Settings, Eye } from "preact-feather"
+import { Server, Settings, Eye, Lock } from "preact-feather"
 import { T } from "../translations"
 import { prefs } from "../settings"
-import { esp3dSettings } from "../app"
+import { esp3dSettings, disconnectPage } from "../app"
+import { SubmitCredentials } from "../http"
 import { useStoreon } from "storeon/preact"
 
+function disconnectNow() {
+    SubmitCredentials()
+    disconnectPage()
+}
+
 /*
  * Header component
  *
@@ -114,6 +120,20 @@ export const Header = () => {
                 <Settings />
                 <span class="disable-select hide-low">&nbsp;{T("S14")}</span>
             </div>
+            <div
+                class={
+                    esp3dSettings.FWTarget == "unknown"
+                        ? "d-none"
+                        : esp3dSettings.Authentication == "Enabled"
+                        ? "nav-item"
+                        : "d-none"
+                }
+                title={T("S151")}
+                onClick={disconnectNow}
+            >
+                <Lock />
+                <span class="disable-select hide-low">&nbsp;{T("S151")}</span>
+            </div>
             <ESP3DBanner
                 visible={prefs.banner}
                 title={titlebanner}

src/components/http/index.js

@@ -22,7 +22,7 @@ import { h } from "preact"
 import { getPageId, pausePing } from "../websocket"
 import { showDialog } from "../dialog"
 import { T } from "../translations"
-import { updateTerminal } from "../app"
+import { updateTerminal, esp3dSettings } from "../app"
 
 /*
  * Local variables
@@ -85,18 +85,17 @@ function defaultHttpResultFn(response_text) {
  * Handle query error
  */
 function defaultHttpErrorFn(errorcode, response_text) {
+    if (errorcode == 401) {
+        requestAuthentication()
+        return
+    }
     if (
         httpCommandList.length > 0 &&
         typeof httpCommandList[0].errorfn != "undefined" &&
         httpCommandList[0].errorfn
     ) {
         var fn = httpCommandList[0].errorfn
-        if (errorcode == 401) {
-            requestAuthentication()
-            return
-        } else {
-            fn(errorcode, response_text)
-        }
+        fn(errorcode, response_text)
     } else {
         console.log("Error : " + errorcode + " : " + response_text)
     }
@@ -107,9 +106,13 @@ function defaultHttpErrorFn(errorcode, response_text) {
  * Request Login/Password
  */
 function requestAuthentication() {
+    console.log("Request authentication")
     //remove previous failed command
     if (httpCommandList.length > 0) {
-        if (httpCommandList[0].id == "login") httpCommandList.shift()
+        if (httpCommandList[0].id == "login") {
+            console.log("Removing login command from list")
+            httpCommandList.shift()
+        }
     }
     showDialog({ type: "login" })
 }
@@ -158,10 +161,10 @@ function SendGetHttp(url, result_fn, error_fn, progress_fn, id, max_id) {
     var cmd = {
         uri: url,
         type: "GET",
-        isupload: false,
         resultfn: result_fn,
         errorfn: error_fn,
         progressfn: progress_fn,
+        progressdlg: null,
         id: cmd_id,
     }
     httpCommandList.push(cmd)
@@ -177,6 +180,7 @@ function SendPostHttp(
     result_fn,
     error_fn,
     progress_fn,
+    progressDlg,
     id,
     max_id
 ) {
@@ -209,15 +213,28 @@ function SendPostHttp(
     var cmd = {
         uri: url,
         type: "POST",
-        isupload: false,
         data: postdata,
         resultfn: result_fn,
         errorfn: error_fn,
         progressfn: progress_fn,
+        progressdlg: progressDlg,
         id: cmd_id,
     }
+    //do a check before sending command to keep in buffer if authentication failed
+    if (esp3dSettings.Authentication == "Enabled") {
+        httpCommandList.push({
+            uri: "/command?ping=yes",
+            type: "GET",
+            resultfn: null,
+            errorfn: null,
+            progressfn: null,
+            progressdlg: null,
+            id: "ping",
+        })
+    }
     //put command at the end of list
     httpCommandList.push(cmd)
+    console.log(httpCommandList)
     processCommands()
 }
 
@@ -241,17 +258,17 @@ function SubmitCredentials(login, password, newpassword, timeout) {
         }
         formData.append("SUBMIT", "yes")
     } else {
-        formData.append("DISCONNNECT", "yes")
+        formData.append("DISCONNECT", "yes")
     }
 
     var cmd = {
         uri: url,
         type: "POST",
-        isupload: false,
         data: formData,
         resultfn: null,
         errorfn: null,
         progressfn: null,
+        progressdlg: null,
         id: "login",
     }
     //put command at the top of list
@@ -264,6 +281,8 @@ function SubmitCredentials(login, password, newpassword, timeout) {
  * Process all commands one by one
  */
 function processCommands() {
+    console.log("Entering processing commands")
+    console.log(Object.values(httpCommandList))
     if (httpCommandList.length > 0 && !isProcessingHttpCommand) {
         console.log(
             "Processing " +
@@ -330,6 +349,10 @@ function processCommands() {
                 console.log("Post query")
                 console.log(httpCommandList[0].data)
             }
+            if (httpCommandList[0].progressdlg != null) {
+                console.log("Display progress dialog")
+                showDialog(httpCommandList[0].progressdlg)
+            }
             currentHttpCommand.send(
                 httpCommandList[0].type == "POST"
                     ? httpCommandList[0].data

src/components/printer/files.js

@@ -1319,13 +1319,13 @@ function processUpload() {
     var formData = new FormData()
     var url = pathUpload
     formData.append("path", currentPath[currentFilesType])
-    showDialog({
+    let progressDlg = {
         type: "progress",
         progress: 0,
         title: T("S32"),
         button1text: T("S28"),
         next: cancelUpload,
-    })
+    }
     for (var i = 0; i < uploadFiles.length; i++) {
         var file = uploadFiles[i]
         var arg =
@@ -1343,7 +1343,14 @@ function processUpload() {
                 file.name
         )
     }
-    SendPostHttp(url, formData, successUpload, errorUpload, progressAction)
+    SendPostHttp(
+        url,
+        formData,
+        successUpload,
+        errorUpload,
+        progressAction,
+        progressDlg
+    )
 }
 
 /*

src/components/settings/webui.js

@@ -580,19 +580,26 @@ function savePreferences() {
     var blob = new Blob([JSON.stringify(preferences, null, " ")], {
         type: "application/json",
     })
-    showDialog({
+    let progressDlg = {
         type: "progress",
         title: T("S32"),
         button1text: T("S28"),
         next: cancelUpload,
         progress: 0,
-    })
+    }
     var file = new File([blob], preferencesFileName)
     var formData = new FormData()
     var url = "/files"
     formData.append("path", "/")
     formData.append("myfile", file, preferencesFileName)
-    SendPostHttp(url, formData, successUpload, errorUpload, progressUpload)
+    SendPostHttp(
+        url,
+        formData,
+        successUpload,
+        errorUpload,
+        progressUpload,
+        progressDlg
+    )
 }
 
 /*

src/components/translations/en.json

@@ -149,6 +149,7 @@
     "S148" : "Log In",
     "S149": "You are now disconnected",
     "S150": "Disconnected",
+    "S151": "Disconnect",
     "chip id" : "Chip ID",
     "CPU Freq" : "CPU Frequency",
     "CPU Temp" : "CPU Temperature",

src/components/version.js

@@ -19,4 +19,4 @@
 */
 import { h } from "preact"
 
-export const Esp3dVersion = () => <span>3.0.0.67</span>
+export const Esp3dVersion = () => <span>3.0.0.68</span>

webpack/plugins/remove-files-webpack-plugin.js

@@ -11,7 +11,7 @@ const config = {
         include: [process.env.TARGET_ENV],
     },
     after: {
-        exclude: [dist  + "/index.html.gz"],
+        exclude: [dist + "/index.html.gz"],
         test: [
             {
                 folder: "./" + dist,

webpack/plugins/terser-plugin.js

@@ -19,7 +19,7 @@ const config = {
             ecma: 5,
             warnings: false,
             comparisons: false,
-            drop_console: process.env.BUILD_ENV == "debug" ? false:true,
+            drop_console: process.env.BUILD_ENV == "debug" ? false : true,
         },
         mangle: {
             safari10: true,

webpack/production.js

@@ -2,7 +2,7 @@ import merge from "webpack-merge"
 import environment from "./environment"
 import { productionPlugins, optimizationPlugins } from "./plugins"
 var path = require("path")
-var dist = "../dist/" +  process.env.TARGET_ENV + "/" + process.env.BUILD_ENV
+var dist = "../dist/" + process.env.TARGET_ENV + "/" + process.env.BUILD_ENV
 module.exports = merge(environment, {
     optimization: optimizationPlugins,
     plugins: productionPlugins,