unify user preferences views

This commit is contained in:
Maja Komel 2018-06-28 22:14:04 +02:00 committed by Sam
parent 55a963252d
commit 3ddfc12307
7 changed files with 91 additions and 82 deletions

View File

@ -1,4 +1,4 @@
<section class='user-right user-preferences'> <section class='user-preferences'>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="control-group"> <div class="control-group">
@ -9,20 +9,22 @@
{{#if success}} {{#if success}}
<div class="control-group"> <div class="control-group">
<div class="instructions"> <div class="controls">
<p> <div class="instructions">
{{#if model.staff}} <p>
{{i18n 'user.change_email.success_staff'}} {{#if model.staff}}
{{else}} {{i18n 'user.change_email.success_staff'}}
{{i18n 'user.change_email.success'}} {{else}}
{{/if}} {{i18n 'user.change_email.success'}}
</p> {{/if}}
</p>
</div>
</div> </div>
</div> </div>
{{else}} {{else}}
{{#if error}} {{#if error}}
<div class="control-group"> <div class="control-group">
<div class="instructions"> <div class="controls">
<div class='alert alert-error'>{{errorMessage}}</div> <div class='alert alert-error'>{{errorMessage}}</div>
</div> </div>
</div> </div>
@ -34,12 +36,14 @@
{{text-field value=newEmail id="change-email" classNames="input-xxlarge" autofocus="autofocus"}} {{text-field value=newEmail id="change-email" classNames="input-xxlarge" autofocus="autofocus"}}
{{input-tip validation=emailValidation}} {{input-tip validation=emailValidation}}
</div> </div>
<div class='instructions'> <div class="controls">
{{#if taken}} <div class='instructions'>
{{i18n 'user.change_email.taken'}} {{#if taken}}
{{else}} {{i18n 'user.change_email.taken'}}
{{i18n 'user.email.instructions'}} {{else}}
{{/if}} {{i18n 'user.email.instructions'}}
{{/if}}
</div>
</div> </div>
</div> </div>

View File

@ -1,61 +1,74 @@
<section class="user-content user-preferences second-factor-backup-preferences"> <section class="user-preferences second-factor-backup-preferences">
<form class="form-horizontal"> <form class="form-horizontal">
<h2>{{i18n "user.second_factor_backup.title"}}</h2>
{{#if successMessage}} <div class="control-group">
<div class="alert alert-success"> <div class="controls">
{{successMessage}} <h3>{{i18n "user.second_factor_backup.title"}}</h3>
</div> </div>
{{/if}} <div class="controls">
{{#if successMessage}}
<div class="alert alert-success">
{{successMessage}}
</div>
{{/if}}
{{#if errorMessage}} {{#if errorMessage}}
<div class="alert alert-error"> <div class="alert alert-error">
{{errorMessage}} {{errorMessage}}
</div> </div>
{{/if}}
<div class="second-factor-form">
{{second-factor-input
value=secondFactorToken
maxlength=6
inputId="second-factor-token"}}
<div class="actions">
{{d-button
action="generateSecondFactorCodes"
class="btn btn-primary"
disabled=isDisabledGenerateBackupCodeBtn
label=generateBackupCodeBtnLabel}}
{{#if backupEnabled}}
{{d-button
action="disableSecondFactorBackup"
class="btn btn-danger"
disabled=isDisabledDisableBackupCodeBtn
label="user.second_factor_backup.disable"}}
{{/if}} {{/if}}
</div> </div>
</div> </div>
<div class="instructions"> <label class='control-label'>{{i18n 'user.second_factor.label'}}</label>
{{i18n "user.second_factor.disable_description"}} <div class="control-group">
<div class="controls">
{{second-factor-input
value=secondFactorToken
maxlength=6
inputId="second-factor-token"}}
<div class='instructions'>
{{i18n "user.second_factor.disable_description"}}
</div>
</div>
</div> </div>
{{#conditional-loading-section isLoading=loading}} <div class="control-group">
{{#if backupCodes}} <div class="controls">
<h3>{{i18n "user.second_factor_backup.codes.title"}}</h3> <div class="actions">
{{d-button
action="generateSecondFactorCodes"
class="btn btn-primary"
disabled=isDisabledGenerateBackupCodeBtn
label=generateBackupCodeBtnLabel}}
{{#if backupEnabled}}
{{d-button
action="disableSecondFactorBackup"
class="btn btn-danger"
disabled=isDisabledDisableBackupCodeBtn
label="user.second_factor_backup.disable"}}
{{/if}}
</div>
<p> {{#conditional-loading-section isLoading=loading}}
{{i18n "user.second_factor_backup.codes.description"}} {{#if backupCodes}}
</p> <h3>{{i18n "user.second_factor_backup.codes.title"}}</h3>
{{backup-codes <p>
copyBackupCode=(action "copyBackupCode") {{i18n "user.second_factor_backup.codes.description"}}
backupCodes=backupCodes}} </p>
{{/if}}
{{/conditional-loading-section}}
{{#link-to "preferences.account" model.username}} {{backup-codes
{{i18n "go_back"}} copyBackupCode=(action "copyBackupCode")
{{/link-to}} backupCodes=backupCodes}}
{{#link-to "preferences.account" model.username}}
{{i18n "go_back"}}
{{/link-to}}
{{/if}}
{{/conditional-loading-section}}
</div>
</div>
</form> </form>
</section> </section>

View File

@ -1,5 +1,6 @@
<section class='user-content user-preferences'> <section class='user-preferences'>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="control-group"> <div class="control-group">
<div class="controls"> <div class="controls">
<h3>{{i18n 'user.second_factor.title'}}</h3> <h3>{{i18n 'user.second_factor.title'}}</h3>
@ -8,7 +9,7 @@
{{#if errorMessage}} {{#if errorMessage}}
<div class="control-group"> <div class="control-group">
<div class="instructions"> <div class="controls">
<div class='alert alert-error'>{{errorMessage}}</div> <div class='alert alert-error'>{{errorMessage}}</div>
</div> </div>
</div> </div>
@ -22,7 +23,7 @@
{{second-factor-input value=secondFactorToken inputId='second-factor-token'}} {{second-factor-input value=secondFactorToken inputId='second-factor-token'}}
</div> </div>
<div class='instructions'> <div class='instructions controls'>
{{i18n 'user.second_factor.disable_description'}} {{i18n 'user.second_factor.disable_description'}}
</div> </div>
</div> </div>
@ -97,7 +98,7 @@
autofocus="autofocus"}} autofocus="autofocus"}}
</div> </div>
<div class='instructions'> <div class='instructions controls'>
{{i18n 'user.second_factor.confirm_password_description'}} {{i18n 'user.second_factor.confirm_password_description'}}
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
<section class='user-content'> <section class='user-preferences'>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="control-group"> <div class="control-group">
@ -14,10 +14,10 @@
</div> </div>
<div class='instructions controls'> <div class='instructions controls'>
<p> <p>
{{#if taken}} {{#if taken}}
{{i18n 'user.change_username.taken'}} {{i18n 'user.change_username.taken'}}
{{/if}} {{/if}}
<span>{{errorMessage}}</span> <span>{{errorMessage}}</span>
</p> </p>
</div> </div>
</div> </div>

View File

@ -563,11 +563,6 @@
margin-right: 10px; margin-right: 10px;
} }
.second-factor-form {
display: flex;
align-items: center;
}
.form-horizontal .instructions { .form-horizontal .instructions {
margin-left: 0; margin-left: 0;
} }

View File

@ -292,10 +292,6 @@
margin-top: 0; margin-top: 0;
} }
.form-horizontal .instructions {
margin-left: 8px;
}
.pref-mailing-list-mode .controls { .pref-mailing-list-mode .controls {
select { select {
width: 400px; width: 400px;

View File

@ -125,7 +125,7 @@ QUnit.test("second factor", assert => {
}); });
fillIn("#password", "secrets"); fillIn("#password", "secrets");
click(".user-content .btn-primary"); click(".user-preferences .btn-primary");
andThen(() => { andThen(() => {
assert.ok(exists("#test-qr"), "shows qr code"); assert.ok(exists("#test-qr"), "shows qr code");
@ -156,7 +156,7 @@ QUnit.test("second factor backup", assert => {
}); });
fillIn("#second-factor-token", "111111"); fillIn("#second-factor-token", "111111");
click(".second-factor-form .btn-primary"); click(".user-preferences .btn-primary");
andThen(() => { andThen(() => {
assert.ok(exists(".backup-codes-area"), "shows backup codes"); assert.ok(exists(".backup-codes-area"), "shows backup codes");