Show "This page requires authentication" page for protected routes if unauthenticated

Author: Turbo87

app/controllers/catch-all.js

@@ -1,7 +1,10 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class CatchAllController extends Controller {
+  @service session;
+
   @action reload() {
     this.model.transition.retry();
   }

app/routes/-authenticated-route.js

@@ -2,7 +2,6 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default class AuthenticatedRoute extends Route {
-  @service notifications;
   @service router;
   @service session;
 
@@ -12,9 +11,12 @@ export default class AuthenticatedRoute extends Route {
     let result = await this.session.loadUserTask.last;
 
     if (!result.currentUser) {
-      this.notifications.error('Please log in to proceed');
       this.session.savedTransition = transition;
-      this.router.transitionTo('index');
+      this.router.replaceWith('catch-all', {
+        transition,
+        loginNeeded: true,
+        title: 'This page requires authentication',
+      });
     }
   }
 }

app/styles/catch-all.module.css

@@ -18,4 +18,9 @@
     composes: button-reset from '../styles/shared/buttons.module.css';
     composes: link from '../styles/application.module.css';
     font-weight: 500;
+
+    &[disabled] {
+        color: var(--grey600);
+        cursor: wait;
+    }
 }

app/templates/catch-all.hbs

@@ -4,7 +4,17 @@
 
     <h1 local-class="title" data-test-title>{{or @model.title "Page not found"}}</h1>
 
-    {{#if @model.tryAgain}}
+    {{#if @model.loginNeeded}}
+      <button
+        type="button"
+        disabled={{this.session.loginTask.isRunning}}
+        local-class="link"
+        data-test-login
+        {{on "click" (perform this.session.loginTask)}}
+      >
+        Log in with GitHub
+      </button>
+    {{else if @model.tryAgain}}
       <button type="button" local-class="link" data-test-try-again {{on "click" this.reload}}>Try Again</button>
     {{else}}
       <button type="button" local-class="link" data-test-go-back {{on "click" this.back}}>Go Back</button>

tests/acceptance/dashboard-test.js

@@ -10,10 +10,11 @@ import { visit } from '../helpers/visit-ignoring-abort';
 module('Acceptance | Dashboard', function (hooks) {
   setupApplicationTest(hooks);
 
-  test('redirects to / when not logged in', async function (assert) {
+  test('shows "page requires authentication" error when not logged in', async function (assert) {
     await visit('/dashboard');
-    assert.equal(currentURL(), '/');
-    assert.dom('[data-test-notification-message]').hasText('Please log in to proceed');
+    assert.equal(currentURL(), '/dashboard');
+    assert.dom('[data-test-title]').hasText('This page requires authentication');
+    assert.dom('[data-test-login]').exists();
   });
 
   test('shows the dashboard when logged in', async function (assert) {

tests/acceptance/invites-test.js

@@ -40,10 +40,11 @@ module('Acceptance | /me/pending-invites', function (hooks) {
     return { nanomsg, user };
   }
 
-  test('redirects to / when not logged in', async function (assert) {
+  test('shows "page requires authentication" error when not logged in', async function (assert) {
     await visit('/me/pending-invites');
-    assert.equal(currentURL(), '/');
-    assert.dom('[data-test-notification-message]').hasText('Please log in to proceed');
+    assert.equal(currentURL(), '/me/pending-invites');
+    assert.dom('[data-test-title]').hasText('This page requires authentication');
+    assert.dom('[data-test-login]').exists();
   });
 
   test('list all pending crate owner invites', async function (assert) {