Update login form.

thepacer · Mar 20, 2020 · 720719f · 720719f
1 parent 48649bb
commit 720719f
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 39 deletions.
diff --git a/src/Controller/SecurityController.php b/src/Controller/SecurityController.php
@@ -19,6 +19,10 @@ public function login(AuthenticationUtils $authenticationUtils): Response
         // last username entered by the user
         $lastUsername = $authenticationUtils->getLastUsername();
 
+        if ($error) {
+            $this->addFlash('error', $error->getMessage());
+        }
+
         return $this->render('security/login.html.twig', ['last_username' => $lastUsername, 'error' => $error]);
     }
 }
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
@@ -1,22 +1,70 @@
-
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Login</title>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather">
-    <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
+    <title>The Pacer - Login</title>
+    <meta name="robots" content="noindex">
     {% block stylesheets %}
     {{ encore_entry_link_tags('app') }}
     {% endblock %}
 
     {% include '_includes/favicons.html.twig' %}
     {% include '_includes/ga_tracking.html.twig' %}
+    <style>
+    html,
+    body {
+      height: 100%;
+    }
+    body {
+      display: -ms-flexbox;
+      display: -webkit-box;
+      display: flex;
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+      -webkit-box-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      justify-content: center;
+      padding-top: 40px;
+      padding-bottom: 40px;
+      background-color: #f5f5f5;
+    }
+
+    .form-signin {
+      width: 100%;
+      max-width: 330px;
+      padding: 15px;
+      margin: 0 auto;
+    }
+    .form-signin .checkbox {
+      font-weight: 400;
+    }
+    .form-signin .form-control {
+      position: relative;
+      box-sizing: border-box;
+      height: auto;
+      padding: 10px;
+      font-size: 16px;
+    }
+    .form-signin .form-control:focus {
+      z-index: 2;
+    }
+    .form-signin input[type="email"] {
+      margin-bottom: -1px;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .form-signin input[type="password"] {
+      margin-bottom: 10px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    </style>
   </head>
-  <body>
-    <div class="container">
+
+  <body class="text-center">
+    <form method="post" class="form-signin" >
       {% for label, flashes in app.flashes %}
           {% for flash in flashes %}
               {% if ( label == 'success' ) %}
@@ -30,36 +78,22 @@
               {% endif %}
           {% endfor %}
       {% endfor %}
-      <form method="post">
-        <div class="card mt-5">
-          <div class="card-header">
-            <h1 class="h3 mb-0 font-weight-normal">Please sign in</h1>
-          </div>
-          <div class="card-body">
-            {% if error %}
-              <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
-              {% endif %}
-
-            <label for="inputEmail" class="sr-only">Email</label>
-            <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
-            <label for="inputPassword" class="sr-only">Password</label>
-            <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
-
-            <input type="hidden" name="_csrf_token"
-                   value="{{ csrf_token('authenticate') }}"
-            >
-          </div>
-          <div class="card-footer text-right">
-            <button class="btn btn-lg btn-primary" type="submit">
-              Sign in
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <footer class="container my-5 text-center">
-      <a href="{{ path('home') }}">Return to Site</a>
-    </footer>
+      <div class="text-center mb-5">
+        <a href="{{ path('home') }}"><img src="{{ asset('assets/images/nameplate.svg') }}" class="img-fluid" style="max-height:40vh" /></a>
+      </div>
+      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+      <label for="inputEmail" class="sr-only">Email address</label>
+      <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" value="{{ last_username }}" required autofocus>
+      <label for="inputPassword" class="sr-only">Password</label>
+      <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+      <div class="checkbox mb-3">
+        <label>
+          <input name="_remember_me" type="checkbox" value="remember-me" checked /> Stay logged in.
+        </label>
+      </div>
+      <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
+      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+    </form>
     {% block javascripts %}
     {{ encore_entry_script_tags('app') }}
     {% endblock %}