From 6428c17b0e16497b826c295b5a09dbb853d07b46 Mon Sep 17 00:00:00 2001
From: jo <lammler.jonas@riseup.net>
Date: Sun, 21 May 2017 15:32:43 +0200
Subject: [PATCH 1/3] Clean indentation

---
 .../src/main/webapp/WEB-INF/jsp/login.jsp     | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
index 8bb6b63f..e4dd89a3 100644
--- a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
+++ b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
@@ -20,33 +20,33 @@
         <div style="margin-bottom:1em;max-width:50em;text-align:left;"><sub:wiki text="${model.loginMessage}"/></div>
 
         <table>
-        <tr>
-            <td colspan="2" align="left" style="padding-bottom:10px">
-                <img src="<spring:theme code="logoImage"/>" alt="">
-            </td>
-        </tr>
-        <tr>
-            <td align="left" style="padding-right:10px"><fmt:message key="login.username"/></td>
-            <td align="left"><input type="text" id="j_username" name="j_username" style="width:12em" tabindex="1"></td>
-        </tr>
+            <tr>
+                <td colspan="2" align="left" style="padding-bottom:10px">
+                    <img src="<spring:theme code="logoImage"/>" alt="">
+                </td>
+            </tr>
+            <tr>
+                <td align="left" style="padding-right:10px"><fmt:message key="login.username"/></td>
+                <td align="left"><input type="text" id="j_username" name="j_username" style="width:12em" tabindex="1"></td>
+            </tr>
 
-        <tr>
-            <td align="left" style="padding-bottom:10px"><fmt:message key="login.password"/></td>
-            <td align="left" style="padding-bottom:10px"><input type="password" name="j_password" style="width:12em" tabindex="2"></td>
-        </tr>
+            <tr>
+                <td align="left" style="padding-bottom:10px"><fmt:message key="login.password"/></td>
+                <td align="left" style="padding-bottom:10px"><input type="password" name="j_password" style="width:12em" tabindex="2"></td>
+            </tr>
 
-        <tr>
-            <td align="left"><input name="submit" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
-            <td align="left" class="detail">
-                <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
-                <label for="remember"><fmt:message key="login.remember"/></label>
-            </td>
-        </tr>
+            <tr>
+                <td align="left"><input name="submit" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
+                <td align="left" class="detail">
+                    <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
+                    <label for="remember"><fmt:message key="login.remember"/></label>
+                </td>
+            </tr>
             <tr>
                 <td></td>
                 <td align="left" class="detail"><a href="recover.view"><fmt:message key="login.recover"/></a></td>
             </tr>
-            
+
             <c:if test="${model.logout}">
                 <tr><td colspan="2" style="padding-top:10px"><b><fmt:message key="login.logout"/></b></td></tr>
             </c:if>

From 192d3083206c47a6582130e0d702d82483be689e Mon Sep 17 00:00:00 2001
From: jo <lammler.jonas@riseup.net>
Date: Sun, 21 May 2017 23:50:58 +0200
Subject: [PATCH 2/3] Rework login page

Signed-off-by: jooola <lammler.jonas@riseup.net>
---
 .../src/main/webapp/WEB-INF/jsp/login.jsp     | 34 ++++++++++---------
 .../src/main/webapp/style/default.css         | 14 +++++++-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
index e4dd89a3..d4f83470 100644
--- a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
+++ b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
@@ -10,48 +10,50 @@
     </script>
 
 </head>
-<body class="mainframe bgcolor1" onload="document.getElementById('j_username').focus()">
+<body style="min-width:550px" class="mainframe bgcolor1" onload="document.getElementById('j_username').focus()">
 
 <form action="<c:url value="/login"/>" method="POST">
 
     <sec:csrfInput />
     <div class="bgcolor2 shadow" align="center" style="padding:20px 50px 20px 50px; margin-top:100px;margin-left:50px;margin-right:50px">
 
-        <div style="margin-bottom:1em;max-width:50em;text-align:left;"><sub:wiki text="${model.loginMessage}"/></div>
+        <div style="margin-bottom:1em;max-width:50em;text-align:center;"><sub:wiki text="${model.loginMessage}"/></div>
 
         <table>
             <tr>
-                <td colspan="2" align="left" style="padding-bottom:10px">
+                <td colspan="2" align="center" style="padding-bottom:10px">
                     <img src="<spring:theme code="logoImage"/>" alt="">
                 </td>
             </tr>
+
             <tr>
-                <td align="left" style="padding-right:10px"><fmt:message key="login.username"/></td>
-                <td align="left"><input type="text" id="j_username" name="j_username" style="width:12em" tabindex="1"></td>
+                <td align="center"><input type="text" id="j_username" name="j_username" style="width:20rem" tabindex="1" placeholder="<fmt:message key="login.username"/>"></td>
             </tr>
 
             <tr>
