Octane way of changing password

components.change-password\.js

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

const MESSAGES = {
  staled: 'The old password and new password are the same. The password was not changed.',
  invalid: 'The new password and confirm password must be the same value. The password was not changed.'
};

export default class extends Component {
  get isPrestine() {
    return !this.args.model.newPassword && !this.args.model.oldPassword;
  }
  
  get isStaled() {
    const { oldPassword, newPassword } = this.args.model;
    return !this.isPrestine && oldPassword === newPassword;
  }
  
  get invalidConfirmation() {
    const { newPassword, confirmation } = this.args.model;
    return !this.isPrestine && newPassword !== confirmation;
  }
  
  get errors() {
    let errors = [];
    
    if (this.isStaled) {
      errors.pushObject({ message: MESSAGES.staled });
    }
    
    if (this.invalidConfirmation) {
      errors.pushObject({ message: MESSAGES.invalid });
    }
    
    return errors;
  }
  
  // realtime error checks
  // get showErrors() {
  //   return this.errors.length > 0;
  // }
  
  // manual error checks
  @tracked
  showErrors = false;
  
  @action submit(event) {
    event.preventDefault();
    
    // manual error checks
    this.showErrors = this.errors.length > 0;
  }
}

controllers.application\.js

import Controller from '@ember/controller';

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

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('password');
});

export default Router;

routes.password\.js

import Route from '@ember/routing/route';
import { tracked } from '@glimmer/tracking';

class Credential {
  @tracked oldPassword;
  
  @tracked newPassword;
  
  @tracked confirmation;
}

export default class extends Route {
  model() {
    return new Credential();
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<LinkTo @route="index">Back</LinkTo>
<LinkTo @route="password">Password</LinkTo>
<br>
{{outlet}}
<br>
<br>

templates.components.change-password\.hbs

{{#if this.showErrors}}
  <div class="errors">
    {{#each this.errors key="@index" as |error|}}
    	<p>{{error.message}}</p>
    {{/each}}
  </div>
{{/if}}

<form {{on "submit" this.submit}}>
  <div class="field">
    <Input @value={{@model.oldPassword}} placeholder="old password" />
  </div>
  
  <div class="field">
    <Input @value={{@model.newPassword}} placeholder="new password" />
  </div>
  
  <div class="field">
    <Input @value={{@model.confirmation}} placeholder="confirmation" />
  </div>
  
  <button type="submit" disabled={{this.isPrestine}}>Submit</button>
</form>

templates.password\.hbs

<ChangePassword @model={{@model}} />

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"
  }
}