Add WAN credential viewing and changing

6 files changed, 247 insertions, 18 deletions

diff --git a/src/dashboard.html b/src/dashboard.html
index 84e7a04..50464d4 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -13,6 +13,30 @@
       <h1>Übersicht</h1>
 
       <div class="row">
+        <form id="dashboard-form">
+          <!-- <button id="dashboard-submit" type="submit">Zurück zur Übersicht</button> -->
+        </form>
+
+        <form id="wan-open-form">
+          <button id="wan-open-submit" type="submit">Einwahl und Zugansdaten</button>
+        </form>
+
+        <form id="lan-open-form">
+          <button id="lan-open-submit" type="submit">LAN</button>
+        </form>
+
+        <form id="ddns-open-form">
+          <button id="ddns-open-submit" type="submit">Dynamisches DNS (INWX)</button>
+        </form>
+
+        <form id="log-open-form">
+          <button id="log-open-submit" type="submit">Diagnoseprotokolle</button>
+        </form>
+
+        <form id="sys-open-form">
+          <button id="sys-open-submit" type="submit">Systemeinstellungen</button>
+        </form>
+
         <form id="disconnect-form">
           <button id="disconnect-submit" type="submit">Abmelden</button>
         </form>
diff --git a/src/dashboard.js b/src/dashboard.js
index 3e39b0d..ae1116c 100644
--- a/src/dashboard.js
+++ b/src/dashboard.js
@@ -1,6 +1,28 @@
 const { invoke } = window.__TAURI__.tauri;
 
