Merge pull request #4890 from astifter/reorganize_login

Reorganize Login to Fix #4878
This commit is contained in:
rabuzarus 2018-04-27 19:56:25 +02:00 committed by GitHub
commit a19784d209
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 193 additions and 41 deletions

View file

@ -1,6 +1,8 @@
<div class="field checkbox" id="div_id_{{$field.0}}">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<label id="id_{{$field.0}}_label" for="id_{{$field.0}}">{{$field.1}}</label>
<input type="hidden" name="{{$field.0}}" value="0">
<input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" aria-describedby="{{$field.0}}_tip" value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.4}}{{$field.4}}{{/if}}>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -13,6 +13,8 @@
{{foreach $field.4 as $opt=>$val}}<option value="{{$val|escape:'html'}}">{{$val}}</option>{{/foreach}}
</select>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -3,5 +3,7 @@
<div class='field custom'>
<label for='{{$field.0}}'>{{$field.1}}</label>
{{$field.2}}
<span class='field_help'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -2,5 +2,7 @@
<div class='field input' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input{{if $field.6 eq 'email'}} type='email'{{elseif $field.6 eq 'url'}} type='url'{{else}} type="text"{{/if}} name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5}}{{/if}} aria-describedby='{{$field.0}}_tip'>
{{if $field.3}}
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{/if}}
</div>

View file

@ -3,5 +3,7 @@
<div class='field checkbox'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3|escape:'html'}}" {{if $field.2}}checked="true"{{/if}} aria-describedby='{{$field.0}}_tip'>
{{if $field.4}}
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.4}}</span>
{{/if}}
</div>

View file

@ -2,5 +2,7 @@
<div class='field input openid' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2|escape:'html'}}" aria-describedby='{{$field.0}}_tip'>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -2,5 +2,7 @@
<div class='field password' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq 'autofocus'}} autofocus{{/if}} aria-describedby='{{$field.0}}_tip'>
{{if $field.3}}
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{/if}}
</div>

View file

@ -1,5 +1,7 @@
<div class='field radio'>
<label for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label>
<input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2|escape:'html'}}" {{if $field.4}}checked{{/if}} aria-describedby={{$field.0}}_{{$field.2}}_tip'>
{{if $field.3}}
<span class='field_help' role='tooltip' id='{{$field.0}}_{{$field.2}}_tip'>{{$field.3}}</span>
{{/if}}
</div>

View file

@ -3,5 +3,7 @@
<div class='field richtext'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea name='{{$field.0}}' id='id_{{$field.0}}' class="fieldRichtext" aria-describedby='{{$field.0}}_tip'>{{$field.2}}</textarea>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -5,5 +5,7 @@
<select name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -5,5 +5,7 @@
<select name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>
{{$field.4}}
</select>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -3,5 +3,7 @@
<div class='field textarea'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>{{$field.2}}</textarea>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -5,6 +5,8 @@
<select name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5}}onchange="previewTheme(this);"{{/if}} aria-describedby='{{$field.0}}_tip'>
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
{{if $field.5}}<div id="theme-preview"></div>{{/if}}
</div>

View file

