refactor(web_server.py): display pretty error if password incorrect

judas_server/web/static/css/style.css

@@ -1,3 +1,23 @@
+:root {
+    --nord-bg0: #2e3440;
+    --nord-bg1: #3b4252;
+    --nord-bg2: #434c5e;
+    --nord-bg3: #4c566a;
+    --nord-fg0: #eceff4;
+    --nord-fg1: #e5e9f0;
+    --nord-fg2: #d8dee9;
+    --nord-acc0: #8fbcbb;
+    --nord-acc1: #88c0d0;
+    --nord-acc2: #81a1c1;
+    --nord-acc3: #5e81ac;
+    --nord-aur0: #bf616a;
+    --nord-aur1: #d08770;
+    --nord-aur2: #ebcb8b;
+    --nord-aur3: #a3be8c;
+    --nord-aur4: #b48ead;
+
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -19,6 +39,16 @@ input {
     padding: 0.25rem;
 }
 
+a {
+    color: var(--nord-acc0);
+    text-decoration: none;
+    transition: 0.3s ease-in-out;
+}
+
+a:hover {
+    color: var(--nord-acc2);
+}
+
 #wrapper {
     display: flex;
     flex-direction: column;
@@ -35,9 +65,13 @@ header {
 }
 
 main {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     padding: 1rem;
     background-color: #3b4252;
     flex-grow: 1;
+    text-align: center;
 }
 
 header a {
@@ -64,3 +98,16 @@ header a {
 .center {
     text-align: center;
 }
+
+.error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem;
+    padding: 1rem;
+    background-color: var(--nord-aur0);
+    color: var(--nord-fg0);
+    border: 6px solid var(--nord-aur1);
+    border-radius: 24px;
+}

judas_server/web/templates/index.html

@@ -17,12 +17,15 @@
             {% endif %}
         </header>
         <main class="center">
-            <p>Welcome to</p>
-            <h2 id="typing-text" style="font-size: 3rem;">judas</h2>
-            <p>a remote PC fleet management system</p>
-            <br>
-            <p style="color: #bf616a;"><strong>Notice:</strong> Please use this system responsibly and in accordance with all applicable laws and organizational policies.</p>
-            <p>Please log in to manage your remote PCs.</p>
+            <div>
+                <p>Welcome to</p>
+                <h2 id="typing-text" style="font-size: 3rem;">judas</h2>
+                <p>a remote PC fleet management system</p>
+            </div>
+            <div>
+                <p style="color: #bf616a;"><strong>Notice:</strong> Please use this system responsibly and in accordance with all applicable laws and organizational policies.</p>
+                <p>Please <a href="{{ url_for('login')}}">log in</a> to manage your remote PCs.</p>
+            </div>
         </main>
     </div>
     <script>

judas_server/web/templates/login.html

@@ -11,12 +11,20 @@
         <header>
             <h1><a href="{{ url_for('index') }}">judas</a></h1>
         </header>
-        <main class="center">
-            <form method="post">
+        <main>
+            <h1>Login</h1>
+            <form method="post" class="center">
                 <label for="password">Password:</label>
                 <input type="password" id="password" name="password" required>
-                <br><br>
+                <br>
+                <br>
                 <input type="submit" value="Login" class="button">
+                {% if error %}
+                <div class="error-container">
+                    <h1>Login failure</h1>
+                    <p>{{ error }}</p>
+                </div>
+                {% endif %}
             </form>
         </main>
     </div>

judas_server/web/web_server.py

@@ -72,7 +72,10 @@ def login() -> str:
             flask_login.login_user(user)
             return flask.redirect(flask.url_for("panel"))
         else:
-            return "Invalid password", 401
+            return flask.render_template(
+                "login.html",
+                error="Invalid password. Please try again.",
+            )
     return flask.render_template("login.html")