From 005aefc720afcb2f9c282fbd5d3eae94e2a3a860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20B=C4=99czkowski?= Date: Thu, 23 Feb 2017 18:35:37 +0100 Subject: [PATCH] adding form utils and username validation --- openchat/app/components/register-form.js | 20 ++++++++++ .../templates/components/register-form.hbs | 21 +++++----- openchat/app/utils/text-input.js | 40 +++++++++++++++++++ 3 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 openchat/app/utils/text-input.js diff --git a/openchat/app/components/register-form.js b/openchat/app/components/register-form.js index 926b613..6a5f7f0 100644 --- 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 index 6b1df3a..224f4bc 100644 --- a/openchat/app/templates/components/register-form.hbs +++ b/openchat/app/templates/components/register-form.hbs @@ -1,19 +1,22 @@
- {{ 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') }} -
-
- Username is required. + {{#if username.errors}} +
+
+ Username is required. +
-
+ {{/if}} +
- {{ 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" }}
@@ -24,7 +27,7 @@
- {{ 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" }}
@@ -35,7 +38,7 @@
- {{ 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" }}
diff --git a/openchat/app/utils/text-input.js b/openchat/app/utils/text-input.js new file mode 100644 index 0000000..bc1539a --- /dev/null +++ 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; + }; +}