WIP refactor password reset route to use a component

app/app/components/password-reset.js

@@ -0,0 +1,57 @@
+import Ember from 'ember';
+
+const {
+	isEmpty,
+	isEqual,
+
+} = Ember;
+
+export default Ember.Component.extend({
+	password: "",
+	passwordConfirm: "",
+	mustMatch: false,
+	passwordEmpty: computed('passwordError', {
+		get() {
+			if (this.get('passwordError')) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+	confirmEmpty: computed('passwordConfirmError', {
+		get() {
+			if (this.get('passwordConfirmError')) {
+				return `error`;
+			}
+
+			return;
+		}
+	}),
+
+	actions: {
+		reset() {
+			let password = this.get('password');
+			let passwordConfirm = this.get('passwordConfirm');
+
+			if (isEmpty(password)) {
+				Ember.set(this, 'passwordError', true);
+				return $("#newPassword").focus();
+			}
+
+			if (isEmpty(passwordConfirm)) {
+				Ember.set(this, 'passwordConfirmError', true);
+				return $("#passwordConfirm").focus();
+			}
+
+			if (!isEqual(password, passwordConfirm)) {
+				$("#newPassword").addClass("error").focus();
+				$("#passwordConfirm").addClass("error");
+				this.set('mustMatch', true);
+				return;
+			}
+
+			this.get('reset')();
+		}
+	}
+});

app/app/pods/auth/reset/template.hbs

@@ -2,23 +2,5 @@
     <div class="logo">
         <img src="assets/img/logo-color.png" title="Documize" alt="Documize" class="responsive-img" />
     </div>
-    <div class="login-form">
+    {{password-reset reset=(action 'reset')}}
-        <form {{action 'reset' on="submit"}}>
-            <div class="input-control">
-                <label>New Password</label>
-                <div class="tip">Choose a strong password</div>
-                {{focus-input type="password" value=password id="newPassword"}}
-            </div>
-            <div class="input-control">
-                <label>Confirm Password</label>
-                <div class="tip">Please type your new password again</div>
-                {{input type="password" value=passwordConfirm id="passwordConfirm"}}
-            </div>
-            <div class="clearfix" />
-            <div class="margin-top-10 margin-bottom-20">
-                <button type="submit" class="regular-button button-blue">Reset</button>
-                <span class="{{unless mustMatch "hide"}} color-red margin-left-20">Passwords must match</span>
-            </div>
-        </form>
-    </div>
 </div>

app/app/templates/components/password-reset.hbs

@@ -0,0 +1,19 @@
+<div class="login-form">
+    <form {{action 'reset' on="submit"}}>
+        <div class="input-control">
+            <label>New Password</label>
+            <div class="tip">Choose a strong password</div>
+            {{focus-input type="password" value=password id="newPassword" class=passwordError}}
+        </div>
+        <div class="input-control">
+            <label>Confirm Password</label>
+            <div class="tip">Please type your new password again</div>
+            {{input type="password" value=passwordConfirm id="passwordConfirm" class=confirmEmpty}}
+        </div>
+        <div class="clearfix" />
+        <div class="margin-top-10 margin-bottom-20">
+            <button type="submit" class="regular-button button-blue">Reset</button>
+            <span class="{{unless mustMatch "hide"}} color-red margin-left-20">Passwords must match</span>
+        </div>
+    </form>
+</div>