From ac84c375c04dcdaa4e967dba836aa2677b241165 Mon Sep 17 00:00:00 2001
From: Damien Degois <damien@degois.info>
Date: Sun, 27 Aug 2023 21:36:02 +0200
Subject: [PATCH] feat: add customizable generic oidc login button

Rebased and modified to reflect https://github.com/project-zot/zot/pull/1691 conclusion

Signed-off-by: Damien Degois <damien@degois.info>
---
 src/components/Login/SignIn.jsx                    | 9 +++++----
 src/components/Login/ThirdPartyLoginComponents.jsx | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Login/SignIn.jsx b/src/components/Login/SignIn.jsx
index f19c9f4..f1f197e 100644
--- a/src/components/Login/SignIn.jsx
+++ b/src/components/Login/SignIn.jsx
@@ -20,7 +20,7 @@ import Alert from '@mui/material/Alert';
 import CircularProgress from '@mui/material/CircularProgress';
 import Loading from '../Shared/Loading';
 
-import { GoogleLoginButton, GithubLoginButton, DexLoginButton } from './ThirdPartyLoginComponents';
+import { GoogleLoginButton, GithubLoginButton, OIDCLoginButton } from './ThirdPartyLoginComponents';
 
 // styling
 import { makeStyles } from '@mui/styles';
@@ -284,14 +284,15 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
     let isGoogle = isObject(authMethods.openid?.providers?.google);
     // let isGitlab = isObject(authMethods.openid?.providers?.gitlab);
     let isGithub = isObject(authMethods.openid?.providers?.github);
-    let isDex = isObject(authMethods.openid?.providers?.dex);
+    let isOIDC = isObject(authMethods.openid?.providers?.oidc);
+    let oidcName = authMethods.openid?.providers?.oidc?.name;
 
     return (
       <Stack direction="column" spacing="1rem" className={classes.thirdPartyLoginContainer}>
         {isGithub && <GithubLoginButton handleClick={handleClickExternalLogin} />}
         {isGoogle && <GoogleLoginButton handleClick={handleClickExternalLogin} />}
         {/* {isGitlab && <GitlabLoginButton handleClick={handleClickExternalLogin} />} */}
-        {isDex && <DexLoginButton handleClick={handleClickExternalLogin} />}
+        {isOIDC && <OIDCLoginButton handleClick={handleClickExternalLogin} oidcName={oidcName} />}
       </Stack>
     );
   };
@@ -308,7 +309,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
               Sign In
             </Typography>
             <Typography align="left" className={classes.subtext} variant="body1" gutterBottom>
-              Welcome back! Please enter your details.
+              Welcome back! Please login.
             </Typography>
             {renderThirdPartyLoginMethods()}
             {Object.keys(authMethods).length > 1 && <Divider className={classes.divider}>or</Divider>}
diff --git a/src/components/Login/ThirdPartyLoginComponents.jsx b/src/components/Login/ThirdPartyLoginComponents.jsx
index cac7a16..ead49dc 100644
--- a/src/components/Login/ThirdPartyLoginComponents.jsx
+++ b/src/components/Login/ThirdPartyLoginComponents.jsx
@@ -80,14 +80,15 @@ function GitlabLoginButton({ handleClick }) {
   );
 }
 
-function DexLoginButton({ handleClick }) {
+function OIDCLoginButton({ handleClick, oidcName }) {
   const classes = useStyles();
+  const loginWithName = oidcName || 'OIDC';
 
   return (
-    <Button fullWidth variant="contained" className={classes.button} onClick={(e) => handleClick(e, 'dex')}>
-      Sign in with Dex
+    <Button fullWidth variant="contained" className={classes.button} onClick={(e) => handleClick(e, 'oidc')}>
+      Sign in with {loginWithName}
     </Button>
   );
 }
 
-export { GithubLoginButton, GoogleLoginButton, GitlabLoginButton, DexLoginButton };
+export { GithubLoginButton, GoogleLoginButton, GitlabLoginButton, OIDCLoginButton };