Basic Ember Login Form

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  init() {
    this._super(...arguments);
    let passwordValidation = [{
    	message: "Must be at least 8 characters",
    	validate: (inputValue) => {
    		let inputLength = inputValue.length;
      	return inputLength >= 8;
    	}
  	}];
    let confirmPasswordValidation = [{
    	message: "Must be at least 8 characters",
    	validate: (inputValue) => {
    		let inputLength = inputValue.length;
        return inputLength >= 8;
   	 }
    },
  	{
    	message: "Passwords must match",
    	validate: (inputValue) => {
     		let firstPassword = this.get('password');
      	return firstPassword === inputValue;
    	}
  	}];
    this.set('passwordValidation', passwordValidation);
    this.set('confirmPasswordValidation', confirmPasswordValidation);
  },
  appName: 'Basic Login Form',
  actions: {
    submitForm() {
      this.set('userRegistered', true);
      Ember.run.later(this, function() {
        this.set('userRegistered', false);
        this.set('username', '');
        this.set('password', '');
        this.set('confirmPassword', '');
      }, 1500);
    }
  }
});

templates.application.hbs

<div class="layout-column layout-align-start-center">
	<h1>{{appName}}</h1>
	<br>
	{{#liquid-if userRegistered use="crossFade"}}
  	<div class="layout-column layout-align-start-center">
			<b>Congratulations! You successfully registered!</b>
    	<img src="https://fmi.com.ph/graphicexpo2017/wp-content/uploads/2014/04/Registration-Successful-Check.png">
     </div>
	{{else}}
		{{#paper-form onSubmit=(action 'submitForm') as |form|}}
    	<div class="layout-column layout-align-start-center">
				{{paper-input label="Username" value=username onChange=(action (mut username)) maxlength=20 required=true}}
  			{{paper-input label="Password" type="password" value=password onChange=(action (mut password)) customValidations=passwordValidation required=true}}
  			{{paper-input label="Confirm Password" type="password" value=confirmPassword onChange=(action (mut confirmPassword)) customValidations=confirmPasswordValidation required=true}}
    		{{paper-button label="Register" raised=true primary=true onClick=form.onSubmit}}
      </div>
		{{/paper-form}}
	{{/liquid-if}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-paper": "v1.0.0-alpha.19",
    "liquid-fire": "0.27.1"
  }
}