-                <td align="left" style="padding-bottom:10px"><fmt:message key="login.password"/></td>
-                <td align="left" style="padding-bottom:10px"><input type="password" name="j_password" style="width:12em" tabindex="2"></td>
+                <td align="center" style="padding-bottom:10px"><input type="password" name="j_password" style="width:20rem" tabindex="2" placeholder="<fmt:message key="login.password"/>"></td>
             </tr>
 
             <tr>
-                <td align="left"><input name="submit" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
-                <td align="left" class="detail">
-                    <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
-                    <label for="remember"><fmt:message key="login.remember"/></label>
-                </td>
+                <td align="center" style="padding-bottom:10px"><input id="loginButton" name="submit" style="width:20rem" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
             </tr>
+
             <tr>
-                <td></td>
-                <td align="left" class="detail"><a href="recover.view"><fmt:message key="login.recover"/></a></td>
+                <td align="center" class="detail" style="padding-bottom:10px">
+                    <div style="display:inline-flex;align-items:center;margin: 0 20%;">
+                        <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
+                        <label for="remember"><fmt:message key="login.remember"/></label>
+                        <a style="margin-left:10px;" href="recover.view"><fmt:message key="login.recover"/></a>
+                    </div>
+                </td>
             </tr>
 
             <c:if test="${model.logout}">
-                <tr><td colspan="2" style="padding-top:10px"><b><fmt:message key="login.logout"/></b></td></tr>
+                <tr align="center"><td colspan="2" style="padding-top:10px"><b><fmt:message key="login.logout"/></b></td></tr>
             </c:if>
+
             <c:if test="${model.error}">
-                <tr><td colspan="2" style="padding-top:10px"><span class="warning"><fmt:message key="login.error"/></span></td></tr>
+                <tr align="center"><td colspan="2" style="padding-top:10px"><span class="warning"><fmt:message key="login.error"/></span></td></tr>
             </c:if>
 
         </table>
diff --git a/libresonic-main/src/main/webapp/style/default.css b/libresonic-main/src/main/webapp/style/default.css
index c0046f2a..bb5131b1 100644
--- a/libresonic-main/src/main/webapp/style/default.css
+++ b/libresonic-main/src/main/webapp/style/default.css
@@ -106,6 +106,18 @@ h2, h2 a, .topHeader a {
     font-weight: normal;
 }
 
+#loginButton {
+    background: #2f7bd9;
+    color: #f2f2f2;
+    cursor: pointer;
+    transition: color 0.2s ease, background 0.2s ease;
+}
+
+#loginButton:hover {
+    background: #f2f2f2;
+    color: #2d2d2d;
+}
+
 /***************************************************************************************
  * The rest of the CSS is typically not changed in other themes (but not necessarily so).
  ***************************************************************************************/
@@ -383,4 +395,4 @@ img {
 
 .context-menu-item {
     color: black;
-}
\ No newline at end of file
+}

From fefc34790a10b726d94fc9117f28ae68d0f2685e Mon Sep 17 00:00:00 2001
From: jooola <lammler.jonas@riseup.net>
Date: Fri, 26 May 2017 18:48:57 +0200
Subject: [PATCH 3/3] Many improvement and moved CSS to default.css

