From c08bb8fb13c8e9b1722364ad408683d8367cb330 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Thu, 27 Oct 2022 23:07:39 +0800 Subject: [PATCH] feat: google login --- public/widget.html | 1 - public/widget_demo.html | 2 +- src/common/component/GoogleLoginButton.tsx | 10 ++--- src/common/hook/useGithubAuthConfig.ts | 2 +- src/index-widget.tsx | 8 ++-- src/widget/Popup/Login/index.tsx | 30 +++++++++++++++ src/widget/Popup/MessageFeed/Message/Text.tsx | 16 ++++---- src/widget/Popup/MessageFeed/index.tsx | 12 +++++- src/widget/Popup/Welcome.tsx | 14 ++++++- src/widget/Popup/index.tsx | 37 +++++++------------ src/widget/index.tsx | 10 ++--- 11 files changed, 89 insertions(+), 53 deletions(-) create mode 100644 src/widget/Popup/Login/index.tsx diff --git a/public/widget.html b/public/widget.html index 62c21086..33a95353 100644 --- a/public/widget.html +++ b/public/widget.html @@ -19,6 +19,5 @@
- diff --git a/public/widget_demo.html b/public/widget_demo.html index 47f13a84..03effb84 100644 --- a/public/widget_demo.html +++ b/public/widget_demo.html @@ -9,5 +9,5 @@ - + diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx index 9b623060..65600eef 100644 --- a/src/common/component/GoogleLoginButton.tsx +++ b/src/common/component/GoogleLoginButton.tsx @@ -33,7 +33,7 @@ const StyledSocialButton = styled(Button)` height: 24px; } } - .invisible { + > .hide { /* z-index: 1; */ /* opacity: 0; */ left: 0; @@ -45,7 +45,7 @@ const StyledSocialButton = styled(Button)` } } &:hover { - .invisible { + .hide { opacity: 0; z-index: 999; } @@ -92,10 +92,10 @@ const GoogleLoginInner: FC = ({ type = "login", loaded, loadError }) => { {loadError ? "Script Load Error!" : loaded - ? `${type === "login" ? "Sign in" : "Sign up"} with Google` - : `Initializing`} + ? `${type === "login" ? "Sign in" : "Sign up"} with Google` + : `Initializing`} -
+
{ diff --git a/src/common/hook/useGithubAuthConfig.ts b/src/common/hook/useGithubAuthConfig.ts index b2b261f8..fc4f0656 100644 --- a/src/common/hook/useGithubAuthConfig.ts +++ b/src/common/hook/useGithubAuthConfig.ts @@ -7,7 +7,7 @@ import { GithubAuthConfig } from "../../types/server"; export default function useGithubAuthConfig() { const [changed, setChanged] = useState(false); - const [config, setConfig] = useState(undefined); + const [config, setConfig] = useState(); const { data } = useGetGithubAuthConfigQuery(undefined, { refetchOnMountOrArgChange: true }); diff --git a/src/index-widget.tsx b/src/index-widget.tsx index ebd0b778..b9cca9fa 100644 --- a/src/index-widget.tsx +++ b/src/index-widget.tsx @@ -6,9 +6,9 @@ import './assets/index.css'; import store from "./app/store"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); - +const hostId = new URLSearchParams(location.search).get("host"); root.render( - - - + hostId ? + + : null ); diff --git a/src/widget/Popup/Login/index.tsx b/src/widget/Popup/Login/index.tsx new file mode 100644 index 00000000..37eb4cc2 --- /dev/null +++ b/src/widget/Popup/Login/index.tsx @@ -0,0 +1,30 @@ +// import React from 'react' +import { useGetLoginConfigQuery } from '../../../app/services/server'; +import GithubLoginButton from '../../../common/component/GithubLoginButton'; +import GoogleLoginButton from '../../../common/component/GoogleLoginButton'; +import useGithubAuthConfig from '../../../common/hook/useGithubAuthConfig'; +import useGoogleAuthConfig from '../../../common/hook/useGoogleAuthConfig'; + +// type Props = {} + +const Login = () => { + const { clientId } = useGoogleAuthConfig(); + const { config: githubAuthConfig } = useGithubAuthConfig(); + + const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery(); + if (!loginConfigSuccess) return checking...; + + const { + github: enableGithubLogin, + google: enableGoogleLogin, + } = loginConfig; + const googleLogin = enableGoogleLogin && clientId; + return ( +
+ {googleLogin && } + {enableGithubLogin && } +
+ ); +}; + +export default Login; \ No newline at end of file diff --git a/src/widget/Popup/MessageFeed/Message/Text.tsx b/src/widget/Popup/MessageFeed/Message/Text.tsx index c3cc2850..7a7401c4 100644 --- a/src/widget/Popup/MessageFeed/Message/Text.tsx +++ b/src/widget/Popup/MessageFeed/Message/Text.tsx @@ -21,29 +21,29 @@ const Time: FC = ({ time }) => { }; export type MessageProps = { + hostId: number; compact?: boolean; isFirst?: boolean; } & MessagePayload; const Index: FC = (props) => { const { server: { name, logo }, loginUser } = useAppSelector(store => { return { server: store.server, loginUser: store.authData.user }; }); - const { from_uid, content, created_at, compact, isFirst = false } = props; - // 暂时写死 - const isHost = from_uid == 304; + const { hostId, from_uid, content, created_at, compact, isFirst = false } = props; + const isHost = from_uid == hostId; return (
{!compact && ( -
+
{isHost ? ( logo ) : ( - avatar + avatar )}
)} @@ -55,12 +55,12 @@ const Index: FC = (props) => { )}

{compact && ( -

{text}

); -const Index = () => { +type Props = { + needLogin?: boolean +} +const Index = ({ needLogin = false }: Props) => { const { name, logo } = useAppSelector(store => store.server); return (
@@ -21,7 +25,13 @@ const Index = () => { hour12: true, })}`} - + + {needLogin && <> + +
+ +
+ }
); diff --git a/src/widget/Popup/index.tsx b/src/widget/Popup/index.tsx index 2999ed11..f41673cb 100644 --- a/src/widget/Popup/index.tsx +++ b/src/widget/Popup/index.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef, ChangeEvent } from 'react'; +import { useState, useRef, ChangeEvent } from 'react'; import Header from './Header'; import Welcome from './Welcome'; import MessageFeed from './MessageFeed'; @@ -6,21 +6,17 @@ import Line from './Line'; import useSendMessage from '../../common/hook/useSendMessage'; import { useAppSelector } from '../../app/store'; type Props = { + hostId: number, handleClose: () => void } -const Index = ({ handleClose }: Props) => { - const messageListRef = useRef(null); - const loginUid = useAppSelector(store => store.authData.user?.uid); - const { sendMessage, isSuccess } = useSendMessage({ - from: loginUid, - to: 304, +const Index = ({ handleClose, hostId }: Props) => { + const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData); + const { sendMessage } = useSendMessage({ + from: loginUser?.uid, + to: hostId, context: "user" }); - // const { checked, firstEnter, session } = useSession({ preCheck: true }); - // const { isSending, sendSuccess, sendMessage, message } = useSendMessage(); - // const { appendMessage, messages } = useFeed(); - // const messageListRef = useRef(null); const [input, setInput] = useState(''); const handleInput = (evt: ChangeEvent) => { setInput(evt.target.value); @@ -34,23 +30,16 @@ const Index = ({ handleClose }: Props) => { setInput(""); }; - // 自动滚动到底部，todo:根据距离底部位置大小自动滚动 类似微信体验 - useEffect(() => { - const container = messageListRef.current; - if (container) { - setTimeout(() => { - container.scrollTop = container.scrollHeight; - }, 30); - } - }, [isSuccess]); + // no token or guest login + const notLogin = !token || isGuest; return ( -