From 5b14211214dccbf771f610b9b334b99b1536b16b Mon Sep 17 00:00:00 2001
From: konarfil <filip.konarik@ysoft.com>
Date: Tue, 26 Sep 2023 12:32:11 +0200
Subject: [PATCH] Login page redesign to materialize

---
 .../templates/OAuthResource/login.html        | 120 +++++++++---------
 1 file changed, 57 insertions(+), 63 deletions(-)
diff --git a/src/main/resources/templates/OAuthResource/login.html b/src/main/resources/templates/OAuthResource/login.html
index f8c3dc8..76399b2 100644
--- a/src/main/resources/templates/OAuthResource/login.html
+++ b/src/main/resources/templates/OAuthResource/login.html
@@ -4,9 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <style>
         body {
-            font-family: Arial, sans-serif;
             background-color: #f4f4f4;
             margin: 0;
             padding: 0;
@@ -16,80 +22,68 @@
             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 {
+        .error-popup {
+            background-color: rgb(253, 237, 237);
+            color: rgb(95, 33, 32);
+            padding: 12px 20px;
             text-align: center;
+            border-radius: 4px;
+            margin-top: 10px;
         }
 
-        .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 {
+        .btn {
             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;
+        .btn:hover {
+            background-color: #0056b3
         }
     </style>
 </head>
 <body>
-<div class="login-container">
-    <h2>Login</h2>
-    {#if error == "invalid_credentials"}
-    <div class="error-popup" id="error-popup">Invalid credentials</div>
-    {/if}
-    <form action="/auth" method="post">
-        Predefined accounts:
-        <ul>
-            <li>bob / Password1</li>
-            <li>user / user</li>
-        </ul>
-        <input type="hidden" name="sessionId" value="{sessionId}">
-        <div class="form-group">
-            <label for="username">Username:</label>
-            <input type="text" id="username" name="username" value="{loginHint}" required>
+<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_credentials"}
+                    <div class="error-popup" id="error-popup">Invalid credentials</div>
+                    {/if}
+                    <form action="/auth" method="post">
+                        <input type="hidden" name="sessionId" value="{sessionId}">
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <input id="username" name="username" type="text" class="validate"
+                                  value="{loginHint}" required>
+                                <label for="username">Username</label>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <input id="password" name="password" type="password" class="validate" required>
+                                <label for="password">Password</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>
+                    <h6>Predefined accounts:</h6>
+                    <ul class="collection">
+                        <li class="collection-item">bob / Password1</li>
+                        <li class="collection-item">user / user</li>
+                    </ul>
+                </div>
+            </div>
         </div>
-        <div class="form-group">
-            <label for="password">Password:</label>
-            <input type="password" id="password" name="password" required>
-        </div>
-        <button type="submit" class="login-button">Login</button>
-    </form>
+    </div>
 </div>
 </body>
 </html>
+
