feat: add account page

saas-js · Oct 25, 2024 · b0e9d6a · b0e9d6a
1 parent 223436c
commit b0e9d6a
Show file tree

Hide file tree

Showing 8 changed files with 745 additions and 113 deletions.
diff --git a/apps/website/src/app/api/discord/route.ts b/apps/website/src/app/api/discord/route.ts
@@ -4,20 +4,26 @@ const PRO_ROLE_ID = '990532440126808094'
 
 import { NextRequest, NextResponse } from 'next/server'
 
-export const GET = async () => {
+export const GET = async (req: NextRequest) => {
+  const code = req.nextUrl.searchParams.get('code')
+
+  if (!code) {
+    return NextResponse.redirect(req.nextUrl.origin)
+  }
+
   const supabase = createClient()
 
   const {
     data: { session },
-  } = await supabase.auth.getSession()
+  } = await supabase.auth.exchangeCodeForSession(code)
 
   if (!session) {
     return NextResponse.json({
       success: false,
       message: 'You need to be logged in.',
     })
   }
-  console.log(session)
+
   if (!session.provider_token) {
     return NextResponse.json({
       success: false,

diff --git a/apps/website/src/components/layout/navigation-menu.tsx b/apps/website/src/components/layout/navigation-menu.tsx
@@ -402,6 +402,21 @@ export const Navigation = () => {
           />
         </Box>
 
+        <HStack spacing="0">
+          <Tooltip label="Github">
+            <IconButton
+              variant="ghost"
+              aria-label="github"
+              icon={<FaGithub size="14" />}
+              borderRadius="md"
+              as={Link}
+              href="https://github.com/saas-js/saas-ui"
+            />
+          </Tooltip>
+
+          <ThemeToggle />
+        </HStack>
+
         {isAuthenticated ? (
           <Menu>
             <MenuButton
@@ -413,6 +428,9 @@ export const Navigation = () => {
             </MenuButton>
             <MenuList>
               <MenuGroup title={user?.email || undefined}>
+                <MenuItem onClick={() => router.push('/account')}>
+                  Account
+                </MenuItem>
                 <MenuItem onClick={() => router.push('/redeem')}>
                   Redeem license
                 </MenuItem>
@@ -442,21 +460,6 @@ export const Navigation = () => {
           </>
         )}
 
-        <HStack spacing="0">
-          <Tooltip label="Github">
-            <IconButton
-              variant="ghost"
-              aria-label="github"
-              icon={<FaGithub size="14" />}
-              borderRadius="md"
-              as={Link}
-              href="https://github.com/saas-js/saas-ui"
-            />
-          </Tooltip>
-
-          <ThemeToggle />
-        </HStack>
-
         <MobileNavButton
           ref={mobileNavBtnRef}
           aria-label="Open Menu"

diff --git a/apps/website/src/components/layout/navigation.tsx b/apps/website/src/components/layout/navigation.tsx
@@ -224,6 +224,9 @@ const Header = () => {
             </MenuButton>
             <MenuList>
               <MenuGroup title={user?.email || undefined}>
+                <MenuItem onClick={() => router.push('/account')}>
+                  Account
+                </MenuItem>
                 <MenuItem onClick={() => router.push('/redeem')}>
                   Redeem license
                 </MenuItem>

diff --git a/apps/website/src/components/redeem-form/index.tsx b/apps/website/src/components/redeem-form/index.tsx
@@ -7,20 +7,15 @@ import {
   Text,
   Spinner,
   Center,
-  IconButton,
-  ButtonGroup,
   Card,
   CardBody,
-  Button,
-  Box,
 } from '@chakra-ui/react'
 
 import { useRouter } from 'next/router'
 import { ButtonLink } from '@/components/link'
 
 import {
   useLocalStorage,
-  Link,
   FormLayout,
   SubmitButton,
   useSnackbar,
@@ -30,23 +25,12 @@ import { Form } from '@saas-ui/forms/zod'
 
 import * as z from 'zod'
 
-import { FaGithub, FaDiscord } from 'react-icons/fa'
-
 import confetti from 'canvas-confetti'
-import { useCurrentUser } from '@saas-ui/auth'
-import { User } from '@supabase/supabase-js'
-import { DiscordRoles } from './discord-roles'
 
 export function RedeemForm(props) {
   const router = useRouter()
   const snackbar = useSnackbar()
 
-  const user = useCurrentUser<User>()
-
-  const hasDiscord = user?.identities?.some(
-    (identity) => identity.provider === 'discord'
-  )
-
   const [data, setData] = useLocalStorage<{
     licenseKey: string
     githubAccount: string
@@ -57,7 +41,7 @@ export function RedeemForm(props) {
   const [licenseKey, setLicenseKey] = useState<string>('')
 
   const [loading, setLoading] = useState<boolean>(true)
-
+  const [success, setSuccess] = useState<boolean>(false)
   const celebrate = () => {
     confetti({
       zIndex: 999,
@@ -133,6 +117,7 @@ export function RedeemForm(props) {
           discordInvite: response.discordInvite,
           githubInvited: response.githubInvited,
         })
+        setSuccess(true)
       })
       .catch((error) => {
         console.error(error)
@@ -141,19 +126,6 @@ export function RedeemForm(props) {
       })
   }
 
-  useEffect(() => {
-    if (user && data?.licenseKey && !user.user_metadata?.licenses) {
-      fetch('/api/sync', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          licenseKey: data.licenseKey,
-          githubAccount: data.githubAccount,
-        }),
-      })
-    }
-  }, [user, data])
-
   let content
 
   if (loading) {
@@ -162,7 +134,7 @@ export function RedeemForm(props) {
         <Spinner />
       </Center>
     )
-  } else if (data) {
+  } else if (success && data) {
     content = (
       <Stack spacing="4" fontSize="md">
         <Heading size="md">
@@ -181,35 +153,7 @@ export function RedeemForm(props) {
           <Text>You will receive a Github invite shortly.</Text>
         )}
 
-        <Text>
-          Your opinion is very important, please don&apos;t hesitate to reach
-          out when you have any questions or feedback, especially if you
-          don&apos;t like something :)
-        </Text>
-
-        <DiscordRoles />
-
-        <ButtonGroup>
-          <ButtonLink href="/docs/pro/overview">Documentation</ButtonLink>
-
-          <ButtonLink
-            variant="ghost"
-            href="https://github.com/saas-js/saas-ui-pro"
-            leftIcon={<FaGithub />}
-            target="_blank"
-          >
-            saas-ui-pro
-          </ButtonLink>
-
-          <ButtonLink
-            variant="ghost"
-            href="https://github.com/saas-js/saas-ui-pro-nextjs-starter-kit"
-            leftIcon={<FaGithub />}
-            target="_blank"
-          >
-            nextjs-starter-kit
-          </ButtonLink>
-        </ButtonGroup>
+        <ButtonLink href="/account">Continue to your account</ButtonLink>
       </Stack>
     )
   } else {

diff --git a/apps/website/src/lib/supabase.ts b/apps/website/src/lib/supabase.ts
@@ -1,9 +1,11 @@
 import {
   createBrowserClient,
   createServerClient as _createServerClient,
-  serialize,
+  serializeCookieHeader,
   type CookieOptions,
 } from '@supabase/ssr'
+import { type GetServerSidePropsContext } from 'next'
+
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
@@ -21,11 +23,37 @@ export const createServerClient = (
         return req.cookies[name]
       },
       set(name: string, value: string, options: CookieOptions) {
-        res.setHeader('Set-Cookie', serialize(name, value, options))
+        res.setHeader('Set-Cookie', serializeCookieHeader(name, value, options))
       },
       remove(name: string, options: CookieOptions) {
-        res.setHeader('Set-Cookie', serialize(name, '', options))
+        res.setHeader('Set-Cookie', serializeCookieHeader(name, '', options))
       },
     },
   })
 }
+
+export const getServerSidePropsClient = ({
+  req,
+  res,
+}: GetServerSidePropsContext) => {
+  const supabase = _createServerClient(supabaseUrl, supabaseKey, {
+    cookies: {
+      getAll() {
+        return Object.keys(req.cookies).map((name) => ({
+          name,
+          value: req.cookies[name] || '',
+        }))
+      },
+      setAll(cookiesToSet) {
+        res.setHeader(
+          'Set-Cookie',
+          cookiesToSet.map(({ name, value, options }) =>
+            serializeCookieHeader(name, value, options)
+          )
+        )
+      },
+    },
+  })
+
+  return supabase
+}