feat: github login (FE part)

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,

src/assets/icons/github.svg

@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14990_39524)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 0C5.8724 0 0.5 5.3808 0.5 12.0204C0.5 17.3304 3.938 21.8364 8.7068 23.4252C9.3068 23.5356 9.5252 23.1648 9.5252 22.8456C9.5252 22.5612 9.5156 21.804 9.5096 20.802C6.1712 21.528 5.4668 19.1904 5.4668 19.1904C4.922 17.8008 4.1348 17.4312 4.1348 17.4312C3.0452 16.6872 4.2176 16.7016 4.2176 16.7016C5.4212 16.7856 6.0548 17.94 6.0548 17.94C7.1252 19.776 8.864 19.2456 9.5468 18.9384C9.6572 18.162 9.9668 17.6328 10.31 17.3328C7.646 17.0292 4.844 15.9972 4.844 11.3916C4.844 10.08 5.312 9.006 6.0788 8.166C5.9552 7.8624 5.5436 6.6396 6.1964 4.986C6.1964 4.986 7.2044 4.662 9.4964 6.2172C10.4753 5.95022 11.4853 5.81423 12.5 5.8128C13.52 5.8176 14.546 5.9508 15.5048 6.2172C17.7956 4.662 18.8012 4.9848 18.8012 4.9848C19.4564 6.6396 19.0436 7.8624 18.9212 8.166C19.6892 9.006 20.1548 10.08 20.1548 11.3916C20.1548 16.0092 17.348 17.0256 14.6756 17.3232C15.1064 17.694 15.4892 18.4272 15.4892 19.5492C15.4892 21.1548 15.4748 22.452 15.4748 22.8456C15.4748 23.1672 15.6908 23.5416 16.3004 23.424C18.69 22.6225 20.7672 21.0904 22.2386 19.0441C23.7099 16.9977 24.501 14.5408 24.5 12.0204C24.5 5.3808 19.1264 0 12.5 0Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_14990_39524">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

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,
+  };
+}

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,
   };

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 (
+    <StyledSocialButton onClick={handleGithubLogin}>
+      <IconGithub className="icon" />
+      Sign in with Github
+      {/* {loaded ? `Sign in with Github` : `Initailizing`} */}
+    </StyledSocialButton>
+  );
+}

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";

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() {
         )}
         <MagicLinkLogin />
         {googleLogin && <GoogleLoginButton login={login} clientId={clientId} />}
+        {/* <GithubLoginButton login={login} clientId={clientId} /> */}
         {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
         {oidc.length > 0 && <SolidLoginButton issuers={oidc} />}
       </div>

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 (
     <StyledContainer>
@@ -91,6 +97,35 @@ export default function Logins() {
             />
           </div>
         </div>
+        <div className="input">
+          <div className="row">
+            <div className="title">
+              <div className="txt">
+                <Label>Github</Label>
+                <Tooltip link="https://doc.rustchat.com/en-us/login-github.html" />
+              </div>
+              <span className="desc">Allows members login with Github.</span>
+            </div>
+            <Toggle
+              onClick={handleToggle.bind(null, { github: !github })}
+              data-checked={github}
+            ></Toggle>
+          </div>
+          <div className="row inputs">
+            <Input
+              disabled={!github}
+              onChange={handleGoogleClientIdChange}
+              placeholder="Client ID"
+              value={clientId}
+            />
+            <Input
+              disabled={!github}
+              onChange={handleGoogleClientIdChange}
+              placeholder="Client ID"
+              value={clientId}
+            />
+          </div>
+        </div>
         <div className="input">
           <div className="row">
             <div className="title">

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;