diff options
| author | Himbeer <himbeer@disroot.org> | 2024-08-04 15:05:57 +0200 |
|---|---|---|
| committer | Himbeer <himbeer@disroot.org> | 2024-08-04 15:05:57 +0200 |
| commit | fdb755282f7cf0b454a4ccc4da7bbef30d3cc5a7 (patch) | |
| tree | e521e0b12166f14605cdb02a46ad64f01429aeb5 /src | |
| parent | cf5116449276e839a2642accb71988fcf8e07a2e (diff) | |
Initial login/logout application
Diffstat (limited to 'src')
| -rw-r--r-- | src/dashboard.html | 22 | ||||
| -rw-r--r-- | src/dashboard.js | 17 | ||||
| -rw-r--r-- | src/index.html | 45 | ||||
| -rw-r--r-- | src/main.js | 38 | ||||
| -rw-r--r-- | src/styles.css | 11 |
5 files changed, 98 insertions, 35 deletions
diff --git a/src/dashboard.html b/src/dashboard.html new file mode 100644 index 0000000..84e7a04 --- /dev/null +++ b/src/dashboard.html @@ -0,0 +1,22 @@ +<!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>Übersicht - RSDSL Verwaltungswerkzeug</title> + <script type="module" src="/dashboard.js" defer></script> + </head> + + <body> + <div class="container"> + <h1>Übersicht</h1> + + <div class="row"> + <form id="disconnect-form"> + <button id="disconnect-submit" type="submit">Abmelden</button> + </form> + </div> + </div> + </body> +</html> diff --git a/src/dashboard.js b/src/dashboard.js new file mode 100644 index 0000000..3e39b0d --- /dev/null +++ b/src/dashboard.js @@ -0,0 +1,17 @@ +const { invoke } = window.__TAURI__.tauri; + +let disconnectSubmitEl; + +async function disconnect() { + // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command + await invoke("disconnect", {}); + window.location = "index.html"; +} + +window.addEventListener("DOMContentLoaded", () => { + disconnectSubmitEl = document.querySelector("#disconnect-submit"); + document.querySelector("#disconnect-form").addEventListener("submit", (e) => { + e.preventDefault(); + disconnect(); + }); +}); diff --git a/src/index.html b/src/index.html index 3b7e70d..0443284 100644 --- a/src/index.html +++ b/src/index.html @@ -1,41 +1,38 @@ <!doctype html> -<html lang="en"> +<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>Tauri App</title> + <title>RSDSL Verwaltungswerkzeug</title> <script type="module" src="/main.js" defer></script> </head> <body> <div class="container"> - <h1>Welcome to Tauri!</h1> + <h1>RSDSL Verwaltungswerkzeug</h1> - <div class="row"> - <a href="https://tauri.app" target="_blank"> - <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /> - </a> - <a - href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" - target="_blank" - > - <img - src="/assets/javascript.svg" - class="logo vanilla" - alt="JavaScript logo" - /> - </a> - </div> + <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> - <p>Click on the Tauri logo to learn more about the framework</p> + <br /> - <form class="row" id="greet-form"> - <input id="greet-input" placeholder="Enter a name..." /> - <button type="submit">Greet</button> - </form> + <label for="connect-password" form="connect-form">Passwort:</label> + <div class="row"> + <input id="connect-password" type="password" /> + </div> + + <br /> - <p id="greet-msg"></p> + <div class="row"> + <button id="connect-submit" type="submit">Verbinden</button> + </div> + + <p id="connect-status"></p> + </form> </div> </body> </html> diff --git a/src/main.js b/src/main.js index 95a1702..4002df9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,18 +1,40 @@ const { invoke } = window.__TAURI__.tauri; -let greetInputEl; -let greetMsgEl; +let connectUrlEl; +let connectPasswordEl; +let connectSubmitEl; +let connectStatusEl; -async function greet() { +async function connect() { // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command - greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); + connectUrlEl.disabled = true; + connectPasswordEl.disabled = true; + connectSubmitEl.disabled = true; + connectStatusEl.innerText = "Verbindungsaufbau..."; + document.body.style.cursor = "progress"; + + connectStatusEl.innerText = await invoke("connect", { + url: connectUrlEl.value, + password: connectPasswordEl.value, + }); + + if (connectStatusEl.innerText === "Verbindungsaufbau erfolgreich") { + window.location = "dashboard.html"; + } + + connectUrlEl.disabled = false; + connectPasswordEl.disabled = false; + connectSubmitEl.disabled = false; + document.body.style.cursor = "default"; } window.addEventListener("DOMContentLoaded", () => { - greetInputEl = document.querySelector("#greet-input"); - greetMsgEl = document.querySelector("#greet-msg"); - document.querySelector("#greet-form").addEventListener("submit", (e) => { + connectUrlEl = document.querySelector("#connect-url"); + connectPasswordEl = document.querySelector("#connect-password"); + connectSubmitEl = document.querySelector("#connect-submit"); + connectStatusEl = document.querySelector("#connect-status"); + document.querySelector("#connect-form").addEventListener("submit", (e) => { e.preventDefault(); - greet(); + connect(); }); }); diff --git a/src/styles.css b/src/styles.css index e57b8ac..485d56e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -74,7 +74,7 @@ button { cursor: pointer; } -button:hover { +button:hover:enabled { border-color: #396cd8; } button:active { @@ -82,13 +82,18 @@ button:active { background-color: #e8e8e8; } +:disabled { + opacity: 0.6; + cursor: not-allowed; +} + input, button { outline: none; } -#greet-input { - margin-right: 5px; +input { + width: 30em; } @media (prefers-color-scheme: dark) { |