Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate Login modal to use components

This commit is contained in:
Robin Ward 2016-11-15 16:18:33 -05:00
parent 684b3805fd
commit bf49c38faf
4 changed files with 88 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/discourse/components/login-modal.js.es6 Normal file
View File

@ -0,0 +1,26 @@
export default Ember.Component.extend({
didInsertElement() {
this._super();
const prefillUsername = $('#hidden-login-form input[name=username]').val();
if (prefillUsername) {
this.set('loginName', prefillUsername);
this.set('loginPassword', $('#hidden-login-form input[name=password]').val());
} else if ($.cookie('email')) {
this.set('loginName', $.cookie('email'));
}
Ember.run.schedule('afterRender', function() {
$('#login-account-password, #login-account-name').keydown(e => {
if (e.keyCode === 13) {
this.sendAction();
}
});
});
},
mouseMove(e) {
this.set('screenX', e.screenX);
this.set('screenY', e.screenY);
}
});

3
app/assets/javascripts/discourse/controllers/login.js.es6
View File

@ -51,8 +51,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
}.property('loggingIn', 'authenticate'),
actions: {
login: function() {
login() {
const self = this;
if (this.get('loginDisabled')) { return; }
if(Ember.isEmpty(this.get('loginName')) || Ember.isEmpty(this.get('loginPassword'))){
self.flash(I18n.t('login.blank_username_or_password'), 'error');

117
app/assets/javascripts/discourse/templates/modal/login.hbs
View File

@ -1,60 +1,63 @@
<div class="modal-body">
{{login-buttons action="externalLogin"}}
{{#if canLoginLocal}}
<form id='login-form' method='post'>
<div>
<table>
<tr>
<td>
<label for='login-account-name'>{{i18n 'login.username'}}&nbsp;</label>
</td>
<td>
{{text-field value=loginName placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off" autofocus="autofocus"}}
</td>
<td></td>
</tr>
<tr>
<td>
<label for='login-account-password'>{{i18n 'login.password'}}&nbsp;</label>
</td>
<td>
{{password-field value=loginPassword type="password" id="login-account-password" maxlength="200" capsLockOn=capsLockOn}} &nbsp;
</td>
<td>
<a id="forgot-password-link" {{action "forgotPassword"}}>{{i18n 'forgot_password.action'}}</a>
</td>
</tr>
<tr>
<td></td>
<td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div></td>
<td></td>
</tr>
</table>
</div>
</form>
{{/if}}
{{authMessage}}
<div id='login-alert' class={{alertClass}}>{{alert}}</div>
</div>
<div class="modal-footer">
{{#if canLoginLocal}}
<button class="btn btn-large btn-primary"
disabled={{loginDisabled}}
{{action "login"}}>
<i class="fa fa-unlock"></i>&nbsp;{{loginButtonText}}
</button>
{{#if showSignupLink}}
&nbsp;
<button class="btn btn-large" id="new-account-link" {{action "createAccount"}}>
{{i18n 'create_account.title'}}
</button>
{{#login-modal screenX=lastX screenY=lastY loginName=loginName loginPassword=loginPassword action="login"}}
{{#d-modal-body title="login.title" class="login-modal"}}
{{login-buttons action="externalLogin"}}
{{#if canLoginLocal}}
<form id='login-form' method='post'>
<div>
<table>
<tr>
<td>
<label for='login-account-name'>{{i18n 'login.username'}}&nbsp;</label>
</td>
<td>
{{text-field value=loginName placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off" autofocus="autofocus"}}
</td>
<td></td>
</tr>
<tr>
<td>
<label for='login-account-password'>{{i18n 'login.password'}}&nbsp;</label>
</td>
<td>
{{password-field value=loginPassword type="password" id="login-account-password" maxlength="200" capsLockOn=capsLockOn}} &nbsp;
</td>
<td>
<a id="forgot-password-link" {{action "forgotPassword"}}>{{i18n 'forgot_password.action'}}</a>
</td>
</tr>
<tr>
<td></td>
<td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div></td>
<td></td>
</tr>
</table>
</div>
</form>
{{/if}}
{{/if}}
{{authMessage}}
<div id='login-alert' class={{alertClass}}>{{alert}}</div>
{{/d-modal-body}}
{{#if authenticate}}
&nbsp; {{i18n 'login.authenticating'}}
{{/if}}
<div class="modal-footer">
{{#if canLoginLocal}}
<button class="btn btn-large btn-primary"
disabled={{loginDisabled}}
{{action "login"}}>
<i class="fa fa-unlock"></i>&nbsp;{{loginButtonText}}
</button>
{{conditional-loading-spinner condition=showSpinner size="small"}}
</div>
{{#if showSignupLink}}
&nbsp;
<button class="btn btn-large" id="new-account-link" {{action "createAccount"}}>
{{i18n 'create_account.title'}}
</button>
{{/if}}
{{/if}}
{{#if authenticate}}
&nbsp; {{i18n 'login.authenticating'}}
{{/if}}
{{conditional-loading-spinner condition=showSpinner size="small"}}
</div>
{{/login-modal}}

34
app/assets/javascripts/discourse/views/login.js.es6
View File

@ -1,34 +0,0 @@
import ModalBodyView from "discourse/views/modal-body";
export default ModalBodyView.extend({
templateName: 'modal/login',
title: I18n.t('login.title'),
classNames: ['login-modal'],
mouseMove: function(e) {
this.set('controller.lastX', e.screenX);
this.set('controller.lastY', e.screenY);
},
_setup: function() {
const loginController = this.get('controller');
// Get username and password from the browser's password manager,
// if it filled the hidden static login form:
var prefillUsername = $('#hidden-login-form input[name=username]').val();
if (prefillUsername) {
loginController.set('loginName', prefillUsername);
loginController.set('loginPassword', $('#hidden-login-form input[name=password]').val());
} else if ($.cookie('email')) {
loginController.set('loginName', $.cookie('email'));
}
Em.run.schedule('afterRender', function() {
$('#login-account-password, #login-account-name').keydown(function(e) {
if (e.keyCode === 13 && !loginController.get('loginDisabled')) {
loginController.send('login');
}
});
});
}.on('didInsertElement')
});