[email protected] - Use external redirection for login page (#1899)

* f-account-info - Removed debug code + used external redi for 403 errors + fixed up tests and storybook * f-account-info - Forgot to remove debug code, doh Co-authored-by: billy.oliver <[email protected]>
justeattakeaway · Jun 1, 2022 · 82b468c · 82b468c
1 parent f4bc2fe
commit 82b468c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 32 deletions.
diff --git a/packages/components/pages/f-account-info/CHANGELOG.md b/packages/components/pages/f-account-info/CHANGELOG.md
@@ -4,6 +4,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v0.23.0
+------------------------------
+*May 31 2022*
+
+### Removed
+- Debug code
+
+### Changed
+- Used external redirection instead of internal for 403 errors
+
+
 v0.22.0
 ------------------------------
 *May 24 2022*

diff --git a/packages/components/pages/f-account-info/package.json b/packages/components/pages/f-account-info/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-account-info",
   "description": "Fozzie Account Info - The account information page",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "main": "dist/f-account-info.umd.min.js",
   "maxBundleSize": "100kB",
   "files": [

diff --git a/packages/components/pages/f-account-info/src/components/AccountInfo.vue b/packages/components/pages/f-account-info/src/components/AccountInfo.vue
@@ -369,21 +369,11 @@ export default {
             try {
                 await this.loadConsumerDetails({ api: this.consumerApi, authToken: this.authToken });
                 this.$log.info('Consumer details fetched successfully', standardLogTags);
-                // debug
-                let err;
-                if (window.location.search === '?debug') {
-                    err = new Error('DEBUG - 403 error');
-                    err.response = {
-                        status: 403
-                    };
-                    throw err;
-                }
-                // debug
             } catch (error) {
                 if (error && error.response && this.loginPath && error.response.status === 403) {
                     // Redirect to login page if the user is not authenticated then return here once logged in.
                     this.$log.warn('Unauthenticated fetching consumer details', error, standardLogTags);
-                    this.$router.push(`${this.loginPath}?returnurl=${window.location.pathname}`);
+                    this.redirectToLogin();
                 } else {
                     this.$log.error('Error fetching consumer details', error, standardLogTags);
                     this.handleLoadErrorState(error);
@@ -468,6 +458,16 @@ export default {
                     label: 'address change intent'
                 });
             }
+        },
+
+        /**
+        * Redirect to an external login page
+        * (check/tidy up the login path due to unknown source)
+        */
+        redirectToLogin () {
+            const login = this.loginPath.trim();
+            const path = `${login.charAt(0) === '/' ? login : `/${login}`}`;
+            window.location.href = `${path}?returnurl=${window.location.pathname}`;
         }
     }
 };

diff --git a/packages/components/pages/f-account-info/src/components/_tests/AccountInfo.test.js b/packages/components/pages/f-account-info/src/components/_tests/AccountInfo.test.js
@@ -15,19 +15,21 @@ let wrapper;
 let cookiesSpy;
 let httpSpy;
 let pushEventSpy;
-let pushRouteSpy;
 let sutMocks;
 let sutProps;
 let dataDefaults;
 let initialiseSpy;
 let windowSpy;
 let windowCopy;
