From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/routes/LoginRoute.svelte | 106 ++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src_frontend/routes/LoginRoute.svelte

(limited to 'src_frontend/routes/LoginRoute.svelte')

diff --git a/src_frontend/routes/LoginRoute.svelte b/src_frontend/routes/LoginRoute.svelte
new file mode 100644
index 0000000..1f9ef45
--- /dev/null
+++ b/src_frontend/routes/LoginRoute.svelte
@@ -0,0 +1,106 @@
+<script>
+    import Button from "../ComponentLib/Button/Button.svelte";
+	import { authenticate } from "../stores/socketStore";
+
+    let isLoading = false;
+
+    let username;
+    let password;
+
+    let errorMessage = null;
+
+    function tryLogin() {
+        isLoading = true;
+        authenticate(username, password, (success) => {
+            if (!success) {
+                errorMessage = "Username/password incorrect";
+                setTimeout(() => {
+                    errorMessage = null;
+                }, 5000);
+            }
+            isLoading = false;
+        });
+    }
+</script>
+
+<style>
+    main {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		background-color: #3c3b3b;
+		text-align: center;
+    }
+    .login {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        background-color: white;
+        border-radius: 15px;
+        max-width: 200px;
+        box-sizing: border-box;
+    }
+    img {
+        margin-bottom: -18px;
+        margin-top: -5px;
+    }
+    form {
+        padding: 15px;
+        padding-top: 0;
+        text-align: left;
+    }
+    h2 {
+        margin: 0;
+    }
+    input {
+        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        box-sizing: border-box;
+        border: none;
+        padding: 10px 15px;
+        background: var(--grey-200);
+        border-radius: 5px;
+    }
+    label {
+        font-size: 12px;
+        color: var(--grey-600);
+        margin-bottom: 5px;
+    }
+    .error-message {
+        color: var(--red-500);
+        font-size: 12px;
+        margin: 15px;
+        margin-top: 0;
+    }
+</style>
+
+<main>
+    <div class="login">
+        <img src="./assets/img/logo/Icon-192h.png" alt="">
+        <!-- <h2>Luxcena neo Login</h2> -->
+        <form on:submit|preventDefault={tryLogin}>
+            <label for="username">Username</label>
+            <input type="text" id="username" autocomplete="username" minlength="1" required bind:value={username} />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" autocomplete="current-password" minlength="1" required bind:value={password} />
+
+            <Button fullWidth=true>
+                {#if isLoading}
+                <i class="fas fa-spinner fa-pulse"></i>
+                {:else}
+                Login
+                {/if}
+            </Button>
+        </form>
+
+        {#if errorMessage}
+        <div class="error-message">
+        {errorMessage}
+        </div>
+        {/if}
+
+    </div>
+</main>
\ No newline at end of file
-- 
cgit v1.2.3