diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss index 9afa01fa..cf81e709 100644 --- a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss +++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss @@ -78,4 +78,4 @@ top: 0.5em; right: 0.5em; } -} +} \ No newline at end of file diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx index ca9938dc..55ee6ca9 100644 --- a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx +++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx @@ -120,4 +120,4 @@ function ForumPost({ ); } -export default ForumPost; +export default ForumPost; \ No newline at end of file diff --git a/app/frontend/src/Pages/Register/Register.const.ts b/app/frontend/src/Pages/Register/Register.const.ts new file mode 100644 index 00000000..7fc42ff8 --- /dev/null +++ b/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. "; diff --git a/app/frontend/src/Pages/Register/Register.module.css b/app/frontend/src/Pages/Register/Register.module.css index d6d79d49..01abc11b 100644 --- a/app/frontend/src/Pages/Register/Register.module.css +++ b/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; } diff --git a/app/frontend/src/Pages/Register/Register.tsx b/app/frontend/src/Pages/Register/Register.tsx index 6f660cfc..03a179bb 100644 --- a/app/frontend/src/Pages/Register/Register.tsx +++ b/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 (
@@ -70,7 +88,6 @@ function Register() { value={username} onChange={(event) => setUsername(event.target.value)} /> - setEmail(event.target.value)} /> - setPassword(event.target.value)} /> - setConfirmPassword(event.target.value)} /> + + I agree to the{" "} + + Game Guru User Agreement + +
+ +

{userAgreementText}

+
); }