devide ExternalAuthButton component

apps/app/src/components/CompleteUserRegistration.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 

apps/app/src/components/LoginForm/ExternalAuthButton.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+import { IExternalAuthProviderType } from '@growi/core';
+import { useTranslation } from 'next-i18next';
+
+const authIcon = {
+  [IExternalAuthProviderType.google]: <span className="growi-custom-icons align-bottom">google</span>,
+  [IExternalAuthProviderType.github]: <span className="growi-custom-icons align-bottom">github</span>,
+  [IExternalAuthProviderType.facebook]: <span className="growi-custom-icons align-bottom">facebook</span>,
+  [IExternalAuthProviderType.oidc]: <span className="growi-custom-icons align-bottom">openid</span>,
+  [IExternalAuthProviderType.saml]: <span className="material-symbols-outlined align-bottom">key</span>,
+};
+
+const authLabel = {
+  [IExternalAuthProviderType.google]: 'Google',
+  [IExternalAuthProviderType.github]: 'GitHub',
+  [IExternalAuthProviderType.facebook]: 'Facebook',
+  [IExternalAuthProviderType.oidc]: 'OIDC',
+  [IExternalAuthProviderType.saml]: 'SAML',
+};
+
+
+export const ExternalAuthButton = ({ authType }: {authType: IExternalAuthProviderType}): JSX.Element => {
+  const { t } = useTranslation();
+
+  const key = `btn-auth-${authType.toString()}`;
+  const btnClass = `btn-auth-${authType.toString()}`;
+
+  const handleLoginWithExternalAuth = useCallback(() => {
+    window.location.href = `/passport/${authType.toString()}`;
+  }, [authType]);
+
+  return (
+    <button
+      key={key}
+      type="button"
+      className={`btn btn-secondary ${btnClass} my-2 col-10 col-sm-7 mx-auto d-flex`}
+      onClick={handleLoginWithExternalAuth}
+    >
+      <span>{authIcon[authType]}</span>
+      <span className="flex-grow-1">{t('Sign in with External auth', { signin: authLabel[authType] })}</span>
+    </button>
+  );
+};

apps/app/src/components/LoginForm.tsx → apps/app/src/components/LoginForm/LoginForm.tsx

@@ -15,50 +15,15 @@ import type { IErrorV3 } from '~/interfaces/errors/v3-error';
 import { RegistrationMode } from '~/interfaces/registration-mode';
 import { toArrayIfNot } from '~/utils/array-utils';
 
-import { CompleteUserRegistration } from './CompleteUserRegistration';
+import { CompleteUserRegistration } from '../CompleteUserRegistration';
+
+import { ExternalAuthButton } from './ExternalAuthButton';
 
 import styles from './LoginForm.module.scss';
 
 const moduleClass = styles['login-form'];
 
 
-const ExternalAuthButton = ({ authType }: {authType: IExternalAuthProviderType}): JSX.Element => {
-  const { t } = useTranslation();
-
-  const authIcon = {
-    google: <span className="growi-custom-icons align-bottom">google</span>,
-    github: <span className="growi-custom-icons align-bottom">github</span>,
-    facebook: <span className="growi-custom-icons align-bottom">facebook</span>,
-    oidc: <span className="growi-custom-icons align-bottom">openid</span>,
-    saml: <span className="material-symbols-outlined align-bottom">key</span>,
-  };
-  const authBtn = `btn-auth-${authType.toString()}`;
-  const signin = {
-    google: 'Google',
-    github: 'GitHub',
-    facebook: 'Facebook',
-    oidc: 'OIDC',
-    saml: 'SAML',
-  };
-
-  const handleLoginWithExternalAuth = () => {
-    window.location.href = `/passport/${authType.toString()}`;
-  };
-
-  return (
-    <button
-      key={`btn-auth-${authType.toString()}`}
-      type="button"
-      className={`btn btn-secondary ${authBtn} my-2 col-10 col-sm-7 mx-auto d-flex`}
-      onClick={handleLoginWithExternalAuth}
-    >
-      <span>{authIcon[authType.toString()]}</span>
-      <span className="flex-grow-1">{t('Sign in with External auth', { signin: signin[authType.toString()] })}</span>
-    </button>
-  );
-};
-
-
 type LoginFormProps = {
   username?: string,
   name?: string,
@@ -315,7 +280,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
         </div>
       </>
     );
-  }, [props, t, enabledExternalAuthType]);
+  }, [props, t]);
 
   const resetRegisterErrors = useCallback(() => {
     if (registerErrors.length === 0) return;

apps/app/src/components/LoginForm/index.ts

@@ -0,0 +1 @@
+export * from './LoginForm';