Accessibility updates

asset-bundles.json

@@ -1,5 +1,20 @@
 {
     "bundle": {
+        "css/main": {
+            "styles" : [
+                "uf-tweaks/css/uf-tweaks.css"
+            ],
+            "options": {
+                "result": {
+                    "type": {
+                        "styles": "plain"
+                    }
+                },
+                "sprinkle": {
+                    "onCollision": "merge"
+                }
+            }
+        },
         "js/admin": {
             "scripts": [
                 "uf-tweaks/js/handlebars-helpers.js",

assets/uf-tweaks/css/uf-tweaks.css

@@ -0,0 +1,16 @@
+.form-group-label {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+
+.login-box header {
+  display: block;
+  box-sizing: border-box;
+  line-height: 38.5px;
+}
+
+.login-box header h1 {
+  font-size: 26pt;
+}

src/Controller/AccountController.php

@@ -9,6 +9,7 @@
 
 namespace UserFrosting\Sprinkle\UFTweaks\Controller;
 
+
 use Carbon\Carbon;
 use Illuminate\Database\Capsule\Manager as Capsule;
 use Psr\Http\Message\ResponseInterface as Response;
@@ -18,6 +19,9 @@ use UserFrosting\Fortress\RequestDataTransformer;
 use UserFrosting\Fortress\RequestSchema;
 use UserFrosting\Fortress\ServerSideValidator;
 use UserFrosting\Sprinkle\Account\Controller\AccountController as UFAccountController;
+use UserFrosting\Sprinkle\Account\Facades\Password;
+use UserFrosting\Sprinkle\Core\Mail\EmailRecipient;
+use UserFrosting\Sprinkle\Core\Mail\TwigMailMessage;
 use UserFrosting\Support\Exception\BadRequestException;
 use UserFrosting\Support\Exception\ForbiddenException;
 use UserFrosting\Support\Exception\NotFoundException;

src/ServicesProvider/ServicesProvider.php

@@ -18,6 +18,7 @@ use Psr\Http\Message\ResponseInterface as Response;
 use Psr\Http\Message\ServerRequestInterface as Request;
 use UserFrosting\Sprinkle\Core\Log\MixedFormatter;
 use UserFrosting\Sprinkle\UFTweaks\Twig\HasRoleExtension;
+use UserFrosting\Sprinkle\UFTweaks\Twig\LocaleOverrideExtension;
 use UserFrosting\Sprinkle\UFTweaks\Twig\MobileDetectExtension;
 use UserFrosting\Sprinkle\UFTweaks\Mail\RetryMailer;
 
@@ -185,6 +186,7 @@ class ServicesProvider
 
             $twig->addExtension(new HasRoleExtension($c));
             $twig->addExtension(new MobileDetectExtension($c));
+            $twig->addExtension(new LocaleOverrideExtension($c));
 
             return $view;
         });

src/Twig/HasRoleExtension.php

@@ -63,7 +63,7 @@ class HasRoleExtension extends AbstractExtension implements GlobalsInterface
         ];
     }
 
-    public function getGlobals()
+    public function getGlobals(): array
     {
         return [];
     }

src/Twig/LocaleOverrideExtension.php

@@ -0,0 +1,52 @@
+<?php
+
+/*
+ * AVSDev UF Tweaks (https://avsdev.uk)
+ *
+ * @link      https://git.avsdev.uk/avsdev/sprinkle-uf-tweaks
+ * @license   https://git.avsdev.uk/avsdev/sprinkle-uf-tweaks/blob/master/LICENSE.md (LGPL-3.0 License)
+ */
+
+namespace UserFrosting\Sprinkle\UFTweaks\Twig;
+
+use Psr\Container\ContainerInterface;
+use Twig\Extension\AbstractExtension;
+use Twig\Extension\GlobalsInterface;
+
+/**
+ * Overrides the page language to 'en' only
+ */
+class LocaleOverrideExtension extends AbstractExtension implements GlobalsInterface
+{
+    /**
+     * @var ContainerInterface
+     */
+    protected $services;
+
+    /**
+     * @var Config
+     */
+    protected $config;
+
+    /**
+     * @param ContainerInterface $services
+     */
+    public function __construct(ContainerInterface $services)
+    {
+        $this->services = $services;
+    }
+
+    /**
+     * Adds Twig global variable 'currentLocale'
+     *
+     * @return array[mixed]
+     */
+    public function getGlobals(): array
+    {
+        $locale = $this->services->locale->getLocaleIndentifier();
+        $parts = explode('_', $locale) ?: [];
+        return [
+            'currentLocale' => $parts[0]
+        ];
+    }
+}

src/Twig/MobileDetectExtension.php

@@ -53,7 +53,7 @@ class MobileDetectExtension extends AbstractExtension implements GlobalsInterfac
         ];
     }
 
