diff --git a/modules/core/templates/loginuserpass.twig b/modules/core/templates/loginuserpass.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a3914843c0be3a8d9b2d5e488ced15ff9ea6240b
--- /dev/null
+++ b/modules/core/templates/loginuserpass.twig
@@ -0,0 +1,126 @@
+{% 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 %}
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 88f8ae5e4ff04f84dea9d7f8fc5186024e65ca8b..fbf6aa2f3b45e989c3a3170bac2e4bcb03664053 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -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*!*/