diff --git a/src/app/config.js b/src/app/config.js index 0d05721b..259e98fa 100644 --- a/src/app/config.js +++ b/src/app/config.js @@ -20,8 +20,6 @@ export const firebaseConfig = { measurementId: "G-XV476KEC8P", }; export const vapidKey = `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`; -export const googleClientID = - "418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com"; // "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com"; export const tokenHeader = "X-API-Key"; export const FILE_SLICE_SIZE = 1000 * 200 * 8; //200kb diff --git a/src/app/services/base.query.js b/src/app/services/base.query.js index 6d1c905c..2633f62c 100644 --- a/src/app/services/base.query.js +++ b/src/app/services/base.query.js @@ -8,6 +8,7 @@ const whiteList = [ "register", "sendMagicLink", "checkInviteTokenValid", + "getGoogleAuthConfig", "getLoginConfig", "getServer", "getOpenid", diff --git a/src/app/services/server.js b/src/app/services/server.js index 619dbc1b..3a6c8f4e 100644 --- a/src/app/services/server.js +++ b/src/app/services/server.js @@ -47,6 +47,16 @@ export const serverApi = createApi({ getFirebaseConfig: builder.query({ query: () => ({ url: `admin/fcm/config` }), }), + getGoogleAuthConfig: builder.query({ + query: () => ({ url: `admin/google_auth/config` }), + }), + updateGoogleAuthConfig: builder.mutation({ + query: (data) => ({ + url: `admin/google_auth/config`, + method: "POST", + body: data, + }), + }), sendTestEmail: builder.mutation({ query: (data) => ({ url: `/admin/system/send_mail`, @@ -151,6 +161,8 @@ export const serverApi = createApi({ }); export const { + useGetGoogleAuthConfigQuery, + useUpdateGoogleAuthConfigMutation, useGetSMTPStatusQuery, useSendTestEmailMutation, useUpdateFirebaseConfigMutation, diff --git a/src/common/hook/useGoogleAuthConfig.js b/src/common/hook/useGoogleAuthConfig.js new file mode 100644 index 00000000..b1ffad82 --- /dev/null +++ b/src/common/hook/useGoogleAuthConfig.js @@ -0,0 +1,41 @@ +import { useState, useEffect } from "react"; +// import toast from "react-hot-toast"; +import { + useGetGoogleAuthConfigQuery, + useUpdateGoogleAuthConfigMutation, +} from "../../app/services/server"; +export default function useGoogleAuthConfig() { + const [changed, setChanged] = useState(false); + const [clientId, setClientId] = useState(""); + const { data } = useGetGoogleAuthConfigQuery(undefined, { + refetchOnMountOrArgChange: true, + }); + const [ + updateGoogleAuthConfig, + { isSuccess }, + ] = useUpdateGoogleAuthConfigMutation(); + useEffect(() => { + if (data) { + setClientId(data.client_id); + } + }, [data]); + + useEffect(() => { + setChanged(isSuccess ? false : data?.client_id !== clientId); + }, [data, clientId, isSuccess]); + + const updateServerClientId = async () => { + if (!clientId) return; + await updateGoogleAuthConfig({ client_id: clientId }); + }; + + return { + config: data, + changed, + clientId, + updateClientId: setClientId, + updateServerClientId, + updateGoogleAuthConfig, + isSuccess, + }; +} diff --git a/src/routes/login/GoogleLoginButton.js b/src/routes/login/GoogleLoginButton.js index b091081d..bc6c63fa 100644 --- a/src/routes/login/GoogleLoginButton.js +++ b/src/routes/login/GoogleLoginButton.js @@ -1,14 +1,15 @@ // import { useState, useEffect } from "react"; import { useGoogleLogin } from "react-google-login"; -import { googleClientID } from "../../app/config"; +// import { googleClientID } from "../../app/config"; + import googleSvg from "../../assets/icons/google.svg?url"; import { StyledSocialButton } from "./styled"; -export default function GoogleLoginButton({ login }) { +export default function GoogleLoginButton({ login, clientId }) { const { signIn, loaded } = useGoogleLogin({ onScriptLoadFailure: (wtf) => { console.log("google login script load failure", wtf); }, - clientId: googleClientID, + clientId, onSuccess: ({ tokenId, ...rest }) => { console.log("success", tokenId, rest); login({ @@ -25,7 +26,7 @@ export default function GoogleLoginButton({ login }) { }; console.log("google login ", loaded); return ( - + google icon Sign in with Google diff --git a/src/routes/login/index.js b/src/routes/login/index.js index ffff18a0..2cd20a5c 100644 --- a/src/routes/login/index.js +++ b/src/routes/login/index.js @@ -15,9 +15,10 @@ import MagicLinkLogin from "./MagicLinkLogin"; 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"; export default function LoginPage() { const [login, { data, isSuccess, isLoading, error }] = useLoginMutation(); + const { clientId } = useGoogleAuthConfig(); const { data: loginConfig, isSuccess: loginConfigSuccess, @@ -114,6 +115,7 @@ export default function LoginPage() { metamask: enableMetamaskLogin, oidc, } = loginConfig; + const googleLogin = enableGoogleLogin && clientId; return (
@@ -150,11 +152,11 @@ export default function LoginPage() { {isLoading ? "Signing" : `Sign in`} - {(enableGoogleLogin || enableMetamaskLogin || oidc.length > 0) && ( + {(googleLogin || enableMetamaskLogin || oidc.length > 0) && (
)} - {enableGoogleLogin && } + {googleLogin && } {enableMetamaskLogin && } {oidc.length > 0 && }
diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js index 835a4960..84e89313 100644 --- a/src/routes/setting/config/Logins.js +++ b/src/routes/setting/config/Logins.js @@ -1,18 +1,38 @@ -// import { useState, useEffect } from "react"; +// import { useState } from "react"; import StyledContainer from "./StyledContainer"; import Textarea from "../../../common/component/styled/Textarea"; import Toggle from "../../../common/component/styled/Toggle"; import Label from "../../../common/component/styled/Label"; +import Input from "../../../common/component/styled/Input"; import SaveTip from "../../../common/component/SaveTip"; import useConfig from "./useConfig"; - +import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig"; +import toast from "react-hot-toast"; export default function Logins() { + const { + changed: clientIdChanged, + clientId, + updateClientId, + updateServerClientId, + } = useGoogleAuthConfig(); const { values, updateConfig, setValues, reset, changed } = useConfig( "login" ); - const handleUpdate = () => { - // const { token_url, description } = values; - updateConfig(values); + const handleUpdate = async () => { + const { google } = values; + if (changed) { + updateConfig(values); + } + if (google && clientIdChanged) { + // 更新google client id + await updateServerClientId(); + if (!changed) { + toast.success("Configuration Updated!"); + } + } + }; + const handleGoogleClientIdChange = (evt) => { + updateClientId(evt.target.value); }; const handleChange = (evt) => { const newValue = evt.target.value; @@ -29,6 +49,7 @@ export default function Logins() { }; if (!values) return null; const { google, metamask, password, oidc = [] } = values ?? {}; + const valuesChanged = clientIdChanged || changed; return (
@@ -46,6 +67,15 @@ export default function Logins() { data-checked={google} >
+ {google && ( +
+ +
+ )}
- - {/*
- - -
-
- - -
-
- -