feat: github login (FE part)

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;