From 7bc3e2ccb54a26d09b56c565e2f7744b09987a60 Mon Sep 17 00:00:00 2001
From: Alibek <musicchannel0p@gmail.com>
Date: Tue, 12 Mar 2024 04:04:41 +0600
Subject: [PATCH] added policy checkbox in sign-up form, fixed height bug in
 sign-up page

---
 src/shared/ui/auth-classes.scss              |  1 -
 src/widgets/forms/SignUpForm/SignUpForm.scss | 36 ++++++++++++++++++++
 src/widgets/forms/SignUpForm/SignUpForm.tsx  | 26 +++++++++++++-
 src/widgets/forms/SignUpForm/icons/check.svg |  7 ++++
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/widgets/forms/SignUpForm/icons/check.svg

diff --git a/src/shared/ui/auth-classes.scss b/src/shared/ui/auth-classes.scss
index 7862a38..7ac3283 100644
--- a/src/shared/ui/auth-classes.scss
+++ b/src/shared/ui/auth-classes.scss
@@ -90,7 +90,6 @@
 @media screen and (max-width: 550px) {
   .auth-page {
     padding: 48px 16px;
-    min-height: 600px;
   }
 
   .auth-wrapper {
diff --git a/src/widgets/forms/SignUpForm/SignUpForm.scss b/src/widgets/forms/SignUpForm/SignUpForm.scss
index bfb6c3c..a12d87e 100644
--- a/src/widgets/forms/SignUpForm/SignUpForm.scss
+++ b/src/widgets/forms/SignUpForm/SignUpForm.scss
@@ -6,6 +6,42 @@
   display: flex;
   flex-direction: column;
 
+  &__policy {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    p,
+    a {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    p {
+      color: #344054;
+    }
+
+    a {
+      color: #0077b6;
+    }
+  }
+
+  &__checkbox {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
   &__error {
     font-size: 14px;
     font-weight: 400;
diff --git a/src/widgets/forms/SignUpForm/SignUpForm.tsx b/src/widgets/forms/SignUpForm/SignUpForm.tsx
index d4ef92b..925355e 100644
--- a/src/widgets/forms/SignUpForm/SignUpForm.tsx
+++ b/src/widgets/forms/SignUpForm/SignUpForm.tsx
@@ -7,9 +7,12 @@ import Loader from "@/shared/ui/components/Loader/Loader";
 import GoogleButton from "@/features/GoogleButton/GoogleButton";
 import { apiInstance } from "@/shared/config/apiConfig";
 import { AxiosError } from "axios";
-import { useRouter } from "@/shared/config/navigation";
+import { Link, useRouter } from "@/shared/config/navigation";
+import check from "./icons/check.svg";
+import Image from "next/image";
 
 const SignUpForm = () => {
+  const [checkbox, setCheckbox] = useState<boolean>(false);
   const [emailWarning, setEmailWarning] = useState<string>("");
   const [passwordWarning, setPasswordWarning] = useState<string>("");
   const [passwordConfirmWarning, setPasswordConfirmWarning] =
@@ -81,6 +84,14 @@ const SignUpForm = () => {
       return;
     }
 
+    if (!checkbox) {
+      setEmailWarning("");
+      setPasswordWarning("");
+      setPasswordConfirmWarning("");
+      setError("Необходимо принять политику конфиденциальности");
+      return;
+    }
+
     try {
       setError("");
       setEmailWarning("");
@@ -141,6 +152,19 @@ const SignUpForm = () => {
         />
       </div>
       {error ? <p className="sign-up-form__error">{error}</p> : null}
+      <div className="sign-up-form__policy">
+        <button
+          onClick={() => setCheckbox((prev) => !prev)}
+          type="button"
+          className="sign-up-form__checkbox"
+        >
+          {checkbox ? <Image src={check} alt="Check Icon" /> : null}
+        </button>
+        <p>
+          Я ознакомлен(-а) с{" "}
+          <Link href="#">Политикой конфиденциальности</Link>
+        </p>
+      </div>
 
       <div className="sign-up-form__btns">
         <button className="sign-up-form__btns_first" type="submit">
diff --git a/src/widgets/forms/SignUpForm/icons/check.svg b/src/widgets/forms/SignUpForm/icons/check.svg
new file mode 100644
index 0000000..9b5d538
--- /dev/null
+++ b/src/widgets/forms/SignUpForm/icons/check.svg
@@ -0,0 +1,7 @@
+<svg width="15.007812" height="10.834961" viewBox="0 0 15.0078 10.835" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="Icon" d="M14.1699 0.835938L5.00391 10.0029L0.836914 5.83594" stroke="#3695D8" stroke-opacity="1.000000" stroke-width="1.666667" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>