feat: github login

src/routes/login/GithubLoginButton.js

@@ -2,9 +2,11 @@
 // import { useGoogleLogin } from "react-google-login";
 import IconGithub from "../../assets/icons/github.svg";
 import { StyledSocialButton } from "./styled";
-export default function GithubLoginButton({ login, clientId }) {
+export default function GithubLoginButton({ config = {} }) {
+  const { client_id } = config;
   const handleGithubLogin = () => {
-    console.log("github login");
+    location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`;
+    // console.log("github login");
   };
   // console.log("google login ", loaded);
   return (

src/routes/login/index.js

@@ -13,13 +13,19 @@ import Button from "../../common/component/styled/Button";
 import GoogleLoginButton from "./GoogleLoginButton";
 import MagicLinkLogin from "./MagicLinkLogin";
 import { useLoginMutation } from "../../app/services/auth";
-import { useGetLoginConfigQuery } from "../../app/services/server";
+import {
+  useGetLoginConfigQuery,
+  useGetSMTPStatusQuery,
+} from "../../app/services/server";
 import { setAuthData } from "../../app/slices/auth.data";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
-// import GithubLoginButton from "./GithubLoginButton";
+import GithubLoginButton from "./GithubLoginButton";
+import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
 export default function LoginPage() {
+  const { data: enableSMTP } = useGetSMTPStatusQuery();
   const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
+  const { config: githubAuthConfig } = useGithubAuthConfig();
   const {
     data: loginConfig,
     isSuccess: loginConfigSuccess,
@@ -32,17 +38,34 @@ export default function LoginPage() {
   });
   useEffect(() => {
     const query = new URLSearchParams(location.search);
+    // const githubCode = query.get("gcode");
+    const oauth = query.get("oauth");
     const code = query.get("code");
     const state = query.get("state");
     const token = query.get("token");
     const exists = query.get("exists");
-    // oidc login
-    if (code && state) {
-      login({
-        code,
-        state,
-        type: "oidc",
-      });
+    if (oauth) {
+      switch (oauth) {
+        case "github":
+          if (code) {
+            login({
+              code: code,
+              type: "github",
+            });
+          }
+          break;
+        case "oidc":
+          if (code && state) {
+            login({
+              code,
+              state,
+              type: "oidc",
+            });
+          }
+          break;
+        default:
+          break;
+      }
     }
     // magic link
     if (token && typeof exists !== "undefined") {
@@ -156,9 +179,9 @@ export default function LoginPage() {
         {(googleLogin || enableMetamaskLogin || oidc.length > 0) && (
           <hr className="or" />
         )}
-        <MagicLinkLogin />
+        {enableSMTP && <MagicLinkLogin />}
         {googleLogin && <GoogleLoginButton login={login} clientId={clientId} />}
-        {/* <GithubLoginButton login={login} clientId={clientId} /> */}
+        <GithubLoginButton config={githubAuthConfig} />
         {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
         {oidc.length > 0 && <SolidLoginButton issuers={oidc} />}
       </div>

src/routes/setting/config/Logins.js

@@ -18,9 +18,10 @@ export default function Logins() {
     updateClientIdToServer,
   } = useGoogleAuthConfig();
   const {
+    config: githubAuthConfig,
     changed: githubChanged,
-    githubConfig,
-    updateGithubConfig,
+    updateGithubAuthConfigToServer,
+    updateGithubAuthConfig,
   } = useGithubAuthConfig();
   const { values, updateConfig, setValues, reset, changed } = useConfig(
     "login"
@@ -37,10 +38,24 @@ export default function Logins() {
         toast.success("Configuration Updated!");
       }
     }
+    if (github && githubChanged) {
+      // github config
+      await updateGithubAuthConfigToServer();
+      if (!changed) {
+        toast.success("Configuration Updated!");
+      }
+    }
   };
   const handleGoogleClientIdChange = (evt) => {
     updateClientId(evt.target.value);
   };
+  const handleGithubAuthChange = (evt) => {
+    const { key } = evt.target.dataset;
+    console.log("ggg", key, evt.target.value);
+    if (key) {
+      updateGithubAuthConfig({ [key]: evt.target.value });
+    }
+  };
   // const handleChange = (evt) => {
   //   const newValue = evt.target.value;
   //   const { type } = evt.target.dataset;
@@ -55,8 +70,10 @@ export default function Logins() {
     });
   };
   if (!values) return null;
-  const { google, github, metamask, password, oidc = [] } = values ?? {};
-  const valuesChanged = clientIdChanged || changed;
+  const { google, magic_link, github, metamask, password, oidc = [] } =
+    values ?? {};
+  const valuesChanged = clientIdChanged || changed || githubChanged;
+
   return (
     <StyledContainer>
       <div className="inputs">
@@ -74,6 +91,22 @@ export default function Logins() {
             ></Toggle>
           </div>
         </div>
+        <div className="input">
+          <div className="row">
+            <div className="title">
+              <div className="txt">
+                <Label>Magic Link</Label>
+              </div>
+              <span className="desc">
+                Allows members login with Magic Link.
+              </span>
+            </div>
+            <Toggle
+              onClick={handleToggle.bind(null, { magic_link: !magic_link })}
+              data-checked={magic_link}
+            ></Toggle>
+          </div>
+        </div>
         <div className="input">
           <div className="row">
             <div className="title">
@@ -114,15 +147,17 @@ export default function Logins() {
           <div className="row inputs">
             <Input
               disabled={!github}
-              onChange={handleGoogleClientIdChange}
-              placeholder="Client ID"
-              value={clientId}
+              data-key={"client_id"}
+              onChange={handleGithubAuthChange}
+              placeholder="Github Client ID"
+              value={githubAuthConfig?.client_id}
             />
             <Input
               disabled={!github}
-              onChange={handleGoogleClientIdChange}
-              placeholder="Client ID"
-              value={clientId}
+              data-key={"client_secret"}
+              onChange={handleGithubAuthChange}
+              placeholder="Github Client Secret"
+              value={githubAuthConfig?.client_secret}
             />
           </div>
         </div>