First draft login/signup templates.

* Sign up and sign in templates.

* Update invenio_theme_tugraz/config.py

* Created a base template for accounts ```accounts_base.html```
This commit is contained in:
Nikita Lvov
2020-08-19 11:56:16 +02:00
committed by GitHub
parent 7dbfaa178d
commit 0239d1d8e7
7 changed files with 360 additions and 87 deletions

View File

@@ -0,0 +1,156 @@
/*
* Copyright (C) 2020 TUGRAZ.
* 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 details.
*/
.cover-page {
//text-align: center;
background-color: #ffffff;
}
#login-tug-logo {
& g {
fill: #e4154b;
}
}
#login-tug-logo:hover {
& g {
fill: #231f20;
}
}
.accounts-link {
margin: 5%;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
}
.accounts-link :hover {
font-size: smaller !important;
color: white;
background-color: #000000 !important;
}
.tu-button-style button {
cursor: pointer;
border: 1px solid #fff;
background-color: transparent;
height: 29px;
color: #fff;
font-family: "Source Sans Pro";
font-weight: 300;
font-size: 16px;
}
.tu-button-style button:hover {
cursor: pointer;
color: white;
background-color: #000000 !important;
}
.field {
text-align: left !important;
& i {
color: #fff !important;
}
& label {
display: flex !important;
font-weight: 300 !important;
color: white !important;
}
& input {
border: 0px none !important;
padding: 0px !important;
border-bottom: 1px solid white !important;
background-color: transparent !important;
color: white !important;
border-radius: 0 !important;
width: 100% !important;
}
& input::placeholder {
opacity: 1 !important;
color: silver !important;
}
& th {
display: block;
}
& td {
display: inline-block;
}
}
.field > input::selection {
background: #50a2ce;
}
.accounts-header {
font-weight: 300 !important;
}
/***
login and sign-up pages form background color
*/
.sign-form {
background-color: #245b78 !important;
padding: 0 !important;
height: 100%;
}
.tug-button-login {
display: flex;
align-items: center;
fill: #e4154b;
}
.tug-button-login :hover {
fill: #000000;
}
.login-page-button {
margin: 5%;
text-align: center !important;
& a {
padding: 5px;
text-decoration: underline !important;
cursor: pointer;
}
& a:hover {
background-color: #000;
color: #fff !important;
text-decoration: none;
}
}
.login-page-button-white {
color: #fff !important;
font-family: "Source Sans Pro";
font-size: initial;
}
.login-page-button-black {
color: #000 !important;
font-family: "Source Sans Pro";
font-size: initial;
}
.form-margin {
margin: 15%;
}
/***
allowing to switch columns on the sign-up page on the small screen
*/
.switch-grid {
display: flex;
}
@media (max-width: 767px) {
#switch_left {
order: 2;
}
#switch_right {
order: 1;
}
}

View File

@@ -12,6 +12,7 @@
@import "overrides";
@import "frontpage";
@import "macros";
@import "accounts";
@import (css)
url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");

View File