@ -10,5 +10,7 @@
{{if $field.4}}{{$field.4.1}}{{else}}ON{{/if}}
</a>
</div>
<span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -4,11 +4,14 @@
<div id="login-group" role="group" aria-labelledby="login-head">
<input type="hidden" name="auth-params" value="login" />
<div id="login-head" class="sr-only">{{$login}}</div>
<h3 id="login-head" class="sr-only">{{$login}}</h3>
<div id="login_standard">
{{include file="field_input.tpl" field=$lname}}
{{include file="field_password.tpl" field=$lpassword}}
<div id="login-lost-password-link">
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" >{{$lostlink}}</a>
</div>
</div>
{{if $openid}}
@ -17,17 +20,12 @@
</div>
{{/if}}
{{include file="field_checkbox.tpl" field=$lremember}}
<div id="login-extra-links">
{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" >{{$lostlink}}</a>
</div>
<div id="login-submit-wrapper" >
<input type="submit" name="submit" id="login-submit-button" value="{{$login|escape:'html'}}" />
</div>
{{include file="field_checkbox.tpl" field=$lremember}}
{{foreach $hiddens as $k=>$v}}
<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />
{{/foreach}}
@ -35,5 +33,11 @@
</div>
</form>
{{if $register}}
<div id="login-extra-links">
<h3 id="login-head" class="sr-only">{{$register.title|escape:'html'}}</h3>
<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>
</div>
{{/if}}
<script type="text/javascript"> $(document).ready(function() { $("#id_{{$lname.0}}").focus();} );</script>

View file

@ -3137,12 +3137,30 @@ section .profile-match-wrapper {
* Login page
*/
#login-submit-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
float: right;
}
#lost-password-link { flex-grow: 2; }
#login-lost-password-link {
margin-bottom: 10px;
float: right;
}
#div_id_remember {
float: left;
}
#id_password_wrapper {
margin-bottom: unset;
}
#login_openid {
clear: both;
}
#register-link {
color: white;
background: #8ad0a1;
width: 100%;
}
#login-end {
clear: both;
}
.mod-home.is-not-singleuser,
.mod-login {
@ -3167,12 +3185,16 @@ section .profile-match-wrapper {
margin-top: 2.5%;
}
.mod-home.is-not-singleuser .login-form > #login-extra-links {
margin-top: 4em;
margin-bottom: 1em;
}
.mod-home.is-not-singleuser .login-form > #login-form label,
.mod-login #content #login-form label {
color: #eee;
}
.mod-home.is-not-singleuser .login-panel-content,
.mod-login .login-panel-content {
background-color: rgba(255,255,255,.85);
@ -3186,12 +3208,17 @@ section .profile-match-wrapper {
}
.mod-home.is-not-singleuser .login-form > #login-form,
.mod-home.is-not-singleuser .login-form > #login-extra-links,
.mod-login #content #login-form {
background-color: #fff;
padding: 1em;
position: relative;
margin-top: 4em;
}
.mod-home.is-not-singleuser .login-form > #login-extra-links {
margin-top: unset;
background-color: white;
}
.mod-home.is-not-singleuser .login-form > #login-form label,
.mod-login #content #login-form label {

View file

@ -4,6 +4,8 @@
<input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="1" {{if $field.2}}checked="checked"{{/if}} aria-checked="{{if $field.2}}true{{else}}false{{/if}}" aria-describedby="{{$field.0}}_tip" {{if $field.4}}{{$field.4}}{{/if}}>
<label for="id_{{$field.0}}">
{{$field.1}}
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</label>
</div>

View file

@ -6,6 +6,8 @@
{{if $field.4}}<span class="required">{{$field.4}}</span>{{/if}}
<span class="input-group-addon"><i></i></span>
</div>
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div id="end_{{$field.0}}" class="field_end"></div>
</div>

View file

@ -2,5 +2,7 @@
<div class="form-group field custom">
<label for="{{$field.0}}">{{$field.1}}</label>
{{$field.2}}
<span class="help-block" id="{{$field.0}}_tip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -6,6 +6,8 @@
{{if $field.4}}<span class="required">{{$field.4}}</span>{{/if}}
<span class="input-group-addon image-select"><i class="fa fa-picture-o"></i></span>
</div>
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div id="end_{{$field.0}}" class="field_end"></div>
</div>

View file

@ -2,6 +2,8 @@
<div id="id_{{$field.0}}_wrapper" class="form-group field input">
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}"{{if $field.6 eq "email"}} type="email"{{elseif $field.6 eq "url"}} type="url"{{else}} type="text"{{/if}} value="{{$field.2|escape:'html'}}"{{if $field.4 eq "required"}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5}}{{/if}} aria-describedby="{{$field.0}}_tip">
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div class="clear"></div>
</div>

View file

@ -2,6 +2,8 @@
<div class="form-group field checkbox">
<input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.3|escape:'html'}}" {{if $field.2}}checked="checked"{{/if}} aria-checked="{{if $field.2}}true{{else}}false{{/if}}" aria-describedby="{{$field.0}}_tip">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<span class="help-block" role="tooltip" id="{{$field.0}}_tip">{{$field.4}}</span>
{{if $field.4}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.4}}</span>
{{/if}}
</div>
<div class="clear"></div>

View file

@ -2,6 +2,8 @@
<div id="id_{{$field.0}}_wrapper" class="form-group field input openid">
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}</label>
<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2|escape:'html'}}" aria-describedby="{{$field.0}}_tip">
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div class="clear"></div>
</div>

View file

@ -2,6 +2,8 @@
<div id="id_{{$field.0}}_wrapper" class="form-group field input password">
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" type="password" value="{{$field.2|escape:'html'}}" {{if $field.4 eq "required"}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5}}{{/if}} aria-describedby="{{$field.0}}_tip">
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div class="clear"></div>
</div>

