From d4b10e06799ee537e74fda52102c17f95e6b6cf1 Mon Sep 17 00:00:00 2001
From: roble <renanroble@gmail.com>
Date: Tue, 14 Jul 2026 12:35:34 +0100
Subject: [PATCH] feat: add terms acceptance checkbox and validation

---
 resources/js/react/pages/Login.tsx            |  4 +-
 resources/js/react/pages/Register.tsx         | 57 ++++++++++++++++-
 resources/js/vue/pages/Login.vue              |  4 +-
 resources/js/vue/pages/Register.vue           | 63 ++++++++++++++++++-
 src/Http/Requests/RegisterRequest.php         | 13 ++++
 tests/Feature/RegisterTest.php                | 15 +++++
 tests/e2e/pages/RegisterPage.ts               |  4 ++
 .../e2e/tests/register/register.basic.spec.ts | 15 +++++
 8 files changed, 166 insertions(+), 9 deletions(-)

diff --git a/resources/js/react/pages/Login.tsx b/resources/js/react/pages/Login.tsx
index 6e84633..fc63613 100644
--- a/resources/js/react/pages/Login.tsx
+++ b/resources/js/react/pages/Login.tsx
@@ -124,7 +124,7 @@ export default function Login() {
                     {route().has('password.request') && (
                         <Link
                             href={forgotUrl}
-                            className="text-primary ml-auto inline-block text-sm font-medium underline-offset-4 hover:underline"
+                            className="text-primary ml-auto inline-block text-sm font-medium whitespace-nowrap underline-offset-4 hover:underline"
                             data-testid="forgot-password-link"
                         >
                             {t('Forgot your password?')}
@@ -145,7 +145,7 @@ export default function Login() {
                     {(page.props.auth as any)?.magic_link_enabled && (
                         <Link
                             href={route('magic-link.create')}
-                            className="text-primary/70 font-medium underline-offset-4 hover:underline"
+                            className="text-primary font-medium underline-offset-4 hover:underline"
                             data-testid="magic-link-login-link"
                         >
                             {t('Login with magic link')}
diff --git a/resources/js/react/pages/Register.tsx b/resources/js/react/pages/Register.tsx
index 6579862..6612f6b 100644
--- a/resources/js/react/pages/Register.tsx
+++ b/resources/js/react/pages/Register.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
-import { Field, FieldError } from '@/components/ui/field';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useT } from '@/i18n';
@@ -17,6 +18,7 @@ export default function Register() {
         email: '',
         password: '',
         password_confirmation: '',
+        terms: false,
     });
 
     const handleSubmit = (e: React.FormEvent) => {
@@ -24,6 +26,12 @@ export default function Register() {
         post(route('register'), { preserveScroll: true });
     };
 
+    const canSubmit =
+        data.name.trim() !== '' &&
+        data.email.trim() !== '' &&
+        data.password !== '' &&
+        data.terms;
+
     return (
         <AuthCardLayout
             title={t('Create your account')}
@@ -115,10 +123,53 @@ export default function Register() {
                     )}
                 </Field>
 
+                <Field
+                    orientation="horizontal"
+                    className="mt-6 items-start"
+                    data-invalid={!!errors.terms}
+                >
+                    <Checkbox
+                        id="terms"
+                        name="terms"
+                        data-testid="terms-checkbox"
+                        checked={data.terms}
+                        onCheckedChange={(checked) =>
+                            setData('terms', !!checked)
+                        }
+                        aria-invalid={!!errors.terms}
+                    />
+                    <FieldLabel
+                        htmlFor="terms"
+                        className="text-sm font-normal leading-snug"
+                    >
+                        {t('I agree to the')}{' '}
+                        <Link
+                            href={route('terms')}
+                            className="text-primary font-medium underline-offset-4 hover:underline"
+                            data-testid="terms-link"
+                        >
+                            {t('Terms of Service')}
+                        </Link>{' '}
+                        {t('and the')}{' '}
+                        <Link
+                            href={route('privacy')}
+                            className="text-primary font-medium underline-offset-4 hover:underline"
+                            data-testid="privacy-link"
+                        >
+                            {t('Privacy Policy')}
+                        </Link>
+                    </FieldLabel>
+                </Field>
+                {errors.terms && (
+                    <FieldError data-testid="terms-error">
+                        {errors.terms}
+                    </FieldError>
+                )}
+
                 <Button
                     type="submit"
                     className="mt-3 w-full"
-                    disabled={processing}
+                    disabled={processing || !canSubmit}
                     data-testid="register-button"
                 >
                     {t('Register')}
@@ -128,7 +179,7 @@ export default function Register() {
                     {t('Already registered?')}{' '}
                     <Link
                         href={route('login')}
-                        className="text-primary/70 font-medium underline-offset-4 hover:underline"
+                        className="text-primary font-medium underline-offset-4 hover:underline"
                         data-testid="login-link"
                     >
                         {t('Log in')}
diff --git a/resources/js/vue/pages/Login.vue b/resources/js/vue/pages/Login.vue
index 5d1b409..77ac8d1 100644
--- a/resources/js/vue/pages/Login.vue
+++ b/resources/js/vue/pages/Login.vue
@@ -73,7 +73,7 @@ const forgotUrl = computed(() =>
                 <Link
                     v-if="route().has('password.request')"
                     :href="forgotUrl"
-                    class="text-primary ml-auto inline-block text-sm font-medium underline-offset-4 hover:underline"
+                    class="text-primary ml-auto inline-block text-sm font-medium whitespace-nowrap underline-offset-4 hover:underline"
                     data-testid="forgot-password-link"
                     :data-invalid="false"
                 >
@@ -93,7 +93,7 @@ const forgotUrl = computed(() =>
                 <Link
                     v-if="$page.props.auth.magic_link_enabled"
                     :href="route('magic-link.create')"
-                    class="text-primary/70 font-medium underline-offset-4 hover:underline"
+                    class="text-primary font-medium underline-offset-4 hover:underline"
                     data-testid="magic-link-login-link"
                 >
                     {{ $t('Login with magic link') }}
diff --git a/resources/js/vue/pages/Register.vue b/resources/js/vue/pages/Register.vue
index 918f8de..36eac09 100644
--- a/resources/js/vue/pages/Register.vue
+++ b/resources/js/vue/pages/Register.vue
@@ -1,9 +1,28 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import InputField from '@/components/ui/input/InputField.vue';
-import { Form, Link } from '@inertiajs/vue3';
+import { Form, Link, usePage } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
 import SocialiteProviders from '../components/SocialiteProviders.vue';
 import AuthCardLayout from '../layouts/AuthCardLayout.vue';
+
+const page = usePage();
+const termsError = computed(() => page.props.errors?.terms);
+
+const nameRef = ref('');
+const emailRef = ref('');
+const passwordRef = ref('');
+const termsRef = ref(false);
+
+const canSubmit = computed(
+    () =>
+        !!nameRef.value.trim() &&
+        !!emailRef.value.trim() &&
+        !!passwordRef.value &&
+        termsRef.value,
+);
 </script>
 
 <template>
@@ -28,6 +47,7 @@ import AuthCardLayout from '../layouts/AuthCardLayout.vue';
                 :label="$t('Name')"
                 :placeholder="$t('Enter your full name')"
                 autocomplete="name"
+                v-model="nameRef"
             />
 
             <!-- Email -->
@@ -37,6 +57,7 @@ import AuthCardLayout from '../layouts/AuthCardLayout.vue';
                 :label="$t('Email')"
                 :placeholder="$t('Enter your email')"
                 autocomplete="email"
+                v-model="emailRef"
             />
 
             <!-- Password -->
@@ -47,12 +68,50 @@ import AuthCardLayout from '../layouts/AuthCardLayout.vue';
                 :placeholder="$t('Enter your password')"
                 autocomplete="new-password"
                 required
+                v-model="passwordRef"
             />
 
+            <!-- Terms & Privacy -->
+            <Field
+                orientation="horizontal"
+                class="mt-6 items-start"
+                :data-invalid="!!termsError"
+            >
+                <Checkbox
+                    id="terms"
+                    name="terms"
+                    data-testid="terms-checkbox"
+                    :aria-invalid="!!termsError"
+                    v-model="termsRef"
+                />
+                <FieldLabel for="terms" class="text-sm font-normal leading-snug">
+                    {{ $t('I agree to the') }}
+                    <Link
+                        :href="route('terms')"
+                        class="text-primary font-medium underline-offset-4 hover:underline"
+                        data-testid="terms-link"
+                    >
+                        {{ $t('Terms of Service') }}
+                    </Link>
+                    {{ $t('and the') }}
+                    <Link
+                        :href="route('privacy')"
+                        class="text-primary font-medium underline-offset-4 hover:underline"
+                        data-testid="privacy-link"
+                    >
+                        {{ $t('Privacy Policy') }}
+                    </Link>
+                </FieldLabel>
+            </Field>
+            <FieldError v-if="termsError" data-testid="terms-error">
+                {{ termsError }}
+            </FieldError>
+
             <Button
                 type="submit"
                 class="mt-3 w-full"
                 data-testid="register-button"
+                :disabled="!canSubmit"
             >
                 {{ $t('Register') }}
             </Button>
@@ -63,7 +122,7 @@ import AuthCardLayout from '../layouts/AuthCardLayout.vue';
                 {{ $t('Already registered?') }}
                 <Link
                     :href="route('login')"
-                    class="text-primary/70 font-medium underline-offset-4 hover:underline"
+                    class="text-primary font-medium underline-offset-4 hover:underline"
                     data-testid="login-link"
                 >
                     {{ $t('Log in') }}
diff --git a/src/Http/Requests/RegisterRequest.php b/src/Http/Requests/RegisterRequest.php
index 20ccb6c..21efbdb 100644
--- a/src/Http/Requests/RegisterRequest.php
+++ b/src/Http/Requests/RegisterRequest.php
@@ -29,6 +29,19 @@ public function rules(): array
             'name' => 'required|string|max:255',
             'email' => 'required|string|email|max:255|unique:'.User::class,
             'password' => ['required', Rules\Password::defaults()],
+            'terms' => ['accepted'],
+        ];
+    }
+
+    /**
+     * Get the error messages for the defined validation rules.
+     *
+     * @return array<string, string>
+     */
+    public function messages(): array
+    {
+        return [
+            'terms.accepted' => __('You must accept the Terms of Service and Privacy Policy to register.'),
         ];
     }
 
diff --git a/tests/Feature/RegisterTest.php b/tests/Feature/RegisterTest.php
index 1846471..44c1e81 100644
--- a/tests/Feature/RegisterTest.php
+++ b/tests/Feature/RegisterTest.php
@@ -29,6 +29,7 @@ public function test_user_can_register_with_valid_data(): void
             'email' => 'test@example.com',
             'password' => 'password123',
             'password_confirmation' => 'password123',
+            'terms' => true,
         ]);
 
         $this->assertAuthenticated();
@@ -45,6 +46,7 @@ public function test_registered_user_is_assigned_user_role(): void
             'email' => 'test@example.com',
             'password' => 'password123',
             'password_confirmation' => 'password123',
+            'terms' => true,
         ]);
 
         $user = User::where('email', 'test@example.com')->firstOrFail();
@@ -60,6 +62,7 @@ public function test_welcome_notification_is_sent_on_registration(): void
             'email' => 'test@example.com',
             'password' => 'password123',
             'password_confirmation' => 'password123',
+            'terms' => true,
         ]);
 
         $user = User::where('email', 'test@example.com')->firstOrFail();
