Add showLinks prop to hide links on the forms

Update to expose getCssText for SSR rendering the component
supabase-community · Nov 3, 2022 · e5c2e53 · e5c2e53
1 parent ebd46f4
commit e5c2e53
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 73 deletions.
diff --git a/.changeset/four-radios-know.md b/.changeset/four-radios-know.md
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': patch
+---
+
+Add showLinks prop to hide links at the bottom of the forms
diff --git a/.changeset/proud-poems-appear.md b/.changeset/proud-poems-appear.md
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': patch
+---
+
+Update to expose getCssText for SSR rendering the component
diff --git a/packages/react/src/components/Auth/Auth.stories.tsx b/packages/react/src/components/Auth/Auth.stories.tsx
@@ -101,13 +101,22 @@ export const withSocialAuthHorizontal = (args: any) => (
 )
 export const updatePassword = (args: any) => (
   <Container {...args}>
-    <Auth.UpdatePassword {...args} dark={useDarkMode() ? true : false} />
+    <Auth
+      {...args}
+      dark={useDarkMode() ? true : false}
+      view="update_password"
+    />
   </Container>
 )
 
 export const magicLink = (args: any) => (
   <Container {...args}>
-    <Auth.MagicLink {...args} dark={useDarkMode() ? true : false} />
+    <Auth
+      {...args}
+      dark={useDarkMode() ? true : false}
+      view="magic_link"
+      showLinks={false}
+    />
   </Container>
 )
 

diff --git a/packages/react/src/components/Auth/Auth.tsx b/packages/react/src/components/Auth/Auth.tsx
@@ -17,6 +17,8 @@ import * as _defaultLocalization from '../../../common/lib/Localization'
 
 const defaultLocalization: Localization = { ..._defaultLocalization }
 
