Refactored code, many fixes and improvements in chat backend+frontend

7 files changed, 217 insertions, 189 deletions

diff --git a/main/app/sprinkles/account/templates/pages/account-settings.html.twig b/main/app/sprinkles/account/templates/pages/account-settings.html.twig
index 86db3d9..cfe82c1 100644
--- a/main/app/sprinkles/account/templates/pages/account-settings.html.twig
+++ b/main/app/sprinkles/account/templates/pages/account-settings.html.twig
@@ -8,9 +8,9 @@
 {% endblock %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate("ACCOUNT.SETTINGS")}}{% endblock %}
+{% block page_title %}{{ translate("ACCOUNT.SETTINGS") }}{% endblock %}
 
-{% block page_description %}{{translate("ACCOUNT.SETTINGS.DESCRIPTION")}}{% endblock %}
+{% block page_description %}{{ translate("ACCOUNT.SETTINGS.DESCRIPTION") }}{% endblock %}
 
 {% block body_matter %}
 
diff --git a/main/app/sprinkles/account/templates/pages/error/compromised.html.twig b/main/app/sprinkles/account/templates/pages/error/compromised.html.twig
index 6048619..c12aa7d 100644
--- a/main/app/sprinkles/account/templates/pages/error/compromised.html.twig
+++ b/main/app/sprinkles/account/templates/pages/error/compromised.html.twig
@@ -6,6 +6,6 @@
 
 {% block heading %}
     <i class="fa fa-warning text-yellow"></i> {{ translate('ACCOUNT.SESSION_COMPROMISED.TEXT', {
-        'url' : site.uri.public ~ '/account/sign-in'
-    }) | raw }}
+    'url' : site.uri.public ~ '/account/sign-in'
+}) | raw }}
 {% endblock %}
diff --git a/main/app/sprinkles/account/templates/pages/forgot-password.html.twig b/main/app/sprinkles/account/templates/pages/forgot-password.html.twig
index 72b1a2a..2c890a1 100644
--- a/main/app/sprinkles/account/templates/pages/forgot-password.html.twig
+++ b/main/app/sprinkles/account/templates/pages/forgot-password.html.twig
@@ -1,9 +1,9 @@
 {% extends "pages/abstract/base.html.twig" %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate("PASSWORD.FORGOTTEN")}}{% endblock %}
+{% block page_title %}{{ translate("PASSWORD.FORGOTTEN") }}{% endblock %}
 
-{% block page_description %}{{translate("PASSWORD.FORGET.PAGE")}}{% endblock %}
+{% block page_description %}{{ translate("PASSWORD.FORGET.PAGE") }}{% endblock %}
 
 {% block body_attributes %}
     class="hold-transition login-page"
@@ -12,35 +12,38 @@
 {% block content %}
 <div class="login-box">
     <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
+        <a href="{{ site.uri.public }}">{{ site.title }}</a>
     </div>
     <!-- /.login-logo -->
 
     <div class="login-box-body login-form">
-        <p class="login-box-msg"><strong>{{translate("PASSWORD.FORGOTTEN")}}</strong></p>
-        <p class="login-box-msg">{{translate("PASSWORD.FORGET.EMAIL")}}</p>
+        <p class="login-box-msg"><strong>{{ translate("PASSWORD.FORGOTTEN") }}</strong></p>
+        <p class="login-box-msg">{{ translate("PASSWORD.FORGET.EMAIL") }}</p>
 
         <div class="form-alerts" id="alerts-page"></div>
 
-        <form id="request-password-reset" role="form" action="{{site.uri.public}}/account/forgot-password" method="post" class="r-form">
+        <form id="request-password-reset" role="form" action="{{ site.uri.public }}/account/forgot-password"
+              method="post" class="r-form">
             {% 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">
+                <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">
             </div>
-            <button type="submit" class="btn btn-block btn-primary">{{translate("PASSWORD.FORGET.EMAIL_SEND")}}</button>
+            <button type="submit"
+                    class="btn btn-block btn-primary">{{ translate("PASSWORD.FORGET.EMAIL_SEND") }}</button>
         </form>
     </div>
     <!-- /.login-box-body -->
-{% endblock %}
+    {% endblock %}
 
-{% block scripts_page %}
-    <!-- Include validation rules -->
-    <script>
-    {% include "pages/partials/page.js.twig" %}
-    </script>
+    {% 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 }}
+        <!-- Include page-specific JS bundle -->
+        {{ assets.js('js/pages/forgot-password') | raw }}
 