-let disconnectSubmitEl;
+function dashboard() {
+  window.location = "dashboard.html";
+}
+
+function wanOpen() {
+  window.location = "wan.html";
+}
+
+function lanOpen() {
+  window.location = "lan.html";
+}
+
+function ddnsOpen() {
+  window.location = "ddns.html";
+}
+
+function logOpen() {
+  window.location = "log.html";
+}
+
+function sysOpen() {
+  window.location = "sys.html";
+}
 
 async function disconnect() {
   // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -9,7 +31,30 @@ async function disconnect() {
 }
 
 window.addEventListener("DOMContentLoaded", () => {
-  disconnectSubmitEl = document.querySelector("#disconnect-submit");
+  document.querySelector("#dashboard-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    dashboard();
+  });
+  document.querySelector("#wan-open-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    wanOpen();
+  });
+  document.querySelector("#lan-open-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    lanOpen();
+  });
+  document.querySelector("#ddns-open-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    ddnsOpen();
+  });
+  document.querySelector("#log-open-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    logOpen();
+  });
+  document.querySelector("#sys-open-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    sysOpen();
+  });
   document.querySelector("#disconnect-form").addEventListener("submit", (e) => {
     e.preventDefault();
     disconnect();
diff --git a/src/index.html b/src/index.html
index 0443284..e99099e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,25 +13,25 @@
       <h1>RSDSL Verwaltungswerkzeug</h1>
 
       <form id="connect-form">
-		    <label class="row" for="connect-url" form="connect-form">Instanz-URL:</label>
-    		<div class="row">
-          <input class="row" id="connect-url" value="https://10.128.10.254:8443" />
-	    	</div>
+        <label class="row" for="connect-url" form="connect-form">Instanz-URL:</label>
+        <div class="row">
+          <input id="connect-url" value="https://10.128.10.254:8443" />
+        </div>
 
-		    <br />
+        <br />
 
-		    <label for="connect-password" form="connect-form">Passwort:</label>
-		    <div class="row">
-		      <input id="connect-password" type="password" />
-		    </div>
-
-		    <br />
-
-		    <div class="row">
+        <label for="connect-password" form="connect-form">Passwort:</label>
+        <div class="row">
+          <input id="connect-password" type="password" />
+        </div>
+        
+        <br />
+        
+        <div class="row">
            <button id="connect-submit" type="submit">Verbinden</button>
-		    </div>
-
-		    <p id="connect-status"></p>
+        </div>
+        
+        <p id="connect-status"></p>
       </form>
     </div>
   </body>
diff --git a/src/styles.css b/src/styles.css
index 485d56e..f0cae8d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -72,6 +72,8 @@ button {
 
 button {
   cursor: pointer;
+  margin-left: 1em;
+  margin-right: 1em;
 }
 
 button:hover:enabled {
diff --git a/src/wan.html b/src/wan.html
new file mode 100644
index 0000000..5f88050
--- /dev/null
+++ b/src/wan.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Einwahl und Zugangsdaten - RSDSL Verwaltungswerkzeug</title>
+    <script type="module" src="/dashboard.js" defer></script>
+    <script type="module" src="/wan.js" defer></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>Einwahl und Zugangsdaten</h1>
+
+      <div class="row">
+        <form id="dashboard-form">
+          <button id="dashboard-submit" type="submit">Zurück zur Übersicht</button>
+        </form>
+
+        <form id="wan-open-form">
+          <button id="wan-open-submit" type="submit">Einwahl und Zugansdaten</button>
+        </form>
+
+        <form id="lan-open-form">
+          <button id="lan-open-submit" type="submit">LAN</button>
+        </form>
+
+        <form id="ddns-open-form">
+          <button id="ddns-open-submit" type="submit">Dynamisches DNS (INWX)</button>
+        </form>
+
+        <form id="log-open-form">
+          <button id="log-open-submit" type="submit">Diagnoseprotokolle</button>
+        </form>
+
+        <form id="sys-open-form">
+          <button id="sys-open-submit" type="submit">Systemeinstellungen</button>
+        </form>
+
+        <form id="disconnect-form">
+          <button id="disconnect-submit" type="submit">Abmelden</button>
+        </form>
+      </div>
+
+      <br />
+
+      <form id="credentials-form">
+        <fieldset>
+          <legend>PPPoE-Zugangsdaten</legend>
+
+          <label for="credentials-username" form="credentials-form">Benutzername:</label>
+          <div class="row">
+            <input id="credentials-username" />
+          </div>
+
+          <br />
+
+          <label for="credentials-password" form="credentials-form">Passwort:</label>
+          <div class="row">
+            <input id="credentials-password" type="password" />
+          </div>
+          <br />
+          <div class="row">
+            <button id="credentials-show" type="default">🔒Passwort ein-/ausblenden</button>
+          </div>
+
+          <br />
+
+          <div class="row">
+            <button id="credentials-submit" type="submit">Zugangsdaten ändern</button>
+          </div>
+
+          <p id="credentials-status">Warte auf Initialisierung...</p>
+        </fieldset>
+      </form>
+    </div>
+  </body>
+</html>
diff --git a/src/wan.js b/src/wan.js
new file mode 100644
index 0000000..ec73e8d
--- /dev/null
+++ b/src/wan.js
@@ -0,0 +1,79 @@
+const { invoke } = window.__TAURI__.tauri;
+const { ask } = window.__TAURI__.dialog;
+
+let credentialsUsernameEl;
+let credentialsPasswordEl;
+let credentialsSubmitEl;
+let credentialsStatusEl;
+
+function showCredentials() {
+  switch (credentialsPasswordEl.type) {
+    case "password":
+      credentialsPasswordEl.type = "text";
+      break;
+    case "text":
+      credentialsPasswordEl.type = "password";
+      break;
+  }
+}
+
+async function loadCredentials() {
+  credentialsStatusEl.innerText = "Lade aktuelle Zugangsdaten...";
+  document.body.style.cursor = "progress";
+
+  const currentCredentials = await invoke("load_wan_credentials", {});
+
+  credentialsUsernameEl.value = currentCredentials.username;
+  credentialsPasswordEl.value = currentCredentials.password;
+  credentialsStatusEl.innerText = currentCredentials.status_text;
+  document.body.style.cursor = "default";
+}
+
+async function changeCredentials() {
+  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+  credentialsUsernameEl.disabled = true;
+  credentialsPasswordEl.disabled = true;
+  credentialsSubmitEl.disabled = true;
+  credentialsStatusEl.innerText = "Änderungsanfrage...";
+  document.body.style.cursor = "progress";
+
+  credentialsStatusEl.innerText = await invoke("change_wan_credentials", {
+    credentials: {
+      username: credentialsUsernameEl.value,
+      password: credentialsPasswordEl.value
+    }
+  });
+
+  credentialsUsernameEl.disabled = false;
+  credentialsPasswordEl.disabled = false;
+  credentialsSubmitEl.disabled = false;
+  document.body.style.cursor = "default";
+
+  const reconnect = await ask("Zum Übernehmen der neuen Zugangsdaten muss die Einwahl zum Internetanbieter neu aufgebaut werden. Dies dauert ca. 30 Sekunden. Möchten Sie die Einwahl jetzt neu herstellen?", {
+    kind: "warning",
+    title: "Neueinwahl erforderlich",
+  });
+
+  if (reconnect) {
+    await wanColdReconnect();
+  }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  credentialsUsernameEl = document.querySelector("#credentials-username");
+  credentialsPasswordEl = document.querySelector("#credentials-password");
+  credentialsSubmitEl = document.querySelector("#credentials-submit");
+  credentialsStatusEl = document.querySelector("#credentials-status");
+
+  document.querySelector("#credentials-show").addEventListener("click", (e) => {
+    e.preventDefault();
+    showCredentials();
+  });
+
+  document.querySelector("#credentials-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    changeCredentials();
+  });
+
+  loadCredentials();
+});