diff --git a/apps/web/app/auth/sign-up/page.tsx b/apps/web/app/auth/sign-up/page.tsx index e8df79c56..2375e4e66 100644 --- a/apps/web/app/auth/sign-up/page.tsx +++ b/apps/web/app/auth/sign-up/page.tsx @@ -44,6 +44,7 @@ function SignUpPage({ searchParams }: Props) { diff --git a/apps/web/config/auth.config.ts b/apps/web/config/auth.config.ts index bfe4abf50..44d206965 100644 --- a/apps/web/config/auth.config.ts +++ b/apps/web/config/auth.config.ts @@ -5,7 +5,16 @@ import { z } from 'zod'; const providers: z.ZodType = getProviders(); const AuthConfigSchema = z.object({ - captchaTokenSiteKey: z.string().optional(), + captchaTokenSiteKey: z + .string({ + description: 'The reCAPTCHA site key.', + }) + .optional(), + displayTermsCheckbox: z + .boolean({ + description: 'Whether to display the terms checkbox during sign-up.', + }) + .optional(), providers: z.object({ password: z.boolean({ description: 'Enable password authentication.', @@ -22,6 +31,10 @@ const authConfig = AuthConfigSchema.parse({ // Copy the value from the Supabase Dashboard. captchaTokenSiteKey: process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY, + // whether to display the terms checkbox during sign-up + displayTermsCheckbox: + process.env.NEXT_PUBLIC_DISPLAY_TERMS_AND_CONDITIONS_CHECKBOX === 'true', + // NB: Enable the providers below in the Supabase Console // in your production project providers: { diff --git a/apps/web/public/locales/en/auth.json b/apps/web/public/locales/en/auth.json index c1d9dd51e..4cd72d596 100644 --- a/apps/web/public/locales/en/auth.json +++ b/apps/web/public/locales/en/auth.json @@ -61,6 +61,9 @@ "emailPlaceholder": "your@email.com", "inviteAlertHeading": "You have been invited to join a team", "inviteAlertBody": "Please sign in or sign up to accept the invite and join the team.", + "acceptTermsAndConditions": "I accept the and ", + "termsOfService": "Terms of Service", + "privacyPolicy": "Privacy Policy", "errors": { "Invalid login credentials": "The credentials entered are invalid", "User already registered": "This credential is already in use. Please try with another one.", diff --git a/packages/features/auth/src/components/magic-link-auth-container.tsx b/packages/features/auth/src/components/magic-link-auth-container.tsx index 637278461..32a555451 100644 --- a/packages/features/auth/src/components/magic-link-auth-container.tsx +++ b/packages/features/auth/src/components/magic-link-auth-container.tsx @@ -23,16 +23,20 @@ import { Input } from '@kit/ui/input'; import { Trans } from '@kit/ui/trans'; import { useCaptchaToken } from '../captcha/client'; +import { TermsAndConditionsFormField } from './terms-and-conditions-form-field'; export function MagicLinkAuthContainer({ inviteToken, redirectUrl, shouldCreateUser, defaultValues, + displayTermsCheckbox, }: { inviteToken?: string; redirectUrl: string; shouldCreateUser: boolean; + displayTermsCheckbox?: boolean; + defaultValues?: { email: string; }; @@ -115,6 +119,10 @@ export function MagicLinkAuthContainer({ name={'email'} /> + + + + > diff --git a/packages/features/auth/src/components/password-sign-up-form.tsx b/packages/features/auth/src/components/password-sign-up-form.tsx index 47ce2ed39..8de499001 100644 --- a/packages/features/auth/src/components/password-sign-up-form.tsx +++ b/packages/features/auth/src/components/password-sign-up-form.tsx @@ -20,9 +20,11 @@ import { Input } from '@kit/ui/input'; import { Trans } from '@kit/ui/trans'; import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema'; +import { TermsAndConditionsFormField } from './terms-and-conditions-form-field'; export function PasswordSignUpForm({ defaultValues, + displayTermsCheckbox, onSubmit, loading, }: { @@ -30,6 +32,8 @@ export function PasswordSignUpForm({ email: string; }; + displayTermsCheckbox?: boolean; + onSubmit: (params: { email: string; password: string; @@ -130,6 +134,10 @@ export function PasswordSignUpForm({ )} /> + + + + @@ -48,6 +50,7 @@ export function SignUpMethodsContainer(props: { redirectUrl={redirectUrl} shouldCreateUser={true} defaultValues={defaultValues} + displayTermsCheckbox={props.displayTermsCheckbox} /> diff --git a/packages/features/auth/src/components/terms-and-conditions-form-field.tsx b/packages/features/auth/src/components/terms-and-conditions-form-field.tsx new file mode 100644 index 000000000..983abc5ca --- /dev/null +++ b/packages/features/auth/src/components/terms-and-conditions-form-field.tsx @@ -0,0 +1,56 @@ +import Link from 'next/link'; + +import { Checkbox } from '@kit/ui/checkbox'; +import { FormControl, FormField, FormItem, FormMessage } from '@kit/ui/form'; +import { Trans } from '@kit/ui/trans'; + +export function TermsAndConditionsFormField( + props: { + name?: string; + } = {}, +) { + return ( + { + return ( + + + + + + + + + + ), + PrivacyPolicyLink: ( + + + + ), + }} + /> + + + + + + + ); + }} + /> + ); +}