Refactor user settings to use component

app/app/components/user-settings.js

@@ -0,0 +1,70 @@
+import Ember from 'ember';
+
+const {
+	isPresent,
+	isEmpty,
+	computed,
+	set,
+	get
+} = Ember;
+
+export default Ember.Component.extend({
+	newUser: { firstname: "", lastname: "", email: "", active: true },
+	userFirstnameError: computed('firstnameError', 'newUser.firstname', {
+		get() {
+			let error = get(this, 'firstnameError');
+			let firstname = get(this, 'newUser.firstname');
+			if (isPresent(error) && isEmpty(firstname)) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	userLastnameError: computed('lastnameError', 'newUser.lastname', {
+		get() {
+			let error = get(this, 'lastnameError');
+			let lastname = get(this, 'newUser.lastname');
+			if (isPresent(error) && isEmpty(lastname)) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	userEmailError: computed('emailError', 'newUser.email', {
+		get() {
+			let error = get(this, 'emailError');
+			let email = get(this, 'newUser.email');
+			if (isPresent(error)) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+
+	actions: {
+		add() {
+			if (isEmpty(this.newUser.firstname)) {
+				set(this, 'firstnameError', 'error');
+				return $("#newUserFirstname").focus();
+			}
+			if (isEmpty(this.newUser.lastname)) {
+				set(this, 'lastnameError', 'error');
+				return $("#newUserLastname").focus();
+			}
+			if (isEmpty(this.newUser.email) || is.not.email(this.newUser.email)) {
+				set(this, 'emailError', 'error');
+				return $("#newUserEmail").focus();
+			}
+
+			let user = get(this, 'newUser');
+
+			get(this, 'add')(user).then(() => {
+				this.set('newUser', { firstname: "", lastname: "", email: "", active: true });
+				$("#newUserFirstname").focus();
+			});
+		}
+	}
+});

app/app/pods/customize/general/controller.js

@@ -12,10 +12,6 @@
 import Ember from 'ember';
 import NotifierMixin from "../../../mixins/notifier";
 
-const {
-	isEmpty
-} = Ember;
-
 export default Ember.Controller.extend(NotifierMixin, {
 	orgService: Ember.inject.service('organization'),
 

app/app/pods/customize/users/controller.js

@@ -17,30 +17,13 @@ export default Ember.Controller.extend(NotifierMixin, {
 	newUser: { firstname: "", lastname: "", email: "", active: true },
 
 	actions: {
-		add: function () {
-			if (is.empty(this.newUser.firstname)) {
-				$("#newUserFirstname").addClass("error").focus();
-				return;
-			}
-			if (is.empty(this.newUser.lastname)) {
-				$("#newUserLastname").addClass("error").focus();
-				return;
-			}
-			if (is.empty(this.newUser.email) || is.not.email(this.newUser.email)) {
-				$("#newUserEmail").addClass("error").focus();
-				return;
-			}
+		add(user) {
+			Ember.set(this, 'newUser', user);
 
-			$("#newUserFirstname").removeClass("error");
-			$("#newUserLastname").removeClass("error");
-			$("#newUserEmail").removeClass("error");
-
-			this.get('userService')
+			return this.get('userService')
 				.add(this.get('newUser'))
 				.then((user) => {
 					this.showNotification('Added');
-					this.set('newUser', { firstname: "", lastname: "", email: "", active: true });
-					$("#newUserFirstname").focus();
 					this.get('model').pushObject(user);
 				})
 				.catch(function (error) {

app/app/pods/customize/users/template.hbs

@@ -1,23 +1,5 @@
 <div class="input-form form-borderless">
-    <form>
-        <div class="heading">
-            <div class="title">Add User</div>
-            <div class="tip">New users receive an invitation email with a random password</div>
-        </div>
-        <div class="input-control">
-            <label>Firstname</label>
-            {{focus-input id="newUserFirstname" type="text" value=newUser.firstname}}
-        </div>
-        <div class="input-control">
-            <label>Lastname</label>
-            {{input id="newUserLastname" type="text" value=newUser.lastname}}
-        </div>
-        <div class="input-control">
-            <label>Email</label>
-            {{input id="newUserEmail" type="text" value=newUser.email}}
-        </div>
-        <div class="regular-button button-blue" {{ action 'add' }}>Add</div>
-    </form>
+    {{user-settings add=(action 'add')}}
 </div>
 
 <div class="clearfix" /> {{settings/user-list users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}}

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

@@ -0,0 +1,19 @@
+<form>
+    <div class="heading">
+        <div class="title">Add User</div>
+        <div class="tip">New users receive an invitation email with a random password</div>
+    </div>
+    <div class="input-control">
+        <label>Firstname</label>
+        {{focus-input id="newUserFirstname" type="text" value=newUser.firstname class=userFirstnameError}}
+    </div>
+    <div class="input-control">
+        <label>Lastname</label>
+        {{input id="newUserLastname" type="text" value=newUser.lastname class=userLastnameError}}
+    </div>
+    <div class="input-control">
+        <label>Email</label>
+        {{input id="newUserEmail" type="text" value=newUser.email class=userEmailError}}
+    </div>
+    <div class="regular-button button-blue" {{ action 'add' }}>Add</div>
+</form>