-{% endblock %}
+    {% endblock %}
diff --git a/main/app/sprinkles/account/templates/pages/register.html.twig b/main/app/sprinkles/account/templates/pages/register.html.twig
index bd155ba..bcfc253 100644
--- a/main/app/sprinkles/account/templates/pages/register.html.twig
+++ b/main/app/sprinkles/account/templates/pages/register.html.twig
@@ -1,97 +1,109 @@
 {% extends "pages/abstract/base.html.twig" %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate('REGISTER')}}{% endblock %}
+{% block page_title %}{{ translate('REGISTER') }}{% endblock %}
 
-{% block page_description %}{{translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title })}}{% endblock %}
+{% block page_description %}{{ translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title }) }}{% endblock %}
 
 {% block body_attributes %}
     class="hold-transition login-page"
 {% endblock %}
 
 {% block content %}
-<div class="login-box">
-    <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
-    </div>
-    <!-- /.login-logo -->
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="{{ site.uri.public }}">{{ site.title }}</a>
+        </div>
+        <!-- /.login-logo -->
 
-    <div class="login-box-body register-form">
-        <p class="login-box-msg"><strong>{{translate('REGISTER')}}</strong></p>
-        <div class="form-alerts" id="alerts-page"></div>
+        <div class="login-box-body register-form">
+            <p class="login-box-msg"><strong>{{ translate('REGISTER') }}</strong></p>
+            <div class="form-alerts" id="alerts-page"></div>
 
-        <form id="register" role="form" action="{{site.uri.public}}/account/register" method="post" class="r-form">
-            {% include "forms/csrf.html.twig" %}
-            <label for="r-form-first-name">{{translate('NAME_AND_EMAIL')}}</label>
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group">
-                        <label class="sr-only" for="r-form-first-name">{{translate('FIRST_NAME')}}</label>
-                        <input type="text" name="first_name" placeholder="{{translate('FIRST_NAME')}}" class="form-control" id="r-form-first-name" autocomplete="off">
+            <form id="register" role="form" action="{{ site.uri.public }}/account/register" method="post"
+                  class="r-form">
+                {% include "forms/csrf.html.twig" %}
+                <label for="r-form-first-name">{{ translate('NAME_AND_EMAIL') }}</label>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label class="sr-only" for="r-form-first-name">{{ translate('FIRST_NAME') }}</label>
+                            <input type="text" name="first_name" placeholder="{{ translate('FIRST_NAME') }}"
+                                   class="form-control" id="r-form-first-name" autocomplete="off">
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group">
-                        <label class="sr-only" for="r-form-last-name">{{translate('LAST_NAME')}}</label>
-                        <input type="text" name="last_name" placeholder="{{translate('LAST_NAME')}}" class="form-control" id="r-form-last-name" autocomplete="off">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label class="sr-only" for="r-form-last-name">{{ translate('LAST_NAME') }}</label>
+                            <input type="text" name="last_name" placeholder="{{ translate('LAST_NAME') }}"
+                                   class="form-control" id="r-form-last-name" autocomplete="off">
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="form-group">
-                <input type="text" name="email" placeholder="{% if site.registration.require_email_verification %}{{translate('EMAIL.VERIFICATION_REQUIRED')}}{% else %}{{translate('EMAIL.YOUR')}}{% endif %}" class="form-control" id="r-form-email">
-            </div>
-            <div class="form-group">
-                <label for="r-form-username">{{translate('USERNAME')}}</label>
-                <span class="pull-right"><a href="#" id="form-register-username-suggest">[{{translate('SUGGEST')}}]</a></span>
-                <input type="text" name="user_name" placeholder="{{translate('USERNAME.CHOOSE')}}" class="form-control" id="r-form-username" autocomplete="off">
-            </div>
-            <div class="form-group">
-                <label for="r-form-password">{{translate('PASSWORD')}}</label>
-                <input type="password" name="password" placeholder="{{translate('PASSWORD.BETWEEN', {min: 12, max: 100})}}" class="form-control" id="r-form-password">
-            </div>
-            <div class="form-group">
-                <label class="sr-only" for="r-form-passwordc">{{translate('PASSWORD.CONFIRM')}}</label>
-                <input type="password" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" class="form-control" id="r-form-passwordc">
-            </div>
-            {% if site.registration.captcha %}
                 <div class="form-group">
