fix(ui): Add checkbox to accept terms and conditions (#295)

* fix(ui): Add checkbox for students to accept terms and conditions

* test: Mark terms and conditions checkbox on tests

Author: PedroChaparro

e2e/courses/EnrollStudent.spec.ts

@@ -57,6 +57,7 @@ test.describe.serial("Enroll student workflow", () => {
     await page.getByLabel("Institutional ID").fill(studentInstitutionalID);
     await page.getByLabel("Email").fill(studentEmail);
     await page.getByLabel("Password").fill(studentPassword);
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
   });
 

e2e/courses/JoinCourse.spec.ts

@@ -142,7 +142,7 @@ test.describe.serial("Join courses workflow", () => {
     await page.getByLabel("Institutional ID").fill(studentInstitutionalID);
     await page.getByLabel("Email").fill(studentEmail);
     await page.getByLabel("Password").fill(studentPassword);
-
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
     await page.waitForURL(/\/login$/);
   });

e2e/grades/grades-workflow.spec.ts

@@ -49,6 +49,7 @@ test.describe.serial("Grades workflow", () => {
     await page.getByLabel("Institutional ID").fill(getRandomUniversityID());
     await page.getByLabel("Email").fill(studentEmail);
     await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
   });
 

e2e/register/RegisterStudents.spec.ts

@@ -25,6 +25,11 @@ test("The fields are validated", async ({ page }) => {
       "Must contain at least one letter, one number and one special character"
     )
   ).toBeVisible();
+  await expect(
+    page.getByText(
+      "You can't register without accepting the terms and conditions"
+    )
+  ).toBeVisible();
 });
 
 test.describe.serial("Student registration", () => {
@@ -38,6 +43,7 @@ test.describe.serial("Student registration", () => {
     await page.getByLabel("Email").fill(newStudentEmail);
     await page.getByLabel("Institutional ID").fill(newStudentID);
     await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
 
     await expect(
@@ -53,6 +59,7 @@ test.describe.serial("Student registration", () => {
     await page.getByLabel("Email").fill(newStudentEmail);
     await page.getByLabel("Institutional ID").fill(getRandomUniversityID());
     await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
 
     await expect(
@@ -69,6 +76,7 @@ test.describe.serial("Student registration", () => {
     await page.getByLabel("Email").fill(getRandomEmail());
     await page.getByLabel("Institutional ID").fill(newStudentID);
     await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByLabel("Accept terms and conditions").check();
     await page.getByRole("button", { name: "Submit" }).click();
 
     await expect(

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@hookform/resolvers": "3.3.4",
     "@radix-ui/react-alert-dialog": "1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-label": "2.0.2",

pnpm-lock.yaml

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/ui/checkbox.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -30,7 +31,10 @@ const RegisterStudentSchema = z.object({
     .regex(
       /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?])[A-Za-z\d[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]{8,}$/,
       "Must contain at least one letter, one number and one special character"
-    )
+    ),
+  accept_terms: z.boolean().refine((value) => !!value, {
+    message: "You can't register without accepting the terms and conditions"
+  })
 });
 
 export const RegisterStudentForm = () => {
@@ -43,7 +47,8 @@ export const RegisterStudentForm = () => {
       full_name: "",
       email: "",
       institutional_id: "",
-      password: ""
+      password: "",
+      accept_terms: false
     }
   });
 
@@ -144,6 +149,44 @@ export const RegisterStudentForm = () => {
             </FormItem>
           )}
         ></FormField>
+        <FormField
+          control={form.control}
+          name="accept_terms"
+          render={({ field }) => (
+            <FormItem>
+              <div className="items-top flex space-x-2">
+                <FormControl>
+                  <Checkbox
+                    id="terms1"
+                    checked={field.value}
+                    onCheckedChange={() => field.onChange(!field.value)}
+                  />
+                </FormControl>
+                <div className="grid space-y-1.5">
+                  <FormLabel htmlFor="terms1">
+                    Accept terms and conditions
+                  </FormLabel>
+                  <p className="text-sm text-muted-foreground">
+                    By checking this box, you agree to{" "}
+                    <a
+                      href="/POLITICA_TRATAMIENTO_INFORMACION_PROTECCION_DATOS_PERSONALES.pdf"
+                      target="_blank"
+                      rel="noreferrer,noopener"
+                      className="text-red-upb underline"
+                    >
+                      our terms and conditions.
+                    </a>
+                  </p>
+                </div>
+              </div>
+              {form.formState.errors.accept_terms && (
+                <FormMessage>
+                  {form.formState.errors.accept_terms.message}
+                </FormMessage>
+              )}
+            </FormItem>
+          )}
+        ></FormField>
         <Button
           type="submit"
           className="w-full"