@@ -75,6 +78,7 @@ public function test_password_is_hashed_on_registration(): void
             'email' => 'test@example.com',
             'password' => 'password123',
             'password_confirmation' => 'password123',
+            'terms' => true,
         ]);
 
         $user = User::where('email', 'test@example.com')->firstOrFail();
@@ -135,4 +139,15 @@ public function test_register_validates_password_is_required(): void
 
         $response->assertInvalid('password');
     }
+
+    public function test_register_validates_terms_must_be_accepted(): void
+    {
+        $response = $this->post(route('register'), [
+            'name' => 'Test User',
+            'email' => 'test@example.com',
+            'password' => 'password123',
+        ]);
+
+        $response->assertInvalid('terms');
+    }
 }
diff --git a/tests/e2e/pages/RegisterPage.ts b/tests/e2e/pages/RegisterPage.ts
index 5917749..9da6033 100644
--- a/tests/e2e/pages/RegisterPage.ts
+++ b/tests/e2e/pages/RegisterPage.ts
@@ -12,6 +12,7 @@ export class RegisterPage {
     readonly emailInput: Locator;
     readonly passwordInput: Locator;
     readonly passwordToggle: Locator;
+    readonly termsCheckbox: Locator;
     readonly registerButton: Locator;
     readonly signupEndpoint: string;
     readonly redirectEndpoint: string;
@@ -27,6 +28,7 @@ export class RegisterPage {
         this.emailInput = page.getByTestId('email');
         this.passwordInput = page.getByTestId('password');
         this.passwordToggle = page.getByTestId('password-toggle');
+        this.termsCheckbox = page.getByTestId('terms-checkbox');
         this.registerButton = page.getByTestId('register-button');
     }
 
@@ -38,6 +40,7 @@ export class RegisterPage {
         await this.nameInput.fill(name);
         await this.emailInput.fill(email);
         await this.passwordInput.fill(password);
+        await this.termsCheckbox.check();
 
         await this.registerButton.click();
     }
@@ -47,6 +50,7 @@ export class RegisterPage {
         await expect(this.nameInput).toBeVisible();
         await expect(this.emailInput).toBeVisible();
         await expect(this.passwordInput).toBeVisible();
+        await expect(this.termsCheckbox).toBeVisible();
         await expect(this.registerButton).toBeVisible();
     }
 
diff --git a/tests/e2e/tests/register/register.basic.spec.ts b/tests/e2e/tests/register/register.basic.spec.ts
index 940f8f1..956ab68 100644
--- a/tests/e2e/tests/register/register.basic.spec.ts
+++ b/tests/e2e/tests/register/register.basic.spec.ts
@@ -52,9 +52,24 @@ test.describe.parallel('Register Basics', () => {
         await registerPage.nameInput.fill(user.name);
         await registerPage.emailInput.fill(user.email);
         await registerPage.passwordInput.fill(user.password);
+        await registerPage.termsCheckbox.check();
 
         await registerPage.passwordInput.press('Enter');
 
         await expectSuccessfulRegistration();
     });
+
+    test('disables register button until all fields are filled and terms are accepted', async () => {
+        const user = newUser();
+
+        await expect(registerPage.registerButton).toBeDisabled();
+
+        await registerPage.nameInput.fill(user.name);
+        await registerPage.emailInput.fill(user.email);
+        await registerPage.passwordInput.fill(user.password);
+        await expect(registerPage.registerButton).toBeDisabled();
+
+        await registerPage.termsCheckbox.check();
+        await expect(registerPage.registerButton).toBeEnabled();
+    });
 });