Merge branch 'tristan/development'

.vscode/settings.json

@@ -26,5 +26,5 @@
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["btns", "rustchat"]
+  "cSpell.words": ["btns", "oidc", "rustchat"]
 }

src/app/config.ts

@@ -35,6 +35,7 @@ export const KEY_DEVICE_KEY = "RUSTCHAT_DEVICE_KEY";
 export const KEY_USERS_VERSION = "RUSTCHAT_USERS_VERSION";
 export const KEY_AFTER_MID = "RUSTCHAT_AFTER_MID";
 export const KEY_PWA_INSTALLED = "RUSTCHAT_PWA_INSTALLED";
+export const KEY_LOCAL_MAGIC_TOKEN = "RUSTCHAT_LOCAL_MAGIC_TOKEN";
 export const Emojis = ["👍", "❤️", "😄", "👀", "👎", "🎉", "🙁", "🚀"];
 export const Views = {
   item: "item",

src/app/services/base.query.ts

@@ -84,7 +84,7 @@ const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
         break;
       case 500:
         {
-          toast.error(result.error.data || "server error");
+          toast.error(result.error.data || "Server Error");
         }
         break;
       case 401:

src/common/component/GithubLoginButton.tsx

@@ -1,8 +1,11 @@
-// import { useState, useEffect } from "react";
-// import { useGoogleLogin } from "react-google-login";
+import { useEffect } from "react";
 import IconGithub from "../../assets/icons/github.svg";
 import styled from "styled-components";
+import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
+
 import Button from "./styled/Button";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
 
 const StyledSocialButton = styled(Button)`
   width: 100%;
@@ -20,18 +23,42 @@ const StyledSocialButton = styled(Button)`
   }
 `;
 
-export default function GithubLoginButton({ config = {} }) {
-  const { client_id } = config;
+type Props = {
+  client_id: string;
+  type?: "login" | "register";
+};
+
+export default function GithubLoginButton({ type = "login", client_id }: Props) {
+  //拿本地存的magic token
+  const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
+  const [login, { isLoading, isSuccess }] = useLoginMutation();
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const isGithub = query.get("oauth") === "github";
+    const code = query.get("code");
+    if (isGithub && code) {
+      login({
+        magic_token,
+        code: code,
+        type: "github"
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("Login Successfully");
+      // navigateTo("/");
+    }
+  }, [isSuccess]);
   const handleGithubLogin = () => {
     location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`;
     // console.log("github login");
   };
   // console.log("google login ", loaded);
   return (
-    <StyledSocialButton onClick={handleGithubLogin}>
+    <StyledSocialButton onClick={handleGithubLogin} disabled={isLoading}>
       <IconGithub className="icon" />
-      Sign in with Github
-      {/* {loaded ? `Sign in with Github` : `Initailizing`} */}
+      {` ${type === "login" ? "Sign in" : "Sign up"} with Github`}
     </StyledSocialButton>
   );
 }

src/common/component/GoogleLoginButton.tsx

@@ -2,7 +2,8 @@ import { FC, useEffect } from "react";
 import { useGoogleLogin } from "react-google-login";
 import toast from "react-hot-toast";
 import styled from "styled-components";
-import googleSvg from "../../assets/icons/google.svg?url";
+import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
+import IconGoogle from "../../assets/icons/google.svg";
 import Button from "./styled/Button";
 import { useLoginMutation } from "../../app/services/auth";
 
@@ -24,11 +25,13 @@ const StyledSocialButton = styled(Button)`
 
 interface Props {
   clientId: string;
+  type?: "login" | "register";
 }
 
-const GoogleLoginButton: FC<Props> = ({ clientId }) => {
+const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
   const [login, { isSuccess, isLoading }] = useLoginMutation();
-
+  //拿本地存的magic token
+  const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
   const { signIn, loaded } = useGoogleLogin({
     onScriptLoadFailure: (wtf) => {
       console.error("google login script load failure", wtf);
@@ -37,6 +40,7 @@ const GoogleLoginButton: FC<Props> = ({ clientId }) => {
     onSuccess: ({ tokenId, ...rest }) => {
       console.info("google oauth success", tokenId, rest);
       login({
+        magic_token,
         id_token: tokenId,
         type: "google"
       });
@@ -59,8 +63,8 @@ const GoogleLoginButton: FC<Props> = ({ clientId }) => {
   // console.log("google login ", loaded);
   return (
     <StyledSocialButton disabled={!loaded || isLoading} onClick={handleGoogleLogin}>
-      <img className="icon" src={googleSvg} alt="google icon" />
-      {loaded ? `Sign in with Google` : `Initailizing`}
+      <IconGoogle className="icon" alt="google icon" />
+      {loaded ? `${type === "login" ? "Sign in" : "Sign up"} with Google` : `Initializing`}
     </StyledSocialButton>
   );
 };

src/routes/login/index.tsx

@@ -38,14 +38,6 @@ export default function LoginPage() {
     const exists = query.get("exists");
     if (oauth) {
       switch (oauth) {
-        case "github":
-          if (code) {
-            login({
-              code: code,
-              type: "github"
-            });
-          }
-          break;
         case "oidc":
           if (code && state) {
             login({
@@ -84,13 +76,18 @@ export default function LoginPage() {
           toast.error(error.data);
           break;
         case 401:
-          toast.error("username or password incorrect");
+          toast.error("Username or Password incorrect");
           break;
         case 404:
-          toast.error("account not exsit");
+          toast.error("Account not exist");
+          break;
+        case 410:
+          toast.error(
+            "No associated account found, please contact admin for an invitation link to join."
+          );
           break;
         default:
-          toast.error("something error");
+          toast.error("Something Error");
           break;
       }
       return;
@@ -173,7 +170,7 @@ export default function LoginPage() {
         {hasDivider && <hr className="or" />}
         {enableMagicLink && <MagicLinkLogin />}
         {googleLogin && <GoogleLoginButton clientId={clientId} />}
-        {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
+        {enableGithubLogin && <GithubLoginButton client_id={githubAuthConfig?.client_id} />}
         {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
         {oidc.length > 0 && <OidcLoginButton issuers={oidc} />}
         {whoCanSignUp === "EveryOne" && <SignUpLink />}

src/routes/reg/Register.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
 // import { useNavigate } from "react-router-dom";
-import BASE_URL from "../../app/config";
+import BASE_URL, { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
@@ -30,6 +30,8 @@ export default function Reg() {
     // const githubCode = query.get("gcode");
     const token = query.get("magic_token");
     if (token) {
+      //本地存一下 magic token 后续oauth流程用到
+      localStorage.setItem(KEY_LOCAL_MAGIC_TOKEN, token);
       setMagicToken(token);
     }
   }, []);
@@ -139,8 +141,10 @@ export default function Reg() {
         </Button>
       </form>
       <hr className="or" />
-      {googleLogin && <GoogleLoginButton clientId={clientId} />}
-      {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
+      {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
+      {enableGithubLogin && (
+        <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
+      )}
       <SignInLink />
     </>
   );

src/routes/reg/index.tsx

@@ -1,6 +1,4 @@
 import { Outlet } from "react-router-dom";
-// import { useMatch } from "react-router-dom";
-
 import StyledWrapper from "./styled";
 
 export default function RegContainer() {