Redirect service ember

components.redirection-modal.js

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

export default Ember.Component.extend({
	redirection: service(),
  
  tagName: ''
});

controllers.application.js

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

export default Controller.extend({
	redirection: service(),
  appName: 'Ember Twiddle'
});

services.redirection.js

import Service from '@ember/service';
import { set } from '@ember/object';
import { inject as service } from '@ember/service';

export default Service.extend({
  router: service(),
  __route: null,
  displayModal: false,
  __setUpRedirection(url) {
    set(this, '__route', url);
    set(this, 'displayModal', true);
    // Setup the query param and watching it, this will be called
    // when a user uses the browser's back button
    this.router.addObserver('currentRouteName', () => {
      this.__cancelRedirection();
    });
  },
  actions: {
    redirect(event) {
      event.preventDefault();
      let target = event.target;
      while (target.tagName !== 'A') {
        target = target.parentNode;
      }
      this.__setUpRedirection(target.href);
    },
    proceedRedirection() {
      window.location = this.__route;
    },
    cancelRedirection() {
      this.__cancelRedirection();
    }
  },
  __cancelRedirection() {
    set(this, '__route', null);
    set(this, 'displayModal', false);
    this.router.removeObserver('currentRouteName');
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.ui-modal__shadow {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  align-items: center;
  background-color: rgba(152,152,152,.37);
  display: flex;
  justify-content: center;
  z-index: 10;
}
.ui-modal__dialog {
  width: 590px;
  max-height: 100vh;
  background-color: #f2f2f5;
  border-radius: 4px;
  box-shadow: 0 12px 25px 0 rgba(0,0,0,.13);
  overflow-y: auto;
}
.ui-modal__header {
  align-items: flex-start;
  background-color: #575660;
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
}
.ui-modal__title {
  max-width: 500px;
  font-size: 24px;
  align-self: center;
  color: #fff;
  margin: 0;
}
.ui-modal__body {
  padding: 38px 34px 20px;
}
.ui-modal__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 34px 30px;
}
.ui-modal__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 34px 30px;
  justify-content: flex-end;
}
.ui-modal__footer__button-container {
  flex-shrink: 0;
}
.close {
  height: 40px;
  width: 42px;
  background-color: rgba(255,255,255,.1);
  border: none;
  border-radius: 3px;
  padding: 0;
}
.button {
  height: 40px;
  font-weight: 600;
  background-color: #e1e2e8;
  background-image: none;
  border: none;
  border-radius: 3px;
  color: #4e4d59;
  line-height: 40px;
  padding: 0 17px;
  transition: background-color 260ms;
}
.button--blue {
  background-color: #6ac1b9;
  color: white;
}
.button--with-left-icon .button__label {
  margin-left: 10px;
}

templates.application.hbs

{{#if redirection.displayModal}}
	{{redirection-modal}}
{{/if}}

<br>
<a href="https://emberjs.com" onclick={{action "redirect" target=redirection}}> Visit emberjs website</a>
<br>

templates.components.redirection-modal.hbs

<div class="ui-modal__shadow">
  	<div tabindex="0" class="ui-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-modal="true">
    	<div class="ui-modal__header">
      	<h1 id="modal-title" class="ui-modal__title">
        	Redirection to the old admin
     		</h1>
        <button type="button" aria-label="Close" class="close" onclick={{action "cancelRedirection" target=redirection}}>
          {{fa-icon "times"}}
       	</button>
   		</div>
      <div class="ui-modal__body">
      	<p>The new version of this page is not yet available. You are going to be redirected to the old admin console. Do you want to continue?</p>
     	</div>
      <div class="ui-modal__footer">
      	<div class="ui-modal__footer__button-container">
        	<button type="button" class="button button--with-left-icon" onclick={{action "cancelRedirection" target=redirection}}>
          	{{fa-icon "times"}}
            <span class="button__label">Cancel</span>
         	</button>
          <button type="button" class="button button--blue button--with-left-icon" onclick={{action "proceedRedirection" target=redirection}}>
          	{{fa-icon "check"}}
            <span class="button__label">Proceed</span>
         	</button>
      	</div>
     	</div>
  	</div>
  </div>

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-font-awesome": "3.1.0"
  }
}