From 24f9e97df40933a3948f009adb8128a64b11981f Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Sun, 8 Feb 2015 15:59:39 +1030 Subject: [PATCH] Signup + modal refactoring --- framework/core/ember/app/controllers/login.js | 10 +++- .../core/ember/app/controllers/signup.js | 33 ++++++++++ .../core/ember/app/mixins/modal-controller.js | 9 +++ framework/core/ember/app/mixins/modal-view.js | 16 +++++ framework/core/ember/app/models/user.js | 3 + .../core/ember/app/routes/application.js | 23 +++++-- .../ember/app/styles/flarum/components.less | 5 +- .../core/ember/app/styles/flarum/login.less | 5 -- framework/core/ember/app/templates/login.hbs | 60 +++++++++---------- framework/core/ember/app/templates/signup.hbs | 28 +++++++++ framework/core/ember/app/views/application.js | 24 +++++++- framework/core/ember/app/views/login.js | 33 ++++------ framework/core/ember/app/views/signup.js | 11 ++++ framework/core/src/Flarum/Core/Users/User.php | 2 +- 14 files changed, 193 insertions(+), 69 deletions(-) create mode 100644 framework/core/ember/app/controllers/signup.js create mode 100644 framework/core/ember/app/mixins/modal-controller.js create mode 100644 framework/core/ember/app/mixins/modal-view.js create mode 100644 framework/core/ember/app/templates/signup.hbs create mode 100644 framework/core/ember/app/views/signup.js diff --git a/framework/core/ember/app/controllers/login.js b/framework/core/ember/app/controllers/login.js index dff3d2af0..7292fb853 100644 --- a/framework/core/ember/app/controllers/login.js +++ b/framework/core/ember/app/controllers/login.js @@ -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); }); } } -}); \ No newline at end of file +}); diff --git a/framework/core/ember/app/controllers/signup.js b/framework/core/ember/app/controllers/signup.js new file mode 100644 index 000000000..41b63f596 --- /dev/null +++ b/framework/core/ember/app/controllers/signup.js @@ -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); + }); + } + } + +}); diff --git a/framework/core/ember/app/mixins/modal-controller.js b/framework/core/ember/app/mixins/modal-controller.js new file mode 100644 index 000000000..a63c75e3d --- /dev/null +++ b/framework/core/ember/app/mixins/modal-controller.js @@ -0,0 +1,9 @@ +import Ember from 'ember'; + +export default Ember.Mixin.create(Ember.Evented, { + actions: { + focus: function() { + this.trigger('focus'); + } + } +}); diff --git a/framework/core/ember/app/mixins/modal-view.js b/framework/core/ember/app/mixins/modal-view.js new file mode 100644 index 000000000..5a390a01d --- /dev/null +++ b/framework/core/ember/app/mixins/modal-view.js @@ -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') +}); diff --git a/framework/core/ember/app/models/user.js b/framework/core/ember/app/models/user.js index c029005b6..5c5df3e73 100644 --- a/framework/core/ember/app/models/user.js +++ b/framework/core/ember/app/models/user.js @@ -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() diff --git a/framework/core/ember/app/routes/application.js b/framework/core/ember/app/routes/application.js index 287e3c19f..0f993b3dd 100644 --- a/framework/core/ember/app/routes/application.js +++ b/framework/core/ember/app/routes/application.js @@ -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(); - } + } } - -}); \ No newline at end of file +}); diff --git a/framework/core/ember/app/styles/flarum/components.less b/framework/core/ember/app/styles/flarum/components.less index e42af637a..921f2a12d 100644 --- a/framework/core/ember/app/styles/flarum/components.less +++ b/framework/core/ember/app/styles/flarum/components.less @@ -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; } -} \ No newline at end of file +} diff --git a/framework/core/ember/app/styles/flarum/login.less b/framework/core/ember/app/styles/flarum/login.less index aae0c760c..e69de29bb 100644 --- a/framework/core/ember/app/styles/flarum/login.less +++ b/framework/core/ember/app/styles/flarum/login.less @@ -1,5 +0,0 @@ -.modal-login { - & .form-group { - margin-bottom: 12px; - } -} \ No newline at end of file diff --git a/framework/core/ember/app/templates/login.hbs b/framework/core/ember/app/templates/login.hbs index 6d444d85b..7649e459a 100644 --- a/framework/core/ember/app/templates/login.hbs +++ b/framework/core/ember/app/templates/login.hbs @@ -1,33 +1,31 @@ -
-
- -
-
-

Log In

-
-
-
-
- {{#if error}} -
-
{{error}}
-
- {{/if}} - {{input value=identification name="email" type="text" class="form-control" placeholder="Username or Email" disabled=loading}} -
-
- {{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}} -
-
- -
+
+ + +
+

Log In

+
+
+
+
+ {{#if error}} +
+
{{error}}
+
+ {{/if}} + {{input value=identification name="email" type="text" class="form-control" placeholder="Username or Email" disabled=loading}} +
+
+ {{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}} +
+
+
-
-

Forgot password?

- -
- -
- {{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}} -
\ No newline at end of file +
+
+

Forgot password?

+ +
+ +
+{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}} diff --git a/framework/core/ember/app/templates/signup.hbs b/framework/core/ember/app/templates/signup.hbs new file mode 100644 index 000000000..c1108337f --- /dev/null +++ b/framework/core/ember/app/templates/signup.hbs @@ -0,0 +1,28 @@ +
+ +
+
+

Sign Up

+
+
+
+
+ {{input value=username name="username" type="text" class="form-control" placeholder="Username" disabled=loading}} +
+
+ {{input value=email name="email" type="text" class="form-control" placeholder="Email" disabled=loading}} +
+
+ {{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}} +
+
+ +
+
+
+
+ +
+
+
+{{ui/controls/loading-indicator classNameBindings=":modal-loading loading:active"}} diff --git a/framework/core/ember/app/views/application.js b/framework/core/ember/app/views/application.js index 43bd7a033..010bf69bf 100644 --- a/framework/core/ember/app/views/application.js +++ b/framework/core/ember/app/views/application.js @@ -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'); diff --git a/framework/core/ember/app/views/login.js b/framework/core/ember/app/views/login.js index 79fafcee0..fd927a030 100644 --- a/framework/core/ember/app/views/login.js +++ b/framework/core/ember/app/views/login.js @@ -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); } }); diff --git a/framework/core/ember/app/views/signup.js b/framework/core/ember/app/views/signup.js new file mode 100644 index 000000000..6b93e7ad3 --- /dev/null +++ b/framework/core/ember/app/views/signup.js @@ -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() { + } +}); diff --git a/framework/core/src/Flarum/Core/Users/User.php b/framework/core/src/Flarum/Core/Users/User.php index 322675f3f..3c60a1c97 100755 --- a/framework/core/src/Flarum/Core/Users/User.php +++ b/framework/core/src/Flarum/Core/Users/User.php @@ -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)); }