+let windowMock;
 
 const GetWindowMock = () => {
     windowCopy = { ...global.window };
-    const windowMock = ({
+    windowMock = ({
         ...windowCopy,
-        location: { pathname: '/account/info' }
+        location: {
+            pathname: '/account/info'
+        }
     });
     windowSpy = jest.spyOn(global, 'window', 'get');
     windowSpy.mockImplementation(() => windowMock);
@@ -93,9 +95,6 @@ describe('AccountInfo', () => {
         cookiesSpy = jest.fn();
         httpSpy = jest.fn();
         pushEventSpy = jest.fn();
-        pushRouteSpy = jest.fn();
-
-
 
         sutMocks = {
             $parent: {
@@ -107,9 +106,6 @@ describe('AccountInfo', () => {
             $gtm: {
                 pushEvent: pushEventSpy
             },
-            $router: {
-                push: pushRouteSpy
-            },
             window: GetWindowMock()
         };
         sutProps = {
@@ -271,7 +267,7 @@ describe('AccountInfo', () => {
                 err,
                 expect.arrayContaining(['account-pages', 'account-info'])
             );
-            expect(pushRouteSpy).toHaveBeenCalledWith('/account/login?returnurl=/account/info');
+            expect(windowMock.location.href).toBe('/account/login?returnurl=/account/info');
         });
 
         it('should log error and not redirect if 403 and no loginPath supplied', async () => {
@@ -299,7 +295,7 @@ describe('AccountInfo', () => {
                 err,
                 expect.arrayContaining(['account-pages', 'account-info'])
             );
-            expect(pushRouteSpy).not.toHaveBeenCalled();
+            expect(windowMock.location.href).toBeUndefined();
         });
 
         it('should contain the correct url to change password', async () => {

diff --git a/packages/components/pages/f-account-info/stories/AccountInfo.stories.js b/packages/components/pages/f-account-info/stories/AccountInfo.stories.js
@@ -32,17 +32,18 @@ export const AccountInfoComponent = (args, { argTypes }) => ({
             fAccountInfoModule
         }
     }),
-    template:
-    `<account-info
-        :locale="locale"
-        authToken="some-auth-token"
-        :isAuthFinished="true"
-        smart-gateway-base-url=""
-    />`
+    template: '<account-info v-bind="$props" />'
 });
 
 AccountInfoComponent.storyName = 'f-account-info';
 
+AccountInfoComponent.args = {
+    loginPath: '/account/login',
+    authToken: 'some-auth-token',
+    isAuthFinished: true,
+    smartGatewayBaseUrl: ''
+};
+
 AccountInfoComponent.argTypes = {
     locale: {
         control: { type: 'select' },

diff --git a/packages/components/pages/f-account-info/stories/story.helper.js b/packages/components/pages/f-account-info/stories/story.helper.js
@@ -3,6 +3,7 @@ import getConsumerAddresses from './payloads/get-consumer-addresses.json';
 
 const httpStatusCodes = {
     ok: 200,
+    unauthorized: 403,
     internalServerError: 500
 };
 
@@ -16,7 +17,8 @@ const apiStates = {
     apiGetDetailsFailed: 'get-details-fails',
     apiGetAddressFailed: 'get-address-fails',
     apiPatchDetailsFailed: 'patch-details-fails',
-    apiPatchAddressFailed: 'patch-address-fails'
+    apiPatchAddressFailed: 'patch-address-fails',
+    apiGetDetails403: 'get-details-403'
 };
 
 // Consumer Details
@@ -38,6 +40,15 @@ const consumerDetailsGET500 = {
     responseData: null
 };
 
+const consumerDetailsGET403 = {
+    // Failed GET consumer details
+    url: '/consumer',
+    method: httpVerbs.get,
+    responseStatus: httpStatusCodes.unauthorized,
+    requestData: null,
+    responseData: null
+};
+
 const consumerDetailsPATCH200 = {
     // PATCH consumer details successfully
     url: '/consumer',
@@ -130,6 +141,15 @@ const apiDefinitions = [
             consumerAddressPATCH200
         ]
     },
+    {
+        state: apiStates.apiGetDetails403,
+        states: [
+            consumerDetailsGET403, // Unauthorized
+            consumerDetailsPATCH200,
+            consumerAddressGET200,
+            consumerAddressPATCH200
+        ]
+    },
     {
         state: apiStates.apiGetAddressFailed,
         states: [
@@ -149,7 +169,8 @@ export const apiStateOptions = {
         apiStates.apiGetDetailsFailed,
         apiStates.apiGetAddressFailed,
         apiStates.apiPatchDetailsFailed,
-        apiStates.apiPatchAddressFailed
+        apiStates.apiPatchAddressFailed,
+        apiStates.apiGetDetails403
     ]
 };