-    public function getGlobals()
+    public function getGlobals(): array
     {
         return [];
     }

templates/forms/forgot-password.html.twig

@@ -0,0 +1,8 @@
+<form id="request-password-reset" role="form" action="{{site.uri.public}}/account/forgot-password" method="post" class="r-form" aria-label="Forgotten password">
+    {% include "forms/csrf.html.twig" %}
+    <div class="form-group">
+        <label class="sr-only" for="reset-form-email">{{translate("EMAIL")}}</label>
+        <input type="text" name="email" placeholder="{{translate("EMAIL")}}" class="form-control" id="reset-form-email" autocomplete="email">
+    </div>
+    <button type="submit" class="btn btn-block btn-primary">{{translate("PASSWORD.FORGET.EMAIL_SEND")}}</button>
+</form>

templates/forms/inputs/register-captcha.html.twig

@@ -4,7 +4,7 @@
             <label class="sr-only" for="input-register-captcha">{{translate('CAPTCHA.VERIFY')}}</label>
             <div class="row">
                 <div class="col-md-6">
-                    <input type="text" id="input-register-captcha" name="captcha" placeholder="{{translate('CAPTCHA.SPECIFY')}}" class="form-control">
+                    <input type="text" id="input-register-captcha" name="captcha" placeholder="{{translate('CAPTCHA.SPECIFY')}}" class="form-control" autocomplete="off">
                 </div>
                 <div class="col-md-6 form-col-captcha">
                     <img src="{{site.uri.public}}/account/captcha" id="captcha" data-target="#input-register-captcha">

templates/forms/inputs/register-name_email.html.twig

@@ -1,24 +1,24 @@
 {% if 'name_email' not in form.fields.hidden %}
     {% if col_width %}<div class="{{col_width}}">{% endif %}
-    <label for="input-register-first_name">{{translate('NAME_AND_EMAIL')}}</label>
+    <span class="form-group-label">{{translate('NAME_AND_EMAIL')}}</span>
     <div class="row">
         <div class="col-md-6">
             <div class="form-group">
                 <label class="sr-only control-label" for="input-register-first_name">{{translate('FIRST_NAME')}}</label>
-                <input type="text" id="input-register-first_name" name="first_name" placeholder="{{translate('FIRST_NAME')}}" class="form-control" autocomplete="off">
+                <input type="text" id="input-register-first_name" name="first_name" placeholder="{{translate('FIRST_NAME')}}" class="form-control" autocomplete="given-name">
             </div>
         </div>
         <div class="col-md-6">
             <div class="form-group">
                 <label class="sr-only control-label" for="input-register-last_name">{{translate('LAST_NAME')}}</label>
-                <input type="text" id="input-register-last_name" name="last_name" placeholder="{{translate('LAST_NAME')}}" class="form-control" autocomplete="off">
+                <input type="text" id="input-register-last_name" name="last_name" placeholder="{{translate('LAST_NAME')}}" class="form-control" autocomplete="family-name">
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-12">
             <div class="form-group">
-                <input type="text" id="input-register-email" name="email" placeholder="{% if site.registration.require_email_verification %}{{translate('EMAIL.VERIFICATION_REQUIRED')}}{% else %}{{translate('EMAIL.YOUR')}}{% endif %}" class="form-control">
+                <input type="text" id="input-register-email" name="email" placeholder="{% if site.registration.require_email_verification %}{{translate('EMAIL.VERIFICATION_REQUIRED')}}{% else %}{{translate('EMAIL.YOUR')}}{% endif %}" class="form-control" autocomplete="email">
             </div>
         </div>
     </div>

templates/forms/inputs/register-password.html.twig

@@ -2,11 +2,11 @@
     {% if col_width %}<div class="{{col_width}}">{% endif %}
         <div class="form-group">
             <label for="input-register-password" class="control-label">{{translate('PASSWORD')}}</label>
