minLength validator + username minLength validation

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

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/openchat/app/components/register-form.js b/openchat/app/components/register-form.js
@@ -1,11 +1,11 @@
 import Ember from 'ember';
-import {TextInput, MaxLength} from '../utils/text-input';
+import {TextInput, MaxLength, MinLength} from '../utils/text-input';
 
 
 export default Ember.Component.extend({
   username: TextInput.create({
     value: '',
-    validators: [new MaxLength(30)]
+    validators: [new MaxLength(30), new MinLength(6)]
   }),
   email: '',
   password: '',
@@ -16,8 +16,7 @@ export default Ember.Component.extend({
 
   actions: {
     onUsernameChange() {
-      let usernameInput = this.get('username');
-      usernameInput.validate();
+      this.get('username').validate();
     }
   }
 

diff --git a/openchat/app/templates/components/register-form.hbs b/openchat/app/templates/components/register-form.hbs
@@ -5,11 +5,22 @@
              name="username" aria-describedby="usernameHelpBlock" key-up=(action 'onUsernameChange') }}
 
     {{#if username.errors}}
-      <div class="alert alert-danger">
-        <div>
-          Username is required.
+      {{#if username.errors.maxLength}}
+        <div class="alert alert-danger">
+          <div>
+            Username must contain max 30 characters.
+          </div>
         </div>
-      </div>
+      {{/if}}
+
+      {{#if username.errors.minLength}}
+        <div class="alert alert-danger">
+          <div>
+            Username must contain min 6 characters.
+          </div>
+        </div>
+      {{/if}}
+
     {{/if}}
 
   </div>

diff --git a/openchat/app/utils/text-input.js b/openchat/app/utils/text-input.js
@@ -3,7 +3,7 @@ import Ember from 'ember';
 export const TextInput = Ember.Object.extend({
   init() {
     this._super(...arguments);
-    this.set('errors', {});
+    this.set('errors', false);
   },
 
   validate() {
@@ -16,8 +16,10 @@ export const TextInput = Ember.Object.extend({
       let validator = validators[i];
 
       if (!validator.isValid(value)) {
-        errors[validator.validatorName] = validator;
+        errors[validator.validatorName] = true;
         hasErrors = true;
+      } else {
+        errors[validator.validatorName] = false;
       }
     }
 
@@ -26,7 +28,6 @@ export const TextInput = Ember.Object.extend({
     }
 
     this.set('errors', errors);
-    console.log(errors);
   }
 });
 
@@ -38,3 +39,12 @@ export function MaxLength(maxLength) {
     return value.length <= this.maxLength;
   };
 }
+
+export function MinLength(minLength) {
+  this.validatorName = 'minLength';
+  this.minLength = minLength;
+
+  this.isValid = function(value) {
+    return value.length >= this.minLength;
+  };
+}