Complete layout overhaul

templates/tech/registration/register.html.twig

@@ -1,10 +1,8 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
 {% block title %}Register{% endblock %}
 
-{% block body %}
-    <h1>Register</h1>
-
+{% block auth_body %}
     {{ form_errors(registrationForm) }}
 
     {{ form_start(registrationForm) }}
@@ -13,6 +11,12 @@
         {{ form_row(registrationForm.plainPassword) }}
         {{ form_row(registrationForm.captcha) }}
 
-        <button type="submit" class="btn">Register</button>
+        <div class="d-grid mt-3">
+            <button type="submit" class="btn btn-primary">Register</button>
+        </div>
     {{ form_end(registrationForm) }}
+
+    <div class="mt-3 text-center">
+        <a href="{{ path('app_login') }}">Already have an account? Log in</a>
+    </div>
 {% endblock %}

templates/tech/registration/resend_verification_email.html.twig

@@ -1,17 +1,17 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
 {% block title %}Resend verification email{% endblock %}
 
-{% block body %}
-    <h1>Resend verification email</h1>
-
-    <p>Enter your email address and we will send you a new link to verify your account.</p>
+{% block auth_body %}
+    <p class="text-muted">Enter your email address and we will send you a new link to verify your account.</p>
 
     {{ form_errors(resendForm) }}
 
     {{ form_start(resendForm) }}
         {{ form_row(resendForm.email) }}
 
-        <button type="submit" class="btn">Resend email</button>
+        <div class="d-grid mt-3">
+            <button type="submit" class="btn btn-primary">Resend email</button>
+        </div>
     {{ form_end(resendForm) }}
 {% endblock %}

templates/tech/reset_password/check_email.html.twig

@@ -1,11 +1,11 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
 {% block title %}Password Reset Email Sent{% endblock %}
 
-{% block body %}
+{% block auth_body %}
     <p>
         If an account matching your email exists, then an email was just sent that contains a link that you can use to reset your password.
         This link will expire in {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.
     </p>
-    <p>If you don't receive an email please check your spam folder or <a href="{{ path('app_forgot_password_request') }}">try again</a>.</p>
+    <p class="mb-0">If you don't receive an email please check your spam folder or <a href="{{ path('app_forgot_password_request') }}">try again</a>.</p>
 {% endblock %}

templates/tech/reset_password/request.html.twig

@@ -1,22 +1,20 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
 {% block title %}Reset your password{% endblock %}
 
-{% block body %}
+{% block auth_body %}
     {% for flash_error in app.flashes('reset_password_error') %}
         <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
     {% endfor %}
-    <h1>Reset your password</h1>
 
     {{ form_start(requestForm) }}
         {{ form_row(requestForm.email) }}
-        <div>
-            <small>
-                Enter your email address, and we will send you a
-                link to reset your password.
-            </small>
-        </div>
+        <p class="text-muted small">
+            Enter your email address, and we will send you a link to reset your password.
+        </p>
 
-        <button class="btn btn-primary">Send password reset email</button>
+        <div class="d-grid">
+            <button class="btn btn-primary">Send password reset email</button>
+        </div>
     {{ form_end(requestForm) }}
 {% endblock %}

templates/tech/reset_password/reset.html.twig

@@ -1,12 +1,12 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
 {% block title %}Reset your password{% endblock %}
 
-{% block body %}
-    <h1>Reset your password</h1>
-
+{% block auth_body %}
     {{ form_start(resetForm) }}
         {{ form_row(resetForm.plainPassword) }}
-        <button class="btn btn-primary">Reset password</button>
+        <div class="d-grid mt-3">
+            <button class="btn btn-primary">Reset password</button>
+        </div>
     {{ form_end(resetForm) }}
 {% endblock %}

templates/tech/security/login.html.twig

@@ -1,8 +1,8 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout/auth.html.twig' %}
 
-{% block title %}Log in!{% endblock %}
+{% block title %}Log in{% endblock %}
 
-{% block body %}
+{% block auth_body %}
 <form method="post">
     {% if error %}
         <div class="alert alert-danger">
@@ -14,39 +14,39 @@
     {% endif %}
 
     {% if app.user %}
-        <div class="mb-3">
+        <div class="alert alert-info">
             You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
         </div>
     {% endif %}
 
-    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-    <label for="inputUsername">Username</label>
-    <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" autocomplete="username" required autofocus>
-    <label for="inputPassword">Password</label>
-    <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
+    <div class="mb-3">
+        <label for="inputUsername" class="form-label">Username</label>
+        <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" autocomplete="username" required autofocus>
+    </div>
+    <div class="mb-3">
+        <label for="inputPassword" class="form-label">Password</label>
+        <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
+    </div>
 
-    <input type="hidden" name="_csrf_token"
-           value="{{ csrf_token('authenticate') }}"
-    >
+    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
     {#
         Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
         See https://symfony.com/doc/current/security/remember_me.html
 
-        <div class="checkbox mb-3">
-            <label>
-                <input type="checkbox" name="_remember_me"> Remember me
-            </label>
+        <div class="form-check mb-3">
+            <input type="checkbox" class="form-check-input" id="rememberMe" name="_remember_me">
+            <label class="form-check-label" for="rememberMe">Remember me</label>
         </div>
     #}
 
-    <button class="btn btn-lg btn-primary" type="submit">
-        Sign in
-    </button>
-    <div class="mt-3">
+    <div class="d-grid">
+        <button class="btn btn-primary" type="submit">Sign in</button>
+    </div>
+    <div class="mt-3 text-center">
         <a href="{{ path('app_forgot_password_request') }}">Forgot your password?</a>
     </div>
-    <div class="mt-1">
+    <div class="mt-1 text-center">
         <a href="{{ path('app_verify_resend_email') }}">Didn't receive activation email?</a>
     </div>
 </form>