Accessibility updates

2026-02-10 11:08:16 +00:00
parent a24d12ee81
commit ead3bfd7b8
30 changed files with 372 additions and 45 deletions
--- a/templates/forms/forgot-password.html.twig
+++ b/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>
--- a/templates/forms/inputs/register-captcha.html.twig
+++ b/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">
--- a/templates/forms/inputs/register-name_email.html.twig
+++ b/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>
--- a/templates/forms/inputs/register-password.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/register-user_name.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/user-current_password.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/user-email.html.twig
+++ b/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">
--- a/templates/forms/inputs/user-first_name.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/user-last_name.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/user-new_password.html.twig
+++ b/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 %}
--- a/templates/forms/inputs/user-user_name.html.twig
+++ b/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 %}
--- a/templates/forms/register.html.twig
+++ b/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>
--- a/templates/forms/resend-verification.html.twig
+++ b/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>
--- a/templates/forms/reset-password.html.twig
+++ b/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>
--- a/templates/forms/set-password.html.twig
+++ b/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>
--- a/templates/forms/settings-account.html.twig
+++ b/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">
--- a/templates/forms/settings-profile.html.twig
+++ b/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" %}
--- a/templates/forms/sign-in.html.twig
+++ b/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>
--- a/templates/modals/confirm-permanently-delete-user.html.twig
+++ b/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>
--- a/templates/pages/abstract/dashboard.html.twig
+++ b/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 %}
--- a/templates/pages/abstract/loginBox-page.html.twig
+++ b/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 %}
--- a/templates/pages/dashboard.html.twig
+++ b/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 %}
+
--- a/templates/pages/forgot-password.html.twig
+++ b/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 %}
--- a/templates/pages/register.html.twig
+++ b/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 -->
+{% endblock %}

-    <div class="login-box-body register-form">
-        <p class="login-box-msg"><strong>{{translate('REGISTER')}}</strong></p>
+{% block scripts_page %}
+    <!-- Include validation rules -->
+    <script>
+        {% include "pages/partials/page.js.twig" %}
+    </script>

-        {% include "forms/register.html.twig" %}
-    </div>
-    <!-- /.login-box-body -->
-
-</div>
-<!-- /.login-box -->
-{% endblock %}
+    <!-- Include page-specific JS -->
+    {{ assets.js('js/pages/register') | raw }}
+{% endblock %}
--- a/templates/pages/resend-verification.html.twig
+++ b/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 %}
--- a/templates/pages/reset-password.html.twig
+++ b/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 %}
--- a/templates/pages/set-password.html.twig
+++ b/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 %}
--- a/templates/pages/sign-in.html.twig
+++ b/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 %}