fix: show invalid token page when token error is received (#785)

frontend/cypress/integration/auth/auth.spec.ts

@@ -190,4 +190,9 @@ describe('auth', () => {
         cy.get('[data-test="LOGIN_EMAIL_ID"]').type(email);
         cy.get("[data-test='LOGIN_BUTTON']").click();
     });
+
+    it('renders invalid token page when token is invalid', () => {
+        cy.visit('/new-user?token=hellotokenworld');
+        cy.get('[data-test="INVALID_TOKEN_BUTTON"]').should('be.visible');
+    });
 });

frontend/src/component/user/common/InvalidToken/InvalidToken.tsx

@@ -1,11 +1,19 @@
 import { Button, Typography } from '@material-ui/core';
 import { Link } from 'react-router-dom';
+import { INVALID_TOKEN_BUTTON } from 'testIds';
 import { useCommonStyles } from '../../../../common.styles';
+import classnames from 'classnames';
 
 const InvalidToken = () => {
     const commonStyles = useCommonStyles();
     return (
-        <div className={commonStyles.contentSpacingY}>
+        <div
+            className={classnames(
+                commonStyles.contentSpacingY,
+                commonStyles.flexColumn,
+                commonStyles.itemsCenter
+            )}
+        >
             <Typography variant="h2" className={commonStyles.title}>
                 Invalid token
             </Typography>
@@ -19,6 +27,7 @@ const InvalidToken = () => {
                 color="primary"
                 component={Link}
                 to="forgotten-password"
+                data-test={INVALID_TOKEN_BUTTON}
             >
                 Reset password
             </Button>

frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts

@@ -2,15 +2,13 @@ import useSWR, { SWRConfiguration } from 'swr';
 import useQueryParams from '../../../useQueryParams';
 import { useState, useEffect } from 'react';
 import { formatApiPath } from '../../../../utils/format-path';
-import handleErrorResponses from '../httpErrorResponseHandler';
 
 const getFetcher = (token: string) => () => {
     const path = formatApiPath(`auth/reset/validate?token=${token}`);
+    // Don't use handleErrorResponses here, because we need to read the error.
     return fetch(path, {
         method: 'GET',
-    })
-        .then(handleErrorResponses('Password reset'))
-        .then(res => res.json());
+    }).then(res => res.json());
 };
 
 const INVALID_TOKEN_ERROR = 'InvalidTokenError';

frontend/src/testIds.js

@@ -14,6 +14,7 @@ export const LOGIN_BUTTON = 'LOGIN_BUTTON';
 export const LOGIN_PASSWORD_ID = 'LOGIN_PASSWORD_ID';
 export const SSO_LOGIN_BUTTON = 'SSO_LOGIN_BUTTON';
 export const FORGOTTEN_PASSWORD_FIELD = 'FORGOTTEN_PASSWORD_FIELD';
+export const INVALID_TOKEN_BUTTON = 'INVALID_TOKEN_BUTTON';
 
 /* STRATEGY */
 export const FEATURE_ENVIRONMENT_ACCORDION = 'FEATURE_ENVIRONMENT_ACCORDION';