diff --git a/src/App.tsx b/src/App.tsx index d68aa07..57488db 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,6 @@ import { Wallet_Service } from "./services"; import { Navigate, Route, Routes } from "react-router-dom"; import { useWrapperSetup } from "./utils/Wrapper"; import LoadingPage from "./Components/LoadingPage/LoadingPage"; -import LoginPage from "./features/Auth/pages/LoginPage"; // Pages const FeedPage = React.lazy(() => import("./features/Posts/pages/FeedPage/FeedPage")) @@ -16,6 +15,8 @@ const PostDetailsPage = React.lazy(() => import("./features/Posts/pages/PostDeta const CategoryPage = React.lazy(() => import("src/features/Projects/pages/CategoryPage/CategoryPage")) const ExplorePage = React.lazy(() => import("src/features/Projects/pages/ExplorePage")) const DonatePage = React.lazy(() => import("./features/Donations/pages/DonatePage/DonatePage")) +const LoginPage = React.lazy(() => import("./features/Auth/pages/LoginPage/LoginPage")) +const LogoutPage = React.lazy(() => import("./features/Auth/pages/LogoutPage/LogoutPage")) function App() { const { isWalletConnected } = useAppSelector(state => ({ @@ -58,6 +59,7 @@ function App() { } /> } /> + } /> } /> diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx index d332e87..9ac6405 100644 --- a/src/Components/Navbar/NavDesktop.tsx +++ b/src/Components/Navbar/NavDesktop.tsx @@ -15,6 +15,8 @@ import { } from '@szhsin/react-menu'; import '@szhsin/react-menu/dist/index.css'; import { FiAward, FiChevronDown, FiFeather, FiLogIn, FiMic } from "react-icons/fi"; +import { useMeQuery } from "src/graphql"; +import Avatar from "src/features/Profiles/Components/Avatar/Avatar"; export default function NavDesktop() { @@ -22,6 +24,8 @@ export default function NavDesktop() { const communityRef = useRef(null); const [communitymenuProps, toggleCommunityMenu] = useMenuState({ transition: true }); + const meQuery = useMeQuery(); + const { isWalletConnected } = useAppSelector((state) => ({ isWalletConnected: state.wallet.isConnected, })); @@ -157,13 +161,34 @@ export default function NavDesktop() { : } */} - {currentSection === 'products' && + {currentSection === 'products' && } - - Login - + {meQuery.data?.me ? + }> + + Profile (soon) + + { + e.syntheticEvent.preventDefault(); + navigate("/logout"); + }} + className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' + > + Logout + + + + : + + Login + + }
{ - const stateChanged = Boolean(data.me) !== isLoggedIn; - if (stateChanged) - setIsPollilng(false); - - setIsLoggedIn(Boolean(data.me)); - } - }) - - - - useEffect(() => { - (async () => { - const res = await fetch(process.env.REACT_APP_AUTH_END_POINT! + '/login') - const data = await res.json() - setLoadingLnurl(false); - setLnurlAuth(data.encoded) - })() - }, []) - - const { startPolling, stopPolling } = meQuery; - useEffect(() => { - if (isPollilng) - startPolling(1500); - else - stopPolling(); - }, [isPollilng, startPolling, stopPolling]) - - - const onLogin = () => { - setIsPollilng(true); - } - - const logout = async () => { - await fetch(process.env.REACT_APP_AUTH_END_POINT! + '/logout', { - method: "GET", - 'credentials': "include" - }) - setIsPollilng(true); - } - - - return ( -
- {loadingLnurl &&
- -

Fetching Lnurl-Auth...

-
} - {!loadingLnurl && - (isLoggedIn ? -
-

- Hello: @{meQuery.data?.me?.name.slice(0, 10)}... -

- - -
: - - Login with Lightning - - )} -
- ) -} diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx new file mode 100644 index 0000000..5df2785 --- /dev/null +++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from "react" +import { BsFillLightningChargeFill } from "react-icons/bs"; +import { Grid } from "react-loader-spinner"; +import { useNavigate } from "react-router-dom"; +import { useMeQuery } from "src/graphql" + + +export default function LoginPage() { + const [loadingLnurl, setLoadingLnurl] = useState(true) + const [lnurlAuth, setLnurlAuth] = useState(""); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const navigate = useNavigate() + + + const meQuery = useMeQuery({ + onCompleted: (data) => { + + if (data.me) { + setIsLoggedIn(true); + meQuery.stopPolling(); + setTimeout(() => { + navigate('/') + }, 2000) + } + + } + }) + + + + useEffect(() => { + (async () => { + const res = await fetch(process.env.REACT_APP_AUTH_END_POINT! + '/login') + const data = await res.json() + setLoadingLnurl(false); + setLnurlAuth(data.encoded) + })(); + }, []) + + + + const onLogin = () => { + meQuery.startPolling(1500) + } + + + + + return ( +
+ {loadingLnurl &&
+ +

Fetching Lnurl-Auth...

+
} + {!loadingLnurl && + (isLoggedIn ? +
+

+ Hello: @{meQuery.data?.me?.name.slice(0, 10)}... +

+ +
: +
+

+ Login +

+

+ Zero credentials authentication. +
+ All you need is a connected WebLN wallet that supports lnurl-auth, & you are good to go !! +

+ + Login with Lightning + +
+ )} +
+ ) +} diff --git a/src/features/Auth/pages/LogoutPage/LogoutPage.tsx b/src/features/Auth/pages/LogoutPage/LogoutPage.tsx new file mode 100644 index 0000000..c8417e9 --- /dev/null +++ b/src/features/Auth/pages/LogoutPage/LogoutPage.tsx @@ -0,0 +1,33 @@ +import { useEffect, useState } from "react" +import { BsFillLightningChargeFill } from "react-icons/bs"; +import { Grid, LineWave } from "react-loader-spinner"; +import { useNavigate } from "react-router-dom"; + + +export default function LoginPage() { + + const navigate = useNavigate(); + + useEffect(() => { + fetch(process.env.REACT_APP_AUTH_END_POINT! + '/logout', { + method: "GET", + 'credentials': "include" + }) + .then(() => { + window.location.pathname = '/' + }) + .catch(() => { + window.location.pathname = '/' + }) + }, [navigate]) + + + return ( +
+

+ Logging you out... +

+ +
+ ) +} diff --git a/src/features/Profiles/Components/Avatar/Avatar.tsx b/src/features/Profiles/Components/Avatar/Avatar.tsx index e515a24..adb9400 100644 --- a/src/features/Profiles/Components/Avatar/Avatar.tsx +++ b/src/features/Profiles/Components/Avatar/Avatar.tsx @@ -7,7 +7,7 @@ interface Props { export default function Avatar({ src, alt, width = 40 }: Props) { return ( - {alt