From 6e6d90756a2c68a4c0db5bee3327c702aa3ece5c Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 22 Nov 2024 07:49:24 +0000 Subject: [PATCH] [Dashboard] Onboarding UI adjustments + use doLogout server action instead of fetch (#5480) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR primarily focuses on refactoring the logout functionality across various components by replacing direct API calls with a centralized `doLogout` function. It also includes some UI adjustments and enhancements. ### Detailed summary - Removed direct API call to `/api/auth/logout` in favor of `doLogout()` in multiple components. - Updated styles for various UI elements, including `AccountForm` and `OnboardingChoosePlan`. - Adjusted layout and class names for better responsiveness and appearance. - Added `Aurora` component for visual effects in the `LoginAndOnboardingPage`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../react/components/connect-wallet/index.tsx | 6 +- .../app/account/components/AccountHeader.tsx | 6 +- .../src/app/api/auth/logout/route.ts | 17 ------ .../Header/SecondaryNav/SecondaryNav.tsx | 1 + apps/dashboard/src/app/login/LoginPage.tsx | 60 +++++++++++++++++-- .../team-header-logged-in.client.tsx | 5 +- .../src/components/onboarding/ChoosePlan.tsx | 13 ++-- .../src/components/onboarding/General.tsx | 17 ++---- .../onboarding/on-boarding-ui.client.tsx | 4 +- .../settings/Account/AccountForm.tsx | 15 +---- 10 files changed, 77 insertions(+), 67 deletions(-) delete mode 100644 apps/dashboard/src/app/api/auth/logout/route.ts diff --git a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx index 53732dd4816..3faf177c711 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx +++ b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx @@ -21,6 +21,7 @@ import { useConnectModal, } from "thirdweb/react"; import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button"; +import { doLogout } from "../../../../app/login/auth-actions"; import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal"; import { useAllChainsData } from "../../../../hooks/chains/allChains"; import { @@ -174,10 +175,7 @@ export const CustomConnectWallet = (props: { }} onDisconnect={async () => { try { - // log out the user - await fetch("/api/auth/logout", { - method: "POST", - }); + await doLogout(); } catch (err) { console.error("Failed to log out", err); } diff --git a/apps/dashboard/src/app/account/components/AccountHeader.tsx b/apps/dashboard/src/app/account/components/AccountHeader.tsx index 578251443bd..b5bde823acc 100644 --- a/apps/dashboard/src/app/account/components/AccountHeader.tsx +++ b/apps/dashboard/src/app/account/components/AccountHeader.tsx @@ -9,6 +9,7 @@ import { useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { useCallback, useState } from "react"; import { useActiveWallet, useDisconnect } from "thirdweb/react"; import { LazyCreateAPIKeyDialog } from "../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog"; +import { doLogout } from "../../login/auth-actions"; import { type AccountHeaderCompProps, AccountHeaderDesktopUI, @@ -27,11 +28,8 @@ export function AccountHeader(props: { const { disconnect } = useDisconnect(); const logout = useCallback(async () => { - // log out the user try { - await fetch("/api/auth/logout", { - method: "POST", - }); + await doLogout(); if (wallet) { disconnect(wallet); } diff --git a/apps/dashboard/src/app/api/auth/logout/route.ts b/apps/dashboard/src/app/api/auth/logout/route.ts deleted file mode 100644 index 7ba34f0ca36..00000000000 --- a/apps/dashboard/src/app/api/auth/logout/route.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie"; -import { cookies } from "next/headers"; - -export const POST = async () => { - const cookieStore = await cookies(); - - // delete all cookies that start with the token prefix - const allCookies = cookieStore.getAll(); - for (const cookie of allCookies) { - if (cookie.name.startsWith(COOKIE_PREFIX_TOKEN)) { - cookieStore.delete(cookie.name); - } - } - // also delete the active account cookie - cookieStore.delete(COOKIE_ACTIVE_ACCOUNT); - return new Response(null, { status: 200 }); -}; diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx index 12d20cbb66f..5db64c627be 100644 --- a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx +++ b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx @@ -39,6 +39,7 @@ export function SecondaryNavLinks() { Docs diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx index 8e03dddb88f..652e71dce36 100644 --- a/apps/dashboard/src/app/login/LoginPage.tsx +++ b/apps/dashboard/src/app/login/LoginPage.tsx @@ -7,6 +7,7 @@ import { useThirdwebClient } from "@/constants/thirdweb.client"; import { useDashboardRouter } from "@/lib/DashboardRouter"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import { useTheme } from "next-themes"; +import Link from "next/link"; import { Suspense, lazy, useState } from "react"; import { ConnectEmbed, useActiveWalletConnectionStatus } from "thirdweb/react"; import { createWallet, inAppWallet } from "thirdweb/wallets"; @@ -46,20 +47,39 @@ export function LoginAndOnboardingPage(props: { nextPath: string | undefined; }) { return ( -
+

- Get started with thirdweb + Get started with thirdweb

- + +
+ + Support + + + + Docs + + + +
-
+
}> @@ -69,7 +89,13 @@ export function LoginAndOnboardingPage(props: { + +
); @@ -77,7 +103,7 @@ export function LoginAndOnboardingPage(props: { function LoadingCard() { return ( -
+
); @@ -202,3 +228,25 @@ function isValidRedirectPath(encodedPath: string): boolean { return false; } } + +type AuroraProps = { + size: { width: string; height: string }; + pos: { top: string; left: string }; + color: string; +}; + +const Aurora: React.FC = ({ color, pos, size }) => { + return ( +
+ ); +}; diff --git a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx index 1e9891eae47..db2188bdab7 100644 --- a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx +++ b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx @@ -9,6 +9,7 @@ import { useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { useCallback, useState } from "react"; import { useActiveWallet, useDisconnect } from "thirdweb/react"; import { LazyCreateAPIKeyDialog } from "../../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog"; +import { doLogout } from "../../../login/auth-actions"; import { type TeamHeaderCompProps, TeamHeaderDesktopUI, @@ -30,9 +31,7 @@ export function TeamHeaderLoggedIn(props: { const logout = useCallback(async () => { // log out the user try { - await fetch("/api/auth/logout", { - method: "POST", - }); + await doLogout(); if (activeWallet) { disconnect(activeWallet); } diff --git a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx index e575282a199..e6c936cb800 100644 --- a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx +++ b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx @@ -12,13 +12,13 @@ export function OnboardingChoosePlan(props: { return (
-
+
-
+
-
+