Signup + modal refactoring

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);
 	      });
 	    }
 	 }
 	
-});
+});

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);
+	      });
+	    }
+	 }
+	
+});

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');
+		}
+	}
+});

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')
+});

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()

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();
-		  }
+		}
 	}
-
+});
-});

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;
 	}
-}
+}

ember/app/styles/flarum/login.less

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

ember/app/templates/login.hbs

@@ -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 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"}}

ember/app/templates/signup.hbs

@@ -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"}}

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');
 

ember/app/views/login.js

@@ -1,38 +1,27 @@
 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',
 
 	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', 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() {
 		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');
-		}
 	}
 });

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() {
+	}
+});

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));
     }