Add terms and conditions checkbox to sign-up methods (#45)

A checkbox has been added for user acceptance of terms and conditions during sign-up. This change includes adding a new adjustable flag in the configuration to control the display of the checkbox. A new file "terms-and-conditions-form-field.tsx" is added to handle the checkbox UI part. Also, localization support has been added for the feature.

apps/web/app/auth/sign-up/page.tsx

@@ -44,6 +44,7 @@ function SignUpPage({ searchParams }: Props) {
 
       <SignUpMethodsContainer
         providers={authConfig.providers}
+        displayTermsCheckbox={authConfig.displayTermsCheckbox}
         inviteToken={inviteToken}
         paths={paths}
       />

apps/web/config/auth.config.ts

@@ -5,7 +5,16 @@ import { z } from 'zod';
 const providers: z.ZodType<Provider> = 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: {

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 <TermsOfServiceLink /> and <PrivacyPolicyLink />",
+  "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.",