@@ -19,6 +19,9 @@ INVENIO_THEME_TUGRAZ_BASE_TEMPLATE = 'invenio_theme_tugraz/base.html'
INVENIO_THEME_TUGRAZ_ICON = 'images/icon_use.png'
"""icon used in login page"""
INVENIO_THEME_TUGRAZ_LOGIN_IMG = 'images/login_logo.png'
"""TU Logo for forms"""
# Invenio-theme
# ============
# See https://invenio-theme.readthedocs.io/en/latest/configuration.html
@@ -52,6 +55,10 @@ THEME_SITENAME = _('Repository')
# Invenio-accounts
# ============
# See https://invenio-accounts.readthedocs.io/en/latest/configuration.html
COVER_TEMPLATE = 'invenio_theme_tugraz/accounts/accounts_base.html'
"""Cover page template for login and sign up pages."""
SECURITY_LOGIN_USER_TEMPLATE = 'invenio_theme_tugraz/accounts/login.html'
"""Login template"""

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@@ -0,0 +1,76 @@
{#
Copyright (C) 2020 TUGRAZ
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
details.
#}
{{ webpack['invenio-theme-tugraz-theme.css'] }}
{% extends config.THEME_BASE_TEMPLATE %}
{%- block body %}
<div class="ui container">
{%- block flashmessages %}
{%- from "invenio_theme/macros/messages.html" import flashed_messages with context -%}
{{ flashed_messages() }}
{%- endblock flashmessages %}
<div class="centered row">
{% block page_header %}
<div class="ui basic very padded segment">
<!---TUG svg logo-->
{%- block brand %}
{%- if config.THEME_LOGO %}
<a href="/">
<!--TODO: route to frontpage-->
<svg id="login-tug-logo" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="100" width="200" version="1.1"
xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 141.10001 51.862499">
<g transform="matrix(1.25 0 0 -1.25 0 51.862)">
<g transform="scale(.1)">
<path d="m0 103.73h207.45v207.46l-207.45 0.01v-207.47z"></path>
<path d="m228.19 103.73h207.46v207.46h-207.46v-207.46z"></path>
<path d="m456.41 103.73h207.44v207.46h-207.44v-207.46z"></path>
<path d="m103.72 0h207.47v207.46h-207.47v-207.46z"></path>
<path d="m352.68 207.46h207.44v207.46h-207.44v-207.46z"></path>
<path style="fill:#231f20"
d="m751.04 277.91h-66.426v33.195h171.19v-33.195h-66.407v-173.73h-38.359v173.73"></path>
<path style="fill:#231f20"
d="m1048.3 180.22c0-12.461-2.25-23.711-6.72-33.75-4.5-10.039-10.61-18.555-18.36-25.567-7.76-7.031-16.9-12.421-27.503-16.21-10.605-3.809-22.109-5.7036-34.551-5.7036-12.422 0-23.945 1.8946-34.551 5.7036-10.605 3.789-19.824 9.179-27.656 16.21-7.851 7.012-13.984 15.528-18.34 25.567-4.394 10.039-6.582 21.289-6.582 33.75v130.89h38.379v-129.59c0-5.039 0.801-10.351 2.442-15.898 1.64-5.547 4.336-10.664 8.125-15.332s8.789-8.516 15.039-11.523c6.211-3.008 13.926-4.512 23.144-4.512 9.199 0 16.914 1.504 23.145 4.512 6.23 3.007 11.25 6.855 15.039 11.523 3.77 4.668 6.48 9.785 8.12 15.332 1.63 5.547 2.45 10.859 2.45 15.898v129.59h38.38v-130.89">
</path>
<path style="fill:#231f20"
d="m832.56 75.664c-7.597 3.2812-17.46 4.8632-25.332 4.8632-22.929 0-35.605-14.434-35.605-33.184 0-18.613 12.383-32.637 33.34-32.637 5.351 0 9.59 0.5274 12.969 1.3086v23.867h-20.84v14.414h39.687v-49.297c-10.41-2.6172-21.25-4.707-31.816-4.707-31.797 0-53.906 14.805-53.906 45.742 0 31.348 20.566 48.906 53.906 48.906 11.406 0 20.41-1.4453 28.867-3.8086l-1.27-15.469">
</path>
<path style="fill:#231f20"
d="m856.2 69.375h16.758v-15.332h0.293c0.84 6.289 8.574 16.914 19.824 16.914 1.836 0 3.828 0 5.782-0.5273v-17.715c-1.68 0.918-5.059 1.4454-8.457 1.4454-15.333 0-15.333-17.832-15.333-27.52v-24.785h-18.867v67.52">
</path>
<path style="fill:#231f20"
d="m913.75 65.84c7.324 3.1446 17.187 5.1172 25.215 5.1172 22.09 0 31.23-8.5351 31.23-28.457v-8.6523c0-6.8165 0.156-11.934 0.293-16.914 0.137-5.1172 0.41-9.8242 0.84-15.078h-16.602c-0.703 3.5352-0.703 8.0078-0.839 10.098h-0.293c-4.36-7.4618-13.81-11.661-22.38-11.661-12.793 0-25.332 7.207-25.332 20.059 0 10.078 5.195 15.976 12.383 19.258 7.187 3.2812 16.464 3.9453 24.355 3.9453h10.41c0 10.879-5.195 14.551-16.328 14.551-8.008 0-16.035-2.8907-22.363-7.3438l-0.586 15.078zm22.11-52.715c5.782 0 10.274 2.3633 13.223 6.0352 3.105 3.8086 3.945 8.6523 3.945 13.906h-8.164c-8.437 0-20.957-1.3086-20.957-11.68 0-5.7617 5.195-8.2617 11.953-8.2617">
</path>
<path style="fill:#231f20"
d="m985.69 69.375h57.422v-14.414l-36.04-39.473h37.31v-13.633h-60.235v14.297l36.715 39.59h-35.172v13.633">
</path>
<path d="m1059.6 0h69.102v69.121h-69.102v-69.121z"></path>
</g>
</g>
</svg>
</a>
{%- elif config.THEME_SITENAME %}
<a href="/" class="text-center">
{{ _(config.THEME_SITENAME) }}
</a>
{% endif %}
{%- endblock brand %}
</div>
{% endblock page_header %}
</div>
{%- block page_body %}
{%- endblock page_body %}
{% block page_footer %}
{% endblock page_footer %}
</div>
{%- endblock body %}

View File

@@ -1,74 +1,76 @@
{#
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
details.
#}
{%- extends "invenio_theme/page_cover.html" %}
{%- extends config.COVER_TEMPLATE %}
{% from "invenio_accounts/_macros.html" import render_field, form_errors %}
{% block page_body %}
<div class="ui padded segments big form">
<div class="ui segment padded">
<div class="divider hidden"></div>
<div class="ui container">
<div class="ui centered grid">
<div class="centered row">
<h1 class="ui header accounts-header">{{ _('Log In') }}</h1>
</div>
<div class="sign-form">
{%- block form_header %}
<h3 class="ui header">{{ _('Log in to account') }}</h3>
<img class="ui fluid image" src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_LOGIN_IMG)}}">
{%- endblock form_header %}
{%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
<a href="{{ url_for('sso_saml.sso', idp='idp') }}">
<div class="ui fluid animated fade large button basic" tabindex="0">
<div class="visible content">
{% trans type='TUG' %} Log in with {{ type }}{% endtrans %}
<!--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>
{%- endif %}
<!--Login form-->
{%- block form_outer %}
{%- with form = login_user_form %}
<form class="ui big form form-margin" action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
<!--TODO: remove inline style-->
{{ 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) }}
<div class="tu-button-style">
<button type="submit" class="accounts-link">
{{ _('Log In') }}
</button>
</div>
<div class="hidden content">
<img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px">
</div>
</div>
</a>
</form>
{%- endwith %}
{%- endblock form_outer %}
{%- 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 ') }}
<i class="user plus icon"></i></a>
</div>
{%- endif %}
{%- endblock registerable %}
<div class="ui horizontal divider">
Or
{%- 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') }}
<i class="unlock alternate icon"></i></a>
</div>
{%- endif %}
{%- block form_outer %}
{%- with form = login_user_form %}
<form action="{{ url_for_security('login') }}" method="POST"
name="login_user_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 primary button">
<i class="ui sign-in icon"></i>{{ _('Log In') }}
</button>
</form>
{%- endwith %}
{%- endblock form_outer %}
<div class="divider hidden"></div>
{%- endblock recoverable %}
</div>
{%- block registerable %}
{%- if security.registerable %}
<div class="ui primary segment padded">
{% trans sitename=config.ACCOUNTS_SITENAME %}New to {{ sitename }}?{% endtrans %}
<a href="{{ url_for('security.register') }}">{{ _('Sign Up') }}</a>
</div>
{%- endif %}
{%- endblock registerable %}
<div style="margin-bottom: 10px;"></div>
</div>
{%- block recoverable %}
{%- if security.recoverable %}
<a class="ui inverted header tiny"
href="{{ url_for('security.forgot_password') }}">{{ _('Forgot password?') }}</a>
{%- endif %}
{%- endblock recoverable %}
{% endblock page_body %}
</div>
{% endblock page_body %}

View File

@@ -1,55 +1,86 @@
{# -*- coding: utf-8 -*-
This file is part of Invenio.
Copyright (C) 2015-2020 CERN.
Copyright (C) 2020 TUGRAZ
Copyright (C) 2020 mojib wali
Copyright (C) 2020 Nikita Lvov
Invenio is free software; you can redistribute it and/or modify it
under the terms of the MIT License; see LICENSE file for more details.
#}
{%- extends config.ACCOUNTS_COVER_TEMPLATE %}
{%- extends config.COVER_TEMPLATE %}
{% from "invenio_accounts/_macros.html" import render_field, form_errors %}
{% block page_body %}
<div class="ui container">
<div class="ui two column stackable centered grid switch-grid">
<div class="centered row">
<h1 class="ui header accounts-header">{{ _('Create an Account') }}</h1>
</div>
<div class="column" id="switch_left">
<div class="ui basic segment">
<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 class="ui divider"></div>
<div class="centered row">
<h4 class="ui header">{{ _('Already have an account?') }}</h4>
</div>
<div class="centered row login-page-button">
<a class="login-page-button-black" href="{{url_for_security('login', next=request.path)}}">{{ _('Login using your credentials') }}</a>
</div>
{%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
<div class="centered row login-page-button">
<a class="login-page-button-black" href="{{ url_for('sso_saml.sso', idp='idp') }}">{{ _('Login with TUGRAZ ') }}
<img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px">
</a>
</div>
{%- endif %}
</div>
</div>
<div class="ui padded segments big form">
<div class="ui segment padded relaxed">
<div class="divider hidden"></div>
{%- block form_header %}
<h3 class="ui header">
{% trans sitename=config.ACCOUNTS_SITENAME %}Sign up for an {{ sitename }} account!{% endtrans %}
</h3>
{%- endblock form_header %}
{%- with form = register_user_form %}
<form action="{{ url_for_security('register') }}" method="POST"
name="register_user_form">
<div class="column" id="switch_right">
<div class="sign-form">
{%- block form_header %}
<img class="ui fluid image" src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_LOGIN_IMG)}}">
{%- block form_outer %}
{%- 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_errors(form) }}
{{ form.hidden_tag() }}
{%- block registration_form_fields scoped %}
{{ render_field(form.email, icon="user icon", autofocus=True, errormsg=False) }}
{{ render_field(form.password, icon="lock icon", errormsg=False) }}
{%- if form.password_confirm %}
{{ render_field(form.password_confirm, icon="lock icon", errormsg=False) }}
{%- endif %}
{{ render_field(form.email, icon="envelope icon", autofocus=True, errormsg=False) }}
{{ render_field(form.password, icon="lock icon", errormsg=False) }}
{%- if form.password_confirm %}
{{ 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 %}
<button type="submit" class="ui fluid large signup submit button">
<i class="ui edit outline icon"></i>{{ _('Sign Up') }}
</button>
<div class="tu-button-style centered row">
<button type="submit" class="accounts-link">
{{ _('Sign Up') }}
</button>
</div>
{%- 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 ') }}
<img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px">
</a>
</div>
{%- endif %}
</form>
{%- endwith %}
<div class="divider hidden"></div>
{%- endwith %}
</div>
</div>
<div class="ui secondary segment padded">
{{ _('Already have an account?') }}
<a href="{{ url_for_security('login') }}">{{ _('Log In') }}</a>
</div>
</div>
</div>
{% endblock page_body %}