feat: github login

2022-05-27 11:37:49 +08:00
parent 7465da5bff
commit 84f9998277
7 changed files with 196 additions and 50 deletions
@@ -4,7 +4,7 @@
  "private": true,
  "homepage": "https://privoce.rustchat.com",
  "dependencies": {
-    "@babel/core": "^7.18.0",
+    "@babel/core": "^7.18.2",
    "@emoji-mart/data": "^1.0.1",
    "@metamask/onboarding": "^1.0.1",
    "@microsoft/fetch-event-source": "^2.0.1",
@@ -65,9 +65,9 @@
    "resolve": "^1.22.0",
    "rooks": "^5.11.2",
    "semver": "^7.3.7",
-    "slate": "^0.78.0",
+    "slate": "^0.80.0",
    "slate-history": "^0.66.0",
-    "slate-react": "^0.79.0",
+    "slate-react": "^0.80.0",
    "source-map-loader": "^3.0.1",
    "style-loader": "^3.3.1",
    "styled-components": "^5.3.5",
@@ -9,6 +9,8 @@ const whiteList = [
  "sendMagicLink",
  "checkInviteTokenValid",
  "getGoogleAuthConfig",
+  "getGithubAuthConfig",
+  "getSMTPStatus",
  "getLoginConfig",
  "getServerVersion",
  "getServer",
@@ -6,30 +6,35 @@ import {
 } from "../../app/services/server";
 export default function useGithubAuthConfig() {
  const [changed, setChanged] = useState(false);
-  const [clientId, setClientId] = useState("");
+  const [config, setConfig] = useState({});
  const { data } = useGetGithubAuthConfigQuery(undefined, {
    refetchOnMountOrArgChange: true,
  });
-  const [
-    updateGithubAuthConfig,
-    { isSuccess },
-  ] = useUpdateGithubAuthConfigMutation();
+  const [updateAuthConfig, { isSuccess }] = useUpdateGithubAuthConfigMutation();
  useEffect(() => {
    if (data) {
-      setClientId(data.client_id);
+      setConfig(data);
    }
  }, [data]);

  useEffect(() => {
-    setChanged(isSuccess ? false : data?.client_id !== clientId);
-  }, [data, clientId, isSuccess]);
-
+    setChanged(
+      isSuccess ? false : JSON.stringify(data) !== JSON.stringify(config)
+    );
+  }, [data, config, isSuccess]);
+  const updateGithubAuthConfig = (obj) => {
+    setConfig((prev) => {
+      return { ...prev, ...obj };
+    });
+  };
+  const updateGithubAuthConfigToServer = async () => {
+    await updateAuthConfig(config);
+  };
  return {
-    config: data,
+    config,
    changed,
-    clientId,
-    updateClientId: setClientId,
    updateGithubAuthConfig,
+    updateGithubAuthConfigToServer,
    isSuccess,
  };
 }
@@ -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 (
@@ -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>
@@ -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>
@@ -31,7 +31,7 @@
  resolved "https://mirrors.tencent.com/npm/@babel%2fcompat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
  integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==

-"@babel/core@^7.11.1", "@babel/core@^7.15.5", "@babel/core@^7.16.0", "@babel/core@^7.18.0":
+"@babel/core@^7.11.1", "@babel/core@^7.15.5", "@babel/core@^7.16.0":
  version "7.18.0"
  resolved "https://mirrors.tencent.com/npm/@babel%2fcore/-/core-7.18.0.tgz#c58d04d7c6fbfb58ea7681e2b9145cfb62726756"
  integrity sha512-Xyw74OlJwDijToNi0+6BBI5mLLR5+5R3bcSH80LXzjzEGEUlvNzujEE71BaD/ApEZHAvFI/Mlmp4M5lIkdeeWw==
@@ -52,6 +52,27 @@
    json5 "^2.2.1"
    semver "^6.3.0"

+"@babel/core@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/@babel%2fcore/-/core-7.18.2.tgz#87b2fcd7cce9becaa7f5acebdc4f09f3dd19d876"
+  integrity sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-compilation-targets" "^7.18.2"
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helpers" "^7.18.2"
+    "@babel/parser" "^7.18.0"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/generator@^7.18.0":
  version "7.18.0"
  resolved "https://mirrors.tencent.com/npm/@babel%2fgenerator/-/generator-7.18.0.tgz#46d28e8a18fc737b028efb25ab105d74473af43f"
@@ -61,6 +82,15 @@
    "@jridgewell/gen-mapping" "^0.3.0"
    jsesc "^2.5.1"

+"@babel/generator@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/@babel%2fgenerator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d"
+  integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==
+  dependencies:
+    "@babel/types" "^7.18.2"
+    "@jridgewell/gen-mapping" "^0.3.0"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7":
  version "7.16.7"
  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -86,6 +116,16 @@
    browserslist "^4.20.2"
    semver "^6.3.0"

+"@babel/helper-compilation-targets@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b"
+  integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.17.12", "@babel/helper-create-class-features-plugin@^7.18.0":
  version "7.18.0"
  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz#fac430912606331cb075ea8d82f9a4c145a4da19"
@@ -128,6 +168,11 @@
  dependencies:
    "@babel/types" "^7.16.7"

+"@babel/helper-environment-visitor@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
+  integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
  version "7.16.7"
  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -260,6 +305,15 @@
    "@babel/traverse" "^7.18.0"
    "@babel/types" "^7.18.0"

+"@babel/helpers@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384"
+  integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+
 "@babel/highlight@^7.16.7":
  version "7.17.12"
  resolved "https://mirrors.tencent.com/npm/@babel%2fhighlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351"
@@ -1029,6 +1083,22 @@
    debug "^4.1.0"
    globals "^11.1.0"

+"@babel/traverse@^7.18.2":
+  version "7.18.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/@babel%2ftraverse/-/traverse-7.18.2.tgz#b77a52604b5cc836a9e1e08dca01cba67a12d2e8"
+  integrity sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.18.0"
+    "@babel/types" "^7.18.2"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.15.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.12", "@babel/types@^7.18.0", "@babel/types@^7.4.4":
  version "7.18.0"
  resolved "https://mirrors.tencent.com/npm/@babel%2ftypes/-/types-7.18.0.tgz#ef523ea349722849cb4bf806e9342ede4d071553"
@@ -1037,16 +1107,25 @@
    "@babel/helper-validator-identifier" "^7.16.7"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.18.2":
+  version "7.18.2"
+  resolved "http://mirrors.tencent.com/npm/@babel%2ftypes/-/types-7.18.2.tgz#191abfed79ebe6f4242f643a9a5cbaa36b10b091"
+  integrity sha512-0On6B8A4/+mFUto5WERt3EEuG1NznDirvwca1O8UwXQHVY8g3R7OzYgxXdOfMwLO08UrpUD/2+3Bclyq+/C94Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@^17.0.1":
-  version "17.0.0"
-  resolved "https://mirrors.cloud.tencent.com/npm/@commitlint%2fcli/-/cli-17.0.0.tgz#6c86c6b0eba4ba1204a19833c3c962b623f35518"
-  integrity sha512-Np6slCdVVG1XwMvwbZrXIzS1INPAD5QmN4L6al04AmCd4nAPU63gxgxC5Mz0Fmx7va23Uvb0S7yEFV1JPhvPUQ==
+  version "17.0.1"
+  resolved "http://mirrors.cloud.tencent.com/npm/@commitlint%2fcli/-/cli-17.0.1.tgz#88c5ad3f297760ded589c3a33ed49321242e7ab0"
+  integrity sha512-5xT1G5pnynR0tk/ms8Ji7yr9lZCeQs4GLVVtyK/gw20w+enoLTVuRKKY9zg88hy9FoCycc/W8iip2xv3c8payg==
  dependencies:
    "@commitlint/format" "^17.0.0"
    "@commitlint/lint" "^17.0.0"
    "@commitlint/load" "^17.0.0"
    "@commitlint/read" "^17.0.0"
    "@commitlint/types" "^17.0.0"
+    execa "^5.0.0"
    lodash "^4.17.19"
    resolve-from "5.0.0"
    resolve-global "1.0.0"
@@ -8348,10 +8427,10 @@ slate-history@^0.66.0:
  dependencies:
    is-plain-object "^5.0.0"

-slate-react@^0.79.0:
-  version "0.79.0"
-  resolved "http://mirrors.cloud.tencent.com/npm/slate-react/-/slate-react-0.79.0.tgz#4a5cf458b8f7568d9a313d3786569623dd52454e"
-  integrity sha512-uPzYArGwHKq4QvpzRvP/DVvsDgB2Zw6x9Som/hJWaydu18r0Vp2vmgHL0Dbc4EU6pUNV6o83XbBJLLEwISzBHQ==
+slate-react@^0.80.0:
+  version "0.80.0"
+  resolved "http://mirrors.cloud.tencent.com/npm/slate-react/-/slate-react-0.80.0.tgz#7d7fecff20e2d9d659208bb8436dab151ff47e51"
+  integrity sha512-aZJ5MFf7OrSOcMkDG6V9lu3ZzjC0jZ7xAA1kqXPVYtL3XBVu0YQ8MVm4Mx/xQTc1sdqe1Bx/kdkT8Pz6KyaWEQ==
  dependencies:
    "@types/is-hotkey" "^0.1.1"
    "@types/lodash" "^4.14.149"
@@ -8362,10 +8441,10 @@ slate-react@^0.79.0:
    scroll-into-view-if-needed "^2.2.20"
    tiny-invariant "1.0.6"

-slate@^0.78.0:
-  version "0.78.0"
-  resolved "http://mirrors.cloud.tencent.com/npm/slate/-/slate-0.78.0.tgz#cd0328d22b0a99c543987d2a2dd30903bb950ee9"
-  integrity sha512-VwQ0RafT3JPf9SFrXI02Dh3S4Iz9en7d1nn50C/LJjjqjfgv+a2ORbgWMdYjhycPYldaxJwcI3OpP9D1g4SXEg==
+slate@^0.80.0:
+  version "0.80.0"
+  resolved "http://mirrors.cloud.tencent.com/npm/slate/-/slate-0.80.0.tgz#8fb99fa81e58cdcc854a69cf1da15c145ee1baeb"
+  integrity sha512-Nn1GjnCdFelNaYsIjFd2zGvQgBJ9ySF5APfAZepSXm5Tyz2w6ZBGrdT90yjuVgx2RHFuM4nnwr7dnnm3zek+aA==
  dependencies:
    immer "^9.0.6"
    is-plain-object "^5.0.0"