-                    <label class="sr-only" for="r-form-passwordc">{{translate('CAPTCHA.VERIFY')}}</label>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <input type="text" name="captcha" placeholder="{{translate('CAPTCHA.SPECIFY')}}" class="form-control" id="r-form-captcha">
-                        </div>
-                        <div class="col-md-6 form-col-captcha">
-                                <img src="{{site.uri.public}}/account/captcha" id="captcha" data-target="#r-form-captcha">
+                    <input type="text" name="email"
+                           placeholder="{% if site.registration.require_email_verification %}{{ translate('EMAIL.VERIFICATION_REQUIRED') }}{% else %}{{ translate('EMAIL.YOUR') }}{% endif %}"
+                           class="form-control" id="r-form-email">
+                </div>
+                <div class="form-group">
+                    <label for="r-form-username">{{ translate('USERNAME') }}</label>
+                    <span class="pull-right"><a href="#" id="form-register-username-suggest">[{{ translate('SUGGEST') }}
+                            ]</a></span>
+                    <input type="text" name="user_name" placeholder="{{ translate('USERNAME.CHOOSE') }}"
+                           class="form-control" id="r-form-username" autocomplete="off">
+                </div>
+                <div class="form-group">
+                    <label for="r-form-password">{{ translate('PASSWORD') }}</label>
+                    <input type="password" name="password"
+                           placeholder="{{ translate('PASSWORD.BETWEEN', {min: 12, max: 100}) }}" class="form-control"
+                           id="r-form-password">
+                </div>
+                <div class="form-group">
+                    <label class="sr-only" for="r-form-passwordc">{{ translate('PASSWORD.CONFIRM') }}</label>
+                    <input type="password" name="passwordc" placeholder="{{ translate('PASSWORD.CONFIRM') }}"
+                           class="form-control" id="r-form-passwordc">
+                </div>
+                {% if site.registration.captcha %}
+                    <div class="form-group">
+                        <label class="sr-only" for="r-form-passwordc">{{ translate('CAPTCHA.VERIFY') }}</label>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <input type="text" name="captcha" placeholder="{{ translate('CAPTCHA.SPECIFY') }}"
+                                       class="form-control" id="r-form-captcha">
+                            </div>
+                            <div class="col-md-6 form-col-captcha">
+                                <img src="{{ site.uri.public }}/account/captcha" id="captcha"
+                                     data-target="#r-form-captcha">
+                            </div>
                         </div>
                     </div>
+                {% endif %}
+                <div class="collapse">
+                    <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
+                    <input name="spiderbro" id="spiderbro" value="http://" />
                 </div>
-            {% endif %}
-            <div class="collapse">
-                <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
-                <input name="spiderbro" id="spiderbro" value="http://"/>
-            </div>
-            <div class="text-left">
-                <p>
-                    {{translate('TOS_AGREEMENT', {
-                        'site_title' : site.title,
-                        'link_attributes' : 'class="js-show-tos" href="#" data-toggle="modal"'
-                    }) | raw}}
-                </p>
-            </div>
-            <div>
-                <button type="submit" class="btn btn-block btn-primary">{{translate('REGISTER_ME')}}</button>
-            </div>
-            <div style="padding-top: 10px;">
-                {{translate('SIGN_IN_HERE', {
-                    'url' : site.uri.public ~'/account/sign-in'
-                }) | raw}}
-            </div>
-        </form>
-    </div>
-    <!-- /.login-box-body -->
+                <div class="text-left">
+                    <p>
+                        {{ translate('TOS_AGREEMENT', {
+                            'site_title' : site.title,
+                            'link_attributes' : 'class="js-show-tos" href="#" data-toggle="modal"'
+                        }) | raw }}
+                    </p>
+                </div>
+                <div>
+                    <button type="submit" class="btn btn-block btn-primary">{{ translate('REGISTER_ME') }}</button>
+                </div>
+                <div style="padding-top: 10px;">
+                    {{ translate('SIGN_IN_HERE', {
+                        'url' : site.uri.public ~'/account/sign-in'
+                    }) | raw }}
+                </div>
+            </form>
+        </div>
+        <!-- /.login-box-body -->
 
-</div>
-<!-- /.login-box -->
+    </div>
+    <!-- /.login-box -->
 {% endblock %}
 
 {% block scripts_page %}
diff --git a/main/app/sprinkles/account/templates/pages/resend-verification.html.twig b/main/app/sprinkles/account/templates/pages/resend-verification.html.twig
index 627dce0..4bf611c 100644
--- a/main/app/sprinkles/account/templates/pages/resend-verification.html.twig
+++ b/main/app/sprinkles/account/templates/pages/resend-verification.html.twig
@@ -1,9 +1,9 @@
 {% extends "pages/abstract/base.html.twig" %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate("ACCOUNT.VERIFICATION.RESEND")}}{% endblock %}
