User profile refactor

app/app/components/user-profile.js

@@ -0,0 +1,96 @@
+import Ember from 'ember';
+
+const {
+	computed,
+	isEmpty,
+	isEqual,
+	isPresent
+} = Ember;
+
+export default Ember.Component.extend({
+	password: { password: "", confirmation: "" },
+	hasFirstnameError: computed('model.firstname', {
+		get() {
+			if (isEmpty(this.get('model.firstname'))) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	hasLastnameError: computed('model.lastname', {
+		get() {
+			if (isEmpty(this.get('model.lastname'))) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	hasEmailError: computed('model.email', {
+		get() {
+			if (isEmpty(this.get('model.email'))) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	hasPasswordError: computed('passwordError', 'password.password', {
+		get() {
+			if (isPresent(this.get('passwordError'))) {
+				return `error`;
+			}
+
+			if (isEmpty(this.get('password.password'))) {
+				return null;
+			}
+		}
+	}),
+	hasConfirmPasswordError: computed('confirmPasswordError', {
+		get() {
+			if (isPresent(this.get("confirmPasswordError"))) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+
+	actions: {
+		save() {
+			let password = this.get('password.password');
+			let confirmation = this.get('password.confirmation');
+
+			if (isEmpty(this.model.get('firstname'))) {
+				return $("#firstname").focus();
+			}
+			if (isEmpty(this.model.get('lastname'))) {
+				return $("#lastname").focus();
+			}
+			if (isEmpty(this.model.get('email'))) {
+				return $("#email").focus();
+			}
+
+			if (isPresent(password) && isEmpty(confirmation)) {
+				Ember.set(this, 'confirmPasswordError', 'error');
+				return $("#confirmPassword").focus();
+			}
+			if (isEmpty(password) && isPresent(confirmation)) {
+				Ember.set(this, 'passwordError', 'error');
+				return $("#password").focus();
+			}
+			if (!isEqual(password, confirmation)) {
+				Ember.set(this, 'passwordError', 'error');
+				return $("#password").focus();
+			}
+
+			let passwords = this.get('password');
+
+			this.get('save')(passwords).finally(() => {
+				Ember.set(this, 'password.password', '');
+				Ember.set(this, 'password.confirmation', '');
+			});
+		}
+	}
+});

app/app/pods/profile/controller.js

@@ -11,52 +11,27 @@
 
 import Ember from 'ember';
 
+const {
+	isPresent
+} = Ember;
+
 export default Ember.Controller.extend({
 	userService: Ember.inject.service('user'),
-	password: { password: "", confirmation: "" },
 	session: Ember.inject.service(),
 
 	actions: {
-		save: function () {
+		save(passwords) {
-			if (is.empty(this.model.get('firstname'))) {
+			let password = passwords.password;
-				$("#firstname").addClass("error").focus();
+			let confirmation = passwords.confirmation;
-				return;
-			}
-			if (is.empty(this.model.get('lastname'))) {
-				$("#lastname").addClass("error").focus();
-				return;
-			}
-			if (is.empty(this.model.get('email'))) {
-				$("#email").addClass("error").focus();
-				return;
-			}
-			if (is.not.empty(this.password.password) && is.empty(this.password.confirmation)) {
-				$("#confirmPassword").addClass("error").focus();
-				return;
-			}
-			if (is.empty(this.password.password) && is.not.empty(this.password.confirmation)) {
-				$("#password").addClass("error").focus();
-				return;
-			}
-			if (is.not.equal(this.password.password, this.password.confirmation)) {
-				$("#password").addClass("error").focus();
-				return;
-			}
 
-			let self = this;
+			return this.get('userService').save(this.model).then(() => {
-
+				if (isPresent(password) && isPresent(confirmation)) {
-			this.get('userService').save(this.model).then(function () {
+					this.get('userService').updatePassword(this.get('model.id'), password);
-				if (is.not.empty(self.password.password) && is.not.empty(self.password.confirmation)) {
-					self.get('userService').updatePassword(self.model.get('id'), self.password.password).then(function () {
-						self.password.password = "";
-						self.password.confirmation = "";
-					});
 				}
-				self.model.generateInitials();
+				this.model.generateInitials();
-				self.get('session').set('user', self.model);
+				this.get('session').set('user', this.model);
-			});
-
 				this.transitionToRoute('folders');
+			});
 		}
 	}
 });

app/app/pods/profile/template.hbs

@@ -13,33 +13,7 @@
 	{{/layout/zone-sidebar}}
 
 	{{#layout/zone-content}}
-		<div class="input-form form-borderless">
+		{{user-profile model=model save=(action 'save')}}
-			<form>
-				<div class="input-control">
-					<label>Firstname</label>
-					{{focus-input id="firstname" type="text" value=model.firstname}}
-				</div>
-				<div class="input-control">
-					<label>Lastname</label>
-					{{input id="lastname" type="text" value=model.lastname}}
-				</div>
-				<div class="input-control">
-					<label>Email</label>
-					{{input id="email" type="text" value=model.email}}
-				</div>
-				<div class="input-control">
-					<label>Password</label>
-					<div class="tip">Optional change your password</div>
-					{{input id="password" type="password" value=password.password}}
-				</div>
-				<div class="input-control">
-					<label>Confirm Password</label>
-					<div class="tip">Confirm your new password</div>
-					{{input id="confirmPassword" type="password" value=password.confirmation}}
-				</div>
-				<div class="regular-button button-blue" {{ action 'save' }}>save</div>
-			</form>
-		</div>
 	{{/layout/zone-content}}
 
 {{/layout/zone-container}}

app/app/templates/components/user-profile.hbs

@@ -0,0 +1,27 @@
+<div class="input-form form-borderless">
+    <form>
+        <div class="input-control">
+            <label>Firstname</label>
+            {{focus-input id="firstname" type="text" value=model.firstname class=hasFirstnameError}}
+        </div>
+        <div class="input-control">
+            <label>Lastname</label>
+            {{input id="lastname" type="text" value=model.lastname class=hasLastnameError}}
+        </div>
+        <div class="input-control">
+            <label>Email</label>
+            {{input id="email" type="text" value=model.email class=hasEmailError}}
+        </div>
+        <div class="input-control">
+            <label>Password</label>
+            <div class="tip">Optional change your password</div>
+            {{input id="password" type="password" value=password.password class=hasPasswordError}}
+        </div>
+        <div class="input-control">
+            <label>Confirm Password</label>
+            <div class="tip">Confirm your new password</div>
+            {{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
+        </div>
+        <div class="regular-button button-blue" {{ action 'save' }}>save</div>
+    </form>
+</div>