adding form utils and username validation

faderskd · Feb 23, 2017 · 005aefc · 005aefc
1 parent 6358328
commit 005aefc
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/openchat/app/components/register-form.js b/openchat/app/components/register-form.js
@@ -1,4 +1,24 @@
 import Ember from 'ember';
+import {TextInput, MaxLength} from '../utils/text-input';
+
 
 export default Ember.Component.extend({
+  username: TextInput.create({
+    value: '',
+    validators: [new MaxLength(30)]
+  }),
+  email: '',
+  password: '',
+  confirmPassword: '',
+
+  usernameErrors: [],
+
+
+  actions: {
+    onUsernameChange() {
+      let usernameInput = this.get('username');
+      usernameInput.validate();
+    }
+  }
+
 });
diff --git a/openchat/app/templates/components/register-form.hbs b/openchat/app/templates/components/register-form.hbs
@@ -1,19 +1,22 @@
 <form>
   <div>
     <label for="username">Username</label>
-    {{ input type="text" value=username id="username" class="form-control"
-             name="username" aria-describedby="usernameHelpBlock" }}
+    {{ input type="text" value=username.value id="username" class="form-control"
+             name="username" aria-describedby="usernameHelpBlock" key-up=(action 'onUsernameChange') }}
 
-    <div class="alert alert-danger">
-      <div>
-        Username is required.
+    {{#if username.errors}}
+      <div class="alert alert-danger">
+        <div>
+          Username is required.
+        </div>
       </div>
-    </div>
+    {{/if}}
+
   </div>
 
   <div>
     <label for="email">Email</label>
-    {{ input type="text" value=username id="email" class="form-control"
+    {{ input type="text" value=email id="email" class="form-control"
              name="email" aria-describedby="emailHelpBlock" }}
     <div class="alert alert-danger">
       <div>
@@ -24,7 +27,7 @@
 
   <div>
     <label for="password">Password</label>
-    {{ input type="password" value=username id="password" class="form-control"
+    {{ input type="password" value=password id="password" class="form-control"
              name="password" aria-describedby="passwordHelpBlock" }}
     <div class="alert alert-danger">
       <div>
@@ -35,7 +38,7 @@
 
   <div>
     <label for="confirmPassword">Confirm Password</label>
-    {{ input type="password" value=username id="confirmPassword" class="form-control"
+    {{ input type="password" value=confirmPassword id="confirmPassword" class="form-control"
              name="confirmPassword" aria-describedby="confirmPasswordHelpBlock" }}
     <div class="alert alert-danger">
       <div>

diff --git a/openchat/app/utils/text-input.js b/openchat/app/utils/text-input.js
@@ -0,0 +1,40 @@
+import Ember from 'ember';
+
+export const TextInput = Ember.Object.extend({
+  init() {
+    this._super(...arguments);
+    this.set('errors', {});
+  },
+
+  validate() {
+    let validators = this.get('validators');
+    let errors = {};
+    let value = this.get('value');
+    let hasErrors = false;
+
+    for (let i = 0; i < validators.length; i++) {
+      let validator = validators[i];
+
+      if (!validator.isValid(value)) {
+        errors[validator.validatorName] = validator;
+        hasErrors = true;
+      }
+    }
+
+    if (!hasErrors) {
+      errors = false;
+    }
+
+    this.set('errors', errors);
+    console.log(errors);
+  }
+});
+
+export function MaxLength(maxLength) {
+  this.validatorName = 'maxLength';
+  this.maxLength = maxLength;
+
+  this.isValid = function(value) {
+    return value.length <= this.maxLength;
+  };
+}