diff --git a/src/common/component/styled/Menu.js b/src/common/component/styled/Menu.js index 1e9abb5d..4461662b 100644 --- a/src/common/component/styled/Menu.js +++ b/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; } diff --git a/src/common/hook/useCopy.js b/src/common/hook/useCopy.js index ec5fc0d3..f9245236 100644 --- a/src/common/hook/useCopy.js +++ b/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); diff --git a/src/routes/login/GoogleLoginButton.js b/src/routes/login/GoogleLoginButton.js index bc6c63fa..6185bd18 100644 --- a/src/routes/login/GoogleLoginButton.js +++ b/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 ( - + google icon - Sign in with Google + {loaded ? `Sign in with Google` : `Initailizing`} ); } diff --git a/src/routes/login/index.js b/src/routes/login/index.js index 2cd20a5c..bbd00b47 100644 --- a/src/routes/login/index.js +++ b/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("/"); } diff --git a/src/routes/oauth/index.js b/src/routes/oauth/index.js index 47e80e7f..1a2d9d09 100644 --- a/src/routes/oauth/index.js +++ b/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 ( - - {loading ? 'loading' : ''} - {error} - - ); + return ( + + {loading ? "loading" : ""} + {error} + + ); } diff --git a/src/routes/reg/RegWithUsername.js b/src/routes/reg/RegWithUsername.js index 01186ccb..3851d48a 100644 --- a/src/routes/reg/RegWithUsername.js +++ b/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 = `/#/`; } diff --git a/src/routes/sendMagicLink/index.js b/src/routes/sendMagicLink/index.js index 44bbe4a2..05c42963 100644 --- a/src/routes/sendMagicLink/index.js +++ b/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`} +
+ )} diff --git a/src/routes/sendMagicLink/styled.js b/src/routes/sendMagicLink/styled.js index 388f06db..824b5137 100644 --- a/src/routes/sendMagicLink/styled.js +++ b/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%; + } } `; diff --git a/src/routes/setting/navs.js b/src/routes/setting/navs.js index 6134b6a2..904585ec 100644 --- a/src/routes/setting/navs.js +++ b/src/routes/setting/navs.js @@ -61,7 +61,7 @@ const navs = [ }, { name: "social_login", - title: "Social Login", + title: "Login Methods", component: , }, { @@ -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; diff --git a/src/routes/settingChannel/index.js b/src/routes/settingChannel/index.js index 70719879..7e106083 100644 --- a/src/routes/settingChannel/index.js +++ b/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 ( <>