feat: add sign-in-partner page (supabase#37699)

* feat: add sign-in-partner page

* Update sign in partner page

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: hf

apps/studio/components/interfaces/SignIn/SignInPartner.tsx

@@ -0,0 +1,54 @@
+import { InlineLink } from 'components/ui/InlineLink'
+import { auth } from 'lib/gotrue'
+import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+export const SignInPartner = () => {
+  const router = useRouter()
+
+  useEffect(() => {
+    ;(async () => {
+      const params = new URLSearchParams(window.location.hash.substring(1))
+
+      const partner = params.get('partner')
+      const token = params.get('id_token')
+
+      const { data } = await auth.getSession()
+
+      if (!data.session && partner && token) {
+        try {
+          await auth.signInWithIdToken({ provider: partner, token })
+        } finally {
+          router.replace({ pathname: '/sign-in-mfa' })
+        }
+      } else {
+        router.replace({ pathname: '/sign-in' })
+      }
+    })()
+  }, [])
+
+  return (
+    <div className="relative mx-auto w-full flex flex-col items-center justify-center gap-y-6">
+      <Loader2 className="animate-spin" />
+      <h2 className="text-lg text-center">Signing in to Supabase Dashboard</h2>
+      <p className="text-xs text-foreground-lighter text-center max-w-[220px] sm:max-w-full">
+        By continuing, you agree to Supabase's{' '}
+        <InlineLink
+          href="https://supabase.com/terms"
+          className="text-foreground-lighter hover:text-foreground"
+        >
+          Terms of Service
+        </InlineLink>{' '}
+        and{' '}
+        <InlineLink
+          href="https://supabase.com/privacy"
+          className="text-foreground-lighter hover:text-foreground"
+        >
+          Privacy Policy
+        </InlineLink>
+        .
+      </p>
+    </div>
+  )
+}

apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx

@@ -3,25 +3,33 @@ import { useTheme } from 'next-themes'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
+import { cn } from 'ui'
 
 type ForgotPasswordLayoutProps = {
-  heading: string
-  subheading: string
+  heading?: string
+  subheading?: string
   logoLinkToMarketingSite?: boolean
   showHeadings?: boolean
+  className?: string
 }
 
 const ForgotPasswordLayout = ({
   heading,
   subheading,
   logoLinkToMarketingSite = false,
   showHeadings = true,
+  className,
   children,
 }: PropsWithChildren<ForgotPasswordLayoutProps>) => {
   const { resolvedTheme } = useTheme()
 
   return (
-    <div className="min-h-screen flex-1 bg-studio flex flex-col gap-8 lg:gap-16 xl:gap-32">
+    <div
+      className={cn(
+        'min-h-screen flex-1 bg-studio flex flex-col gap-8 lg:gap-16 xl:gap-32',
+        className
+      )}
+    >
       <div className="sticky top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
         <nav className="relative flex items-center justify-between sm:h-10">
           <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">

apps/studio/pages/reset-password.tsx

@@ -1,17 +1,13 @@
-import Link from 'next/link'
-
 import ResetPasswordForm from 'components/interfaces/SignIn/ResetPasswordForm'
 import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
 import { withAuth } from 'hooks/misc/withAuth'
 import type { NextPageWithLayout } from 'types'
 
 const ResetPasswordPage: NextPageWithLayout = () => {
   return (
-    <>
-      <div className="flex flex-col gap-4">
-        <ResetPasswordForm />
-      </div>
-    </>
+    <div className="flex flex-col gap-4">
+      <ResetPasswordForm />
+    </div>
   )
 }
 

apps/studio/pages/sign-in-fly-tos.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 import { useIsLoggedIn } from 'common'
 import { useOrganizationByFlyOrgIdMutation } from 'data/organizations/organization-by-fly-organization-id-mutation'
 import { useProjectByFlyExtensionIdMutation } from 'data/projects/project-by-fly-extension-id-mutation'
-import { API_URL } from 'lib/constants'
+import { API_URL, BASE_PATH } from 'lib/constants'
 import { Button } from 'ui'
 
 const SignInFlyTos = () => {
@@ -78,8 +78,8 @@ const SignInFlyTos = () => {
                   <Image
                     src={
                       resolvedTheme?.includes('dark')
-                        ? `${router.basePath}/img/supabase-dark.svg`
-                        : `${router.basePath}/img/supabase-light.svg`
+                        ? `${BASE_PATH}/img/supabase-dark.svg`
+                        : `${BASE_PATH}/img/supabase-light.svg`
                     }
                     alt=""
                     height={24}

apps/studio/pages/sign-in-partner.tsx

@@ -0,0 +1,24 @@
+import { SignInPartner } from 'components/interfaces/SignIn/SignInPartner'
+import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
+import type { NextPageWithLayout } from 'types'
+import { cn } from 'ui'
+
+const SignInPartnerPage: NextPageWithLayout = () => {
+  return <SignInPartner />
+}
+
+SignInPartnerPage.getLayout = (page) => (
+  // [Joshen] Just using this layout for the styling
+  <ForgotPasswordLayout
+    showHeadings={false}
+    className={cn(
+      'mx-auto max-w-7xl px-8 sm:px-12 lg:px-16 !gap-y-0',
+      '[&>div:first-child]:absolute [&>div:first-child]:!px-0',
+      '[&>div:last-child]:flex-grow [&>div:last-child>main]:!px-0'
+    )}
+  >
+    {page}
+  </ForgotPasswordLayout>
+)
+
+export default SignInPartnerPage