Accounts (WIP)

# Login template
* added the SSO login for TUGRAZ.
* corresponding styles to login.less.
* added a couple of semantic UI classes in order to adjust the form to the center.
* buttons/hyperlink using the standard tugraz theme with hover background color black.

# signup template
* added the SSO signup for TUGRAZ.
* added two columns, left some texts and right the signup form using semantic-UI classes.
*buttons/hyperlink using the standard tugraz theme with hover background color black.

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

@@ -1,3 +1,31 @@
 .ui.inverted.header{
     color:#000;
-}
+}
+
+.login-page-button {
+    margin: 5%;
+    text-align: center !important;
+    & a {
+      padding: 5px;
+      cursor: pointer;
+    }
+    & a:hover {
+      background-color: #000;
+      color: #fff !important;
+      text-decoration: none;
+    }
+  }
+
+.text-color{
+    color: #000;
+}
+
+@media (max-width: 767px) {
+  #switch_left {
+    order: 2;
+  }
+  #switch_right {
+    order: 1;
+  }
+}
+

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/login_user.html

@@ -1,6 +1,7 @@
 {#
   Copyright (C) 2020 TUGRAZ
-  Copyright (C) 2020 mojib wali.
+  Copyright (C) 2020 mojib wali
+  Copyright (C) 2020 Nikita Lvov
 
   invenio-theme-tugraz is free software; you can redistribute it and/or
   modify it under the terms of the MIT License; see LICENSE file for more
@@ -14,57 +15,61 @@
 {% block page_body %}
 <div class="spacer-long"></div>
 <div class="ui container">
+  <div class="ui centered grid">
+
+    <div class="ui padded segments big form">
+      <div class="ui login segment padded">
+        <div class="divider hidden"></div>
+        {%- block form_header %}
+        <h3 class="ui login header">{{ _('Log in to Repository') }}</h3>
+        {%- 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">
+            {% trans type='TUGRAZ' %} Login with {{ type }}{% endtrans %}
+            <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
+          </a>
+        </div>
+        <div class="ui inverted horizontal divider"><span class="text-color">Or</span></div>
+        {%- endif %}
+
+        {%- block form_outer %}
+        {%- with form = login_user_form %}
+        <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form" class="ui big form">
+          {{ form.hidden_tag() }}
+          {{ form_errors(form) }}
+          {{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
+          {{ render_field(form.password, icon="lock icon", errormsg=False) }}
+          <button type="submit" class="ui fluid large submit button">
+            <i class="ui sign-in icon"></i>{{ _('Log In') }}
+          </button>
+        </form>
+        {%- endwith %}
+        {%- endblock form_outer %}
+        <div class="divider hidden"></div>
 
-  <div class="ui padded segments big form tug-bagrounds">
-    <div class="ui login segment padded">
-      <div class="divider hidden"></div>
-      {%- block form_header %}
-      <h3 class="ui login header">{{ _('Log in to account') }}</h3>
-      {%- 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">
-          {% trans type='TUGRAZ' %} Login with {{ type }}{% endtrans %}
-          <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
-        </a>
       </div>
-      <div class="ui inverted horizontal divider">Or</div>
+
+      {%- block registerable %}
+      {%- if security.registerable %}
+      <div class="ui primary segment padded text-muted">
+        {% trans sitename=config.ACCOUNTS_SITENAME %}New to {{ sitename }}?{% endtrans %}
+        <a href="{{ url_for_security('register', next=request.args.get('next')) }}">{{ _('Sign Up') }}</a>
+      </div>
       {%- endif %}
+      {%- endblock registerable %}
 
-      {%- block form_outer %}
+      {%- block recoverable %}
-      {%- with form = login_user_form %}
+      {%- if security.recoverable %}
-      <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form" class="ui big form">
+      <div class="ui basic segment padded">
-        {{ form.hidden_tag() }}
+        <a class="ui inverted header tiny"
-        {{ form_errors(form) }}
+          href="{{ url_for_security('forgot_password') }}">{{ _('Forgot password?') }}</a>
-        {{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
+      </div>
-        {{ render_field(form.password, icon="lock icon", errormsg=False) }}
+      {%- endif %}
-        <button type="submit" class="ui fluid large submit primary button">
+      {%- endblock recoverable %}
-          <i class="ui sign-in icon"></i>{{ _('Log In') }}
-        </button>
-      </form>
-      {%- endwith %}
-      {%- endblock form_outer %}
-      <div class="divider hidden"></div>
-
     </div>
-
-    {%- block registerable %}
-    {%- if security.registerable %}
-    <div class="ui primary segment padded text-muted">
-      {% trans sitename=config.ACCOUNTS_SITENAME %}New to {{ sitename }}?{% endtrans %}
-      <a href="{{ url_for_security('register', next=request.args.get('next')) }}">{{ _('Sign Up') }}</a>
-    </div>
-    {%- endif %}
-    {%- endblock registerable %}
   </div>
-
-  {%- block recoverable %}
-  {%- if security.recoverable %}
-  <div class="ui basic segment padded">
-    <a class="ui inverted header tiny" href="{{ url_for_security('forgot_password') }}">{{ _('Forgot password?') }}</a>
-  </div>
-  {%- endif %}
-  {%- endblock recoverable %}
 </div>
 {% endblock page_body %}

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/register_user.html

@@ -1,6 +1,7 @@
 {#
   Copyright (C) 2020 TUGRAZ
-  Copyright (C) 2020 mojib wali.
+  Copyright (C) 2020 mojib wali
+  Copyright (C) 2020 Nikita Lvov
 
   invenio-theme-tugraz is free software; you can redistribute it and/or
   modify it under the terms of the MIT License; see LICENSE file for more
@@ -13,47 +14,80 @@
 
 {% block page_body %}
 <div class="spacer-long"></div>
+
 <div class="ui container">
-  <div class="ui padded segments big form">
-    <div class="ui segment padded relaxed">
-      <div class="divider hidden"></div>
 
-      {%- block form_header %}
+  <div class="ui two column stackable centered grid switch-grid">
-        <h3 class="ui login header">
+    <div class="centered row">
-          {% trans sitename=config.ACCOUNTS_SITENAME %}Sign up for an {{ sitename }} account!{% endtrans %}
+      <h1 class="ui header">{{ _('Create an Account') }}</h1>
-        </h3>
+    </div>
-      {%- endblock form_header %}
 
-      {%- with form = register_user_form %}
+    <div class="column" id="switch_left">
-        <form action="{{ url_for_security('register') }}" method="POST"
+      <div class="ui basic segment">
-              name="register_user_form">
+        <h4 class="ui header">{{ _('Citeable. Discoverable.') }}</h4>
+        <p class="bodytext">
+          {{ _('Uploads get a Digital Object Identifier (DOI) to make them easily and uniquely citeable.')}}</h5>
+        <h4 class="ui header">{{ _('Communities.') }}</h4>
+        <p class="bodytext">
+          {{ _('Accept or reject uploads to your own community (e.g workshops, EU projects, institutions or entire disciplines).') }}
+          </h5>
+        <h4 class="ui header">{{ _('Trusted Research Data Management') }}</h4>
+        <p class="bodytext">
+          {{ _('Built on top of TU Graz expertise in managing of the research data from the Graz University of Technology.') }}
+          </h5>
+        
+
+      </div>
+    </div>
+
+    <div class="column" id="switch_right">
+     
+
+        <!--Sigup 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">
+            <span style="font-size: 18px;">{{ _('Sign up with TUGRAZ ') }}</span>
+            <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
+          </a>
+        </div>
+        <div class="ui inverted horizontal divider"><span class="text-color">Or</span></div>
+        {%- endif %}
+
+        {%- block form_header %}
+        <!-- can add a header img-->
+        {%- block form_outer %}
+        {%- endblock form_outer %}
+        {%- endblock form_header %}
+        {%- with form = register_user_form %}
+        <form class="ui big form" action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
           {{ form_errors(form) }}
           {{ form.hidden_tag() }}
           {%- block registration_form_fields scoped %}
-            {{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
+          {{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
-            {{ render_field(form.password, icon="lock icon", errormsg=False) }}
+          {{ render_field(form.password, icon="lock icon", errormsg=False) }}
-            {%- if form.password_confirm %}
+          {%- if form.password_confirm %}
-              {{ render_field(form.password_confirm, icon="lock icon", errormsg=False) }}
+          {{ render_field(form.password_confirm, icon="lock icon", errormsg=False) }}
-            {%- endif %}
+          {%- endif %}
           {%- endblock registration_form_fields %}
 
           {%- if form.recaptcha %}
-            <div class="grouped fields">{{ form.recaptcha() }}</div>
+          <div class="grouped fields">{{ form.recaptcha() }}</div>
           {%- endif %}
 
-          <button type="submit" class="ui fluid large signup submit button">
+          <div class="centered row">
-            <i class="ui edit outline icon"></i>{{ _('Sign Up') }}
+            <button type="submit" class="ui fluid large submit button">
-          </button>
+              <i class="ui edit outline icon"></i>{{ _('Sign Up') }}
+            </button>
+          </div>
         </form>
-      {%- endwith %}
+        {%- endwith %}
-      <div class="divider hidden"></div>
+   
+      <div class="ui divider"></div>
     </div>
 
-    <div class="ui primary segment padded text-muted">
-      {{ _('Already have an account?') }}
-      <a href="{{ url_for_security('login', next=request.args.get('next')) }}">{{ _('Log In') }}</a>
-    </div>
   </div>
 </div>
 
+
 {% endblock page_body %}