feat: github login

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>