added policy checkbox in sign-up form, fixed height bug in sign-up page

This commit is contained in:
Alibek 2024-03-12 04:04:41 +06:00
parent 74b15060a1
commit 7bc3e2ccb5
4 changed files with 68 additions and 2 deletions

View File

@ -90,7 +90,6 @@
@media screen and (max-width: 550px) { @media screen and (max-width: 550px) {
.auth-page { .auth-page {
padding: 48px 16px; padding: 48px 16px;
min-height: 600px;
} }
.auth-wrapper { .auth-wrapper {

View File

@ -6,6 +6,42 @@
display: flex; display: flex;
flex-direction: column; 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 { &__error {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;

View File

@ -7,9 +7,12 @@ import Loader from "@/shared/ui/components/Loader/Loader";
import GoogleButton from "@/features/GoogleButton/GoogleButton"; import GoogleButton from "@/features/GoogleButton/GoogleButton";
import { apiInstance } from "@/shared/config/apiConfig"; import { apiInstance } from "@/shared/config/apiConfig";
import { AxiosError } from "axios"; 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 SignUpForm = () => {
const [checkbox, setCheckbox] = useState<boolean>(false);
const [emailWarning, setEmailWarning] = useState<string>(""); const [emailWarning, setEmailWarning] = useState<string>("");
const [passwordWarning, setPasswordWarning] = useState<string>(""); const [passwordWarning, setPasswordWarning] = useState<string>("");
const [passwordConfirmWarning, setPasswordConfirmWarning] = const [passwordConfirmWarning, setPasswordConfirmWarning] =
@ -81,6 +84,14 @@ const SignUpForm = () => {
return; return;
} }
if (!checkbox) {
setEmailWarning("");
setPasswordWarning("");
setPasswordConfirmWarning("");
setError("Необходимо принять политику конфиденциальности");
return;
}
try { try {
setError(""); setError("");
setEmailWarning(""); setEmailWarning("");
@ -141,6 +152,19 @@ const SignUpForm = () => {
/> />
</div> </div>
{error ? <p className="sign-up-form__error">{error}</p> : null} {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"> <div className="sign-up-form__btns">
<button className="sign-up-form__btns_first" type="submit"> <button className="sign-up-form__btns_first" type="submit">

View File

@ -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>

After

Width:  |  Height:  |  Size: 406 B