+{% block page_title %}{{ translate("ACCOUNT.VERIFICATION.RESEND") }}{% endblock %}
 
-{% block page_description %}{{translate("ACCOUNT.VERIFICATION.PAGE")}}{% endblock %}
+{% block page_description %}{{ translate("ACCOUNT.VERIFICATION.PAGE") }}{% endblock %}
 
 {% block body_attributes %}
     class="hold-transition login-page"
@@ -12,35 +12,38 @@
 {% block content %}
 <div class="login-box">
     <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
+        <a href="{{ site.uri.public }}">{{ site.title }}</a>
     </div>
     <!-- /.login-logo -->
 
     <div class="login-box-body login-form">
-        <p class="login-box-msg"><strong>{{translate("ACCOUNT.VERIFICATION.RESEND")}}</strong></p>
-        <p class="login-box-msg">{{translate("ACCOUNT.VERIFICATION.EMAIL")}}</p>
+        <p class="login-box-msg"><strong>{{ translate("ACCOUNT.VERIFICATION.RESEND") }}</strong></p>
+        <p class="login-box-msg">{{ translate("ACCOUNT.VERIFICATION.EMAIL") }}</p>
 
         <div class="form-alerts" id="alerts-page"></div>
 
-        <form id="request-verification-email" role="form" action="{{site.uri.public}}/account/resend-verification" method="post" class="r-form">
+        <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">
+                <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">
             </div>
-            <button type="submit" class="btn btn-block btn-primary">{{translate("ACCOUNT.VERIFICATION.SEND")}}</button>
+            <button type="submit"
+                    class="btn btn-block btn-primary">{{ translate("ACCOUNT.VERIFICATION.SEND") }}</button>
         </form>
     </div>
     <!-- /.login-box-body -->
-{% endblock %}
+    {% endblock %}
 
-{% block scripts_page %}
-    <!-- Include validation rules -->
-    <script>
-    {% include "pages/partials/page.js.twig" %}
-    </script>
+    {% 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 }}
+        <!-- Include page-specific JS -->
+        {{ assets.js('js/pages/resend-verification') | raw }}
 
-{% endblock %}
+    {% endblock %}
diff --git a/main/app/sprinkles/account/templates/pages/reset-password.html.twig b/main/app/sprinkles/account/templates/pages/reset-password.html.twig
index 8e3a24a..71f6f02 100644
--- a/main/app/sprinkles/account/templates/pages/reset-password.html.twig
+++ b/main/app/sprinkles/account/templates/pages/reset-password.html.twig
@@ -1,9 +1,9 @@
 {% extends "pages/abstract/base.html.twig" %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate("PASSWORD.RESET")}}{% endblock %}
+{% block page_title %}{{ translate("PASSWORD.RESET") }}{% endblock %}
 
-{% block page_description %}{{translate("PASSWORD.RESET.PAGE")}}{% endblock %}
+{% block page_description %}{{ translate("PASSWORD.RESET.PAGE") }}{% endblock %}
 
 {% block body_attributes %}
     class="hold-transition login-page"
@@ -12,45 +12,49 @@
 {% block content %}
 <div class="login-box">
     <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
+        <a href="{{ site.uri.public }}">{{ site.title }}</a>
     </div>
     <!-- /.login-logo -->
 
     <div class="login-box-body login-form">
-        <p class="login-box-msg"><strong>{{translate("PASSWORD.RESET")}}</strong></p>
-        <p class="login-box-msg">{{translate("PASSWORD.RESET.CHOOSE")}}</p>
+        <p class="login-box-msg"><strong>{{ translate("PASSWORD.RESET") }}</strong></p>
+        <p class="login-box-msg">{{ translate("PASSWORD.RESET.CHOOSE") }}</p>
 
         <div class="form-alerts" id="alerts-page"></div>
 
-        <form id="set-or-reset-password" role="form" action="{{site.uri.public}}/account/set-password" method="post" class="r-form">
+        <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">
             <input type="password" style="display:none">
 
             <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: 12, max: 100})}}" class="form-control" id="form-password">
+                <label class="sr-only" for="form-password">{{ translate("PASSWORD.NEW") }}</label>
+                <input type="password" name="password"
+                       placeholder="{{ translate("PASSWORD.BETWEEN", {min: 12, max: 100}) }}" class="form-control"
+                       id="form-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">
+                <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">
             </div>
