Merge branch 'testing' into QF-993-search-as-you-type-POC

locales/en/login.json

@@ -14,7 +14,8 @@
   "login-cta": "Log-in or Sign up now:",
   "login-error": {
     "AuthenticationError": "Authentication failed. Please try again later",
-    "TokenExpiredError": "You have been logged out, please login again."
+    "TokenExpiredError": "You have been logged out, please login again.",
+    "BannedUserError": "Sorry, Your account is banned. Contact Quran.Foundation."
   },
   "login-title": "Login to Quran.com",
   "other-options": "Other Login Options",

src/pages/login.tsx

@@ -8,6 +8,7 @@ import LoginContainer from '@/components/Login/LoginContainer';
 import PageContainer from '@/components/PageContainer';
 import { ToastStatus, useToast } from '@/dls/Toast/Toast';
 import ChaptersData from '@/types/ChaptersData';
+import { BANNED_USER_ERROR_ID } from '@/utils/auth/constants';
 import { getAllChaptersData } from '@/utils/chapter';
 import { getLoginNavigationUrl } from '@/utils/navigation';
 import AuthError from 'types/AuthError';
@@ -26,6 +27,9 @@ const LoginPage: NextPage<Props> = () => {
       if (errorId in AuthError) {
         return t(`login-error.${errorId}`);
       }
+      if (errorId === BANNED_USER_ERROR_ID) {
+        return t(`login-error.${AuthError.BannedUserError}`);
+      }
       return t(`login-error.${AuthError.AuthenticationError}`);
     },
     [t],
@@ -34,10 +38,11 @@ const LoginPage: NextPage<Props> = () => {
   useEffect(() => {
     if (query.error) {
       const errorMessage = getErrorMessage(query.error);
-      toast(errorMessage, {
-        status: ToastStatus.Error,
+      replace(getLoginNavigationUrl(), null, { shallow: true }).then(() => {
+        toast(errorMessage, {
+          status: ToastStatus.Error,
+        });
       });
-      replace(getLoginNavigationUrl(), null, { shallow: true });
     }
   }, [query.error, toast, replace, t, getErrorMessage]);
 

src/utils/auth/api.ts

@@ -1,10 +1,12 @@
 /* eslint-disable max-lines */
 import { NextApiRequest } from 'next';
+import Router from 'next/router';
 import { configureRefreshFetch } from 'refresh-fetch';
 
 import { getTimezone } from '../datetime';
 import { prepareGenerateMediaFileRequestData } from '../media/utils';
 
+import { BANNED_USER_ERROR_ID } from './constants';
 import generateSignature from './signature';
 import BookmarkByCollectionIdQueryParams from './types/BookmarkByCollectionIdQueryParams';
 import GetAllNotesQueryParams from './types/Note/GetAllNotesQueryParams';
@@ -98,11 +100,21 @@ const IGNORE_ERRORS = [
 
 const handleErrors = async (res) => {
   const body = await res.json();
+  const error = body?.error || body?.details?.error;
+  const errorName = body?.name || body?.details?.name;
+
   // sometimes FE needs to handle the error from the API instead of showing a general something went wrong message
-  const shouldIgnoreError = IGNORE_ERRORS.includes(body?.error?.code);
+  const shouldIgnoreError = IGNORE_ERRORS.includes(error?.code);
   if (shouldIgnoreError) {
     return body;
   }
+  // const toast = useToast();
+
+  if (errorName === BANNED_USER_ERROR_ID) {
+    await logoutUser();
+    return Router.push(`/login?error=${errorName}`);
+  }
+
   throw new Error(body?.message);
 };
 

src/utils/auth/constants.ts

@@ -28,3 +28,5 @@ export const NOTIFICATION_SUBSCRIBER_COOKIE_NAME = addEnvSuffixToAuthCookie('not
 export const DEFAULT_PHOTO_URL = `https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y`;
 
 export const AUTH_ONBOARDING_ANNOUNCEMENT_TYPE = 'auth-onboarding';
+
+export const BANNED_USER_ERROR_ID = 'external.banned';

types/AuthError.ts

@@ -2,5 +2,6 @@ enum AuthError {
   AuthenticationError = 'AuthenticationError',
   TokenExpiredError = 'TokenExpiredError',
   GenerateCookieError = 'GenerateCookieError',
+  BannedUserError = 'BannedUserError',
 }
 export default AuthError;