feat(web): support github login (#1543)

* feat(web): support github login * chore(web): compress picture size * refactor(web): init providers at begin * refactor * refactor
labring · Oct 11, 2023 · e8b8380 · e8b8380
1 parent 2cfc2f6
commit e8b8380
Show file tree

Hide file tree

Showing 22 changed files with 537 additions and 165 deletions.
diff --git a/web/public/homepage/p2.png b/web/public/homepage/p2.png
diff --git a/web/public/homepage/p3.png b/web/public/homepage/p3.png
diff --git a/web/public/homepage/p5.png b/web/public/homepage/p5.png
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -370,7 +370,10 @@
     "NewPassword": "New Password",
     "SignUpSuccess": "Sign up successfully",
     "EmailTip": "Please input a valid Email",
-    "LoginOrRegister": "Login / Register"
+    "LoginOrRegister": "Login / Register",
+    "BindGitHub": "Bind GitHub",
+    "BindSuccess": "Bind Successfully",
+    "GitHubLogin": "GitHub Login"
   },
   "Time": "Time",
   "CreateTime": "Created",
@@ -576,7 +579,9 @@
     "NoAuth": "Not Real-name Verified",
     "WarnTips": "You have not yet completed real-name authentication.",
     "PleaseBindPhone": "Please bind your mobile number first",
-    "VerifiedIdentity": "Verified Identity"
+    "VerifiedIdentity": "Verified Identity",
+    "Bind": "Bind",
+    "VerifiedGithub": "Verified"
   },
   "Reset": "Reset",
   "SettingModal": {
@@ -650,5 +655,9 @@
   "NextPage": "Next Page",
   "LastPage": "Last Page",
   "FirstPage": "First Page",
+  "SavedSuccessfully": "Saved Successfully",
+  "Bind": "Bind",
+  "UnBind": "Unbind",
+  "UnBindSuccess": "Unbind Successfully",
   "SavedSuccessfully": "Saved Successfully"
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -370,7 +370,10 @@
     "NewPassword": "新密码",
     "SignUpSuccess": "注册成功",
     "EmailTip": "请输入有效的邮箱",
-    "LoginOrRegister": "登录 / 注册"
+    "LoginOrRegister": "登录 / 注册",
+    "BindGitHub": "绑定 GitHub",
+    "BindSuccess": "绑定成功",
+    "GitHubLogin": "GitHub 登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -576,7 +579,9 @@
     "NoAuth": "未实名",
     "WarnTips": "您尚未实名认证",
     "PleaseBindPhone": "请先绑定手机号",
-    "VerifiedIdentity": "已实名"
+    "VerifiedIdentity": "已实名",
+    "Bind": "绑定",
+    "VerifiedGithub": "已认证"
   },
   "Reset": "重置",
   "SettingModal": {
@@ -650,5 +655,8 @@
   "NextPage": "下一页",
   "LastPage": "最后一页",
   "FirstPage": "第一页",
+  "Bind": "绑定",
+  "UnBind": "解绑",
+  "UnBindSuccess": "解绑成功",
   "SavedSuccessfully": "保存成功"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -370,7 +370,10 @@
     "NewPassword": "新密码",
     "SignUpSuccess": "注册成功",
     "EmailTip": "请输入有效的邮箱",
-    "LoginOrRegister": "登录 / 注册"
+    "LoginOrRegister": "登录 / 注册",
+    "BindGitHub": "绑定 GitHub",
+    "BindSuccess": "绑定成功",
+    "GitHubLogin": "GitHub 登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -576,7 +579,9 @@
     "NoAuth": "未实名",
     "WarnTips": "您尚未实名认证",
     "PleaseBindPhone": "请先绑定手机号",
-    "VerifiedIdentity": "已实名"
+    "VerifiedIdentity": "已实名",
+    "Bind": "绑定",
+    "VerifiedGithub": "已认证"
   },
   "Reset": "重置",
   "SettingModal": {
@@ -650,5 +655,8 @@
   "NextPage": "下一页",
   "LastPage": "最后一页",
   "FirstPage": "第一页",
+  "Bind": "绑定",
+  "UnBind": "解绑",
+  "UnBindSuccess": "解绑成功",
   "SavedSuccessfully": "保存成功"
 }
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -10,6 +10,7 @@ import { ClickToComponent } from "click-to-react-component";
 
 import "@/utils/i18n";
 
+import useAuthStore from "./pages/auth/store";
 import useSiteSettingStore from "./pages/siteSetting";
 import theme from "./chakraTheme";
 import darkTheme from "./chakraThemeDark";
