feat: add privacy policy (#670)

* feat: add privacy policy

* Update layout/SignUp/components/SignUpForm/index.tsx

Co-authored-by: João Lobo <[email protected]>

---------

Co-authored-by: João Lobo <[email protected]>

Author: ruioliveira02

components/Checkbox/index.tsx

@@ -0,0 +1,18 @@
+export default function Checkbox({ onChange, selected, children }) {
+  return (
+    <div>
+      <label className="rounded-sm bg-quinary">
+        <input className="hidden" type="checkbox" onChange={onChange}></input>
+        <span
+          className={`text-sm text-white ${
+            selected ? "bg-quinary" : "bg-white"
+          } select-none border-2 border-quinary px-1 font-ibold`}
+        >
+          {" "}
+          &#10003;
+        </span>
+      </label>
+      <label className="text-md ml-2 select-none text-white">{children}</label>
+    </div>
+  );
+}

layout/SignUp/SignUp.tsx

@@ -31,7 +31,7 @@ function Signup() {
         <Title text="Sign up" />
         <SignUpForm courses={courses} />
         <Text text="Already have an account?" link="Login here" href="/login" />
-        <div className="absolute bottom-0 right-60 hidden lg:block">
+        <div className="fixed bottom-0 right-60 hidden lg:block">
           <Motion.div
             initial={{ y: 30, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}

layout/SignUp/components/SignUpForm/index.tsx

@@ -9,6 +9,8 @@ import Select from "@components/Select";
 import PasswordInput from "@components/PasswordInput";
 
 import BarebonesQRScanner from "@components/QRScanner/BarebonesQRScanner";
+import Checkbox from "@components/Checkbox";
+import Link from "next/link";
 
 interface Course {
   id: any;
@@ -29,14 +31,16 @@ export default function SignUpForm({ courses }) {
   const [local_error, updateError] = useState("");
   const [scanned, updateScanned] = useState(false);
   const [scanning, updateScanning] = useState(false);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+
   const pauseRef = useRef(false);
   pauseRef.current = false;
 
   const validateNickname = (nickname) => {
     return (
       nickname.length >= 2 &&
       nickname.length <= 15 &&
-      nickname.match(/^[a-zA-Z0-9]+([a-zA-Z0-9](_|-)[a-zA-Z0-9])*[a-zA-Z0-9]+$/)
+      nickname.match(/^[\w\d-_]{3,15}$/)
     );
   };
 
@@ -57,6 +61,8 @@ export default function SignUpForm({ courses }) {
       );
     } else if (!validatePassword(password)) {
       updateError("Your password must be at least 8 characters long");
+    } else if (!termsAccepted) {
+      updateError("You must accept the privacy policy and general regulation");
     } else {
       updateError("");
 
@@ -137,6 +143,19 @@ export default function SignUpForm({ courses }) {
             updateScanning(!scanning);
           }}
         />
+        <Checkbox
+          selected={termsAccepted}
+          onChange={(e) => setTermsAccepted(!termsAccepted)}
+        >
+          I have read and understood the &nbsp;
+          <Link href="/docs/privacy_policy.pdf" target="_blank" className="text-quinary">
+            privacy policy
+          </Link>{" "}
+          and the &nbsp;
+          <Link href="/docs/regulation.pdf" target="_blank" className="text-quinary">
+            general regulation
+          </Link>
+        </Checkbox>
         {scanned && (
           <p className="mt-3 font-iregular text-lg text-quinary">
             QR Code scanned successfully: {uuid}

layout/Staff/UploadCV/components/UploadSection.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { UploadIcon, CheckCircleIcon } from "@heroicons/react/solid";
+import Checkbox from "@components/Checkbox";
 
 export default function UploadSection({ cv, onSubmit }) {
   const [uploading, setUploading] = useState<boolean>(cv == null);
@@ -92,25 +93,10 @@ export default function UploadSection({ cv, onSubmit }) {
             </div>
           </label>
           <div className="mt-4 block">
-            <label className="rounded-sm bg-quinary">
-              <input
-                className="hidden"
-                type="checkbox"
-                onChange={handleConsentChange}
-              ></input>
-              <span
-                className={`text-sm text-white ${
-                  consent ? "bg-quinary" : "bg-white"
-                } select-none border-2 border-quinary px-1 font-ibold`}
-              >
-                {" "}
-                &#10003;
-              </span>
-            </label>
-            <label className="ml-2 select-none text-sm">
+            <Checkbox selected={consent} onChange={handleConsentChange}>
               By submitting your CV you are consenting to it being shared with
               the companies present in the event.
-            </label>
+            </Checkbox>
           </div>
 
           <input