+export const { getCssText } = createStitches()
+
 function Auth({
   supabaseClient,
   socialLayout = 'vertical',
@@ -25,6 +27,7 @@ function Auth({
   redirectTo,
   onlyThirdPartyProviders = false,
   magicLink = false,
+  showLinks = true,
   appearance,
   theme = 'default',
   localization = { lang: 'en' },
@@ -150,6 +153,7 @@ function Auth({
     setDefaultPassword,
     redirectTo,
     magicLink,
+    showLinks,
     i18n,
   }
 
@@ -178,6 +182,7 @@ function Auth({
             setDefaultPassword={setDefaultPassword}
             redirectTo={redirectTo}
             magicLink={magicLink}
+            showLinks={showLinks}
             i18n={i18n}
           />
         </Container>
@@ -190,6 +195,7 @@ function Auth({
             supabaseClient={supabaseClient}
             setAuthView={setAuthView}
             redirectTo={redirectTo}
+            showLinks={showLinks}
             i18n={i18n}
           />
         </Container>
@@ -203,6 +209,7 @@ function Auth({
             supabaseClient={supabaseClient}
             setAuthView={setAuthView}
             redirectTo={redirectTo}
+            showLinks={showLinks}
             i18n={i18n}
           />
         </Container>

diff --git a/packages/react/src/components/Auth/index.tsx b/packages/react/src/components/Auth/index.tsx
@@ -1,2 +1,2 @@
-export { default as Auth } from './Auth'
+export { default as Auth, getCssText } from './Auth'
 export * from './interfaces'
diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx
@@ -19,6 +19,7 @@ export interface EmailAuthProps {
   setDefaultEmail: (email: string) => void
   setDefaultPassword: (password: string) => void
   supabaseClient: SupabaseClient
+  showLinks?: boolean
   redirectTo?: RedirectTo
   magicLink?: boolean
   i18n: I18nVariables
@@ -41,6 +42,7 @@ function EmailAuth({
   setDefaultEmail,
   setDefaultPassword,
   supabaseClient,
+  showLinks = true,
   redirectTo,
   magicLink,
   i18n,
@@ -49,7 +51,6 @@ function EmailAuth({
   const isMounted = useRef<boolean>(true)
   const [email, setEmail] = useState(defaultEmail)
   const [password, setPassword] = useState(defaultPassword)
-  const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
   const [message, setMessage] = useState('')
@@ -120,6 +121,7 @@ function EmailAuth({
             <Input
               type="email"
               name="email"
+              placeholder={i18n?.[authView]?.email_input_placeholder}
               defaultValue={email}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setEmail(e.target.value)
@@ -135,6 +137,7 @@ function EmailAuth({
             <Input
               type="password"
               name="password"
+              placeholder={i18n?.[authView]?.password_input_placeholder}
               defaultValue={password}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setPassword(e.target.value)
@@ -156,55 +159,57 @@ function EmailAuth({
           {i18n?.[authView]?.button_label}
         </Button>
 
-        <Container direction="vertical" gap="small" appearance={appearance}>
-          {authView === VIEWS.SIGN_IN && magicLink && (
-            <Anchor
-              href="#auth-magic-link"
-              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                e.preventDefault()
-                setAuthView(VIEWS.MAGIC_LINK)
-              }}
-              appearance={appearance}
-            >
-              {i18n?.magic_link?.link_text}
-            </Anchor>
-          )}
-          {authView === VIEWS.SIGN_IN && (
-            <Anchor
-              href="#auth-forgot-password"
-              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                e.preventDefault()
-                setAuthView(VIEWS.FORGOTTEN_PASSWORD)
-              }}
-              appearance={appearance}
-            >
-              {i18n?.forgotten_password?.link_text}
-            </Anchor>
-          )}
-          {authView === VIEWS.SIGN_IN ? (
-            <Anchor
-              href="#auth-sign-up"
-              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                e.preventDefault()
-                handleViewChange(VIEWS.SIGN_UP)
-              }}
-              appearance={appearance}
-            >
-              {i18n?.sign_up?.link_text}
-            </Anchor>
-          ) : (
-            <Anchor
-              href="#auth-sign-in"
-              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                e.preventDefault()
-                handleViewChange(VIEWS.SIGN_IN)
-              }}
-              appearance={appearance}
-            >
-              {i18n?.sign_in?.link_text}
-            </Anchor>
-          )}
-        </Container>
+        {showLinks && (
+          <Container direction="vertical" gap="small" appearance={appearance}>
+            {authView === VIEWS.SIGN_IN && magicLink && (
+              <Anchor
+                href="#auth-magic-link"
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault()
+                  setAuthView(VIEWS.MAGIC_LINK)
+                }}
+                appearance={appearance}
+              >
+                {i18n?.magic_link?.link_text}
+              </Anchor>
+            )}
+            {authView === VIEWS.SIGN_IN && (
+              <Anchor
+                href="#auth-forgot-password"
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault()
+                  setAuthView(VIEWS.FORGOTTEN_PASSWORD)
+                }}
+                appearance={appearance}
+              >
+                {i18n?.forgotten_password?.link_text}
+              </Anchor>
+            )}
+            {authView === VIEWS.SIGN_IN ? (
+              <Anchor
+                href="#auth-sign-up"
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault()
+                  handleViewChange(VIEWS.SIGN_UP)
+                }}
+                appearance={appearance}
+              >
+                {i18n?.sign_up?.link_text}
+              </Anchor>
+            ) : (
+              <Anchor
+                href="#auth-sign-in"
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault()
+                  handleViewChange(VIEWS.SIGN_IN)
+                }}
+                appearance={appearance}
+              >
+                {i18n?.sign_in?.link_text}
+              </Anchor>
+            )}
+          </Container>
+        )}
       </Container>
       {message && <Message appearance={appearance}>{message}</Message>}
       {error && (

diff --git a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx
@@ -10,12 +10,14 @@ function ForgottenPassword({
   redirectTo,
   i18n,
   appearance,
+  showLinks,
 }: {
   setAuthView: any
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   i18n: I18nVariables
   appearance?: Appearance
+  showLinks?: boolean
 }) {
   const [email, setEmail] = useState('')
   const [error, setError] = useState('')
@@ -46,6 +48,7 @@ function ForgottenPassword({
             <Input
               name="email"
               type="email"
+              placeholder={i18n?.forgotten_password?.email_input_placeholder}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setEmail(e.target.value)
               }
@@ -61,16 +64,18 @@ function ForgottenPassword({
             {i18n?.forgotten_password?.button_label}
           </Button>
         </Container>
-        <Anchor
-          href="#auth-sign-in"
-          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-            e.preventDefault()
-            setAuthView(VIEWS.SIGN_IN)
-          }}
-          appearance={appearance}
-        >
-          {i18n?.sign_in?.link_text}
-        </Anchor>
+        {showLinks && (
+          <Anchor
+            href="#auth-sign-in"
+            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+              e.preventDefault()
+              setAuthView(VIEWS.SIGN_IN)
+            }}
+            appearance={appearance}
+          >
+            {i18n?.sign_in?.link_text}
+          </Anchor>
+        )}
         {message && <Message appearance={appearance}>{message}</Message>}
         {error && (
           <Message color="danger" appearance={appearance}>

diff --git a/packages/react/src/components/Auth/interfaces/MagicLink.tsx b/packages/react/src/components/Auth/interfaces/MagicLink.tsx
@@ -10,12 +10,14 @@ function MagicLink({
   redirectTo,
   i18n,
   appearance,
+  showLinks,
 }: {
   setAuthView: any
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   i18n: I18nVariables
   appearance?: Appearance
+  showLinks?: boolean
 }) {
   const [email, setEmail] = useState('')
   const [error, setError] = useState('')
@@ -62,16 +64,18 @@ function MagicLink({
             {i18n?.magic_link?.button_label}
           </Button>
         </Container>
-        <Anchor
-          href="#auth-sign-in"
-          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-            e.preventDefault()
-            setAuthView(VIEWS.SIGN_IN)
-          }}
-          appearance={appearance}
-        >
-          {i18n?.sign_in?.link_text}
-        </Anchor>
+        {showLinks && (
+          <Anchor
+            href="#auth-sign-in"
+            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+              e.preventDefault()
+              setAuthView(VIEWS.SIGN_IN)
+            }}
+            appearance={appearance}
+          >
+            {i18n?.sign_in?.link_text}
+          </Anchor>
+        )}
         {message && <Message appearance={appearance}>{message}</Message>}
         {error && (
           <Message color="danger" appearance={appearance}>