Login form - route configuration, fields validation, template

faderskd · Feb 27, 2017 · 9a9a766 · 9a9a766
1 parent 4b5e50e
commit 9a9a766
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 0 deletions.
diff --git a/openchat/app/components/login-form.js b/openchat/app/components/login-form.js
@@ -0,0 +1,38 @@
+import Ember from 'ember';
+import {TextInput, MinLength} from '../utils/text-input'
+
+export default Ember.Component.extend({
+  username: TextInput.create({
+    value: '',
+    validators: [
+      new MinLength(1)
+    ]
+  }),
+
+  password: TextInput.create({
+    value: '',
+    validators: [
+      new MinLength(1)
+    ]
+  }),
+
+  init() {
+    this._super(...arguments);
+    let username = this.get('username');
+    let password = this.get('password');
+    this.nonFieldErrors = null;
+  },
+
+  showUsernameErrors: Ember.computed('username.{pristine,errors}', function () {
+    return !this.get('username.pristine') && this.get('username.errors');
+  }),
+
+  showPasswordErrors: Ember.computed('password.{pristine,errors}', function () {
+    return !this.get('password.pristine') && this.get('password.errors');
+  }),
+
+  formInvalid: Ember.computed('showUsernameErrors','showPasswordErrors', function () {
+    return this.get('showUsernameErrors') || this.get('showPasswordErrors');
+  })
+
+});
diff --git a/openchat/app/router.js b/openchat/app/router.js
@@ -8,6 +8,7 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('register');
+  this.route('login');
   this.route('error');
 });
 

diff --git a/openchat/app/routes/login.js b/openchat/app/routes/login.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
diff --git a/openchat/app/templates/components/login-form.hbs b/openchat/app/templates/components/login-form.hbs
@@ -0,0 +1,26 @@
+<form>
+  <div>
+    <label for="username">Username</label>
+    {{ input type="text" value=username.value id="username" class="form-control"
+             name="username" aria-describedby="usernameHelpBlock" }}
+
+    {{#if showUsernameErrors}}
+      <div class="alert alert-danger">
+        This field is required
+      </div>
+    {{/if}}
+  </div>
+
+  <div>
+    <label for="password">Password</label>
+    {{ input type="password" value=password.value id="password" class="form-control"
+             name="password" aria-describedby="passwordHelpBlock" }}
+    {{# if showPasswordErrors }}
+      <div class="alert alert-danger">
+        This field is required
+      </div>
+    {{/if}}
+  </div>
+
+  <button type="submit" class="btn btn-primary" disabled={{formInvalid}}>Login</button>
+</form>
diff --git a/openchat/app/templates/login.hbs b/openchat/app/templates/login.hbs
@@ -0,0 +1 @@
+{{login-form}}