Add sigh up layout
This commit is contained in:
parent
d1308e066f
commit
c5c462f420
91
package-lock.json
generated
91
package-lock.json
generated
@ -9,6 +9,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
|
"axios": "^1.7.4",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"next": "14.2.5",
|
"next": "14.2.5",
|
||||||
"next-auth": "^4.24.7",
|
"next-auth": "^4.24.7",
|
||||||
@ -947,6 +948,11 @@
|
|||||||
"integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
|
"integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/asynckit": {
|
||||||
|
"version": "0.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||||
|
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||||
|
},
|
||||||
"node_modules/autoprefixer": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.20",
|
"version": "10.4.20",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
||||||
@ -1007,6 +1013,16 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/axios": {
|
||||||
|
"version": "1.7.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
|
||||||
|
"integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
|
||||||
|
"dependencies": {
|
||||||
|
"follow-redirects": "^1.15.6",
|
||||||
|
"form-data": "^4.0.0",
|
||||||
|
"proxy-from-env": "^1.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/axobject-query": {
|
"node_modules/axobject-query": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
|
||||||
@ -1237,6 +1253,17 @@
|
|||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/combined-stream": {
|
||||||
|
"version": "1.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||||
|
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||||
|
"dependencies": {
|
||||||
|
"delayed-stream": "~1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/commander": {
|
"node_modules/commander": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||||
@ -1438,6 +1465,14 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/delayed-stream": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/didyoumean": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
@ -2229,6 +2264,25 @@
|
|||||||
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
|
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/follow-redirects": {
|
||||||
|
"version": "1.15.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
|
||||||
|
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"debug": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/for-each": {
|
"node_modules/for-each": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||||
@ -2254,6 +2308,19 @@
|
|||||||
"url": "https://github.com/sponsors/isaacs"
|
"url": "https://github.com/sponsors/isaacs"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/form-data": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||||
|
"dependencies": {
|
||||||
|
"asynckit": "^0.4.0",
|
||||||
|
"combined-stream": "^1.0.8",
|
||||||
|
"mime-types": "^2.1.12"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fraction.js": {
|
"node_modules/fraction.js": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||||
@ -3282,6 +3349,25 @@
|
|||||||
"node": ">=8.6"
|
"node": ">=8.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mime-db": {
|
||||||
|
"version": "1.52.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||||
|
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mime-types": {
|
||||||
|
"version": "2.1.35",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||||
|
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||||
|
"dependencies": {
|
||||||
|
"mime-db": "1.52.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||||
@ -4055,6 +4141,11 @@
|
|||||||
"react-is": "^16.13.1"
|
"react-is": "^16.13.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/proxy-from-env": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||||
|
},
|
||||||
"node_modules/punycode": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
|
"axios": "^1.7.4",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"next": "14.2.5",
|
"next": "14.2.5",
|
||||||
"next-auth": "^4.24.7",
|
"next-auth": "^4.24.7",
|
||||||
|
|||||||
BIN
src/app/[locale]/contacts/assets/Container (1).png
Normal file
BIN
src/app/[locale]/contacts/assets/Container (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
31
src/app/[locale]/contacts/page.tsx
Normal file
31
src/app/[locale]/contacts/page.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Container, Title } from "@/shared/ui";
|
||||||
|
import Img from "./assets/Container (1).png";
|
||||||
|
import Image from "next/image";
|
||||||
|
// import ContactForm from "@/widgets/forms/ContactForm";
|
||||||
|
|
||||||
|
export default function Contacts() {
|
||||||
|
return (
|
||||||
|
<section className="bg-[#FAFCFF]">
|
||||||
|
<Container className="pt-[111px]">
|
||||||
|
<Image src={Img} alt="map" />
|
||||||
|
<section className="flex items-center justify-between mb-[152px]">
|
||||||
|
<div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
|
||||||
|
<Title text="Адрес" className="font-extrabold mb-2" />
|
||||||
|
<p className="text-grey-text">
|
||||||
|
г. Бишкек, ул. Турусбекова 109/1, офис 108
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
|
||||||
|
<Title text="Телефон" className="font-extrabold mb-2" />
|
||||||
|
<p className="text-grey-text">(0312) 39 40 38</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
|
||||||
|
<Title text="Email" className="font-extrabold mb-2" />
|
||||||
|
<p className="text-grey-text">kyrgyzstan@transparency.org</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* <ContactForm /> */}
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/app/[locale]/sign-up/icons/flag.svg
Normal file
7
src/app/[locale]/sign-up/icons/flag.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg width="20.317383" height="21.000977" viewBox="0 0 20.3174 21.001" 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="M12.2998 5.22266L18.2529 5.22266C18.7256 5.22266 18.9609 5.22266 19.0996 5.32129C19.2197 5.4082 19.2979 5.54102 19.3154 5.68848C19.335 5.85742 19.2207 6.06445 18.9912 6.47656L17.5703 9.03418C17.4873 9.18359 17.4453 9.25879 17.4297 9.33789C17.415 9.4082 17.415 9.48047 17.4297 9.55078C17.4453 9.62988 17.4873 9.70508 17.5703 9.85449L18.9912 12.4121C19.2207 12.8252 19.335 13.0312 19.3154 13.2002C19.2979 13.3477 19.2197 13.4805 19.0996 13.5674C18.9609 13.667 18.7256 13.667 18.2529 13.667L10.8213 13.667C10.2305 13.667 9.93457 13.667 9.70898 13.5518C9.51074 13.4502 9.34863 13.2891 9.24805 13.0898C9.13281 12.8643 9.13281 12.5693 9.13281 11.9775L9.13281 9.44434M10.6104 1C11.2021 1 11.4971 1 11.7227 1.11523C11.9219 1.21582 12.083 1.37793 12.1846 1.57617C12.2998 1.80176 12.2998 2.09766 12.2998 2.68848L12.2998 7.75586C12.2998 8.34668 12.2998 8.64258 12.1846 8.86816C12.083 9.06641 11.9219 9.22852 11.7227 9.3291C11.4971 9.44434 11.2021 9.44434 10.6104 9.44434L2.7998 9.44434L1.21289 3.09863C1.03418 2.38281 0.944336 2.02539 1.03125 1.74414C1.1084 1.49707 1.27246 1.28711 1.49316 1.15234C1.74512 1 2.11426 1 2.85156 1L10.6104 1ZM5.43848 20L1.21582 3.11133" stroke="#000000" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
39
src/app/[locale]/sign-up/page.tsx
Normal file
39
src/app/[locale]/sign-up/page.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import flag from "./icons/flag.svg";
|
||||||
|
import { Link } from "@/shared/config/navigation";
|
||||||
|
import SignUpForm from "@/widgets/forms/SignUpForm";
|
||||||
|
import { Container } from "@/shared/ui";
|
||||||
|
|
||||||
|
const SignUp = () => {
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<div className="h-full min-h-[800px] w-full flex justify-center">
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="w-[48px] h-[48px] flex items-center justify-center rounded-sm border">
|
||||||
|
<Image src={flag} alt="Flag Icon" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2 flex flex-col items-center gap-2 text-center">
|
||||||
|
<h2 className="text-[24px] font-bold leading-8 text-gray-900">
|
||||||
|
Регистрация
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500">Пожалуйста, введите свои данные</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SignUpForm />
|
||||||
|
|
||||||
|
<p className="text-[14px] font-semibold leading-5 text-gray-500">
|
||||||
|
Уже есть аккаунт?{" "}
|
||||||
|
<Link
|
||||||
|
className="text-[14px] font-semibold leading-5 text-light-blue"
|
||||||
|
href="/sign-in"
|
||||||
|
>
|
||||||
|
Войти в аккаунт
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignUp;
|
||||||
53
src/features/AuthInput.tsx
Normal file
53
src/features/AuthInput.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import eye_off from "./icons/eye-off.svg";
|
||||||
|
import eye_on from "./icons/eye-on.svg";
|
||||||
|
import alert from "./icons/alert-circle.svg";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface IAuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||||
|
isPassword?: boolean;
|
||||||
|
label: string;
|
||||||
|
error: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthInput: React.FC<IAuthInputProps> = ({
|
||||||
|
isPassword,
|
||||||
|
label,
|
||||||
|
error,
|
||||||
|
placeholder,
|
||||||
|
name,
|
||||||
|
type,
|
||||||
|
}: IAuthInputProps) => {
|
||||||
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-[6px]">
|
||||||
|
<label className="text-[14px] leading-5 text-gray-700">{label}</label>
|
||||||
|
<div
|
||||||
|
className={`px-[10px] py-[14px] flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
|
||||||
|
error ? "-with-error" : "border border-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
name={name}
|
||||||
|
placeholder={placeholder}
|
||||||
|
className="w-full text-[16px] leading-6 text-gray-900"
|
||||||
|
type={!isPassword ? type : isOpen ? type : "password"}
|
||||||
|
/>
|
||||||
|
{isPassword && (
|
||||||
|
<button onClick={() => setIsOpen((prev) => !prev)} type="button">
|
||||||
|
<Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{error ? (
|
||||||
|
<p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
|
||||||
|
{error} <Image src={alert} alt="Alert Icon" />
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AuthInput;
|
||||||
7
src/features/icons/alert-circle.svg
Normal file
7
src/features/icons/alert-circle.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg width="14.666992" height="14.666992" viewBox="0 0 14.667 14.667" 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="M7.33398 14C3.65137 14 0.666992 11.0156 0.666992 7.33398C0.666992 3.65137 3.65137 0.666992 7.33398 0.666992C11.0156 0.666992 14 3.65137 14 7.33398C14 11.0156 11.0156 14 7.33398 14ZM7.33398 4.66699L7.33398 7.33398M7.33398 10L7.33984 10" stroke="#F04438" stroke-opacity="1.000000" stroke-width="1.333333" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 566 B |
15
src/features/icons/eye-off.svg
Normal file
15
src/features/icons/eye-off.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<desc>
|
||||||
|
Created with Pixso.
|
||||||
|
</desc>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip1668_50526">
|
||||||
|
<rect id="eye-off" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<rect id="eye-off" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||||
|
<g clip-path="url(#clip1668_50526)">
|
||||||
|
<path id="Vector" d="M17.9404 17.9404C16.2305 19.2432 14.1494 19.9648 12 20C5 20 1 12 1 12C2.24414 9.68164 3.96875 7.65625 6.05957 6.05957M9.90039 4.24023C10.5879 4.0791 11.293 3.99805 12 4C19 4 23 12 23 12C22.3926 13.1357 21.6689 14.2051 20.8398 15.1904M14.1201 14.1201C13.8457 14.415 13.5137 14.6514 13.1465 14.8154C12.7783 14.9795 12.3809 15.0674 11.9785 15.0742C11.5752 15.0811 11.1748 15.0078 10.8018 14.8564C10.4277 14.7061 10.0889 14.4814 9.80371 14.1963C9.51855 13.9111 9.29395 13.5723 9.14355 13.1982C8.99219 12.8252 8.91895 12.4248 8.92578 12.0215C8.93262 11.6191 9.02051 11.2217 9.18457 10.8535C9.34863 10.4863 9.58496 10.1543 9.87988 9.87988" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector" d="M1 1L23 23" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
15
src/features/icons/eye-on.svg
Normal file
15
src/features/icons/eye-on.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<desc>
|
||||||
|
Created with Pixso.
|
||||||
|
</desc>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip1668_50161">
|
||||||
|
<rect id="eye" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<rect id="eye" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||||
|
<g clip-path="url(#clip1668_50161)">
|
||||||
|
<path id="Vector" d="M12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12C1 12 5 4 12 4Z" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector" d="M12 15C10.3428 15 9 13.6572 9 12C9 10.3428 10.3428 9 12 9C13.6572 9 15 10.3428 15 12C15 13.6572 13.6572 15 12 15Z" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 901 B |
17
src/shared/config/apiConfig.ts
Normal file
17
src/shared/config/apiConfig.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const API_URL = process.env["NEXT_PUBLIC_BASE_API"];
|
||||||
|
|
||||||
|
export const apiInstance = axios.create({
|
||||||
|
baseURL: API_URL,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const authInstanse = (access_token: string) => {
|
||||||
|
return axios.create({
|
||||||
|
baseURL: API_URL,
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${access_token}`,
|
||||||
|
},
|
||||||
|
method: "",
|
||||||
|
});
|
||||||
|
};
|
||||||
13
src/shared/ui/Loader/Loader.css
Normal file
13
src/shared/ui/Loader/Loader.css
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
@keyframes rotation {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-spin {
|
||||||
|
animation: rotation 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
16
src/shared/ui/Loader/Loader.tsx
Normal file
16
src/shared/ui/Loader/Loader.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import "./Loader.css";
|
||||||
|
|
||||||
|
interface ILoader {
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Loader: React.FC<ILoader> = ({ color }: ILoader) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className="w-6 h-6 rounded-full border-t-3 border-r-3 border-t-white border-r-transparent box-border animate-spin"
|
||||||
|
style={{ borderTop: `3px solid ${color}` }}
|
||||||
|
></span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Loader;
|
||||||
153
src/widgets/forms/SignUpForm.tsx
Normal file
153
src/widgets/forms/SignUpForm.tsx
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { AxiosError } from "axios";
|
||||||
|
import AuthInput from "@/features/AuthInput";
|
||||||
|
import Loader from "@/shared/ui/Loader/Loader";
|
||||||
|
import { apiInstance } from "@/shared/config/apiConfig";
|
||||||
|
import { Link, useRouter } from "@/shared/config/navigation";
|
||||||
|
|
||||||
|
const SignUpForm = () => {
|
||||||
|
const [checkbox, setCheckbox] = useState<boolean>(false);
|
||||||
|
const [emailWarning, setEmailWarning] = useState<string>("");
|
||||||
|
const [passwordWarning, setPasswordWarning] = useState<string>("");
|
||||||
|
const [passwordConfirmWarning, setPasswordConfirmWarning] =
|
||||||
|
useState<string>("");
|
||||||
|
const [error, setError] = useState<string>("");
|
||||||
|
const [loader, setLoader] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleSubmit: React.MouseEventHandler<HTMLFormElement> = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const formData = new FormData(e.currentTarget);
|
||||||
|
const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/;
|
||||||
|
|
||||||
|
if (!formData.get("email")?.toString()) {
|
||||||
|
setError("");
|
||||||
|
setPasswordWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setEmailWarning("Заполните поле Email");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.get("password")?.toString()) {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setPasswordWarning("Заполните поле Пароль");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((formData.get("password")?.toString().length as number) < 8) {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setPasswordWarning("Пароль должен содержать минимум 8 символов");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!regex.test(formData.get("password")?.toString() as string)) {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setPasswordWarning(
|
||||||
|
"Пароль должен содержать по меньшей мере 1 прописную букву, одну заглавную букву и одну цифру"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.get("password2")?.toString()) {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordWarning("");
|
||||||
|
setPasswordConfirmWarning("Заполните поле потверждения");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
formData.get("password")?.toString() !==
|
||||||
|
formData.get("password2")?.toString()
|
||||||
|
) {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordWarning("");
|
||||||
|
setPasswordConfirmWarning("Пароли не совпадают");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!checkbox) {
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setError("Необходимо принять политику конфиденциальности");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setError("");
|
||||||
|
setEmailWarning("");
|
||||||
|
setPasswordWarning("");
|
||||||
|
setPasswordConfirmWarning("");
|
||||||
|
setLoader(true);
|
||||||
|
|
||||||
|
const res = await apiInstance.post("/users/register/", formData);
|
||||||
|
|
||||||
|
if ([200, 201].includes(res.status)) {
|
||||||
|
router.push(`/sign-up/confirm-email/?email=${formData.get("email")}`);
|
||||||
|
}
|
||||||
|
} catch (error: unknown) {
|
||||||
|
if (error instanceof AxiosError) {
|
||||||
|
if ([401, 400].includes(error.response?.status as number)) {
|
||||||
|
setError("Такой пользователь уже существует");
|
||||||
|
} else if (error.response?.status.toString().slice(0, 1) === "5") {
|
||||||
|
setError("Ошибка на стороне сервера");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setError("Непредвиденная ошибка");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoader(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="mb-2 w-[360px] flex flex-col" onSubmit={handleSubmit}>
|
||||||
|
<div className="flex flex-col gap-5">
|
||||||
|
<AuthInput
|
||||||
|
type="email"
|
||||||
|
label="Email"
|
||||||
|
placeholder="Введите email"
|
||||||
|
error={emailWarning}
|
||||||
|
name="email"
|
||||||
|
/>
|
||||||
|
<AuthInput
|
||||||
|
isPassword
|
||||||
|
label="Пароль"
|
||||||
|
placeholder="Введите пароль"
|
||||||
|
error={passwordWarning}
|
||||||
|
name="password"
|
||||||
|
/>
|
||||||
|
<AuthInput
|
||||||
|
isPassword
|
||||||
|
label="Пароль потверждения"
|
||||||
|
placeholder="Повторите пароль"
|
||||||
|
error={passwordConfirmWarning}
|
||||||
|
name="password2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{error ? <p className="text-sm leading-5 text-red-500">{error}</p> : null}
|
||||||
|
|
||||||
|
<div className="flex flex-col mt-[36px] gap-4">
|
||||||
|
<button
|
||||||
|
className="p-4 h-[50px] w-full font-bold leading-6 text-white bg-light-blue rounded-md"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{loader ? <Loader /> : "Зарегистрироваться"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignUpForm;
|
||||||
7
src/widgets/forms/icons/check.svg
Normal file
7
src/widgets/forms/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