refactor: github and payment callback

public/locales/en/auth.json

@@ -37,5 +37,8 @@
   "enter": "Enter ",
   "sign_in": "Sign In",
   "sign_up": "Sign Up",
-  "signing_up": "Signing Up"
+  "signing_up": "Signing Up",
+  "github_login_success": "GitHub Login Success!",
+  "github_logging_in": "GitHub Logging in...",
+  "github_cb_tip": "Please close this window and return widget window"
 }

public/locales/zh/auth.json

@@ -37,5 +37,8 @@
   "enter": "登入",
   "sign_in": "登录",
   "sign_up": "注册",
-  "signing_up": "注册中"
+  "signing_up": "注册中",
+  "github_login_success": "Github授权成功！",
+  "github_logging_in": "Github授权中...",
+  "github_cb_tip": "请关闭该窗口，并返回原界面"
 }

src/routes/callback/GithubCallback.tsx

@@ -4,12 +4,14 @@ import { useLoginMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { useTranslation } from 'react-i18next';
+import StyledButton from '../../common/component/styled/Button';
 
 export type GithubLoginSource = "widget" | "webapp"
 type Props = {
     code: string, from?: GithubLoginSource
 }
 const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
+    const { t } = useTranslation("auth");
     const { t: ct } = useTranslation();
     //拿本地存的magic token
     const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
@@ -38,6 +40,7 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
     }, [isSuccess, from]);
     useEffect(() => {
         if (error) {
+            console.log(error);
             // todo: why?
             switch ((error as FetchBaseQueryError).status) {
                 case 410:
@@ -49,13 +52,16 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
                     toast.error("Something Error");
                     break;
             }
-            return;
         }
     }, [error]);
-    if (error) return <span>Something Error</span>;
+    const handleClose = () => {
+        window.close();
+    };
+    if (error) return <span className='text-red-500 text-lg'>Something Error</span>;
     return <section className='flex-center flex-col gap-3'>
-        {isSuccess && from == 'widget' && <h1>Please close this window and return widget window</h1>}
-        <span className='text-3xl text-green-600 font-bold'>{isLoading ? "GitHub Logging in..." : "GitHub Login Success!"}</span>
+        <StyledButton onClick={handleClose}>{ct("action.close")}</StyledButton>
+        {isSuccess && from == 'widget' && <h1>{t("github_cb_tip")}</h1>}
+        <span className='text-3xl text-green-600 font-bold'>{isLoading ? t("github_logging_in") : t("github_login_success")}</span>
     </section>;
 };
 

src/routes/callback/PaymentSuccess.tsx

@@ -30,10 +30,10 @@ const PaymentSuccess = ({ sid }: Props) => {
     navigateTo("/");
   };
   return (
-    <section className="flex flex-col items-center bg-slate-100 rounded-2xl w-[512px] p-6">
+    <section className="flex flex-col items-center bg-slate-100 dark:bg-slate-800 rounded-2xl w-4/5 md:w-[512px] p-6">
       <img className="w-28 h-28" src="https://s.voce.chat/web_client/assets/img/check.png" alt="check icon" />
       <h1 className="font-bold text-3xl pt-5">{t("payment_success")}</h1>
-      <p className="text-lg pb-7 mt-2 text-gray-400">
+      <p className="text-lg pb-7 mt-2 text-gray-400 dark:text-gray-600">
         {upserting ? t("tip_renewing") : ""}
         {upserted ? t("tip_renewed") : ""}
         {isError ? t("tip_renew_error") : ""}

src/routes/callback/index.tsx

@@ -5,7 +5,7 @@ import GithubCallback, { GithubLoginSource } from "./GithubCallback";
 
 const StyledWrapper = ({ children }: DOMAttributes<HTMLDivElement> & { children?: ReactNode }) => {
 
-  return <div className="flex-center w-screen h-screen break-words leading-normal">
+  return <div className="flex-center dark:bg-gray-700 dark:text-white w-screen h-screen break-words leading-normal">
     {children}
   </div>;
 };