fix(user): populate correct error message on client (#9043)

* fix(user): populate correct error message on client

* fix(user): populate correct error message on client

frontend/src/api/v1/login/loginPrecheck.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/loginPrecheck';
+import { Props, Signup as PayloadProps } from 'types/api/user/loginPrecheck';
 
 const loginPrecheck = async (
 	props: Props,

frontend/src/api/v1/register/signup.ts

@@ -1,25 +1,21 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/loginPrecheck';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Signup } from 'types/api/user/loginPrecheck';
 import { Props } from 'types/api/user/signup';
 
-const signup = async (
-	props: Props,
-): Promise<SuccessResponse<null | PayloadProps> | ErrorResponse> => {
+const signup = async (props: Props): Promise<SuccessResponseV2<Signup>> => {
 	try {
-		const response = await axios.post(`/register`, {
+		const response = await axios.post<PayloadProps>(`/register`, {
 			...props,
 		});
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data?.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/container/Login/index.tsx

@@ -16,7 +16,7 @@ import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import APIError from 'types/api/error';
-import { PayloadProps as PrecheckResultType } from 'types/api/user/loginPrecheck';
+import { Signup as PrecheckResultType } from 'types/api/user/loginPrecheck';
 
 import { FormContainer, Label, ParentContainer } from './styles';
 

frontend/src/pages/SignUp/SignUp.tsx

@@ -10,13 +10,14 @@ import afterLogin from 'AppRoutes/utils';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
 import { InviteDetails } from 'types/api/user/getInviteDetails';
-import { PayloadProps as LoginPrecheckPayloadProps } from 'types/api/user/loginPrecheck';
+import { Signup as LoginPrecheckPayloadProps } from 'types/api/user/loginPrecheck';
 
 import { FormContainer, Label } from './styles';
 import { isPasswordNotValidMessage, isPasswordValid } from './utils';
@@ -109,31 +110,27 @@ function SignUp(): JSX.Element {
 	]);
 
 	const isSignUp = token === null;
+	const { showErrorModal } = useErrorModal();
 
 	const signUp = async (values: FormValues): Promise<void> => {
 		try {
 			const { organizationName, password, email } = values;
-			const response = await signUpApi({
+			await signUpApi({
 				email,
 				orgDisplayName: organizationName,
 				password,
 				token: params.get('token') || undefined,
 			});
 
-			if (response.statusCode === 200) {
-				const loginResponse = await loginApi({
-					email,
-					password,
-				});
-
-				const { data } = loginResponse;
-				await afterLogin(data.userId, data.accessJwt, data.refreshJwt);
-			}
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
+			const loginResponse = await loginApi({
+				email,
+				password,
 			});
+
+			const { data } = loginResponse;
+			await afterLogin(data.userId, data.accessJwt, data.refreshJwt);
+		} catch (error) {
+			showErrorModal(error as APIError);
 		}
 	};
 

frontend/src/types/api/user/getInviteDetails.ts

@@ -2,7 +2,7 @@ import { User } from 'types/reducer/app';
 import { ROLES } from 'types/roles';
 
 import { Organization } from './getOrganization';
-import { PayloadProps as LoginPrecheckPayloadProps } from './loginPrecheck';
+import { Signup as LoginPrecheckPayloadProps } from './loginPrecheck';
 
 export interface Props {
 	inviteId: string;

frontend/src/types/api/user/loginPrecheck.ts

@@ -1,4 +1,9 @@
 export interface PayloadProps {
+	data: Signup;
+	status: string;
+}
+
+export interface Signup {
 	sso: boolean;
 	ssoUrl?: string;
 	canSelfRegister?: boolean;

pkg/query-service/app/http_handler.go

@@ -2061,7 +2061,7 @@ func (aH *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 
 	var req types.PostableRegisterOrgAndAdmin
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		RespondError(w, &model.ApiError{Err: err, Typ: model.ErrorBadData}, nil)
+		render.Error(w, err)
 		return
 	}