Improvements for the sign-up and login pages (#80)

* improvements to the login and sign up pages
* margin fixes

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less

@@ -52,7 +52,8 @@
   background-color: #000000 !important;
 }
 
-.field {
+.form-accounts {
+  margin: 15%;
   text-align: left !important;
   & i {
     color: #fff !important;
@@ -135,10 +136,6 @@ login and sign-up pages form background color
   font-size: initial;
 }
 
-.form-margin {
-  margin: 15%;
-}
-
 /***
 allowing to switch columns on the sign-up page on the small screen
 */

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/login.html

@@ -1,16 +1,9 @@
-{#
+{# Copyright (C) 2020 TUGRAZ Copyright (C) 2020 mojib wali Copyright (C) 2020
-  Copyright (C) 2020 TUGRAZ
+Nikita Lvov invenio-theme-tugraz is free software; you can redistribute it
-  Copyright (C) 2020 mojib wali
+and/or modify it under the terms of the MIT License; see LICENSE file for more
-  Copyright (C) 2020 Nikita Lvov
+details. #} {%- extends config.COVER_TEMPLATE %} {% from
-
+"invenio_accounts/_macros.html" import render_field, form_errors %} {% block
-  invenio-theme-tugraz is free software; you can redistribute it and/or
+page_body %}
-  modify it under the terms of the MIT License; see LICENSE file for more
-  details.
-#}
-{%- extends config.COVER_TEMPLATE %}	
-{% from "invenio_accounts/_macros.html" import render_field, form_errors %}
-
-{% block page_body %}
 <div class="ui container">
   <div class="ui centered grid">
     <div class="centered row">
@@ -18,59 +11,65 @@
     </div>
     <div class="sign-form">
       {%- block form_header %}
-      <img class="ui fluid image" src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_LOGIN_IMG)}}">
+      <img
+        class="ui fluid image"
+        src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_LOGIN_IMG)}}"
+      />
       {%- endblock form_header %}
 
       <!--Login with SSO-->
       {%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
       <div class="login-page-button">
-              <a href="{{ url_for('sso_saml.sso', idp='idp') }}" class="inverted tiny image label login-page-button-white">
+        <a
+          href="{{ url_for('sso_saml.sso', idp='idp') }}"
+          class="inverted tiny image label login-page-button-white"
+        >
           {% trans type='TUGRAZ' %} Login with {{ type }}{% endtrans %}
-                <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px">
+          <img
+            src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}"
+            height="20px"
+          />
         </a>
       </div>
-            <div class="ui inverted horizontal divider">
+      <div class="ui inverted horizontal divider">Or</div>
-              Or
-            </div>
       {%- endif %}
 
       <!--Login form-->
-      {%- block form_outer %}
+      {%- block form_outer %} {%- with form = login_user_form %}
-      {%- with form = login_user_form %}
+      <form
-      <form class="ui big form form-margin" action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
+        class="ui big form form-accounts"
-        <!--TODO: remove inline style-->
+        action="{{ url_for_security('login') }}"
-        {{ form.hidden_tag() }}
+        method="POST"
-        {{ form_errors(form) }}
+        name="login_user_form"
-        {{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
+      >
-        {{ render_field(form.password, icon="lock icon", errormsg=False) }}
+        {{ form.hidden_tag() }} {{ form_errors(form) }} {{
-        <div class="tu-button-style">
+        render_field(form.email, icon="user icon", autofocus=True,
-            <button type="submit" class="accounts-link">
+        errormsg=False) }} {{ render_field(form.password, icon="lock icon",
-              {{ _('Log In') }}
+        errormsg=False) }}
-            </button>
+        <div class="tu-button-style centered row">
+          <button type="submit" class="accounts-link">{{ _('Log In') }}</button>
         </div>
       </form>
-      {%- endwith %}
+      {%- endwith %} {%- endblock form_outer %} {%- block registerable %} {%- if
-      {%- endblock form_outer %}
+      security.registerable %}
-
-      {%- block registerable %}
-          {%- if security.registerable %}
       <div class="column login-page-button">
-            <a class="inverted tiny login-page-button-white" href="{{ url_for('security.register') }}">{{ _('Sign Up ') }}
+        <a
-              <i class="user plus icon"></i></a>
+          class="inverted tiny login-page-button-white"
+          href="{{ url_for('security.register') }}"
+          >{{ _('Sign Up ') }} <i class="user plus icon"></i
+        ></a>
       </div>
-          {%- endif %}
+      {%- endif %} {%- endblock registerable %} {%- block recoverable %} {%- if
-        {%- endblock registerable %}
+      security.recoverable %}
-      
-        {%- block recoverable %}
-        {%- if security.recoverable %}
       <div class="column login-page-button">
-        <a class="inverted tiny login-page-button-white" href="{{ url_for('security.forgot_password') }}">{{ _('Reset Password') }}
+        <a
-          <i class="unlock alternate icon"></i></a>
+          class="inverted tiny login-page-button-white"
+          href="{{ url_for('security.forgot_password') }}"
+          >{{ _('Reset Password') }} <i class="unlock alternate icon"></i
+        ></a>
       </div>
-      {%- endif %}
+      {%- endif %} {%- endblock recoverable %}
-      {%- endblock recoverable %}
     </div>
-    <div style="margin-bottom: 10px;"></div>
   </div>
 </div>
 {% endblock page_body %}

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/register_user.html

@@ -50,7 +50,7 @@
         {%- endblock form_outer %}
         {%- endblock form_header %}
         {%- with form = register_user_form %}
-        <form class="ui big form"action="{{ url_for_security('login') }}" method="POST" name="login_user_form" style="margin: 15%">
+        <form class="ui big form form-accounts" action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
           {{ form_errors(form) }}
           {{ form.hidden_tag() }}
           {%- block registration_form_fields scoped %}
@@ -60,14 +60,17 @@
               {{ render_field(form.password_confirm, icon="lock icon", errormsg=False) }}
             {%- endif %}
           {%- endblock registration_form_fields %}
+
           {%- if form.recaptcha %}
             <div class="grouped fields">{{ form.recaptcha() }}</div>
           {%- endif %}
           <div class="tu-button-style centered row">
-            <button type="submit" class="accounts-link">
+            <button type="submit" class="accounts-link ui fluid large signup submit"">
             {{ _('Sign Up') }}
             </button>
           </div>
+        </form>
+        {%- endwith %}
         {%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
           <div class="centered row login-page-button">
             <a class="login-page-button-white" href="{{ url_for('sso_saml.sso', idp='idp') }}">{{ _('Sign up with TUGRAZ ') }}
@@ -75,8 +78,6 @@
             </a>
           </div>
         {%- endif %}
-        </form>
-        {%- endwith %}
       </div>
     </div>