github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-23 01:23:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Signup + modal refactoring

Browse Source
This commit is contained in:
Toby Zerner 2015-02-08 15:59:39 +10:30
parent 6c3debc79b
commit d45f2fd1ac
14 changed files with 193 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ember/app/controllers/login.js
View File

@ -1,10 +1,12 @@
import Ember from 'ember';
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',
loading: false,
actions: {
authenticate: function() {
@ -14,7 +16,8 @@ export default Ember.Controller.extend(AuthenticationControllerMixin, {
this.set('loading', true);
return this._super(data).then(function() {
controller.send("sessionChanged");
}).catch(function(errors) {
controller.send("closeModal");
}, function(errors) {
switch(errors[0].code) {
case 'invalidLogin':
controller.set('error', 'Your login details are incorrect.');
@ -23,10 +26,11 @@ export default Ember.Controller.extend(AuthenticationControllerMixin, {
default:
controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')');
}
controller.trigger('refocus');
}).finally(function() {
controller.set('loading', false);
});
}
}
});
});

33
ember/app/controllers/signup.js Normal file
View 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
View 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
View 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')
});

3
ember/app/models/user.js
View File

@ -14,6 +14,9 @@ export default DS.Model.extend({
groups: DS.hasMany('group'),
email: DS.attr('string'),
password: DS.attr('string'),
avatarNumber: function() {
return Math.random() > 0.3 ? Math.floor(Math.random() * 19) + 1 : null;
}.property()

23
ember/app/routes/application.js
View File

@ -6,22 +6,35 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
actions: {
login: function() {
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',
outlet: 'modal'
});
this.controllerFor('application').set('modalController', this.controllerFor(name));
},
closeModal: function() {
this.controllerFor('application').set('modalController', null);
},
destroyModal: function() {
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
},
sessionChanged: function() {
sessionChanged: function() {
this.refresh();
}
}
}
});
});

5
ember/app/styles/flarum/components.less
View File

@ -85,6 +85,9 @@
// ------------------------------------
// Form Controls
.form-group {
margin-bottom: 12px;
}
.form-control {
.box-shadow(none);
&:focus,
@ -232,4 +235,4 @@
border-radius: 100%;
vertical-align: top;
}
}
}

5
ember/app/styles/flarum/login.less
View File

@ -1,5 +0,0 @@
.modal-login {
& .form-group {
margin-bottom: 12px;
}
}

60
ember/app/templates/login.hbs
View File

@ -1,33 +1,31 @@
<div class="modal-dialog modal-sm modal-login">
<div class="modal-content">
<button class="close btn btn-icon btn-link" {{action "close" target="view"}}>{{fa-icon "times"}}</button>
<form {{action "authenticate" on="submit"}}>
<div class="modal-header">
<h3>Log In</h3>
</div>
<div class="modal-body">
<div class="form-centered">
<div class="form-group">
{{#if error}}
<div class="form-alert">
<div class="alert alert-warning">{{error}}</div>
</div>
{{/if}}
{{input value=identification name="email" type="text" class="form-control" placeholder="Username or 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}}>Log In</button>
</div>
<div class="modal-content">
<button class="close btn btn-icon btn-link" {{action "closeModal"}}>{{fa-icon "times"}}</button>
<form {{action "authenticate" on="submit"}}>
<div class="modal-header">
<h3>Log In</h3>
</div>
<div class="modal-body">
<div class="form-centered">
<div class="form-group">
{{#if error}}
<div class="form-alert">
<div class="alert alert-warning">{{error}}</div>
</div>
{{/if}}
{{input value=identification name="email" type="text" class="form-control" placeholder="Username or 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}}>Log In</button>
</div>
</div>
<div class="modal-footer">
<p class="forgot-password-link"><a href="#">Forgot password?</a></p>
<p class="sign-up-link">Don't have an account? <a href="#">Sign Up</a></p>
</div>
</form>
</div>
{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}}
</div>
</div>
<div class="modal-footer">
<p class="forgot-password-link"><a href="#">Forgot password?</a></p>
<p class="sign-up-link">Don't have an account? <a href="#" {{action "signup"}}>Sign Up</a></p>
</div>
</form>
</div>
{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}}

28
ember/app/templates/signup.hbs Normal file
View 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"}}

24
ember/app/views/application.js
View File

@ -26,6 +26,16 @@ export default Ember.View.extend({
return this.get('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() {
@ -44,6 +54,15 @@ export default Ember.View.extend({
$(window).resize(function() {
$('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
}).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() {
@ -106,7 +125,10 @@ export default Ember.View.extend({
} else {
var signUp = ActionButton.create({
label: 'Sign Up',
className: 'btn btn-link'
className: 'btn btn-link',
action: function() {
controller.send('signup');
}
});
secondary.pushObjectWithTag(signUp, 'signUp');

33
ember/app/views/login.js
View File

@ -1,38 +1,27 @@
import Ember from 'ember';
export default Ember.View.extend({
classNames: ['modal', 'fade'],
import ModalViewMixin from '../mixins/modal-view';
export default Ember.View.extend(ModalViewMixin, {
classNames: ['modal-dialog', 'modal-sm', 'modal-login'],
templateName: 'login',
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').on('refocus', this, this.refocus);
},
refocus: function() {
var view = this;
Ember.run.scheduleOnce('afterRender', function() {
view.$('input[name=password]').select();
Ember.run.scheduleOnce('afterRender', this, function() {
console.log('focus password')
this.$('input[name=password]').select();
});
}.observes('controller.loading'),
},
willDestroyElement: function() {
this.get('controller.session').off('sessionAuthenticationSucceeded', this, this.hide);
},
hide: function() {
this.$().modal('hide');
},
actions: {
close: function() {
this.$().modal('hide');
}
this.get('controller').off('refocus', this, this.refocus);
}
});

11
ember/app/views/signup.js Normal file
View 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() {
}
});

2
src/Flarum/Core/Users/User.php
View File

@ -73,7 +73,7 @@ class User extends Entity implements UserInterface, RemindableInterface
public function setPasswordAttribute($password)
{
$this->attributes['password'] = Hash::make($password);
$this->attributes['password'] = $password ? Hash::make($password) : null;
$this->raise(new Events\PasswordWasChanged($this));
}