-            <input type="hidden" name="token" value="{{token}}">
-            <button type="submit" class="btn btn-block btn-primary">{{translate("PASSWORD.RESET.SEND")}}</button>
+            <input type="hidden" name="token" value="{{ token }}">
+            <button type="submit" class="btn btn-block btn-primary">{{ translate("PASSWORD.RESET.SEND") }}</button>
         </form>
     </div>
     <!-- /.login-box-body -->
-{% endblock %}
+    {% endblock %}
 
-{% block scripts_page %}
-    <!-- Include validation rules -->
-    <script>
-    {% include "pages/partials/page.js.twig" %}
-    </script>
+    {% 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 }}
+        <!-- Include page-specific JS bundle -->
+        {{ assets.js('js/pages/set-or-reset-password') | raw }}
 
-{% endblock %}
+    {% endblock %}
diff --git a/main/app/sprinkles/account/templates/pages/sign-in.html.twig b/main/app/sprinkles/account/templates/pages/sign-in.html.twig
index 2fb6e1c..4e2e21c 100644
--- a/main/app/sprinkles/account/templates/pages/sign-in.html.twig
+++ b/main/app/sprinkles/account/templates/pages/sign-in.html.twig
@@ -1,64 +1,70 @@
 {% extends "pages/abstract/base.html.twig" %}
 
 {# Overrides blocks in head of base template #}
-{% block page_title %}{{translate('SIGNIN')}}{% endblock %}
+{% block page_title %}{{ translate('SIGNIN') }}{% endblock %}
 
-{% block page_description %}{{translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title })}}{% endblock %}
+{% block page_description %}{{ translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title }) }}{% endblock %}
 
 {% block body_attributes %}
     class="hold-transition login-page"
 {% endblock %}
 
 {% block content %}
-<div class="login-box">
-    <div class="login-logo">
-        <a href="{{site.uri.public}}">{{site.title}}</a>
-    </div>
-    <!-- /.login-logo -->
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="{{ site.uri.public }}">{{ site.title }}</a>
+        </div>
+        <!-- /.login-logo -->
 
-    <div class="login-box-body login-form">
-        <p class="login-box-msg"><strong>{{translate('SIGNIN')}}</strong></p>
+        <div class="login-box-body login-form">
+            <p class="login-box-msg"><strong>{{ translate('SIGNIN') }}</strong></p>
 
-        <div class="form-alerts" id="alerts-page"></div>
+            <div class="form-alerts" id="alerts-page"></div>
 
-        <form action="{{site.uri.public}}/account/login" id="sign-in" method="post">
-          {% include "forms/csrf.html.twig" %}
-          <div class="form-group has-feedback">
-            <input type="text" class="form-control" placeholder="{% if site.login.enable_email %}{{translate('EMAIL_OR_USERNAME')}}{% else %}{{translate('USERNAME')}}{% endif %}" name="user_name">
-            <i class="glyphicon glyphicon-user form-control-icon" aria-hidden="true"></i>
-          </div>
-          <div class="form-group has-feedback">
-            <input type="password" class="form-control" placeholder="{{translate('PASSWORD')}}" name="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>
+            <form action="{{ site.uri.public }}/account/login" id="sign-in" method="post">
+                {% include "forms/csrf.html.twig" %}
+                <div class="form-group has-feedback">
+                    <input type="text" class="form-control"
+                           placeholder="{% if site.login.enable_email %}{{ translate('EMAIL_OR_USERNAME') }}{% else %}{{ translate('USERNAME') }}{% endif %}"
+                           name="user_name">
+                    <i class="glyphicon glyphicon-user form-control-icon" aria-hidden="true"></i>
+                </div>
+                <div class="form-group has-feedback">
+                    <input type="password" class="form-control" placeholder="{{ translate('PASSWORD') }}"
+                           name="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 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>
-        {% endif %}
+            <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>
+            {% endif %}
 
+        </div>
+        <!-- /.login-box-body -->
     </div>
-    <!-- /.login-box-body -->
-</div>
-<!-- /.login-box -->
+    <!-- /.login-box -->
 {% endblock %}
 
 {% block scripts_page %}
@@ -68,15 +74,15 @@
     </script>
 
     <script>
-    site = $.extend(
-        true,               // deep extend
-        {
-            "registration" : {
-                "enabled" : "{{site.registration.enabled}}"
-            }
-        },
-        site
-    );
+        site = $.extend(
+            true,               // deep extend
+            {
+                "registration": {
+                    "enabled": "{{ site.registration.enabled }}"
+                }
+            },
+            site
+        );
     </script>
 
     <!-- Include page-specific JS -->