apply IExternalAccountLoginError

packages/app/src/components/LoginForm.tsx

@@ -7,8 +7,9 @@ import { useRouter } from 'next/router';
 import ReactCardFlip from 'react-card-flip';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
+import type { IExternalAccountLoginError } from '~/interfaces/errors/external-account-login-error';
 import { LoginErrorCode } from '~/interfaces/errors/login-error';
-import { IErrorV3 } from '~/interfaces/errors/v3-error';
+import type { IErrorV3 } from '~/interfaces/errors/v3-error';
 import { RegistrationMode } from '~/interfaces/registration-mode';
 import { toArrayIfNot } from '~/utils/array-utils';
 
@@ -27,7 +28,7 @@ type LoginFormProps = {
   isLdapSetupFailed: boolean,
   objOfIsExternalAuthEnableds?: any,
   isMailerSetup?: boolean,
-  loginError?: IErrorV3,
+  loginError?: IExternalAccountLoginError,
 }
 export const LoginForm = (props: LoginFormProps): JSX.Element => {
   const { t } = useTranslation();
@@ -45,7 +46,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   // For Login
   const [usernameForLogin, setUsernameForLogin] = useState('');
   const [passwordForLogin, setPasswordForLogin] = useState('');
-  const [loginErrors, setLoginErrors] = useState<IErrorV3[]>(props.loginError != null ? [props.loginError] : []);
+  const [loginErrors, setLoginErrors] = useState<IErrorV3[] | IExternalAccountLoginError[]>(props.loginError != null ? [props.loginError] : []);
   // For Register
   const [usernameForRegister, setUsernameForRegister] = useState('');
   const [nameForRegister, setNameForRegister] = useState('');
@@ -101,7 +102,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }, [passwordForLogin, resetLoginErrors, router, usernameForLogin]);
 
   // separate errors based on error code
-  const separateErrorsBasedOnErrorCode = useCallback((errors: IErrorV3[]) => {
+  const separateErrorsBasedOnErrorCode = useCallback((errors: IErrorV3[] | IExternalAccountLoginError[]) => {
     const loginErrorListForDangerouslySetInnerHTML: IErrorV3[] = [];
     const loginErrorList: IErrorV3[] = [];
 

packages/app/src/pages/login.page.tsx

@@ -5,11 +5,10 @@ import {
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
-
 import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 import { LoginForm } from '~/components/LoginForm';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
-import type { IErrorV3 } from '~/interfaces/errors/v3-error';
+import { IExternalAccountLoginError, isExternalAccountLoginError } from '~/interfaces/errors/external-account-login-error';
 import type { RegistrationMode } from '~/interfaces/registration-mode';
 
 import {
@@ -32,7 +31,7 @@ type Props = CommonProps & {
   isLdapSetupFailed: boolean,
   isPasswordResetEnabled: boolean,
   isEmailAuthenticationEnabled: boolean,
-  loginError?: IErrorV3,
+  loginError?: IExternalAccountLoginError,
 };
 
 const LoginPage: NextPage<Props> = (props: Props) => {
@@ -125,8 +124,10 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   const props: Props = result.props as Props;
 
   if (context.query.loginError != null) {
-    const loginError = context.query.loginError as unknown as IErrorV3;
-    props.loginError = { ...loginError };
+    const loginError = context.query.loginError;
+    if (isExternalAccountLoginError(loginError)) {
+      props.loginError = { ...loginError as IExternalAccountLoginError };
+    }
   }
 
   injectServerConfigurations(context, props);