@@ -47,6 +48,7 @@ function APP() {
   const { i18n } = useTranslation();
 
   const getSiteSettings = useSiteSettingStore((state) => state.getSiteSettings);
+  const { initProviders } = useAuthStore();
 
   const [colorMode, setColorMode] = useState(localStorage.getItem(CHAKRA_UI_COLOR_MODE_KEY));
   useEffect(() => {
@@ -63,7 +65,8 @@ function APP() {
   useEffect(() => {
     document.documentElement.lang = i18n.language;
     getSiteSettings();
-  }, [getSiteSettings, i18n.language]);
+    initProviders();
+  }, [getSiteSettings, i18n.language, initProviders]);
 
   return (
     <Sentry.ErrorBoundary>

diff --git a/web/src/apis/v1/api-auto.d.ts b/web/src/apis/v1/api-auto.d.ts
@@ -291,21 +291,32 @@ declare namespace Definitions {
     type?: string /* verify code type */;
   };
 
-  export type CreatePATDto = {
-    name?: string;
-    expiresIn?: number;
+  export type GithubSigninDto = {
+    code?: string;
+    state?: string;
+  };
+
+  export type GithubBind = {
+    token?: string /* temporary token signed for github bindings */;
+    register?: boolean /* Is a newly registered use */;
   };
 
   export type UserWithProfile = {
     _id?: string;
     username?: string;
     email?: string;
     phone?: string;
+    github?: number;
     createdAt?: string;
     updatedAt?: string;
     profile?: Definitions.UserProfile;
   };
 
+  export type CreatePATDto = {
+    name?: string;
+    expiresIn?: number;
+  };
+
   export type BindPhoneDto = {
     oldPhoneNumber?: string /* old phone number */;
     newPhoneNumber?: string /* new phone number */;
@@ -533,6 +544,7 @@ declare namespace Definitions {
     username?: string;
     email?: string;
     phone?: string;
+    github?: number;
     createdAt?: string;
     updatedAt?: string;
   };
@@ -1091,6 +1103,38 @@ declare namespace Paths {
     export type Responses = any;
   }
 
+  namespace GithubAuthControllerJumpLogin {
+    export type QueryParameters = any;
+
+    export type BodyParameters = any;
+
+    export type Responses = any;
+  }
+
+  namespace GithubAuthControllerSignin {
+    export type QueryParameters = any;
+
+    export type BodyParameters = Definitions.GithubSigninDto;
+
+    export type Responses = any;
+  }
+
+  namespace GithubAuthControllerBind {
+    export type QueryParameters = any;
+
+    export type BodyParameters = Definitions.GithubBind;
+
+    export type Responses = any;
+  }
+
+  namespace GithubAuthControllerUnbind {
+    export type QueryParameters = any;
+
+    export type BodyParameters = any;
+
+    export type Responses = any;
+  }
+
   namespace PatControllerCreate {
     export type QueryParameters = any;
 

diff --git a/web/src/apis/v1/auth.ts b/web/src/apis/v1/auth.ts
@@ -173,3 +173,79 @@ export async function EmailControllerSendCode(params: Definitions.SendEmailCodeD
     data: params,
   });
 }
+
+/**
+ * Redirect to the login page of github
+ */
+export async function GithubAuthControllerJumpLogin(
+  params: Paths.GithubAuthControllerJumpLogin.BodyParameters,
+): Promise<{
+  error: string;
+  data: Paths.GithubAuthControllerJumpLogin.Responses;
+}> {
+  // /v1/auth/github/jump_login
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || "",
+    ...params,
+  };
+  return request(`/v1/auth/github/jump_login`, {
+    method: "GET",
+    params: params,
+  });
+}
+
+/**
+ * Signin by github
+ */
+export async function GithubAuthControllerSignin(params: Definitions.GithubSigninDto): Promise<{
+  error: string;
+  data: Paths.GithubAuthControllerSignin.Responses;
+}> {
+  // /v1/auth/github/signin
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || "",
+    ...params,
+  };
+  return request(`/v1/auth/github/signin`, {
+    method: "POST",
+    data: params,
+  });
+}
+
+/**
+ * Bind github
+ */
+export async function GithubAuthControllerBind(params: Definitions.GithubBind): Promise<{
+  error: string;
+  data: Definitions.UserWithProfile;
+}> {
+  // /v1/auth/github/bind
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || "",
+    ...params,
+  };
+  return request(`/v1/auth/github/bind`, {
+    method: "POST",
+    data: params,
+  });
+}
+
+/**
+ * Unbind github
+ */
+export async function GithubAuthControllerUnbind(
+  params: Paths.GithubAuthControllerUnbind.BodyParameters,
+): Promise<{
+  error: string;
+  data: Definitions.UserWithProfile;
+}> {
+  // /v1/auth/github/unbind
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || "",
+    ...params,
+  };
+  return request(`/v1/auth/github/unbind`, {
+    method: "POST",
+    data: params,
+  });
+}
diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts
@@ -64,6 +64,7 @@ export enum CURRENCY {
 }
 
 export const Routes = {
+  login: "/login",
   dashboard: "/dashboard",
   templates: "/market/templates",
 };

diff --git a/web/src/layouts/Basic/index.tsx b/web/src/layouts/Basic/index.tsx
@@ -6,23 +6,17 @@ import { Center, Spinner } from "@chakra-ui/react";
 import Warn from "./RealNameWarn";
 
 import Header from "@/layouts/Header";
-import { useGetProvidersQuery } from "@/pages/auth/service";
 import useAuthStore from "@/pages/auth/store";
 import useGlobalStore from "@/pages/globalStore";
 import useSiteSettingStore from "@/pages/siteSetting";
 
 export default function BasicLayout() {
   const { init, loading, userInfo } = useGlobalStore((state) => state);
   const { siteSettings } = useSiteSettingStore((state) => state);
-  const { providers, setProviders } = useAuthStore((state) => ({
-    providers: state.providers,
-    setProviders: state.setProviders,
+  const { phoneProvider } = useAuthStore((state) => ({
+    phoneProvider: state.phoneProvider,
   }));
 
-  useGetProvidersQuery((data: any) => {
-    setProviders(data?.data || []);
-  });
-
   useEffect(() => {
     init();
   }, [init]);
@@ -39,7 +33,7 @@ export default function BasicLayout() {
           <>
             {siteSettings.id_verify?.value === "on" &&
               !userInfo?.profile?.idVerified?.isVerified &&
-              providers.find((provider: any) => provider.name === "phone") && <Warn />}
+              phoneProvider && <Warn />}
             <Outlet />
           </>
         )}