Global modal warning

controllers.application.js

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

export default Controller.extend({
  warningModal: service(),
  
  actions: {
    warningModalResolve() {
      this.warningModal.resolve(...arguments);
    }
  }
});

mixins.warning-route.js

import Mixin from '@ember/object/mixin';
import { inject as service } from '@ember/service';

export default Mixin.create({
  warningModal: service(),

  activate() {
    this.warningModal.show()
      .onCanceled(() => this.transitionTo('index'));
    return true;
  }
});

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('foo');
  this.route('bar');
  this.route('baz');
});

export default Router;

routes.bar.js

import Route from '@ember/routing/route';
import WarningRouteMixin from '../mixins/warning-route';

export default Route.extend(WarningRouteMixin, {
});

routes.baz.js

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

export default Route.extend({
});

routes.foo.js

import Route from '@ember/routing/route';
import WarningRouteMixin from '../mixins/warning-route';

export default Route.extend(WarningRouteMixin, {
});

routes.index.js

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

export default Route.extend({
});

services.warning-modal.js

import Service from '@ember/service';
import { bool } from '@ember/object/computed';
import { tryInvoke } from '@ember/utils';
import Confirmer from 'confirmer';

export default Service.extend({
  isOpen: bool('resolver'),
  
  show() {
    return new Confirmer(resolver => {
      this.set('resolver', resolver);
    }).onDone(() => {
      this.set('resolver', null);
    });
  },
  
  resolve(method, value) {
    tryInvoke(this.resolver, method, [value]);
  }
});

templates.application.hbs

<nav class="nav">
  {{link-to "Index" "index" class="nav-link"}}
  {{link-to "Foo" "foo" class="nav-link"}}
  {{link-to "Bar" "bar" class="nav-link"}}
  {{link-to "Baz" "baz" class="nav-link"}}
</nav>

{{outlet}}

{{#if this.warningModal.isOpen}}
  {{#bs-modal
    onSubmit=(action "warningModalResolve" "confirm")
    onHide=(action "warningModalResolve" "cancel")
    as |modal|
  }}
    {{#modal.header}}
      <h4 class="modal-title">
        <i class="glyphicon glyphicon-alert"></i>
        Alert
      </h4>
    {{/modal.header}}
    {{#modal.body}}
      Are you absolutely sure you want to do that???
    {{/modal.body}}
    {{#modal.footer}}
      {{#bs-button onClick=(action modal.close) type="danger"}}
        Oh no, forget it!
      {{/bs-button}}
      {{#bs-button onClick=(action modal.submit) type="success"}}
        Yeah!
      {{/bs-button}}
    {{/modal.footer}}
  {{/bs-modal}}
{{/if}}

templates.bar.hbs

<h1>Bar Route</h1>

<p>This route <strong>does</strong> have the warning.</p>

templates.baz.hbs

<h1>Baz Route</h1>

<p>This route does <strong>not</strong> have the warning.</p>

templates.foo.hbs

<h1>Foo Route</h1>

<p>This route <strong>does</strong> have the warning.</p>

templates.index.hbs

<h1>Index Route</h1>

<p>This route does <strong>not</strong> have the warning.</p>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-bootstrap": "2.6.0",
    "ember-confirmed": "2.5.1",
    "ember-data": "3.4.2"
  }
}