From ebd46f4294a8689ffaf9f1923db94c0abbccf5d5 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Thu, 3 Nov 2022 00:34:01 +0000 Subject: [PATCH 1/2] Update localization files and types --- .changeset/quiet-flies-judge.md | 5 +++++ packages/react/common/lib/Localization/en.json | 5 +++++ packages/react/common/lib/Localization/ja.json | 5 +++++ packages/react/src/types.ts | 6 ++++++ 4 files changed, 21 insertions(+) create mode 100644 .changeset/quiet-flies-judge.md diff --git a/.changeset/quiet-flies-judge.md b/.changeset/quiet-flies-judge.md new file mode 100644 index 00000000..9528f23d --- /dev/null +++ b/.changeset/quiet-flies-judge.md @@ -0,0 +1,5 @@ +--- +'@supabase/auth-ui-react': patch +--- + +Update localization files and types diff --git a/packages/react/common/lib/Localization/en.json b/packages/react/common/lib/Localization/en.json index 7761edac..7540e8e0 100644 --- a/packages/react/common/lib/Localization/en.json +++ b/packages/react/common/lib/Localization/en.json @@ -2,6 +2,8 @@ "sign_up": { "email_label": "Email address", "password_label": "Create a Password", + "email_input_placeholder": "Your email address", + "password_input_placeholder": "Your password", "button_label": "Sign up", "social_provider_text": "Sign in with", "link_text": "Don't have an account? Sign up" @@ -9,6 +11,8 @@ "sign_in": { "email_label": "Email address", "password_label": "Your Password", + "email_input_placeholder": "Your email address", + "password_input_placeholder": "Your password", "button_label": "Sign in", "social_provider_text": "Sign in with", "link_text": "Already have an account? Sign in" @@ -22,6 +26,7 @@ "forgotten_password": { "email_label": "Email address", "password_label": "Your Password", + "email_input_placeholder": "Your email address", "button_label": "Send reset password instructions", "link_text": "Forgot your password?" }, diff --git a/packages/react/common/lib/Localization/ja.json b/packages/react/common/lib/Localization/ja.json index d2425187..54756c1d 100644 --- a/packages/react/common/lib/Localization/ja.json +++ b/packages/react/common/lib/Localization/ja.json @@ -2,6 +2,8 @@ "sign_up": { "email_label": "電子メールアドレス", "password_label": "パスワードを作成", + "email_input_placeholder": "Your email address", + "password_input_placeholder": "Your password", "button_label": "サインアップ", "social_provider_text": "に登録する", "link_text": "アカウントをお持ちではありませんか？サインアップ" @@ -9,6 +11,8 @@ "sign_in": { "email_label": "電子メールアドレス", "password_label": "あなたのパスワード", + "email_input_placeholder": "Your email address", + "password_input_placeholder": "Your password", "button_label": "サインイン", "social_provider_text": "に登録する", "link_text": "Already have an account? Sign in" @@ -22,6 +26,7 @@ "forgotten_password": { "email_label": "Email address", "password_label": "Your Password", + "email_input_placeholder": "Your email address", "button_label": "Send reset password instructions", "link_text": "パスワードをお忘れの方" }, diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 8626aa23..5a97e6e1 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -83,6 +83,7 @@ export interface Auth { redirectTo?: RedirectTo onlyThirdPartyProviders?: boolean magicLink?: boolean + showLinks?: boolean /** * This will toggle on the dark variation of the theme @@ -103,6 +104,8 @@ export type I18nVariables = { sign_up?: { email_label?: string password_label?: string + email_input_placeholder?: string + password_input_placeholder?: string button_label?: string social_provider_text?: string link_text?: string @@ -110,6 +113,8 @@ export type I18nVariables = { sign_in?: { email_label?: string password_label?: string + email_input_placeholder?: string + password_input_placeholder?: string button_label?: string social_provider_text?: string link_text?: string @@ -123,6 +128,7 @@ export type I18nVariables = { forgotten_password?: { email_label?: string password_label?: string + email_input_placeholder?: string button_label?: string link_text?: string } From e5c2e53bb917ee2fd9b5ee42ed1fe4d5da8e902c Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Thu, 3 Nov 2022 00:39:14 +0000 Subject: [PATCH 2/2] Add showLinks prop to hide links on the forms Update to expose getCssText for SSR rendering the component --- .changeset/four-radios-know.md | 5 + .changeset/proud-poems-appear.md | 5 + .../src/components/Auth/Auth.stories.tsx | 13 ++- packages/react/src/components/Auth/Auth.tsx | 7 ++ packages/react/src/components/Auth/index.tsx | 2 +- .../components/Auth/interfaces/EmailAuth.tsx | 105 +++++++++--------- .../Auth/interfaces/ForgottenPassword.tsx | 25 +++-- .../components/Auth/interfaces/MagicLink.tsx | 24 ++-- 8 files changed, 113 insertions(+), 73 deletions(-) create mode 100644 .changeset/four-radios-know.md create mode 100644 .changeset/proud-poems-appear.md diff --git a/.changeset/four-radios-know.md b/.changeset/four-radios-know.md new file mode 100644 index 00000000..1892a010 --- /dev/null +++ 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 new file mode 100644 index 00000000..120ee9b5 --- /dev/null +++ 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 index 8867f425..aa052c1c 100644 --- 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) => ( - + ) export const magicLink = (args: any) => ( - + ) diff --git a/packages/react/src/components/Auth/Auth.tsx b/packages/react/src/components/Auth/Auth.tsx index 31ab9182..2f2ca847 100644 --- 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} /> @@ -190,6 +195,7 @@ function Auth({ supabaseClient={supabaseClient} setAuthView={setAuthView} redirectTo={redirectTo} + showLinks={showLinks} i18n={i18n} /> @@ -203,6 +209,7 @@ function Auth({ supabaseClient={supabaseClient} setAuthView={setAuthView} redirectTo={redirectTo} + showLinks={showLinks} i18n={i18n} /> diff --git a/packages/react/src/components/Auth/index.tsx b/packages/react/src/components/Auth/index.tsx index d438a9ea..2756d745 100644 --- 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 index 7cd562b5..06277101 100644 --- 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(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({ ) => setEmail(e.target.value) @@ -135,6 +137,7 @@ function EmailAuth({ ) => setPassword(e.target.value) @@ -156,55 +159,57 @@ function EmailAuth({ {i18n?.[authView]?.button_label} - - {authView === VIEWS.SIGN_IN && magicLink && ( - ) => { - e.preventDefault() - setAuthView(VIEWS.MAGIC_LINK) - }} - appearance={appearance} - > - {i18n?.magic_link?.link_text} - - )} - {authView === VIEWS.SIGN_IN && ( - ) => { - e.preventDefault() - setAuthView(VIEWS.FORGOTTEN_PASSWORD) - }} - appearance={appearance} - > - {i18n?.forgotten_password?.link_text} - - )} - {authView === VIEWS.SIGN_IN ? ( - ) => { - e.preventDefault() - handleViewChange(VIEWS.SIGN_UP) - }} - appearance={appearance} - > - {i18n?.sign_up?.link_text} - - ) : ( - ) => { - e.preventDefault() - handleViewChange(VIEWS.SIGN_IN) - }} - appearance={appearance} - > - {i18n?.sign_in?.link_text} - - )} - + {showLinks && ( + + {authView === VIEWS.SIGN_IN && magicLink && ( + ) => { + e.preventDefault() + setAuthView(VIEWS.MAGIC_LINK) + }} + appearance={appearance} + > + {i18n?.magic_link?.link_text} + + )} + {authView === VIEWS.SIGN_IN && ( + ) => { + e.preventDefault() + setAuthView(VIEWS.FORGOTTEN_PASSWORD) + }} + appearance={appearance} + > + {i18n?.forgotten_password?.link_text} + + )} + {authView === VIEWS.SIGN_IN ? ( + ) => { + e.preventDefault() + handleViewChange(VIEWS.SIGN_UP) + }} + appearance={appearance} + > + {i18n?.sign_up?.link_text} + + ) : ( + ) => { + e.preventDefault() + handleViewChange(VIEWS.SIGN_IN) + }} + appearance={appearance} + > + {i18n?.sign_in?.link_text} + + )} + + )} {message && {message}} {error && ( diff --git a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx index 4c489520..4c0e92e4 100644 --- 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({ ) => setEmail(e.target.value) } @@ -61,16 +64,18 @@ function ForgottenPassword({ {i18n?.forgotten_password?.button_label} - ) => { - e.preventDefault() - setAuthView(VIEWS.SIGN_IN) - }} - appearance={appearance} - > - {i18n?.sign_in?.link_text} - + {showLinks && ( + ) => { + e.preventDefault() + setAuthView(VIEWS.SIGN_IN) + }} + appearance={appearance} + > + {i18n?.sign_in?.link_text} + + )} {message && {message}} {error && ( diff --git a/packages/react/src/components/Auth/interfaces/MagicLink.tsx b/packages/react/src/components/Auth/interfaces/MagicLink.tsx index 9ef7e9a5..e8186ee1 100644 --- 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} - ) => { - e.preventDefault() - setAuthView(VIEWS.SIGN_IN) - }} - appearance={appearance} - > - {i18n?.sign_in?.link_text} - + {showLinks && ( + ) => { + e.preventDefault() + setAuthView(VIEWS.SIGN_IN) + }} + appearance={appearance} + > + {i18n?.sign_in?.link_text} + + )} {message && {message}} {error && (