diff --git a/src/app/services/server.js b/src/app/services/server.js index b85989e8..21925753 100644 --- a/src/app/services/server.js +++ b/src/app/services/server.js @@ -66,6 +66,16 @@ export const serverApi = createApi({ body: data, }), }), + getGithubAuthConfig: builder.query({ + query: () => ({ url: `admin/github_auth/config` }), + }), + updateGithubAuthConfig: builder.mutation({ + query: (data) => ({ + url: `admin/github_auth/config`, + method: "POST", + body: data, + }), + }), sendTestEmail: builder.mutation({ query: (data) => ({ url: `/admin/system/send_mail`, @@ -171,6 +181,8 @@ export const serverApi = createApi({ export const { useGetServerVersionQuery, + useGetGithubAuthConfigQuery, + useUpdateGithubAuthConfigMutation, useGetGoogleAuthConfigQuery, useUpdateGoogleAuthConfigMutation, useGetSMTPStatusQuery, diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 00000000..17c98828 --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/common/hook/useGithubAuthConfig.js b/src/common/hook/useGithubAuthConfig.js new file mode 100644 index 00000000..b18e3069 --- /dev/null +++ b/src/common/hook/useGithubAuthConfig.js @@ -0,0 +1,35 @@ +import { useState, useEffect } from "react"; +// import toast from "react-hot-toast"; +import { + useGetGithubAuthConfigQuery, + useUpdateGithubAuthConfigMutation, +} from "../../app/services/server"; +export default function useGithubAuthConfig() { + const [changed, setChanged] = useState(false); + const [clientId, setClientId] = useState(""); + const { data } = useGetGithubAuthConfigQuery(undefined, { + refetchOnMountOrArgChange: true, + }); + const [ + updateGithubAuthConfig, + { isSuccess }, + ] = useUpdateGithubAuthConfigMutation(); + useEffect(() => { + if (data) { + setClientId(data.client_id); + } + }, [data]); + + useEffect(() => { + setChanged(isSuccess ? false : data?.client_id !== clientId); + }, [data, clientId, isSuccess]); + + return { + config: data, + changed, + clientId, + updateClientId: setClientId, + updateGithubAuthConfig, + isSuccess, + }; +} diff --git a/src/common/hook/useGoogleAuthConfig.js b/src/common/hook/useGoogleAuthConfig.js index b1ffad82..70aebfd8 100644 --- a/src/common/hook/useGoogleAuthConfig.js +++ b/src/common/hook/useGoogleAuthConfig.js @@ -24,7 +24,7 @@ export default function useGoogleAuthConfig() { setChanged(isSuccess ? false : data?.client_id !== clientId); }, [data, clientId, isSuccess]); - const updateServerClientId = async () => { + const updateClientIdToServer = async () => { if (!clientId) return; await updateGoogleAuthConfig({ client_id: clientId }); }; @@ -34,7 +34,7 @@ export default function useGoogleAuthConfig() { changed, clientId, updateClientId: setClientId, - updateServerClientId, + updateClientIdToServer, updateGoogleAuthConfig, isSuccess, }; diff --git a/src/routes/login/GithubLoginButton.js b/src/routes/login/GithubLoginButton.js new file mode 100644 index 00000000..3ee7dc04 --- /dev/null +++ b/src/routes/login/GithubLoginButton.js @@ -0,0 +1,17 @@ +// import { useState, useEffect } from "react"; +// import { useGoogleLogin } from "react-google-login"; +import IconGithub from "../../assets/icons/github.svg"; +import { StyledSocialButton } from "./styled"; +export default function GithubLoginButton({ login, clientId }) { + const handleGithubLogin = () => { + console.log("github login"); + }; + // console.log("google login ", loaded); + return ( + + + Sign in with Github + {/* {loaded ? `Sign in with Github` : `Initailizing`} */} + + ); +} diff --git a/src/routes/login/GoogleLoginButton.js b/src/routes/login/GoogleLoginButton.js index a8b65b46..bd7d1d59 100644 --- a/src/routes/login/GoogleLoginButton.js +++ b/src/routes/login/GoogleLoginButton.js @@ -1,6 +1,5 @@ // import { useState, useEffect } from "react"; import { useGoogleLogin } from "react-google-login"; -// import { googleClientID } from "../../app/config"; import googleSvg from "../../assets/icons/google.svg?url"; import { StyledSocialButton } from "./styled"; diff --git a/src/routes/login/index.js b/src/routes/login/index.js index 3c014e0b..39efba1f 100644 --- a/src/routes/login/index.js +++ b/src/routes/login/index.js @@ -16,6 +16,7 @@ import { useLoginMutation } from "../../app/services/auth"; import { useGetLoginConfigQuery } from "../../app/services/server"; import { setAuthData } from "../../app/slices/auth.data"; import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig"; +// import GithubLoginButton from "./GithubLoginButton"; export default function LoginPage() { const [login, { data, isSuccess, isLoading, error }] = useLoginMutation(); const { clientId } = useGoogleAuthConfig(); @@ -157,6 +158,7 @@ export default function LoginPage() { )} {googleLogin && } + {/* */} {enableMetamaskLogin && } {oidc.length > 0 && } diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js index 97e59293..a9a81761 100644 --- a/src/routes/setting/config/Logins.js +++ b/src/routes/setting/config/Logins.js @@ -9,13 +9,19 @@ import useConfig from "./useConfig"; import Tooltip from "./Tooltip"; import IssuerList from "./IssuerList"; import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig"; +import useGithubAuthConfig from "../../../common/hook/useGithubAuthConfig"; export default function Logins() { const { changed: clientIdChanged, clientId, updateClientId, - updateServerClientId, + updateClientIdToServer, } = useGoogleAuthConfig(); + const { + changed: githubChanged, + githubConfig, + updateGithubConfig, + } = useGithubAuthConfig(); const { values, updateConfig, setValues, reset, changed } = useConfig( "login" ); @@ -26,7 +32,7 @@ export default function Logins() { } if (google && clientIdChanged) { // 更新google client id - await updateServerClientId(); + await updateClientIdToServer(); if (!changed) { toast.success("Configuration Updated!"); } @@ -49,7 +55,7 @@ export default function Logins() { }); }; if (!values) return null; - const { google, metamask, password, oidc = [] } = values ?? {}; + const { google, github, metamask, password, oidc = [] } = values ?? {}; const valuesChanged = clientIdChanged || changed; return ( @@ -91,6 +97,35 @@ export default function Logins() { /> +
+
+
+
+ + +
+ Allows members login with Github. +
+ +
+
+ + +
+
diff --git a/src/routes/setting/config/StyledContainer.js b/src/routes/setting/config/StyledContainer.js index a0826a41..22f7ac60 100644 --- a/src/routes/setting/config/StyledContainer.js +++ b/src/routes/setting/config/StyledContainer.js @@ -23,6 +23,10 @@ const StyledContainer = styled.div` flex-direction: row; align-items: center; justify-content: space-between; + &.inputs { + flex-direction: column; + gap: 8px; + } .title { display: flex; flex-direction: column;