View file

@ -4,7 +4,9 @@
<input type="radio" name="{{$field.0}}" id="id_{{$field.0}}_{{$field.2}}" value="{{$field.2}}" {{if $field.4}}checked{{/if}} aria-checked="{{if $field.4}}true{{else}}false{{/if}}" aria-describedby="{{$field.0}}_{{$field.2}}_tip">
<label for="id_{{$field.0}}_{{$field.2}}">
{{$field.1}}
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_{{$field.2}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</label>
</div>
</div>

View file

@ -4,5 +4,7 @@
<select name="{{$field.0}}" id="id_{{$field.0}}" class="form-control" aria-describedby="{{$field.0}}_tip">
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select>
<span class="help-block" id="{{$field.0}}_tip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -4,5 +4,7 @@
<select class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" aria-describedby="{{$field.0}}_tip">
{{$field.4}}
</select>
<span class="help-block" id="{{$field.0}}_tip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</div>

View file

@ -2,6 +2,8 @@
<div class="form-group field textarea">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<textarea class="form-control text-autosize" name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.4}}{{$field.4}}{{/if}} aria-describedby="{{$field.0}}_tip">{{$field.2}}</textarea>
<span id="{{$field.0}}_tip" class="help-block" role="tooltip">{{$field.3}}</span>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
<div class="clear"></div>
</div>

View file

@ -5,6 +5,8 @@
<select class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.5=="preview"}}onchange="previewTheme(this);"{{/if}} aria-describedby="{{$field.0}}_tip" >
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
{{if $field.5=="preview"}}<div id="theme-preview"></div>{{/if}}
</div>

View file

@ -14,6 +14,8 @@
<span class="toggle-handle btn btn-default btn-xs"></span>
</div>
</div>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
{{/if}}
</div>
<div class="clear"></div>

View file

@ -8,6 +8,9 @@
<div id="login_standard">
{{include file="field_input.tpl" field=$lname}}
{{include file="field_password.tpl" field=$lpassword}}
<div id="login-lost-password-link">
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" >{{$lostlink}}</a>
</div>
</div>
{{if $openid}}
@ -19,10 +22,7 @@
{{include file="field_checkbox.tpl" field=$lremember}}
<div id="login-submit-wrapper">
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link">{{$lostlink}}</a>
<div class="pull-right" >
{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link" class="btn btn-default">{{$register.desc}}</a>{{/if}}
<button type="submit" name="submit" id="login-submit-button" class="btn btn-primary" value="{{$login|escape:'html'}}">{{$login|escape:'html'}}</button>
</div>
</div>
@ -32,7 +32,15 @@
<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />
{{/foreach}}
<div id="login-end"></div>
</div>
</form>
{{if $register}}
<div id="login-extra-links">
<h3 id="login-head" class="sr-only">{{$register.title|escape:'html'}}</h3>
<a href="register" title="{{$register.title|escape:'html'}}" id="register-link" class="btn btn-default">{{$register.desc}}</a>
</div>
{{/if}}
<script type="text/javascript"> $(document).ready(function() { $("#id_{{$lname.0}}").focus();} );</script>

View file

@ -91,6 +91,13 @@ nav ul {
width: 100% !important; height: 110px !important;
}
#login-extra-links, #login-form {
/* width: 341px; */
width: 100%;
}
#id_remember_label {
width: unset;
}
}
@media screen and (max-width: 480px) {

View file

@ -2422,10 +2422,60 @@ aside #div_id_remember label {
float: inherit;
}
#login-group {
overflow: hidden;
}
#login-head {
position: unset;
width: unset;
height: unset;
margin-bottom: 10px;
}
div #wrapper_username {
padding: 0px;
}
div #wrapper_password {
padding: 0px;
margin-bottom: 0px;
}
#div_id_remember {
float: left;
width: unset;
}
#remember_tip {
display: none;
}
#login-submit-wrapper {
float: right;
}
#login-form {
margin-top: 20px;
}
#login-extra-links, #login-form {
/* width: 341px; */
width: 341px;
clear: both;
border-top: 3px solid white;
padding-top: 20px;
}
aside div #login-submit-button {
margin-left:0px;
}
#login-lost-password-link {
margin-bottom: 10px;
float: right;
}
aside #register-link, aside #lost-password-link {
display: block;
}