Skip to content
Snippets Groups Projects
Commit 6f9bbe20 authored by Olimpia Magliulo's avatar Olimpia Magliulo
Browse files

Add loginuserpass template 

Changes default css to adapt the login form.
Need fix: when the user can choose an organization, the layout breaks when opening the dropdown menu.
parent b11a0fab
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
modules/core/templates/loginuserpass.twig 0 → 100644
+ 126
− 0
View file @ 6f9bbe20
{% set pagetitle = 'Enter your username and password'|trans %}
{% if username|length > 0 %}
{% set autofocus = 'password' %}
{% else %}
{% set autofocus = 'username' %}
{% endif %}
{% extends "@core/base.twig" %}
{% block content %}
{% if errorcode %}
<div class="pure-g">
<div class="pure-u-1">
<div class="errorbox b-radius">
{% set errtitles = errorcodes['title'] %}
{% set errtitle = errtitles[errorcode] %}
<h3>{{ errtitle|trans(errorparams) }}</h3>
{% set errdescs = errorcodes['descr'] %}
{% set errdesc = errdescs[errorcode] %}
<p>{{ errdesc|trans(errorparams) }}</p>
</div>
</div>
</div>
{% endif %}
<h2>{{ 'Enter your username and password'|trans }}</h2>
<p class="logintext">{{ 'A service has requested you to authenticate yourself. Please enter your username and password in the form below.'|trans }}</p>
<div class="center inline">
<form class="pure-form pure-form-aligned center-form" action="?" method="post" name="f">
<div class="form-align">
<div class="hide-for-small-only v-center-right">
<img class="pure-img" src="/{{ baseurlpath }}resources/icons/experience/gtk-dialog-authentication.48x48.png"
alt=""/>
</div>
<div class="pure-control-group">
<label for="username">{{ 'Username'|trans }}</label>
<input id="username" {{ forceUsername ? 'disabled="disabled"' }} type="text" name="username"
{% spaceless %}{% if not forceUsername %}
tabindex="1" value="{{ username }}">
{% if rememberUsernameEnabled and not forceUsername %}
<span class="pure-form-message-inline">
<input id="remember_username" type="checkbox" tabindex="4"
{{ rememberUsernameChecked ? 'checked="checked"' }} name="remember_username" value="Yes"/>
<small>{{ 'Remember my username'|trans }}</small>
</span>
{% endif %}
{% if rememberUsernameEnabled and not forceUsername %}{#for mobile#}{% endif %}
{% endif %}
{% endspaceless %}
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" tabindex="2" name="password" />
{% if rememberMeEnabled %}
<span class="pure-form-message-inline">
<input id="remember_me" type="checkbox" tabindex="5"
{{ ememberMeChecked ? 'checked="checked"' }} name="remember_me" value="Yes"/>
<small>{{ 'Remember me'|trans }}</small>
</span>
{% endif %}
</div>
{% if organizations is defined %}
<div class="pure-control-group">
<label for="organization">{{ 'Organization'|trans }}</label>
<select name="organization" class="pure-select pure-input-1-2 pure-input-sm-1-1 selectize" id="orgnz"tabindex="3">
{{ selectedOrg ?: null }}
{% for id, orgDesc in organizations %}
{% if id == selectedOrg %}
{% set selected = 'selected="selected"' %}
{% else %}
{% set selected = '' %}
{% endif %}
{% if orgDesc %}
<option value="{{ id }}" {{ selected }}>{{ orgDesc|trans }}</option>
{% endif %}
{% endfor %}
</select>
</div> <!--pure-control-group-->
{% endif %}
</div> <!-- form-align-->
<div class="inline">
<button class="pure-button pure-button-primary pure-input-1-2 pure-input-sm-1-1 right" type ="submit" onclick="this.value='{{ 'Processing...'|trans }}'; this.disabled=true;" tabindex="6">
{{ 'Login'|trans }}
</button>
</div>
{% for name, value in stateparams %}
<input type="hidden" name="{{ name }}" value="{{ value }}" />
{% endfor %}
</form>
</div>
{% if not links %}
<ul>
{% for link in links %}
<li><a href="{{ link.href }}">{{ link['text']|trans }}</a></li>
{% endfor %}
</ul>
{% endif %}
<div class="inline">
<h3>{{ 'Help! I don\'t remember my password.'|trans }}</h3>
<p>{{ 'Without your username and password you cannot authenticate yourself for access to the service. There may be someone that can help you. Consult the help desk at your organization!'|trans }}</p>
</div>
{% endblock %}
www/assets/css/src/default.css
+ 42
− 23
View file @ 6f9bbe20
......@@ -84,16 +84,29 @@ FORMS
top: 50%;
transform: translate(0, -50%);
}
.inline{
margin-top: 2em;
}
.selectize-input{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.selectize-input:after{
transform: translate(8px, 0);
}
.pure-select{
position: inherit;
float: right;
}
div .item{
float: left;
}
.selectize-dropdown .single .selectize{
z-index: 5;
}
/* ***********************************************************
TABLES
************************************************************ */
.fa {
font-family: FontAwesome !important;
......@@ -106,13 +119,35 @@ TABLES
MEDIA QUERIES
************************************************************ */
@media screen and (max-width:480px) {
body {
font-size: 0.875em;
}
}
@media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
display: none !important; }
.language-menu {
min-width: 145px;}
.selectize-input{
padding-right: 0.1rem;
}
.pure-form label {
display: none !important;
}
.pure-form .pure-input-sm-1-1{
width: 100%;
}
}
@media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
display: none !important;
}
.input-sm-placeholder {
display: inline-block;
}
}
@media screen and (min-width: 40em) {
.hide-for-medium {
......@@ -122,24 +157,8 @@ MEDIA QUERIES
.show-for-medium {
display: none !important; } }
/*.fa @font-face{*/
/*font-family:'FontAwesome';*/
/*src:url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');*/
/*src:url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')*/
/*format('embedded-opentype'),*/
/*url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0')*/
/*format('woff2'),*/
/*url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') f*/
/*ormat('woff'),*/
/*url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0')*/
/*format('truetype'),*/
/*url('../../../../node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')*/
/*format('svg');*/
/*font-weight:normal;*/
/*font-style:normal*/
/*}*/
/*@media screen and (min-width: 40em) { !*640*!*/
/*@media screen and (min-width: 40em) { !*640*! w/ font-size:16pt*/
/*}*/
/*@media screen and (min-width: 64em) { !*1024px*!*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment