feat: github login

src/routes/callback/GithubCallback.tsx

@@ -0,0 +1,69 @@
+import { useEffect, FC } from 'react';
+import styled from 'styled-components';
+import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+
+const Styled = styled.section`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    .success{
+        font-size: 30px;
+        font-weight: bold;
+        color: green;
+    }
+`;
+export type GithubLoginSource = "widget" | "webapp"
+type Props = {
+    code: string, from?: GithubLoginSource
+}
+const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
+    //拿本地存的magic token
+    const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
+    const [login, { isLoading, isSuccess, error }] = useLoginMutation();
+    useEffect(() => {
+        if (code) {
+            login({
+                magic_token,
+                code,
+                type: "github"
+            });
+        }
+    }, [code]);
+    useEffect(() => {
+        if (isSuccess) {
+            toast.success("Login Successfully");
+            // 通知widget
+            if (from == 'widget') {
+                localStorage.setItem("widget", `${new Date().getTime()}`);
+            }
+        }
+    }, [isSuccess, from]);
+    useEffect(() => {
+        if (error) {
+            // todo: why?
+            switch ((error as FetchBaseQueryError).status) {
+                case 410:
+                    toast.error(
+                        "No associated account found, please user admin for an invitation link to join."
+                    );
+                    break;
+                default:
+                    toast.error("Something Error");
+                    break;
+            }
+            return;
+        }
+    }, [error]);
+    if (error) return <span>Something Error</span>;
+    return <Styled>
+        {isSuccess && from == 'widget' && <h1>Please close this window and return widget window</h1>}
+        <span className='success'>{isLoading ? "Github Logging in..." : "Github Login Success!"}</span>
+    </Styled>;
+};
+
+export default GithubCallback;

src/routes/callback/index.tsx

@@ -1,10 +1,11 @@
 import { useParams } from "react-router-dom";
 import PaymentSuccess from "./PaymentSuccess";
+import GithubCallback, { GithubLoginSource } from "./GithubCallback";
 import StyledWrapper from "./styled";
 // type Props = {
 //   type: "payment_success";
 // };
-// 该页面服务于一些第三方服务的回调，比如stripe付款成功的回调
+// 该页面服务于一些第三方服务的回调，比如stripe付款成功的回调，GitHub登录成功的回调
 export default function CallbackPage() {
   const { type = "", payload = "" } = useParams();
   if (type == "payment_success") {
@@ -14,5 +15,14 @@ export default function CallbackPage() {
       </StyledWrapper>
     );
   }
+  if (type == "github") {
+    const query = new URLSearchParams(location.search);
+    const code = query.get("code") ?? "";
+    return (
+      <StyledWrapper>
+        <GithubCallback code={code} from={payload as GithubLoginSource} />
+      </StyledWrapper>
+    );
+  }
   return <StyledWrapper>callback page</StyledWrapper>;
 }