- Changed to html5 (remove align="center" > style="text-align=center"
- Removed table clean up
- Moved the login message under the logo, and centered it
---
 .../src/main/webapp/WEB-INF/jsp/login.jsp     | 67 +++++++++----------
 .../src/main/webapp/style/default.css         | 45 ++++++++++++-
 2 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
index d4f83470..08b4d80e 100644
--- a/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
+++ b/libresonic-main/src/main/webapp/WEB-INF/jsp/login.jsp
@@ -1,5 +1,5 @@
 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 
 <html><head>
     <%@ include file="head.jsp" %>
@@ -12,57 +12,50 @@
 </head>
 <body style="min-width:550px" class="mainframe bgcolor1" onload="document.getElementById('j_username').focus()">
 
-<form action="<c:url value="/login"/>" method="POST">
+    <form action="<c:url value="/login"/>" method="POST">
+        <sec:csrfInput />
 
-    <sec:csrfInput />
-    <div class="bgcolor2 shadow" align="center" style="padding:20px 50px 20px 50px; margin-top:100px;margin-left:50px;margin-right:50px">
+        <div id="loginframe" class="bgcolor2 shadow">
 
-        <div style="margin-bottom:1em;max-width:50em;text-align:center;"><sub:wiki text="${model.loginMessage}"/></div>
+            <img src="<spring:theme code="logoImage"/>" alt="">
 
-        <table>
-            <tr>
-                <td colspan="2" align="center" style="padding-bottom:10px">
-                    <img src="<spring:theme code="logoImage"/>" alt="">
-                </td>
-            </tr>
+            <div class="loginmessagetop"><sub:wiki text="${model.loginMessage}"/></div>
 
-            <tr>
-                <td align="center"><input type="text" id="j_username" name="j_username" style="width:20rem" tabindex="1" placeholder="<fmt:message key="login.username"/>"></td>
-            </tr>
+            <input type="text" id="j_username" name="j_username" tabindex="1" placeholder="<fmt:message key="login.username"/>">
 
-            <tr>
-                <td align="center" style="padding-bottom:10px"><input type="password" name="j_password" style="width:20rem" tabindex="2" placeholder="<fmt:message key="login.password"/>"></td>
-            </tr>
+            <input type="password" name="j_password" tabindex="2" placeholder="<fmt:message key="login.password"/>">
 
-            <tr>
-                <td align="center" style="padding-bottom:10px"><input id="loginButton" name="submit" style="width:20rem" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
-            </tr>
+            <input name="submit" type="submit" value="<fmt:message key="login.login"/>" tabindex="4"></td>
 
-            <tr>
-                <td align="center" class="detail" style="padding-bottom:10px">
-                    <div style="display:inline-flex;align-items:center;margin: 0 20%;">
-                        <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
-                        <label for="remember"><fmt:message key="login.remember"/></label>
-                        <a style="margin-left:10px;" href="recover.view"><fmt:message key="login.recover"/></a>
-                    </div>
-                </td>
-            </tr>
+            <div class="details">
+                <div id="loginremember">
+                    <label for="remember"><fmt:message key="login.remember"/></label>
+                    <input type="checkbox" name="remember-me" id="remember" class="checkbox" tabindex="3">
+                </div>
+
+                <a href="recover.view"><fmt:message key="login.recover"/></a>
+            </div>
 
             <c:if test="${model.logout}">
-                <tr align="center"><td colspan="2" style="padding-top:10px"><b><fmt:message key="login.logout"/></b></td></tr>
+                <div class="loginmessagebottom">
+                    <b><fmt:message key="login.logout"/></b>
+                </div>
             </c:if>
 
             <c:if test="${model.error}">
-                <tr align="center"><td colspan="2" style="padding-top:10px"><span class="warning"><fmt:message key="login.error"/></span></td></tr>
+                <div class="loginmessagebottom">
+                    <span class="warning"><fmt:message key="login.error"/></span>
+                </div>
             </c:if>
 
-        </table>
+            <c:if test="${model.insecure}">
+                <div class="loginmessagebottom">
+                    <p class="warning"><fmt:message key="login.insecure"><fmt:param value="${model.brand}"/></fmt:message></p>
+                </div>
+            </c:if>
 
-        <c:if test="${model.insecure}">
-            <p class="warning"><fmt:message key="login.insecure"><fmt:param value="${model.brand}"/></fmt:message></p>
-        </c:if>
+        </div>
+    </form>
 
-    </div>
-</form>
 </body>
 </html>
diff --git a/libresonic-main/src/main/webapp/style/default.css b/libresonic-main/src/main/webapp/style/default.css
index bb5131b1..0564a919 100644
--- a/libresonic-main/src/main/webapp/style/default.css
+++ b/libresonic-main/src/main/webapp/style/default.css
@@ -106,18 +106,57 @@ h2, h2 a, .topHeader a {
     font-weight: normal;
 }
 
-#loginButton {
+/* Login page */
+
+#loginframe {
+    padding: 20px 50px;
+    margin: 100px 50px;
+    display: list-item;
+    list-style: none;
+    text-align: center;
+}
+
+#loginframe > * {
+    margin: 0 auto;
+    display: block;
+}
+
+#loginframe .loginmessagetop {
+    margin-bottom: 1em;
+    max-width: 30rem;
+}
+
+#loginframe input[type=text],
+#loginframe input[type=submit],
+#loginframe input[type=password] {
+    width: 20rem;
+    margin-bottom: 0.5em;
+}
+
+#loginframe input[type=submit] {
+    margin: 1rem auto;
+    padding: 0.3rem;
     background: #2f7bd9;
     color: #f2f2f2;
-    cursor: pointer;
     transition: color 0.2s ease, background 0.2s ease;
 }
 
-#loginButton:hover {
+#loginframe input[type=submit]:hover {
     background: #f2f2f2;
     color: #2d2d2d;
 }
 
+#loginremember {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 10px;
+}
+
+#loginframe .loginmessagebottom {
+    margin-top: 1em;
+    max-width: 50em;
+}
+
 /***************************************************************************************
  * The rest of the CSS is typically not changed in other themes (but not necessarily so).
  ***************************************************************************************/