chore: updates

src/common/component/styled/Menu.js

@@ -12,6 +12,7 @@ const StyledMenu = styled.ul`
   .item {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 14px;
     white-space: nowrap;
     cursor: pointer;
@@ -23,8 +24,8 @@ const StyledMenu = styled.ul`
     line-height: 20px;
     color: #616161;
     .icon {
-      width: 20px;
-      height: 20px;
+      width: 12px;
+      height: 12px;
       path {
         fill: #475467;
       }

src/common/hook/useCopy.js

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { copyImageToClipboard } from "copy-image-clipboard";
+
 const useCopy = () => {
   const copyToClipboard = (str) => {
     const el = document.createElement("textarea");
@@ -23,13 +25,22 @@ const useCopy = () => {
 
   const [copied, setCopied] = useState(false);
 
-  const copy = (text) => {
+  const copy = (text, isImage = false) => {
     let inter = 0;
     if (!copied) {
-      setCopied(copyToClipboard(text));
-      inter = setTimeout(() => {
-        setCopied(false);
-      }, 500);
+      if (!isImage) {
+        setCopied(copyToClipboard(text));
+        inter = setTimeout(() => {
+          setCopied(false);
+        }, 500);
+      } else {
+        copyImageToClipboard(text).then(() => {
+          setCopied(true);
+          inter = setTimeout(() => {
+            setCopied(false);
+          }, 500);
+        });
+      }
     }
     return () => {
       clearTimeout(inter);

src/routes/login/GoogleLoginButton.js

@@ -7,18 +7,18 @@ import { StyledSocialButton } from "./styled";
 export default function GoogleLoginButton({ login, clientId }) {
   const { signIn, loaded } = useGoogleLogin({
     onScriptLoadFailure: (wtf) => {
-      console.log("google login script load failure", wtf);
+      console.error("google login script load failure", wtf);
     },
     clientId,
     onSuccess: ({ tokenId, ...rest }) => {
-      console.log("success", tokenId, rest);
+      console.info("google oauth success", tokenId, rest);
       login({
         id_token: tokenId,
         type: "google",
       });
     },
     onFailure: (wtf) => {
-      console.log("google login  failure", wtf);
+      console.error("google login failure", wtf);
     },
   });
   const handleGoogleLogin = () => {
@@ -26,9 +26,9 @@ export default function GoogleLoginButton({ login, clientId }) {
   };
   console.log("google login ", loaded);
   return (
-    <StyledSocialButton onClick={handleGoogleLogin}>
+    <StyledSocialButton disabled={!loaded} onClick={handleGoogleLogin}>
       <img className="icon" src={googleSvg} alt="google icon" />
-      Sign in with Google
+      {loaded ? `Sign in with Google` : `Initailizing`}
     </StyledSocialButton>
   );
 }

src/routes/login/index.js

@@ -84,7 +84,7 @@ export default function LoginPage() {
     if (isSuccess && data) {
       // 更新本地认证信息
       console.log("login data", data);
-      toast.success("login success");
+      toast.success("Login Successfully");
       dispatch(setAuthData(data));
       navigateTo("/");
     }

src/routes/oauth/index.js

@@ -1,52 +1,55 @@
-import { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
 
-import StyledWrapper from './styled';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useLoginMutation } from '../../app/services/auth';
-import toast from 'react-hot-toast';
-import { setAuthData } from '../../app/slices/auth.data';
+import StyledWrapper from "./styled";
+import { useNavigate, useParams } from "react-router-dom";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
+import { setAuthData } from "../../app/slices/auth.data";
 
 export default function OAuthPage() {
- const [login, { data, isSuccess, isError, error: loginError }] = useLoginMutation();
- const { token } = useParams();
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const dispatch = useDispatch();
- const navigateTo = useNavigate();
- useEffect(() => {
-  const startOauth = () => {
-   if (!token) {
-    setError('Token Not Found');
-    return;
-   }
-   login({ key: token, type: 'thirdparty' });
-  };
-  setTimeout(() => {
-   startOauth();
-  }, 1500);
- }, [token]);
- useEffect(() => {
-  if (isError) {
-   setError(loginError);
-  }
- }, [isError, loginError]);
+  const [
+    login,
+    { data, isSuccess, isError, error: loginError },
+  ] = useLoginMutation();
+  const { token } = useParams();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
+  const navigateTo = useNavigate();
+  useEffect(() => {
+    const startOauth = () => {
+      if (!token) {
+        setError("Token Not Found");
+        return;
+      }
+      login({ key: token, type: "thirdparty" });
+    };
+    setTimeout(() => {
+      startOauth();
+    }, 1500);
+  }, [token]);
+  useEffect(() => {
+    if (isError) {
+      setError(loginError);
+    }
+  }, [isError, loginError]);
 
- useEffect(() => {
-  if (isSuccess && data) {
-   setLoading(false);
-   // 更新本地认证信息
-   console.log('login data', data);
-   toast.success('login success');
-   dispatch(setAuthData(data));
-   navigateTo('/');
-  }
- }, [isSuccess, data]);
+  useEffect(() => {
+    if (isSuccess && data) {
+      setLoading(false);
+      // 更新本地认证信息
+      console.log("login data", data);
+      toast.success("Login Successfully");
+      dispatch(setAuthData(data));
+      navigateTo("/");
+    }
+  }, [isSuccess, data]);
 
- return (
-  <StyledWrapper>
-   {loading ? 'loading' : ''}
-   {error}
-  </StyledWrapper>
- );
+  return (
+    <StyledWrapper>
+      {loading ? "loading" : ""}
+      {error}
+    </StyledWrapper>
+  );
 }

src/routes/reg/RegWithUsername.js

@@ -46,7 +46,7 @@ export default function RegWithUsername() {
     if (isSuccess && data) {
       // 更新本地认证信息
       console.log("login data", data);
-      toast.success("login success");
+      toast.success("Login Successfully");
       dispatch(setAuthData(data));
       location.href = `/#/`;
     }

src/routes/sendMagicLink/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import { useState, useEffect } from "react";
 // import { useDispatch } from "react-redux";
-// import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
 import StyledWrapper from "./styled";
@@ -17,7 +17,7 @@ export default function SendMagicLinkPage() {
     { isSuccess, isLoading, error },
   ] = useSendMagicLinkMutation();
 
-  // const navigateTo = useNavigate();
+  const navigateTo = useNavigate();
   // const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   useEffect(() => {
@@ -48,6 +48,9 @@ export default function SendMagicLinkPage() {
     }
   }, [error]);
 
+  const handlePwdPath = () => {
+    navigateTo("/login");
+  };
   const handleLogin = (evt) => {
     evt.preventDefault();
     sendMagicLink(email);
@@ -94,6 +97,8 @@ export default function SendMagicLinkPage() {
                 {isLoading ? "Sending" : `Continue with Email`}
               </Button>
             </form>
+            <hr className="or" />
+            <Button onClick={handlePwdPath}>Sign in with Password</Button>
           </>
         )}
       </div>

src/routes/sendMagicLink/styled.js

@@ -43,6 +43,28 @@ const StyledWrapper = styled.div`
       gap: 20px;
       width: 360px;
     }
+    .or {
+      border: none;
+      position: relative;
+      height: 1px;
+      background-color: #e4e7ec;
+      margin: 26px 0;
+      &:after {
+        padding: 4px;
+        background-color: #fff;
+        content: "OR";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        font-size: 14px;
+        line-height: 20px;
+        color: #667085;
+      }
+    }
+    button {
+      width: 100%;
+    }
   }
 `;
 

src/routes/setting/navs.js

@@ -61,7 +61,7 @@ const navs = [
       },
       {
         name: "social_login",
-        title: "Social Login",
+        title: "Login Methods",
         component: <Logins />,
       },
       {
@@ -98,7 +98,7 @@ const useNavs = () => {
     return store.contacts.byId[store.authData.uid];
   });
   const Navs = navs.filter((nav) => {
-    if (loginUser.is_admin) {
+    if (loginUser?.is_admin) {
       return true;
     } else {
       return !nav.admin;

src/routes/settingChannel/index.js

@@ -39,8 +39,8 @@ export default function ChannelSetting() {
   };
   if (!cid) return null;
   const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
-  const canDelete = isAdmin || channel.owner == loginUid;
-  const canLeave = !channel.is_public;
+  const canDelete = isAdmin || channel?.owner == loginUid;
+  const canLeave = !channel?.is_public;
 
   return (
     <>