Merge pull request #767 from bounswe/frontend-user-agreement

Add User agreement to Register

app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss

@@ -78,4 +78,4 @@
     top: 0.5em;
     right: 0.5em;
   }
-}
+}

app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx

@@ -120,4 +120,4 @@ function ForumPost({
   );
 }
 
-export default ForumPost;
+export default ForumPost;

app/frontend/src/Pages/Register/Register.const.ts

@@ -0,0 +1,2 @@
+export const userAgreementText =
+  "By accessing and using Game Guru, you are agreeing to the terms outlined in this User Agreement. Please take a moment to familiarize yourself with the following conditions. Users must be at least 13 years old, and if under 13, parental consent is necessary. Ensure the security and confidentiality of your account information, and notify us promptly of any unauthorized access. Uphold a standard of respectful behavior, refraining from engaging in inappropriate or offensive conduct. All content on Game Guru is the intellectual property of Game Guru or its licensors and is protected by intellectual property laws. We reserve the right to suspend or terminate user accounts at our discretion for any violations. Game Guru is provided as is, without any expressed or implied warranties, and we are not liable for any indirect, incidental, or consequential damages. This agreement may be modified without prior notice, and continued use constitutes acceptance of the modified terms. ";

app/frontend/src/Pages/Register/Register.module.css

@@ -50,6 +50,16 @@
   color: red;
 }
 
+.userAgreementLink {
+  color: lightblue;
+  text-decoration: underline;
+}
+
+.agreeCheckbox {
+  color: white;
+  margin-bottom: 1rem;
+}
+
 .navigationLink {
   color: white;
 }

app/frontend/src/Pages/Register/Register.tsx

@@ -7,16 +7,20 @@ import {
   MailOutlined,
   EyeInvisibleOutlined,
 } from "@ant-design/icons";
-import { Button, Input } from "antd";
+import { Button, Checkbox, Input, Modal } from "antd";
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "react-query";
 import postRegister from "../../Services/Register";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { userAgreementText } from "./Register.const";
 
 function Register() {
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const [agreeTerm, setAgreeTerm] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const navigate = useNavigate();
 
@@ -43,12 +47,26 @@ function Register() {
       alert("Please enter a valid email address!");
     } else if (password !== confirmPassword) {
       alert("Passwords do not match!");
+    } else if (agreeTerm === false) {
+      alert("Please agree with our user agreement!");
     } else {
       registerMutation.mutate({ username, email, password });
     }
     event.preventDefault();
   };
 
+  const handleAgreeTerm = (e: CheckboxChangeEvent) => {
+    setAgreeTerm(e.target.checked);
+  };
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <div className={styles.outerContainer}>
       <div className={styles.innerContainer}>
@@ -70,7 +88,6 @@ function Register() {
               value={username}
               onChange={(event) => setUsername(event.target.value)}
             />
-
             <Input
               size="large"
               placeholder="Email"
@@ -83,7 +100,6 @@ function Register() {
               value={email}
               onChange={(event) => setEmail(event.target.value)}
             />
-
             <Input.Password
               placeholder="Password"
               prefix={
@@ -102,7 +118,6 @@ function Register() {
               value={password}
               onChange={(event) => setPassword(event.target.value)}
             />
-
             <Input.Password
               placeholder="Confirm Password"
               prefix={
@@ -121,6 +136,17 @@ function Register() {
               value={confirmPassword}
               onChange={(event) => setConfirmPassword(event.target.value)}
             />
+            <Checkbox
+              onChange={handleAgreeTerm}
+              value={agreeTerm}
+              className={styles.agreeCheckbox}
+              disabled={isModalOpen}
+            >
+              I agree to the{" "}
+              <span className={styles.userAgreementLink} onClick={showModal}>
+                Game Guru User Agreement
+              </span>
+            </Checkbox>
 
             <div className={styles.buttonContainer}>
               <Button
@@ -141,6 +167,14 @@ function Register() {
           </form>
         </div>
       </div>
+      <Modal
+        title="User Agreement"
+        open={isModalOpen}
+        footer={null}
+        onCancel={handleCancel}
+      >
+        <p>{userAgreementText}</p>
+      </Modal>
     </div>
   );
 }