From 2144d82b1ca8edfd056a68488e8dc07a8fa89592 Mon Sep 17 00:00:00 2001
From: luckylooky2 <luckylooky2@naver.com>
Date: Fri, 17 May 2024 09:25:19 +0900
Subject: [PATCH] Feat: move and use built-in OAuth button #35

---
 .../app/core/components/Login/LoginPage.tsx   | 12 ++++--
 .../components/Login/LoginServiceButtons.tsx  | 40 +++++++++----------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx
index ee83ac9a..a06d8b6f 100644
--- a/public/app/core/components/Login/LoginPage.tsx
+++ b/public/app/core/components/Login/LoginPage.tsx
@@ -11,7 +11,6 @@ import { t, Trans } from 'app/core/internationalization';
 
 import { ChangePassword } from '../ForgottenPassword/ChangePassword';
 
-import { LoginButton42Auth } from './LoginButton42Auth';
 import LoginCtrl from './LoginCtrl';
 import { LoginForm } from './LoginForm';
 import { LoginLayout, InnerBox } from './LoginLayout';
@@ -67,7 +66,9 @@ export const LoginPage = () => {
           <div className={styles.loginField}>
             {radioValue === 'user' && (
               <InnerBox>
-                <LoginButton42Auth />
+                <div className={styles.userLogin}>
+                  <LoginServiceButtons />
+                </div>
               </InnerBox>
             )}
             {radioValue === 'administrator' && !isChangingPassword && (
@@ -97,7 +98,7 @@ export const LoginPage = () => {
                     </HorizontalGroup>
                   </LoginForm>
                 )}
-                <LoginServiceButtons />
+
                 {!disableUserSignUp && <UserSignup />}
               </InnerBox>
             )}
@@ -128,6 +129,11 @@ const getStyles = (theme: GrafanaTheme2) => {
       width: '100%',
     }),
 
+    userLogin: css({
+      width: '100%',
+      alignItems: 'center',
+    }),
+
     radioGroup: css({
       display: 'flex',
       gap: '12px',
diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index 084852c3..e9c9dd2e 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -106,25 +106,25 @@ const getServiceStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-const LoginDivider = () => {
-  const styles = useStyles2(getServiceStyles);
-  return (
-    <>
-      <div className={styles.divider.base}>
-        <div>
-          <div className={styles.divider.line} />
-        </div>
-        <div>
-          <span>{!config.disableLoginForm && <span>or</span>}</span>
-        </div>
-        <div>
-          <div className={styles.divider.line} />
-        </div>
-      </div>
-      <div className="clearfix" />
-    </>
-  );
-};
+// const LoginDivider = () => {
+//   const styles = useStyles2(getServiceStyles);
+//   return (
+//     <>
+//       <div className={styles.divider.base}>
+//         <div>
+//           <div className={styles.divider.line} />
+//         </div>
+//         <div>
+//           <span>{!config.disableLoginForm && <span>or</span>}</span>
+//         </div>
+//         <div>
+//           <div className={styles.divider.line} />
+//         </div>
+//       </div>
+//       <div className="clearfix" />
+//     </>
+//   );
+// };
 
 function getButtonStyleFor(service: LoginService, styles: ReturnType<typeof getServiceStyles>, theme: GrafanaTheme2) {
   return cx(
@@ -150,7 +150,7 @@ export const LoginServiceButtons = () => {
   if (hasServices) {
     return (
       <VerticalGroup>
-        <LoginDivider />
+        {/* <LoginDivider /> */}
         {Object.entries(enabledServices).map(([key, service]) => {
           const serviceName = service.name;
           return (