Skip to content

Commit c4fa7ce

Browse files
silentworkssilentworks
authored
Merge pull request #59 from supabase/chore/show-links-prop
Update localization files and types
2 parents b6dd13c + e5c2e53 commit c4fa7ce

File tree

12 files changed

+134
-73
lines changed

12 files changed

+134
-73
lines changed

‎.changeset/four-radios-know.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@supabase/auth-ui-react': patch
3+
---
4+
5+
Add showLinks prop to hide links at the bottom of the forms

‎.changeset/proud-poems-appear.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@supabase/auth-ui-react': patch
3+
---
4+
5+
Update to expose getCssText for SSR rendering the component

‎.changeset/quiet-flies-judge.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@supabase/auth-ui-react': patch
3+
---
4+
5+
Update localization files and types

‎packages/react/common/lib/Localization/en.json

+5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
"sign_up": {
33
"email_label": "Email address",
44
"password_label": "Create a Password",
5+
"email_input_placeholder": "Your email address",
6+
"password_input_placeholder": "Your password",
57
"button_label": "Sign up",
68
"social_provider_text": "Sign in with",
79
"link_text": "Don't have an account? Sign up"
810
},
911
"sign_in": {
1012
"email_label": "Email address",
1113
"password_label": "Your Password",
14+
"email_input_placeholder": "Your email address",
15+
"password_input_placeholder": "Your password",
1216
"button_label": "Sign in",
1317
"social_provider_text": "Sign in with",
1418
"link_text": "Already have an account? Sign in"
@@ -22,6 +26,7 @@
2226
"forgotten_password": {
2327
"email_label": "Email address",
2428
"password_label": "Your Password",
29+
"email_input_placeholder": "Your email address",
2530
"button_label": "Send reset password instructions",
2631
"link_text": "Forgot your password?"
2732
},

‎packages/react/common/lib/Localization/ja.json

+5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
"sign_up": {
33
"email_label": "電子メールアドレス",
44
"password_label": "パスワードを作成",
5+
"email_input_placeholder": "Your email address",
6+
"password_input_placeholder": "Your password",
57
"button_label": "サインアップ",
68
"social_provider_text": "に登録する",
79
"link_text": "アカウントをお持ちではありませんか？サインアップ"
810
},
911
"sign_in": {
1012
"email_label": "電子メールアドレス",
1113
"password_label": "あなたのパスワード",
14+
"email_input_placeholder": "Your email address",
15+
"password_input_placeholder": "Your password",
1216
"button_label": "サインイン",
1317
"social_provider_text": "に登録する",
1418
"link_text": "Already have an account? Sign in"
@@ -22,6 +26,7 @@
2226
"forgotten_password": {
2327
"email_label": "Email address",
2428
"password_label": "Your Password",
29+
"email_input_placeholder": "Your email address",
2530
"button_label": "Send reset password instructions",
2631
"link_text": "パスワードをお忘れの方"
2732
},

‎packages/react/src/components/Auth/Auth.stories.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,22 @@ export const withSocialAuthHorizontal = (args: any) => (
101101
)
102102
export const updatePassword = (args: any) => (
103103
<Container {...args}>
104-
<Auth.UpdatePassword {...args} dark={useDarkMode() ? true : false} />
104+
<Auth
105+
{...args}
106+
dark={useDarkMode() ? true : false}
107+
view="update_password"
108+
/>
105109
</Container>
106110
)
107111

108112
export const magicLink = (args: any) => (
109113
<Container {...args}>
110-
<Auth.MagicLink {...args} dark={useDarkMode() ? true : false} />
114+
<Auth
115+
{...args}
116+
dark={useDarkMode() ? true : false}
117+
view="magic_link"
118+
showLinks={false}
119+
/>
111120
</Container>
112121
)
113122

‎packages/react/src/components/Auth/Auth.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import * as _defaultLocalization from '../../../common/lib/Localization'
1717

1818
const defaultLocalization: Localization = { ..._defaultLocalization }
1919

20+
export const { getCssText } = createStitches()
21+
2022
function Auth({
2123
supabaseClient,
2224
socialLayout = 'vertical',
@@ -25,6 +27,7 @@ function Auth({
2527
redirectTo,
2628
onlyThirdPartyProviders = false,
2729
magicLink = false,
30+
showLinks = true,
2831
appearance,
2932
theme = 'default',
3033
localization = { lang: 'en' },
@@ -150,6 +153,7 @@ function Auth({
150153
setDefaultPassword,
151154
redirectTo,
152155
magicLink,
156+
showLinks,
153157
i18n,
154158
}
155159

@@ -178,6 +182,7 @@ function Auth({
178182
setDefaultPassword={setDefaultPassword}
179183
redirectTo={redirectTo}
180184
magicLink={magicLink}
185+
showLinks={showLinks}
181186
i18n={i18n}
182187
/>
183188
</Container>
@@ -190,6 +195,7 @@ function Auth({
190195
supabaseClient={supabaseClient}
191196
setAuthView={setAuthView}
192197
redirectTo={redirectTo}
198+
showLinks={showLinks}
193199
i18n={i18n}
194200
/>
195201
</Container>
@@ -203,6 +209,7 @@ function Auth({
203209
supabaseClient={supabaseClient}
204210
setAuthView={setAuthView}
205211
redirectTo={redirectTo}
212+
showLinks={showLinks}
206213
i18n={i18n}
207214
/>
208215
</Container>

‎packages/react/src/components/Auth/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default as Auth } from './Auth'
1+
export { default as Auth, getCssText } from './Auth'
22
export * from './interfaces'

‎packages/react/src/components/Auth/interfaces/EmailAuth.tsx

+55-50
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface EmailAuthProps {
1919
setDefaultEmail: (email: string) => void
2020
setDefaultPassword: (password: string) => void
2121
supabaseClient: SupabaseClient
22+
showLinks?: boolean
2223
redirectTo?: RedirectTo
2324
magicLink?: boolean
2425
i18n: I18nVariables
@@ -41,6 +42,7 @@ function EmailAuth({
4142
setDefaultEmail,
4243
setDefaultPassword,
4344
supabaseClient,
45+
showLinks = true,
4446
redirectTo,
4547
magicLink,
4648
i18n,
@@ -49,7 +51,6 @@ function EmailAuth({
4951
const isMounted = useRef<boolean>(true)
5052
const [email, setEmail] = useState(defaultEmail)
5153
const [password, setPassword] = useState(defaultPassword)
52-
const [rememberMe, setRememberMe] = useState(false)
5354
const [error, setError] = useState('')
5455
const [loading, setLoading] = useState(false)
5556
const [message, setMessage] = useState('')
@@ -120,6 +121,7 @@ function EmailAuth({
120121
<Input
121122
type="email"
122123
name="email"
124+
placeholder={i18n?.[authView]?.email_input_placeholder}
123125
defaultValue={email}
124126
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
125127
setEmail(e.target.value)
@@ -135,6 +137,7 @@ function EmailAuth({
135137
<Input
136138
type="password"
137139
name="password"
140+
placeholder={i18n?.[authView]?.password_input_placeholder}
138141
defaultValue={password}
139142
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
140143
setPassword(e.target.value)
@@ -156,55 +159,57 @@ function EmailAuth({
156159
{i18n?.[authView]?.button_label}
157160
</Button>
158161

159-
<Container direction="vertical" gap="small" appearance={appearance}>
160-
{authView === VIEWS.SIGN_IN && magicLink && (
161-
<Anchor
162-
href="#auth-magic-link"
163-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
164-
e.preventDefault()
165-
setAuthView(VIEWS.MAGIC_LINK)
166-
}}
167-
appearance={appearance}
168-
>
169-
{i18n?.magic_link?.link_text}
170-
</Anchor>
171-
)}
172-
{authView === VIEWS.SIGN_IN && (
173-
<Anchor
174-
href="#auth-forgot-password"
175-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
176-
e.preventDefault()
177-
setAuthView(VIEWS.FORGOTTEN_PASSWORD)
178-
}}
179-
appearance={appearance}
180-
>
181-
{i18n?.forgotten_password?.link_text}
182-
</Anchor>
183-
)}
184-
{authView === VIEWS.SIGN_IN ? (
185-
<Anchor
186-
href="#auth-sign-up"
187-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
188-
e.preventDefault()
189-
handleViewChange(VIEWS.SIGN_UP)
190-
}}
191-
appearance={appearance}
192-
>
193-
{i18n?.sign_up?.link_text}
194-
</Anchor>
195-
) : (
196-
<Anchor
197-
href="#auth-sign-in"
198-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
199-
e.preventDefault()
200-
handleViewChange(VIEWS.SIGN_IN)
201-
}}
202-
appearance={appearance}
203-
>
204-
{i18n?.sign_in?.link_text}
205-
</Anchor>
206-
)}
207-
</Container>
162+
{showLinks && (
163+
<Container direction="vertical" gap="small" appearance={appearance}>
164+
{authView === VIEWS.SIGN_IN && magicLink && (
165+
<Anchor
166+
href="#auth-magic-link"
167+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
168+
e.preventDefault()
169+
setAuthView(VIEWS.MAGIC_LINK)
170+
}}
171+
appearance={appearance}
172+
>
173+
{i18n?.magic_link?.link_text}
174+
</Anchor>
175+
)}
176+
{authView === VIEWS.SIGN_IN && (
177+
<Anchor
178+
href="#auth-forgot-password"
179+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
180+
e.preventDefault()
181+
setAuthView(VIEWS.FORGOTTEN_PASSWORD)
182+
}}
183+
appearance={appearance}
184+
>
185+
{i18n?.forgotten_password?.link_text}
186+
</Anchor>
187+
)}
188+
{authView === VIEWS.SIGN_IN ? (
189+
<Anchor
190+
href="#auth-sign-up"
191+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
192+
e.preventDefault()
193+
handleViewChange(VIEWS.SIGN_UP)
194+
}}
195+
appearance={appearance}
196+
>
197+
{i18n?.sign_up?.link_text}
198+
</Anchor>
199+
) : (
200+
<Anchor
201+
href="#auth-sign-in"
202+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
203+
e.preventDefault()
204+
handleViewChange(VIEWS.SIGN_IN)
205+
}}
206+
appearance={appearance}
207+
>
208+
{i18n?.sign_in?.link_text}
209+
</Anchor>
210+
)}
211+
</Container>
212+
)}
208213
</Container>
209214
{message && <Message appearance={appearance}>{message}</Message>}
210215
{error && (

‎packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ function ForgottenPassword({
1010
redirectTo,
1111
i18n,
1212
appearance,
13+
showLinks,
1314
}: {
1415
setAuthView: any
1516
supabaseClient: SupabaseClient
1617
redirectTo?: RedirectTo
1718
i18n: I18nVariables
1819
appearance?: Appearance
20+
showLinks?: boolean
1921
}) {
2022
const [email, setEmail] = useState('')
2123
const [error, setError] = useState('')
@@ -46,6 +48,7 @@ function ForgottenPassword({
4648
<Input
4749
name="email"
4850
type="email"
51+
placeholder={i18n?.forgotten_password?.email_input_placeholder}
4952
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
5053
setEmail(e.target.value)
5154
}
@@ -61,16 +64,18 @@ function ForgottenPassword({
6164
{i18n?.forgotten_password?.button_label}
6265
</Button>
6366
</Container>
64-
<Anchor
65-
href="#auth-sign-in"
66-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
67-
e.preventDefault()
68-
setAuthView(VIEWS.SIGN_IN)
69-
}}
70-
appearance={appearance}
71-
>
72-
{i18n?.sign_in?.link_text}
73-
</Anchor>
67+
{showLinks && (
68+
<Anchor
69+
href="#auth-sign-in"
70+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
71+
e.preventDefault()
72+
setAuthView(VIEWS.SIGN_IN)
73+
}}
74+
appearance={appearance}
75+
>
76+
{i18n?.sign_in?.link_text}
77+
</Anchor>
78+
)}
7479
{message && <Message appearance={appearance}>{message}</Message>}
7580
{error && (
7681
<Message color="danger" appearance={appearance}>

‎packages/react/src/components/Auth/interfaces/MagicLink.tsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ function MagicLink({
1010
redirectTo,
1111
i18n,
1212
appearance,
13+
showLinks,
1314
}: {
1415
setAuthView: any
1516
supabaseClient: SupabaseClient
1617
redirectTo?: RedirectTo
1718
i18n: I18nVariables
1819
appearance?: Appearance
20+
showLinks?: boolean
1921
}) {
2022
const [email, setEmail] = useState('')
2123
const [error, setError] = useState('')
@@ -62,16 +64,18 @@ function MagicLink({
6264
{i18n?.magic_link?.button_label}
6365
</Button>
6466
</Container>
65-
<Anchor
66-
href="#auth-sign-in"
67-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
68-
e.preventDefault()
69-
setAuthView(VIEWS.SIGN_IN)
70-
}}
71-
appearance={appearance}
72-
>
73-
{i18n?.sign_in?.link_text}
74-
</Anchor>
67+
{showLinks && (
68+
<Anchor
69+
href="#auth-sign-in"
70+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
71+
e.preventDefault()
72+
setAuthView(VIEWS.SIGN_IN)
73+
}}
74+
appearance={appearance}
75+
>
76+
{i18n?.sign_in?.link_text}
77+
</Anchor>
78+
)}
7579
{message && <Message appearance={appearance}>{message}</Message>}
7680
{error && (
7781
<Message color="danger" appearance={appearance}>

0 commit comments

Comments
 (0)