From 0b7e2e3ce49e1d8747850094f1cd333dfd3bf823 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Thu, 3 Mar 2022 19:49:39 -0300
Subject: [PATCH 1/4] New login form layout

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/php/loginpage.php | 39 +++++++++-------------
 style/pi-hole.css                 | 55 ++++++++++++++++++++++++++++++-
 style/themes/lcars.css            |  4 +++
 3 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/scripts/pi-hole/php/loginpage.php b/scripts/pi-hole/php/loginpage.php
index 94368c23..6a2339c0 100644
--- a/scripts/pi-hole/php/loginpage.php
+++ b/scripts/pi-hole/php/loginpage.php
@@ -10,7 +10,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="text-center">
-        <img src="img/logo.svg" alt="Pi-hole logo" style="width: <?php if ($boxedlayout) { ?>50%<?php } else { ?>30%<?php } ?>;">
+        <img src="img/logo.svg" alt="Pi-hole logo" class="loginpage-logo">
       </div>
       <br>
 
@@ -26,31 +26,24 @@
 
     <div class="panel-body">
       <form action="" id="loginform" method="post">
-        <div class="form-group has-feedback <?php if ($wrongpassword) { ?>has-error<?php } ?>">
-          <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" autocomplete="current-password" autofocus>
-          <span class="fa fa-key form-control-feedback"></span>
-        </div>
-        <div class="row">
-          <div class="col-xs-12 col-md-12">
-            <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in</button>
+        <div class="form-group login-options has-feedback<?php if ($wrongpassword) { ?> has-error<?php } ?>">
+          <div class="pwd-field">
+            <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" autocomplete="current-password" autofocus>
+            <span class="fa fa-key form-control-feedback"></span>
+          </div>
+          <div>
+            <input type="checkbox" id="logincookie" name="persistentlogin">
+            <label for="logincookie">Remember me for 7 days</label>
           </div>
         </div>
-        <br>
-        <div class="row">
-          <div class="col-xs-8 hidden-xs hidden-sm">
-            <ul>
-              <li><kbd>Return</kbd> &rarr; Log in and go to requested page (<?php echo $scriptname; ?>)</li>
-              <li><kbd>Ctrl</kbd>+<kbd>Return</kbd> &rarr; Log in and go to Settings page</li>
-            </ul>
-          </div>
-          <div class="col-xs-12 col-md-4">
-            <div>
-              <input type="checkbox" id="logincookie" name="persistentlogin">
-              <label for="logincookie">Remember me for 7 days</label>
-            </div>
-          </div>
+        <div class="form-group">
+          <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in</button>
         </div>
-        <br>
+        <div class="box login-help hidden-xs">
+          <p><kbd>Return</kbd> &#10140; Log in and go to requested page (<?php echo $scriptname; ?>)</p>
+          <p><kbd>Ctrl</kbd> + <kbd>Return</kbd> &#10140; Log in and go to Settings page</p>
+        </div>
+
         <div class="row">
           <div class="col-xs-12">
             <div class="box box-<?php if (!$wrongpassword) { ?>info collapsed-box<?php } else { ?>danger<?php }?>">
diff --git a/style/pi-hole.css b/style/pi-hole.css
index a9e33184..1196bbe5 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -495,11 +495,64 @@ td.details-control {
   }
 }
 
-/* Fix the icon position (login password field) */
+/*** Login form ***/
 .form-control-feedback {
   right: 12px;
 }
 
+.loginpage-logo {
+  width: 30%;
+}
+.layout-boxed .loginpage-logo {
+  width: 50%;
+}
+
+.login-options {
+  display: flex;
+  margin: 0 0 15px -15px;
+  flex-wrap: wrap;
+}
+
+.login-options div {
+  position: relative;
+  margin-left: 15px;
+}
+
+.login-options div:last-child {
+  margin-right: 2px;
+  margin-bottom: 0 !important;
+  flex: 0 1 auto;
+  font-size: 95%;
+}
+
+.pwd-field {
+  flex: 1 0 auto;
+}
+
+.login-help {
+  padding: 6px;
+  background: rgba(127, 127, 127,0.05);
+  text-align: center;
+}
+
+.login-help p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+@media screen and (min-width: 768px) {
+  .layout-boxed:not(.sidebar-collapse) .login-help p {
+    font-size: clamp(12px, (min(100vw, 1250px) - 230px) / 60, 15px);
+  }
+}
+
+/*** Accessibility - Add focus for checkboxes and radio buttons (icheck) ***/
+[class*=icheck-]>input:first-child:focus+label::before  {
+  outline: 1px #3c8dbc solid;
+  border-color: #3c8dbc;
+}
+
 /* Fix some datatables layout on small screens */
 @media screen and (max-width: 660px), screen and (min-width: 767px) and (max-width: 960px) {
   #domainsTable_wrapper .table-responsive {
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index 2e3b99f2..d1ba3937 100644
--- a/style/themes/lcars.css
+++ b/style/themes/lcars.css
@@ -381,6 +381,10 @@ p.login-box-msg,
   background: #f00;
 }
 
+.login-help p {
+  font-size: 13px;
+}
+
 .input-group .input-group-addon {
   border-radius: 8px 0 0 8px;
   border-right: none;

From 2d5e97380a1a50fc55891c68cb7450dbfb2fb6c1 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Thu, 3 Mar 2022 19:59:19 -0300
Subject: [PATCH 2/4] Fix prettier issues

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 1196bbe5..24117b10 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -531,7 +531,7 @@ td.details-control {
 
 .login-help {
   padding: 6px;
-  background: rgba(127, 127, 127,0.05);
+  background: rgba(127, 127, 127, 0.05);
   text-align: center;
 }
 
@@ -548,7 +548,7 @@ td.details-control {
 }
 
 /*** Accessibility - Add focus for checkboxes and radio buttons (icheck) ***/
-[class*=icheck-]>input:first-child:focus+label::before  {
+[class*="icheck-"] > input:first-child:focus + label::before {
   outline: 1px #3c8dbc solid;
   border-color: #3c8dbc;
 }

From 15f9e58e07b4229bd35ce0ff1d5080e1f07011f2 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sat, 5 Mar 2022 15:02:55 -0300
Subject: [PATCH 3/4] Fix login input visual misalignment (dark theme)

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/themes/default-dark.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index a6373908..2a089d4e 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -562,3 +562,16 @@ input[type="password"]::-webkit-caps-lock-indicator {
 .close {
   color: #383838;
 }
+
+/*** Fix login input visual misalignment ***/
+#loginform,
+#loginform input {
+  color: rgb(120, 127, 133);
+}
+
+.login-options input,
+.login-options [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
+.login-options [class*="icheck-"] > input:first-child + label::before {
+  background: none;
+  border-color: rgb(120, 127, 133);
+}

From 1e47277d3c2841dc052a3fe4dfcfbd1bbb513bc0 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 7 Mar 2022 23:50:17 -0300
Subject: [PATCH 4/4] Font-size calc adjust

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 24117b10..651b8934 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -537,13 +537,13 @@ td.details-control {
 
 .login-help p {
   margin: 0;
-  font-size: 15px;
+  font-size: clamp(11px, (100vw - 400px) / 45, 15px);
   line-height: 1.6;
 }
 
 @media screen and (min-width: 768px) {
   .layout-boxed:not(.sidebar-collapse) .login-help p {
-    font-size: clamp(12px, (min(100vw, 1250px) - 230px) / 60, 15px);
+    font-size: clamp(11px, (min(100vw, 1250px) - 380px) / 47, 15px);
   }
 }