mirror of
https://github.com/flarum/core.git
synced 2025-07-10 03:16:22 +02:00
Signup + modal refactoring
This commit is contained in:
@ -1,10 +1,12 @@
|
|||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
|
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
|
||||||
|
import ModalControllerMixin from '../mixins/modal-controller';
|
||||||
|
|
||||||
export default Ember.Controller.extend(AuthenticationControllerMixin, {
|
export default Ember.Controller.extend(ModalControllerMixin, AuthenticationControllerMixin, {
|
||||||
|
|
||||||
authenticator: 'authenticator:flarum',
|
authenticator: 'authenticator:flarum',
|
||||||
|
loading: false,
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
authenticate: function() {
|
authenticate: function() {
|
||||||
@ -14,7 +16,8 @@ export default Ember.Controller.extend(AuthenticationControllerMixin, {
|
|||||||
this.set('loading', true);
|
this.set('loading', true);
|
||||||
return this._super(data).then(function() {
|
return this._super(data).then(function() {
|
||||||
controller.send("sessionChanged");
|
controller.send("sessionChanged");
|
||||||
}).catch(function(errors) {
|
controller.send("closeModal");
|
||||||
|
}, function(errors) {
|
||||||
switch(errors[0].code) {
|
switch(errors[0].code) {
|
||||||
case 'invalidLogin':
|
case 'invalidLogin':
|
||||||
controller.set('error', 'Your login details are incorrect.');
|
controller.set('error', 'Your login details are incorrect.');
|
||||||
@ -23,10 +26,11 @@ export default Ember.Controller.extend(AuthenticationControllerMixin, {
|
|||||||
default:
|
default:
|
||||||
controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')');
|
controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')');
|
||||||
}
|
}
|
||||||
|
controller.trigger('refocus');
|
||||||
}).finally(function() {
|
}).finally(function() {
|
||||||
controller.set('loading', false);
|
controller.set('loading', false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
33
ember/app/controllers/signup.js
Normal file
33
ember/app/controllers/signup.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
|
||||||
|
import ModalControllerMixin from '../mixins/modal-controller';
|
||||||
|
|
||||||
|
export default Ember.Controller.extend(ModalControllerMixin, AuthenticationControllerMixin, {
|
||||||
|
authenticator: 'authenticator:flarum',
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
submit: function() {
|
||||||
|
var data = this.getProperties('username', 'email', 'password');
|
||||||
|
var controller = this;
|
||||||
|
this.set('error', null);
|
||||||
|
this.set('loading', true);
|
||||||
|
|
||||||
|
var user = this.store.createRecord('user', data);
|
||||||
|
|
||||||
|
return user.save().then(function() {
|
||||||
|
controller.get('session').authenticate('authenticator:flarum', {
|
||||||
|
identification: data.email,
|
||||||
|
password: data.password
|
||||||
|
}).then(function() {
|
||||||
|
controller.send('closeModal');
|
||||||
|
controller.send('sessionChanged');
|
||||||
|
controller.set('loading', false);
|
||||||
|
});
|
||||||
|
}, function(reason) {
|
||||||
|
controller.set('loading', false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
9
ember/app/mixins/modal-controller.js
Normal file
9
ember/app/mixins/modal-controller.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
export default Ember.Mixin.create(Ember.Evented, {
|
||||||
|
actions: {
|
||||||
|
focus: function() {
|
||||||
|
this.trigger('focus');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
16
ember/app/mixins/modal-view.js
Normal file
16
ember/app/mixins/modal-view.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
export default Ember.Mixin.create({
|
||||||
|
focusEventOn: function() {
|
||||||
|
this.get('controller').on('focus', this, this.focus);
|
||||||
|
}.on('didInsertElement'),
|
||||||
|
|
||||||
|
focusEventOff: function() {
|
||||||
|
this.get('controller').off('focus', this, this.focus);
|
||||||
|
}.on('willDestroyElement'),
|
||||||
|
|
||||||
|
focus: function() {
|
||||||
|
this.$('input:first:visible:enabled').focus();
|
||||||
|
console.log('focus first')
|
||||||
|
}.on('didInsertElement')
|
||||||
|
});
|
@ -14,6 +14,9 @@ export default DS.Model.extend({
|
|||||||
|
|
||||||
groups: DS.hasMany('group'),
|
groups: DS.hasMany('group'),
|
||||||
|
|
||||||
|
email: DS.attr('string'),
|
||||||
|
password: DS.attr('string'),
|
||||||
|
|
||||||
avatarNumber: function() {
|
avatarNumber: function() {
|
||||||
return Math.random() > 0.3 ? Math.floor(Math.random() * 19) + 1 : null;
|
return Math.random() > 0.3 ? Math.floor(Math.random() * 19) + 1 : null;
|
||||||
}.property()
|
}.property()
|
||||||
|
@ -6,22 +6,35 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
|
|||||||
actions: {
|
actions: {
|
||||||
login: function() {
|
login: function() {
|
||||||
this.controllerFor('login').set('error', null);
|
this.controllerFor('login').set('error', null);
|
||||||
this.render('login', {
|
this.send('showModal', 'login');
|
||||||
|
},
|
||||||
|
|
||||||
|
signup: function() {
|
||||||
|
this.controllerFor('signup').set('error', null);
|
||||||
|
this.send('showModal', 'signup');
|
||||||
|
},
|
||||||
|
|
||||||
|
showModal: function(name) {
|
||||||
|
this.render(name, {
|
||||||
into: 'application',
|
into: 'application',
|
||||||
outlet: 'modal'
|
outlet: 'modal'
|
||||||
});
|
});
|
||||||
|
this.controllerFor('application').set('modalController', this.controllerFor(name));
|
||||||
},
|
},
|
||||||
|
|
||||||
closeModal: function() {
|
closeModal: function() {
|
||||||
|
this.controllerFor('application').set('modalController', null);
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyModal: function() {
|
||||||
this.disconnectOutlet({
|
this.disconnectOutlet({
|
||||||
outlet: 'modal',
|
outlet: 'modal',
|
||||||
parentView: 'application'
|
parentView: 'application'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
sessionChanged: function() {
|
sessionChanged: function() {
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
});
|
|
||||||
|
@ -85,6 +85,9 @@
|
|||||||
// ------------------------------------
|
// ------------------------------------
|
||||||
// Form Controls
|
// Form Controls
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
.form-control {
|
.form-control {
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
&:focus,
|
&:focus,
|
||||||
@ -232,4 +235,4 @@
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
.modal-login {
|
|
||||||
& .form-group {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,33 +1,31 @@
|
|||||||
<div class="modal-dialog modal-sm modal-login">
|
<div class="modal-content">
|
||||||
<div class="modal-content">
|
<button class="close btn btn-icon btn-link" {{action "closeModal"}}>{{fa-icon "times"}}</button>
|
||||||
<button class="close btn btn-icon btn-link" {{action "close" target="view"}}>{{fa-icon "times"}}</button>
|
<form {{action "authenticate" on="submit"}}>
|
||||||
<form {{action "authenticate" on="submit"}}>
|
<div class="modal-header">
|
||||||
<div class="modal-header">
|
<h3>Log In</h3>
|
||||||
<h3>Log In</h3>
|
</div>
|
||||||
</div>
|
<div class="modal-body">
|
||||||
<div class="modal-body">
|
<div class="form-centered">
|
||||||
<div class="form-centered">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
{{#if error}}
|
||||||
{{#if error}}
|
<div class="form-alert">
|
||||||
<div class="form-alert">
|
<div class="alert alert-warning">{{error}}</div>
|
||||||
<div class="alert alert-warning">{{error}}</div>
|
</div>
|
||||||
</div>
|
{{/if}}
|
||||||
{{/if}}
|
{{input value=identification name="email" type="text" class="form-control" placeholder="Username or Email" disabled=loading}}
|
||||||
{{input value=identification name="email" type="text" class="form-control" placeholder="Username or Email" disabled=loading}}
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
{{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}}
|
||||||
{{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}}
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<button type="submit" class="btn btn-primary btn-block" {{bind-attr disabled=loading}}>Log In</button>
|
||||||
<button type="submit" class="btn btn-primary btn-block" {{bind-attr disabled=loading}}>Log In</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
</div>
|
||||||
<p class="forgot-password-link"><a href="#">Forgot password?</a></p>
|
<div class="modal-footer">
|
||||||
<p class="sign-up-link">Don't have an account? <a href="#">Sign Up</a></p>
|
<p class="forgot-password-link"><a href="#">Forgot password?</a></p>
|
||||||
</div>
|
<p class="sign-up-link">Don't have an account? <a href="#" {{action "signup"}}>Sign Up</a></p>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}}
|
</div>
|
||||||
</div>
|
{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}}
|
||||||
|
28
ember/app/templates/signup.hbs
Normal file
28
ember/app/templates/signup.hbs
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<div class="modal-content">
|
||||||
|
<button class="close btn btn-icon btn-link" {{action "closeModal"}}>{{fa-icon "times"}}</button>
|
||||||
|
<form {{action "submit" on="submit"}}>
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>Sign Up</h3>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-centered">
|
||||||
|
<div class="form-group">
|
||||||
|
{{input value=username name="username" type="text" class="form-control" placeholder="Username" disabled=loading}}
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
{{input value=email name="email" type="text" class="form-control" placeholder="Email" disabled=loading}}
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
{{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}}
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="submit" class="btn btn-primary btn-block" {{bind-attr disabled=loading}}>Sign Up</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<p class="log-in-link">Already have an account? <a href="#" {{action "login"}}>Log In</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}}
|
@ -26,6 +26,16 @@ export default Ember.View.extend({
|
|||||||
return this.get('controller.forumTitle');
|
return this.get('controller.forumTitle');
|
||||||
}.property('controller.forumTitle'),
|
}.property('controller.forumTitle'),
|
||||||
|
|
||||||
|
modalShowingChanged: function() {
|
||||||
|
if (!this.$()) { return; }
|
||||||
|
|
||||||
|
if (this.get('controller.modalController')) {
|
||||||
|
this.$('#modal').modal('show');
|
||||||
|
} else {
|
||||||
|
this.$('#modal').modal('hide');
|
||||||
|
}
|
||||||
|
}.observes('controller.modalController'),
|
||||||
|
|
||||||
didInsertElement: function() {
|
didInsertElement: function() {
|
||||||
|
|
||||||
|
|
||||||
@ -44,6 +54,15 @@ export default Ember.View.extend({
|
|||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
$('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
|
$('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
|
||||||
}).resize();
|
}).resize();
|
||||||
|
|
||||||
|
var view = this;
|
||||||
|
this.$('#modal').on('hide.bs.modal', function() {
|
||||||
|
view.get('controller').send('closeModal');
|
||||||
|
}).on('hidden.bs.modal', function() {
|
||||||
|
view.get('controller').send('destroyModal');
|
||||||
|
}).on('shown.bs.modal', function() {
|
||||||
|
view.get('controller.modalController').send('focus');
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
switchHeader: function() {
|
switchHeader: function() {
|
||||||
@ -106,7 +125,10 @@ export default Ember.View.extend({
|
|||||||
} else {
|
} else {
|
||||||
var signUp = ActionButton.create({
|
var signUp = ActionButton.create({
|
||||||
label: 'Sign Up',
|
label: 'Sign Up',
|
||||||
className: 'btn btn-link'
|
className: 'btn btn-link',
|
||||||
|
action: function() {
|
||||||
|
controller.send('signup');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
secondary.pushObjectWithTag(signUp, 'signUp');
|
secondary.pushObjectWithTag(signUp, 'signUp');
|
||||||
|
|
||||||
|
@ -1,38 +1,27 @@
|
|||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
export default Ember.View.extend({
|
import ModalViewMixin from '../mixins/modal-view';
|
||||||
classNames: ['modal', 'fade'],
|
|
||||||
|
export default Ember.View.extend(ModalViewMixin, {
|
||||||
|
classNames: ['modal-dialog', 'modal-sm', 'modal-login'],
|
||||||
templateName: 'login',
|
templateName: 'login',
|
||||||
|
|
||||||
didInsertElement: function() {
|
didInsertElement: function() {
|
||||||
var self = this;
|
|
||||||
this.$().modal('show').on('hidden.bs.modal', function() {
|
|
||||||
self.get('controller').send('closeModal');
|
|
||||||
}).on('shown.bs.modal', function() {
|
|
||||||
$(this).find('input:first').select();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.get('controller.session').on('sessionAuthenticationSucceeded', this, this.hide);
|
this.get('controller.session').on('sessionAuthenticationSucceeded', this, this.hide);
|
||||||
|
|
||||||
|
this.get('controller').on('refocus', this, this.refocus);
|
||||||
},
|
},
|
||||||
|
|
||||||
refocus: function() {
|
refocus: function() {
|
||||||
var view = this;
|
Ember.run.scheduleOnce('afterRender', this, function() {
|
||||||
Ember.run.scheduleOnce('afterRender', function() {
|
console.log('focus password')
|
||||||
view.$('input[name=password]').select();
|
this.$('input[name=password]').select();
|
||||||
});
|
});
|
||||||
}.observes('controller.loading'),
|
},
|
||||||
|
|
||||||
willDestroyElement: function() {
|
willDestroyElement: function() {
|
||||||
this.get('controller.session').off('sessionAuthenticationSucceeded', this, this.hide);
|
this.get('controller.session').off('sessionAuthenticationSucceeded', this, this.hide);
|
||||||
},
|
|
||||||
|
|
||||||
hide: function() {
|
this.get('controller').off('refocus', this, this.refocus);
|
||||||
this.$().modal('hide');
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
close: function() {
|
|
||||||
this.$().modal('hide');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
11
ember/app/views/signup.js
Normal file
11
ember/app/views/signup.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
import ModalViewMixin from '../mixins/modal-view';
|
||||||
|
|
||||||
|
export default Ember.View.extend(ModalViewMixin, {
|
||||||
|
classNames: ['modal-dialog', 'modal-sm', 'modal-signup'],
|
||||||
|
templateName: 'signup',
|
||||||
|
|
||||||
|
didInsertElement: function() {
|
||||||
|
}
|
||||||
|
});
|
@ -73,7 +73,7 @@ class User extends Entity implements UserInterface, RemindableInterface
|
|||||||
|
|
||||||
public function setPasswordAttribute($password)
|
public function setPasswordAttribute($password)
|
||||||
{
|
{
|
||||||
$this->attributes['password'] = Hash::make($password);
|
$this->attributes['password'] = $password ? Hash::make($password) : null;
|
||||||
$this->raise(new Events\PasswordWasChanged($this));
|
$this->raise(new Events\PasswordWasChanged($this));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user