From 5c4c2a1a46cf64504c1a894a8ad27e5124cffaba Mon Sep 17 00:00:00 2001
From: konarfil <filip.konarik@ysoft.com>
Date: Tue, 26 Sep 2023 13:42:23 +0200
Subject: [PATCH] Device Login redesign

---
 .../templates/OAuthResource/deviceLogin.html  | 115 +++++-------------
 1 file changed, 32 insertions(+), 83 deletions(-)
diff --git a/src/main/resources/templates/OAuthResource/deviceLogin.html b/src/main/resources/templates/OAuthResource/deviceLogin.html
index 2bf93a5..c1d658a 100644
--- a/src/main/resources/templates/OAuthResource/deviceLogin.html
+++ b/src/main/resources/templates/OAuthResource/deviceLogin.html
@@ -1,85 +1,34 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Page</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-
-        .login-container {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .login-container h2 {
-            text-align: center;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-group label {
-            font-weight: bold;
-            display: block;
-        }
-
-        .form-group input {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-
-        .login-button {
-            width: 100%;
-            background-color: #007BFF;
-            color: #fff;
-            border: none;
-            padding: 10px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .login-button:hover {
-            background-color: #0056b3;
-        }
-
-        .error-popup {
-            background-color: #ff6b6b;
-            color: #fff;
-            padding: 10px;
-            text-align: center;
-            border-radius: 5px;
-            margin-top: 10px;
-        }
-    </style>
-</head>
-<body>
-<div class="login-container">
-    <h2>Login</h2>
-    {#if error == "invalid_code"}
-        <div class="error-popup" id="error-popup">Invalid code</div>
-    {/if}
-    <form action="" method="post">
-        <div class="form-group">
-            <label for="code">User code:</label>
-            <input type="text" id="code" name="code" required>
+{#include base}
+{#title}Login{/title}
+<div class="container">
+    <div class="row">
+        <div class="col s12 m6 offset-m3">
+            <div class="card">
+                <div class="card-content">
+                    <span class="card-title center-align">Login</span>
+                    {#if error == "invalid_code"}
+                    <div class="error-popup" id="error-popup">Invalid code</div>
+                    {/if}
+                    <p>Enter code displayed on the device</p>
+                    <form action="/auth" method="post">
+                        <input type="hidden" name="sessionId" value="{sessionId}">
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <input id="code" name="code" type="text" class="validate" required>
+                                <label for="code">User code</label>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col s12 center-align">
+                                <button class="btn waves-effect waves-light" type="submit">
+                                    Login
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
-        <button type="submit" class="login-button">Login</button>
-    </form>
+    </div>
 </div>
-</body>
-</html>
+{/include}