-            <input type="password" id="input-register-password" name="password" placeholder="{{translate('PASSWORD.BETWEEN', {min: site.password.length.min, max: site.password.length.max})}}" class="form-control">
+            <input type="password" id="input-register-password" name="password" placeholder="{{translate('PASSWORD.BETWEEN', {min: site.password.length.min, max: site.password.length.max})}}" class="form-control" autocomplete="new-password">
         </div>
         <div class="form-group">
             <label class="sr-only control-label" for="input-register-passwordc">{{translate('PASSWORD.CONFIRM')}}</label>
-            <input type="password" id="input-register-passwordc" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" class="form-control">
+            <input type="password" id="input-register-passwordc" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" class="form-control" autocomplete="new-password">
         </div>
     {% if col_width %}</div>{% endif %}
 {% endif %}

templates/forms/inputs/register-user_name.html.twig

@@ -3,7 +3,7 @@
         <div class="form-group">
             <label for="input-register-username" class="control-label">{{translate('USERNAME')}}</label>
             <span class="pull-right"><a href="#" id="input-register-username-suggest">[{{translate('SUGGEST')}}]</a></span>
-            <input type="text" id="input-register-username" name="user_name" placeholder="{{translate('USERNAME.CHOOSE')}}" class="form-control" autocomplete="off">
+            <input type="text" id="input-register-username" name="user_name" placeholder="{{translate('USERNAME.CHOOSE')}}" class="form-control" autocomplete="username">
         </div>
     {% if col_width %}</div>{% endif %}
 {% endif %}

templates/forms/inputs/user-current_password.html.twig

