ChangePassword

components.clients.change-password-form\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ChangePasswordForm extends Component {

	@tracked oldPassword;
	@tracked newPassword;
	@tracked confirmPassword;

  // I want the form errors to be cleared everytime the client browses to a page. 
  // Currently, the only way to clear the errors is to refresh the page.
	init() {
		super.init(...arguments);
		this.errors = [];
	}
  
  // This used to work in Ember Classic:
  
  //import { A } from '@ember/array';
  // ...
  //init() {
  //  this._super(... arguments);
  //  this.set('errors', A([]));
	//},

	// Add a new changePassword action to the component to handle the onsubmit method of our 
	// change-password-form.
	@action
	changePassword(ev) {

		// Prevent the form's default action.
		ev.preventDefault();

		// Call the form's changePssword method and pass in the component's values.
		this.args.changePassword({
			oldPassword: this.oldPassword,
			newPassword: this.newPassword,
			confirmPassword: this.confirmPassword
		});
	}
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

controllers.clients.change-password\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ChangePassword extends Controller {

	// Inject the needed services.
	//@service ajax;
	//@service session;

	// Create a changePassword action that will take in the attributes from the change-password-form component.
	@action
	changePassword(attrs) { 

		// Perform basic validations of the form data before pushing the data to the backend.
		if(attrs.newPassword == attrs.oldPassword)
		{
			// Set the errors property.  This will allow the errors to be shown in the UI.
			this.set('errors', [{
				detail: "The old password and new password are the same.  The password was not changed.",
				status: 1003,
				title: 'Change Password Failed'
			}]);
		}
		else if(attrs.newPassword != attrs.confirmPassword)
		{
			// Set the errors property.  This will allow the errors to be shown in the UI.
			this.set('errors', [{
				detail: "The new password and confirm password must be the same value.  The password was not changed.",
				status: 1003,
				title: 'Change Password Failed'
			}]);
		}
	}
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('clients', function() {
		this.route('change-password');
		this.route('myroute2');	});
});

export default Router;

routes.clients.change-password\.js

import Route from '@ember/routing/route';

export default class ChangePasswordRoute extends Route {

	// Create the model function that will return the information needed to change the client's password.
	model() {

		// Return a new model.
		return {
			oldPassword: '',
			newPassword: '',
			confirmPassword: ''
		};
	}
  
  resetController(controller, isExiting) {
    if (isExiting) {
      controller.set('errors', []);
    }
  }
}

routes.clients.myroute2\.js

import Route from '@ember/routing/route';

export default class MyRoute2Route extends Route {
  
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
 
<LinkTo @route="clients.change-password">Change Password</LinkTo> 
<LinkTo @route="clients.myroute2">route2</LinkTo>
<br/>
<br/>
<br/>
{{outlet}}
 
<br>

templates.clients.change-password\.hbs

<!-- 
    Load up the change-password-form template and pass it the changePasswordModel model.  Set the onsubmit to run the changePassword method of the 
    change-password-form component.
-->
<Clients::ChangePasswordForm @changePasswordModel={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />

templates.components.clients.change-password-form\.hbs

    <div>
        <h3>Change Password</h3>
        <form class="m-t" role="form" {{on "submit" this.changePassword}}>
            {{#each @errors as |error|}}
                <div class="error-alert">{{error.detail}}</div>
            {{/each}}
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Old Password" @value={{this.oldPassword}} required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="New Password" @value={{this.newPassword}} required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Confirm Password" @value={{this.confirmPassword}} required="true" />
            </div>
            <div>
                <button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
            </div>
        </form>
    </div>
    
    {{yield}}

templates.components.clients.myroute2\.hbs

my route test 2

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}