forked from Transparency/kgroad-frontend2
added policy checkbox in sign-up form, fixed height bug in sign-up page
This commit is contained in:
parent
74b15060a1
commit
7bc3e2ccb5
@ -90,7 +90,6 @@
|
||||
@media screen and (max-width: 550px) {
|
||||
.auth-page {
|
||||
padding: 48px 16px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.auth-wrapper {
|
||||
|
@ -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;
|
||||
|
@ -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">
|
||||
|
7
src/widgets/forms/SignUpForm/icons/check.svg
Normal file
7
src/widgets/forms/SignUpForm/icons/check.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user