@@ -4,7 +4,7 @@
             <label for="input-user-passwordcheck" class="control-label">{{translate("PASSWORD.CURRENT")}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-key"></i></span>
-                <input type="password" id="input-user-passwordcheck" class="form-control" name="passwordcheck" placeholder="{{translate("PASSWORD.CURRENT_EXPLAIN")}}" {% if 'password' in form.fields.disabled %}disabled{% endif %}>
+                <input type="password" id="input-user-passwordcheck" class="form-control" name="passwordcheck" placeholder="{{translate("PASSWORD.CURRENT_EXPLAIN")}}" {% if 'password' in form.fields.disabled %}disabled{% endif %} autocomplete="current-password">
             </div>
         </div>
     {% if col_width %}</div>{% endif %}

templates/forms/inputs/user-email.html.twig

@@ -4,7 +4,7 @@
             <label for="input-user-email" class="control-label">{{translate('EMAIL')}}</label>
             <div class="input-group js-copy-container">
                 <span class="input-group-addon"><i class="fas fa-envelope fa-fw"></i></span>
-                <input type="text" class="form-control js-copy-target" name="email" autocomplete="off" value="{{user.email}}" placeholder="{{translate('EMAIL')}}" {% if 'email' in form.fields.disabled %}disabled{% endif %}>
+                <input type="text" class="form-control js-copy-target" id="input-user-email" name="email" value="{{user.email}}" placeholder="{{translate('EMAIL')}}" {% if 'email' in form.fields.disabled %}disabled{% endif %} autocomplete="email">
                 {% if 'email' in form.fields.disabled %}
                     {% if 'copy' not in form.fields.disabled %}
                     <span class="input-group-btn">

templates/forms/inputs/user-first_name.html.twig

@@ -4,7 +4,7 @@
             <label for="input-user-first-name" class="control-label">{{translate('FIRST_NAME')}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-edit fa-fw"></i></span>
-                <input type="text" id="input-user-first-name" name="first_name" class="form-control" autocomplete="off" value="{{user.first_name}}" placeholder="{{translate('FIRST_NAME')}}" {% if 'name' in form.fields.disabled %}disabled{% endif %}>
+                <input type="text" id="input-user-first-name" name="first_name" class="form-control" value="{{user.first_name}}" placeholder="{{translate('FIRST_NAME')}}" {% if 'name' in form.fields.disabled %}disabled{% endif %} autocomplete="given-name">
             </div>
         </div>
     {% if col_width %}</div>{% endif %}

templates/forms/inputs/user-last_name.html.twig

@@ -4,7 +4,7 @@
             <label for="input-user-last-name" class="control-label">{{translate('LAST_NAME')}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-edit fa-fw"></i></span>
-                <input type="text" id="input-user-last-name" name="last_name" class="form-control" autocomplete="off" value="{{user.last_name}}" placeholder="{{translate('LAST_NAME')}}" {% if 'name' in form.fields.disabled %}disabled{% endif %}>
+                <input type="text" id="input-user-last-name" name="last_name" class="form-control" value="{{user.last_name}}" placeholder="{{translate('LAST_NAME')}}" {% if 'name' in form.fields.disabled %}disabled{% endif %} autocomplete="family-name">
             </div>
         </div>
     {% if col_width %}</div>{% endif %}

templates/forms/inputs/user-new_password.html.twig

@@ -4,14 +4,14 @@
             <label for="input-user-password" class="control-label">{{translate("PASSWORD.NEW")}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-key"></i></span>
-                <input type="password" id="input-user-password" class="form-control" name="password" placeholder="{{translate("PASSWORD.BETWEEN", {min: site.password.length.min, max: site.password.length.max})}} ({{translate("OPTIONAL")}})" {% if 'password' in form.fields.disabled %}disabled{% endif %}>
+                <input type="password" id="input-user-password" class="form-control" name="password" placeholder="{{translate("PASSWORD.BETWEEN", {min: site.password.length.min, max: site.password.length.max})}} ({{translate("OPTIONAL")}})" {% if 'password' in form.fields.disabled %}disabled{% endif %} autocomplete="new-password">
             </div>
         </div>
         <div class="form-group">
             <label for="input-user-passwordc" class="control-label">{{translate("PASSWORD.CONFIRM_NEW")}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-key"></i></span>
-                <input type="password" id="input-user-passwordc" class="form-control" name="passwordc" placeholder="{{translate("PASSWORD.CONFIRM_NEW_HELP")}}" {% if 'password' in form.fields.disabled %}disabled{% endif %}>
+                <input type="password" id="input-user-passwordc" class="form-control" name="passwordc" placeholder="{{translate("PASSWORD.CONFIRM_NEW_HELP")}}" {% if 'password' in form.fields.disabled %}disabled{% endif %} autocomplete="new-password">
             </div>
         </div>
     {% if col_width %}</div>{% endif %}

templates/forms/inputs/user-user_name.html.twig

@@ -4,7 +4,7 @@
             <label for="input-user-username" class="control-label">{{translate('USERNAME')}}</label>
             <div class="input-group">
                 <span class="input-group-addon"><i class="fas fa-edit fa-fw"></i></span>
-                <input type="text" id="input-user-username" class="form-control" name="user_name" autocomplete="off" value="{{user.user_name}}" placeholder="{{translate('USERNAME')}}" {% if 'user_name' in form.fields.disabled %}disabled{% endif %}>
+                <input type="text" id="input-user-username" class="form-control" name="user_name" value="{{user.user_name}}" placeholder="{{translate('USERNAME')}}" {% if 'user_name' in form.fields.disabled %}disabled{% endif %} autocomplete="username">
             </div>
         </div>
     {% if col_width %}</div>{% endif %}

templates/forms/register.html.twig

@@ -26,7 +26,7 @@
             {% endblock %}
 
             <div class="col-sm-12 collapse">
-                <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
+                <label for="spiderbro">Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
                 <input name="spiderbro" id="spiderbro" value="http://"/>
             </div>
 
@@ -48,10 +48,4 @@
         <button type="submit" class="btn btn-block btn-primary">{{translate('REGISTER_ME')}}</button>
         {% endblock %}
     </div>
-    
-    <div style="padding-top: 10px;">
-        {{translate('SIGN_IN_HERE', {
-            'url' : site.uri.public ~'/account/sign-in'
-        }) | raw}}
-    </div>
 </form>

templates/forms/resend-verification.html.twig

@@ -0,0 +1,8 @@
+<form id="request-verification-email" role="form" action="{{site.uri.public}}/account/resend-verification" method="post" class="r-form">
+    {% include "forms/csrf.html.twig" %}
+    <div class="form-group">
+        <label class="sr-only" for="verification-form-email">{{translate("EMAIL")}}</label>
+        <input type="text" name="email" placeholder="{{translate("EMAIL")}}" class="form-control" id="verification-form-email" autocomplete="email">
+    </div>
+    <button type="submit" class="btn btn-block btn-primary">{{translate("ACCOUNT.VERIFICATION.SEND")}}</button>
+</form>

templates/forms/reset-password.html.twig

@@ -0,0 +1,16 @@
+<form id="set-or-reset-password" role="form" action="{{site.uri.public}}/account/set-password" method="post" class="r-form" aria-label="Reset password">
+    {% include "forms/csrf.html.twig" %}
+
+    <div class="form-group">
+        <label class="sr-only" for="form-password">{{translate("PASSWORD.NEW")}}</label>
+        <input type="password" name="password" placeholder="{{translate("PASSWORD.BETWEEN", {min: site.password.length.min, max: site.password.length.max})}}" class="form-control" id="form-password" autocomplete="new-password">
+    </div>
+
+    <div class="form-group">
+        <label class="sr-only" for="form-passwordc">{{translate("PASSWORD.CONFIRM_NEW")}}</label>
+        <input type="password" name="passwordc" placeholder="{{translate("PASSWORD.CONFIRM_NEW_EXPLAIN")}}" class="form-control" id="form-passwordc" autocomplete="new-password">
+    </div>
+    
+    <input type="hidden" name="token" value="{{token}}">
+    <button type="submit" class="btn btn-block btn-primary">{{translate("PASSWORD.RESET.SEND")}}</button>
+</form>

templates/forms/set-password.html.twig

@@ -0,0 +1,17 @@
+<form id="set-or-reset-password" role="form" action="{{site.uri.public}}/account/set-password" method="post" class="r-form">
+    {% include "forms/csrf.html.twig" %}
+    {# Prevent browsers from trying to autofill the password field.  See http://stackoverflow.com/a/23234498/2970321 #}
+    <input type="text" style="display:none" aria-label="hidden spider text">
+    <input type="password" style="display:none" aria-label="hidden spider password">
+
+    <div class="form-group">
+        <label class="sr-only" for="form-password">{{translate('PASSWORD')}}</label>
+        <input type="password" name="password" placeholder="{{translate('PASSWORD.BETWEEN', {min: site.password.length.min, max: site.password.length.max})}}" class="form-control" id="form-password">
+    </div>
+    <div class="form-group">
+        <label class="sr-only" for="form-passwordc">{{translate('PASSWORD.CONFIRM')}}</label>
+        <input type="password" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" class="form-control" id="form-passwordc">
+    </div>
+    <input type="hidden" name="token" value="{{token}}">
+    <button type="submit" class="btn btn-block btn-primary">{{translate('PASSWORD.CREATE.SET')}}</button>
+</form>

templates/forms/settings-account.html.twig

@@ -1,12 +1,13 @@
 <form id="account-settings" role="form" action="{{site.uri.public}}/account/settings" method="post">
     <div class="box-header">
-        <h3 class="box-title"><i class="fas fa-cog fa-fw"></i> {{translate("ACCOUNT.SETTINGS")}}</h3>
+        <h2 class="box-title"><i class="fas fa-cog fa-fw"></i> {{translate("ACCOUNT.SETTINGS")}}</h2>
     </div>
     <div class="box-body">
         {% include "forms/csrf.html.twig" %}
+
         <!-- Prevent browsers from trying to autofill the password field.  See http://stackoverflow.com/a/23234498/2970321 -->
-        <input type="text" style="display:none">
-        <input type="password" style="display:none">
+        <input type="text" style="display:none" aria-hidden=”true” role="none" aria-label="autocomplere username trap">
+        <input type="password" style="display:none" aria-hidden=”true” role="none" aria-label="autocomplere password trap">
 
         {% block settings_account %}
             <div class="row">

templates/forms/settings-profile.html.twig

@@ -1,6 +1,6 @@
 <form id="profile-settings" role="form" action="{{site.uri.public}}/account/settings/profile" method="post">
     <div class="box-header">
-        <h3 class="box-title"><i class="fas fa-user fa-fw"></i> {{translate("PROFILE.SETTINGS")}}</h3>
+        <h2 class="box-title"><i class="fas fa-user fa-fw"></i> {{translate("PROFILE.SETTINGS")}}</h2>
     </div>
     <div class="box-body">
         {% include "forms/csrf.html.twig" %}

templates/forms/sign-in.html.twig

@@ -0,0 +1,27 @@
+<form action="{{site.uri.public}}/account/login" id="sign-in" method="post" role="form" aria-label="Sign in">
+  {% include "forms/csrf.html.twig" %}
+  <div class="form-group has-feedback">
+    <label class="sr-only" for="username">{% if site.login.enable_email %}{{translate('EMAIL_OR_USERNAME')}}{% else %}{{translate('USERNAME')}}{% endif %}</label>
+    <input type="text" class="form-control" placeholder="{% if site.login.enable_email %}{{translate('EMAIL_OR_USERNAME')}}{% else %}{{translate('USERNAME')}}{% endif %}" name="user_name" id="username" autocomplete="username">
+    <i class="glyphicon glyphicon-user form-control-icon" aria-hidden="true"></i>
+  </div>
+  <div class="form-group has-feedback">
+    <label class="sr-only" for="password">{{translate('PASSWORD')}}</label>
+    <input type="password" class="form-control" placeholder="{{translate('PASSWORD')}}" name="password" id="password" autocomplete="current-password">
+    <i class="glyphicon glyphicon-lock form-control-icon" aria-hidden="true"></i>
+  </div>
+  <div class="row">
+    <div class="col-xs-8">
+      <div class="checkbox icheck">
+        <label>
+          <input type="checkbox" class="js-icheck" name="rememberme"> {{translate('REMEMBER_ME')}}
+        </label>
+      </div>
+    </div>
+    <!-- /.col -->
+    <div class="col-xs-4">
+      <button type="submit" class="btn btn-primary btn-block btn-flat">{{translate('LOGIN')}}</button>
+    </div>
+    <!-- /.col -->
+  </div>
+</form>

templates/modals/confirm-permanently-delete-user.html.twig

@@ -7,7 +7,7 @@
     {% include "forms/csrf.html.twig" %}
     <div class="js-form-alerts">
     </div>
-    <h4>{{translate("USER.PERMANENT_DELETE_CONFIRM", {user_name: user.user_name})}}</h4>
+    <p>{{translate("USER.PERMANENT_DELETE_CONFIRM", {user_name: user.user_name})}}</p>
     <br>
     <small>{{translate("ACTION_CANNOT_UNDONE")}}</small>
     <br>

templates/pages/abstract/dashboard.html.twig

@@ -0,0 +1,69 @@
+{% extends "@admin/pages/abstract/dashboard.html.twig" %}
+
+{% block content %}
+    {# This needs to be here (early in the body) to make sure the animation doesn't fire #}
+    <script>
+        (function () {
+          if (Boolean(sessionStorage.getItem('sidebar-toggle-collapsed'))) {
+            var body = document.getElementsByTagName('body')[0];
+            body.className = body.className + ' sidebar-collapse';
+          }
+        })();
+    </script>
+
+    <div class="wrapper">
+      {% block main_header %}
+      <header id="main-header" class="main-header">
+        <!-- Logo -->
+        {{ block('navbar_logo') }}
+
+        <!-- Header Navbar: style can be found in header.less -->
+        <nav class="navbar navbar-static-top">
+            <!-- Sidebar toggle button-->
+            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
+                <span class="sr-only">Toggle navigation</span>
+            </a>
+            <!-- Main nav buttons -->
+            {% include "navigation/navbar.html.twig" %}
+        </nav>
+      </header>
+      {% endblock %}
+
+      <!-- Left side column. contains the logo and sidebar -->
+      {% block main_sidebar %}
+      <aside id="main-sidebar" class="main-sidebar">
+        <!-- sidebar: style can be found in sidebar.less -->
+        <section class="sidebar">
+            {% include 'navigation/sidebar.html.twig' %}
+        </section>
+        <!-- /.sidebar -->
+      </aside>
+      {% endblock %}
+
+      <!-- Content Wrapper. Contains page content -->
+      {% block main_content %}
+      <main id="main-content" class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        {% block content_header %}
+        <section class="content-header">
+          <h1>{% block header_title %}{{ block('page_title') }}{% endblock %}</h1>
+          {% if block('page_description') is not empty %}<p class="page-description">{% block header_description %}{{ block('page_description') }}{% endblock %}</p>{% endif %}
+          {% block breadcrumb %}{% include 'navigation/breadcrumb.html.twig' with {page_title: block('page_title')} %}{% endblock %}
+          <div id="alerts-page"></div>
+        </section>
+        {% endblock %}
+        <section class="content">
+            {% block body_matter %}{% endblock %}
+        </section>
+      </main>
+      {% endblock %}
+      <!-- /.content-wrapper -->
+
+    <!-- Footer -->
+    {% block main_footer %}
+    {{ block('footer') }}
+    {% endblock %}
+
+    </div>
+    <!-- ./wrapper -->
+{% endblock %}

templates/pages/abstract/loginBox-page.html.twig

@@ -0,0 +1,31 @@
+{% extends "pages/abstract/base.html.twig" %}
+
+{% block body_attributes %}
+    class="hold-transition login-page"
+{% endblock %}
+
+{% block content %}
+<div id="main-content" class="login-box">
+    <header class="login-logo">
+        <h1><a href="{{site.uri.public}}">{{site.title}}</a></h1>
+    </header>
+    <!-- /.login-logo -->
+
+    {% block loginBox %}
+    <main class="login-box-body login-form">
+        <h2 class="login-box-msg">{% block loginBox_title %}{% endblock %}</h2>
+        {% if block('loginBox_subtitle') is not empty %}<p class="login-box-msg">{% block loginBox_subtitle %}{% endblock %}</p>{% endif %}
+
+        <div class="form-alerts" id="alerts-page"></div>
+
+        {% block loginBox_content %}{% endblock %}
+
+        <div class="login-box-footer">
+          {% block loginBox_footer %}{% endblock %}
+        </div>
+    </main>
+    {% endblock %}
+    <!-- /.login-box-body -->
+</div>
+<!-- /.login-box -->
+{% endblock %}

templates/pages/dashboard.html.twig

@@ -1,6 +1,5 @@
-{% extends "@admin/pages/abstract/dashboard.html.twig" %}
+{% extends "pages/abstract/dashboard.html.twig" %}
 
-{# Overrides blocks in head of base template #}
 {% block page_title %}{{ translate("DASHBOARD") }}{% endblock %}
 {% block page_description %}{% endblock %}
 
@@ -301,5 +300,5 @@
 
     <!-- Include page-specific JS -->
     {{ assets.js('js/pages/dashboard') | raw }}
-
 {% endblock %}
+

templates/pages/forgot-password.html.twig

@@ -0,0 +1,21 @@
+{% extends "pages/abstract/loginBox-page.html.twig" %}
+
+{% block page_title %}{{translate("PASSWORD.FORGOTTEN")}}{% endblock %}
+{% block page_description %}{{translate("PASSWORD.FORGET.PAGE")}}{% endblock %}
+
+{% block loginBox_title %}{{translate("PASSWORD.FORGOTTEN")}}{% endblock %}
+{% block loginBox_subtitle %}{{translate("PASSWORD.FORGET.EMAIL")}}{% endblock %}
+{% block loginBox_content %}{% include "forms/forgot-password.html.twig" %}{% endblock %}
+{% block loginBox_footer %}
+    <a href="{{site.uri.public}}/account/sign-in">{{translate('BACK_TO_LOGIN')}}</a>
+{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+    {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <!-- Include page-specific JS bundle -->
+    {{ assets.js('js/pages/forgot-password') | raw }}
+{% endblock %}

templates/pages/register.html.twig

@@ -1,19 +1,23 @@
-{% extends "@account/pages/register.html.twig" %}
+{% extends "pages/abstract/loginBox-page.html.twig" %}
 
-{% block content %}
-<div class="login-box">
-    <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
+{% block page_title %}{{translate("REGISTER")}}{% endblock %}
+{% block page_description %}{{translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title })}}{% endblock %}
+
+{% block loginBox_title %}{{translate("REGISTER")}}{% endblock %}
+{% block loginBox_content %}{% include "forms/register.html.twig" %}{% endblock %}
+{% block loginBox_footer %}
+    <div style="padding-top: 10px;">
+        {{translate('SIGN_IN_HERE', {'url' : site.uri.public ~'/account/sign-in'}) | raw}}
+        <a href="{{site.uri.public}}">{{translate('BACK_TO_HOMEPAGE')}}</a>
     </div>
-    <!-- /.login-logo -->
-
-    <div class="login-box-body register-form">
-        <p class="login-box-msg"><strong>{{translate('REGISTER')}}</strong></p>
-
-        {% include "forms/register.html.twig" %}
-    </div>
-    <!-- /.login-box-body -->
-
-</div>
-<!-- /.login-box -->
+{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+        {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <!-- Include page-specific JS -->
+    {{ assets.js('js/pages/register') | raw }}
 {% endblock %}

templates/pages/resend-verification.html.twig

@@ -0,0 +1,22 @@
+{% extends "pages/abstract/loginBox-page.html.twig" %}
+
+{% block page_title %}{{translate("ACCOUNT.VERIFICATION.RESEND")}}{% endblock %}
+{% block page_description %}{{translate("ACCOUNT.VERIFICATION.PAGE")}}{% endblock %}
+
+{% block loginBox_title %}{{translate("ACCOUNT.VERIFICATION.RESEND")}}{% endblock %}
+{% block loginBox_subtitle %}{{translate("ACCOUNT.VERIFICATION.EMAIL")}}{% endblock %}
+{% block loginBox_content %}{% include "forms/resend-verification.html.twig" %}{% endblock %}
+{% block loginBox_footer %}
+    <a href="{{site.uri.public}}/account/sign-in">{{translate('BACK_TO_LOGIN')}}</a>
+{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+    {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <!-- Include page-specific JS -->
+    {{ assets.js('js/pages/resend-verification') | raw }}
+
+{% endblock %}

templates/pages/reset-password.html.twig

@@ -0,0 +1,20 @@
+{% extends "pages/abstract/loginBox-page.html.twig" %}
+
+{% block page_title %}{{translate("PASSWORD.RESET")}}{% endblock %}
+{% block page_description %}{{translate("PASSWORD.RESET.PAGE")}}{% endblock %}
+
+{% block loginBox_title %}{{translate("PASSWORD.RESET")}}{% endblock %}
+{% block loginBox_subtitle %}{{translate("PASSWORD.RESET.CHOOSE")}}{% endblock %}
+{% block loginBox_content %}{% include "forms/reset-password.html.twig" %}{% endblock %}
+{% block loginBox_footer %}{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+    {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <!-- Include page-specific JS bundle -->
+    {{ assets.js('js/pages/set-or-reset-password') | raw }}
+
+{% endblock %}

templates/pages/set-password.html.twig

@@ -0,0 +1,20 @@
+{% extends "pages/abstract/loginBox-page.html.twig" %}
+
+{% block page_title %}{{translate("PASSWORD.CREATE")}}{% endblock %}
+{% block page_description %}{{translate("PASSWORD.CREATE.PAGE")}}{% endblock %}
+
+{% block loginBox_title %}{{translate("PASSWORD.CREATE")}}{% endblock %}
+{% block loginBox_subtitle %}{{translate("WELCOME_TO", {'title': site.title})}} {{translate("PASSWORD.CREATE.PAGE")}}{% endblock %}
+{% block loginBox_content %}{% include "forms/set-password.html.twig" %}{% endblock %}
+{% block loginBox_footer %}{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+    {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <!-- Include page-specific JS bundle -->
+    {{ assets.js('js/pages/set-or-reset-password') | raw }}
+
+{% endblock %}

templates/pages/sign-in.html.twig

@@ -0,0 +1,39 @@
+{% extends "pages/abstract/loginBox-page.html.twig" %}
+
+{% block page_title %}{{translate('SIGNIN')}}{% endblock %}
+{% block page_description %}{{translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title })}}{% endblock %}
+
+{% block loginBox_title %}{{translate('SIGNIN')}}{% endblock %}
+{% block loginBox_content %}{% include "forms/sign-in.html.twig" %}{% endblock %}
+{% block loginBox_footer %}
+    <a href="{{site.uri.public}}/account/forgot-password">{{translate('PASSWORD.FORGET')}}</a><br>
+    {% if site.registration.require_email_verification %}
+    <a href="{{site.uri.public}}/account/resend-verification">{{translate('ACCOUNT.VERIFICATION.RESEND')}}</a><br>
+    {% endif %}
+    {% if site.registration.enabled %}
+    <a href="{{site.uri.public}}/account/register">{{translate('REGISTER')}}</a><br>
+    {% endif %}
+    <a href="{{site.uri.public}}">{{translate('BACK_TO_HOMEPAGE')}}</a>
+{% endblock %}
+
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+        {% include "pages/partials/page.js.twig" %}
+    </script>
+
+    <script>
+    site = $.extend(
+        true,               // deep extend
+        {
+            "registration" : {
+                "enabled" : "{{site.registration.enabled}}"
+            }
+        },
+        site
+    );
+    </script>
+
+    <!-- Include page-specific JS -->
+    {{ assets.js('js/pages/sign-in') | raw }}
+{% endblock %}