From 5f83f6af2f5aee9fb9954d53f3e85a38f0484e78 Mon Sep 17 00:00:00 2001
From: DL6ER <derigs@ph1.uni-koeln.de>
Date: Tue, 13 Dec 2016 15:38:03 +0100
Subject: [PATCH] New design for new login page

---
 php/loginpage.php | 107 ++++++++++++++++++++++------------------------
 1 file changed, 52 insertions(+), 55 deletions(-)

diff --git a/php/loginpage.php b/php/loginpage.php
index 416130d8..f6d3744f 100644
--- a/php/loginpage.php
+++ b/php/loginpage.php
@@ -1,65 +1,62 @@
 <div class="row">
-  <div class="col-sm-6 col-sm-offset-3">
-  <center>
-	<svg width="100%" viewBox="-60 -5 220 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 400px;"><!-- " border: 1px solid black;" > -->
-		<defs>
-			<style type="text/css">
-				<![CDATA[
-					.bluranddarken{
-						filter: url(#bluranddarken);
-					}
-					.blurslightly{
-						filter: url(#blurslightly);
-					}
-				]]>
-			</style>
-			<filter id="bluranddarken">
-				<!-- Add blur -->
-				<feGaussianBlur in="SourceGraphic" stdDeviation="3,3" />
-				<feComponentTransfer> <!-- Make it darker -->
-					<feFuncR type="linear" slope="0.5"/>
-					<feFuncG type="linear" slope="0.5"/>
-					<feFuncB type="linear" slope="0.5"/>
-				</feComponentTransfer>
-			</filter>
-			<filter id="blurslightly">
-				<feGaussianBlur in="SourceGraphic" stdDeviation="2,2" />
-			</filter>
-		</defs>
-		<g class="bluranddarken">
-			<image x="0" y="0" width="100" height="100" xlink:href="img/logo.svg"/>
-		</g>
-		<g class="blurslightly">
-			<text font-family="Verdana" x="-18" y="130" font-size="24" class="protected">Protected area</text>
-		</g>
-
-		<!--
-		M is moveto
-
-		A is a general elliptical arc command.
-
-		L is lineto
-		-->
-	</svg>
-  </center>
-  </div>
+    <div class="col-sm-12">
+        <center><img src="img/logo.svg" width="20%"></center>
+    </div>
+    <div class="col-sm-12">
+        <center><span class="logo-lg" style="font-size: 25px;"><b>Pi</b>-hole</span></center>
+    </div>
 </div>
-<div class="row">
-  <div class="col-sm-6 col-sm-offset-3">
+<div class="login-box">
+<!--   <div class="col-sm-6 col-sm-offset-3">
     <form action="" method="POST">
         <div class="form-group <?php if($wrongpassword){ ?>has-error<?php } ?> input-group-lg">
         <?php if($wrongpassword){ ?><center><label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Wrong password!</label></center><?php } ?>
-        <div class="input-group">
-            <input type="password" class="form-control " name="pw" placeholder="Enter password to unlock">
-            <span class="input-group-btn">
-              <button type="submit" class="btn btn-info btn-flat <?php if($wrongpassword){ ?>btn-danger<?php } ?>">Submit</button>
-            </span>
-          </div>
-      </div>
+            <div class="form-group has-feedback">
+                <input type="password" class="form-control" placeholder="Password">
+                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+            </div>
+        </div>
+        <div class="col-xs-4">
+          <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
+        </div>
   </form>
-</center>
-</div>
+</center> -->
+  <div class="login-box-body">
+    <p class="login-box-msg">Sign in to start your session</p>
+      <?php if($wrongpassword){ ?>
+          <div class="form-group has-error login-box-msg">
+              <label class="control-label"><i class="fa fa-times-circle-o"></i> Wrong password!</label>
+          </div>
+      <?php } ?>
+
+    <form action="" method="post">
+      <div class="form-group has-feedback <?php if($wrongpassword){ ?>has-error<?php } ?> ">
+        <input type="password" name="pw" class="form-control" placeholder="Password">
+        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+      </div>
+      <div class="row">
+        <div class="col-xs-4 col-xs-offset-8">
+          <button type="submit" class="btn btn-primary btn-block btn-flat">Log In</button>
+        </div>
+      </div>
+      <br>
+      <div class="row">
+        <div class="col-xs-12">
+            <div class="box box-info collapsed-box box-solid">
+                <div class="box-header with-border">
+                    <h3 class="box-title">Forgot password</h3>
+
+                    <div class="box-tools pull-right"><button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button></div>
+                </div>
+                <div class="box-body">
+                    After installing Pi-Hole for the first time, a password is generated and displayed to the user. The password cannot be retrived later on, but it is possible to set a new password (or explicitly disable the password) using the command <pre>sudo pihole -a -p newpassword</pre>
+                </div>
+            </div>
+        </div>
+      </div>
+    </form>
 </div>
+<br>
 
 <style type="text/css">
 .protected {