diff --git a/package.json b/package.json index e708d54..03885e4 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.6.2", "classnames": "^2.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index d4a8d09..7a802ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,10 @@ -import Button from '@/components/ui/Button/Button'; -import EyeIcon from '@/components/ui/EyeIcon/EyeIcon'; +import Button from '@/components/ui/Button'; const App = () => { return ( <> - console.log('EyeIcon clicked')} /> -
- ); diff --git a/src/api/controllers/login.controller.ts b/src/api/controllers/login.controller.ts index 8d124d1..eae4876 100644 --- a/src/api/controllers/login.controller.ts +++ b/src/api/controllers/login.controller.ts @@ -1,19 +1,21 @@ -export async function login(url: string, username: string, password: string): Promise { +import axios, { AxiosResponse } from 'axios'; + +export async function login(url: string, username: string, password: string): Promise { const data = { username: username, password: password, }; - const response = await fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(data), - credentials: 'include', - }); - if (!response.ok) { + try { + const response = await axios.post(url, data, { + headers: { + 'Content-Type': 'application/json', + }, + withCredentials: true, + }); + + return response; + } catch (error) { throw new Error('Network response was not ok'); } - return response; } diff --git a/src/api/controllers/register.controller.ts b/src/api/controllers/register.controller.ts index 07e6933..1e702f4 100644 --- a/src/api/controllers/register.controller.ts +++ b/src/api/controllers/register.controller.ts @@ -1,17 +1,23 @@ -export async function register(url: string, email: string, username: string, password: string): Promise { +import axios, { AxiosResponse } from 'axios'; + +export async function register(url: string, email: string, username: string, password: string): Promise { const data = { email, username, password, }; - const response = await fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(data), - credentials: 'include', - }); - return response; + try { + const response = await axios.post(url, data, { + headers: { + 'Content-Type': 'application/json', + }, + withCredentials: true, + }); + + return response; + } catch (error) { + // Обрабатывайте ошибки, если это необходимо + throw new Error('Network response was not ok'); + } } diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index f5d2e85..66f65fc 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -1,9 +1,6 @@ import { FC, MouseEventHandler } from 'react'; import ButtonView, { IButtonViewProps } from './ButtonView'; -import styles from './styles/ButtonView.module.scss'; -import classnames from 'classnames'; - interface IButtonProps extends IButtonViewProps { typeView?: 'def' | 'alt'; } @@ -13,12 +10,8 @@ const Button: FC = ({ children, typeView = 'def', onClick, ...prop onClick?.(event); }; - const combinedClassName = classnames(styles.button, { - [styles.alt]: typeView === 'alt', - }); - return ( - + {children} ); diff --git a/src/components/ui/Button/ButtonView.tsx b/src/components/ui/Button/ButtonView.tsx index b33bc12..a6b030e 100644 --- a/src/components/ui/Button/ButtonView.tsx +++ b/src/components/ui/Button/ButtonView.tsx @@ -1,22 +1,30 @@ import { FC, ReactNode, ButtonHTMLAttributes, CSSProperties } from 'react'; +import classnames from 'classnames'; + +import styles from './styles/ButtonView.module.scss'; interface IButtonStyleProps { width?: number | string; height?: number | string; + typeView?: 'def' | 'alt'; } export interface IButtonViewProps extends ButtonHTMLAttributes, IButtonStyleProps { children?: ReactNode; } -const ButtonView: FC = ({ children, width, height, className, ...props }) => { +const ButtonView: FC = ({ children, width, height, className, typeView, ...props }) => { const buttonStyle: CSSProperties = { width: width, height: height, }; + const combinedClassName = classnames(styles.button, className, { + [styles.alt]: typeView === 'alt', + }); + return ( - ); diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts index 8b166a8..803f51f 100644 --- a/src/components/ui/Button/index.ts +++ b/src/components/ui/Button/index.ts @@ -1 +1,3 @@ -export * from './Button'; +import Button from './Button'; + +export default Button; diff --git a/src/components/ui/EyeIcon/index.ts b/src/components/ui/EyeIcon/index.ts index 84ad30d..18305fa 100644 --- a/src/components/ui/EyeIcon/index.ts +++ b/src/components/ui/EyeIcon/index.ts @@ -1 +1,3 @@ -export * from './EyeIcon'; +import EyeIcon from './EyeIcon'; + +export default EyeIcon; diff --git a/src/components/ui/Input/Input.tsx b/src/components/ui/Input/Input.tsx new file mode 100644 index 0000000..2ba0182 --- /dev/null +++ b/src/components/ui/Input/Input.tsx @@ -0,0 +1,10 @@ +import { FC } from 'react'; +import InputView, { IInputViewProps } from './InputView'; + +interface IInput extends IInputViewProps {} + +const Input: FC = ({ ...props }) => { + return ; +}; + +export default Input; diff --git a/src/components/ui/Input/InputView.tsx b/src/components/ui/Input/InputView.tsx new file mode 100644 index 0000000..76d6f06 --- /dev/null +++ b/src/components/ui/Input/InputView.tsx @@ -0,0 +1,22 @@ +import { FC, InputHTMLAttributes } from 'react'; +import EyeIcon from '../EyeIcon'; + +import styles from './styles/Input.module.scss'; + +export interface IInputViewProps extends InputHTMLAttributes { + label?: string; +} + +const InputView: FC = ({ width, height, label, id, type }) => { + return ( +
+ {label ? : ''} +
+ + +
+
+ ); +}; + +export default InputView; diff --git a/src/components/ui/Input/index.ts b/src/components/ui/Input/index.ts index e69de29..a122bd4 100644 --- a/src/components/ui/Input/index.ts +++ b/src/components/ui/Input/index.ts @@ -0,0 +1,3 @@ +import Input from './Input'; + +export default Input; diff --git a/src/components/ui/Input/styles/Input.module.scss b/src/components/ui/Input/styles/Input.module.scss new file mode 100644 index 0000000..5be9a9c --- /dev/null +++ b/src/components/ui/Input/styles/Input.module.scss @@ -0,0 +1,5 @@ +@import url('./src/styles/fonts.module.scss'); + +.test { + font: optional; +} diff --git a/src/components/ui/Input/styles/Input.scss b/src/components/ui/Input/styles/Input.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss new file mode 100644 index 0000000..94a93c1 --- /dev/null +++ b/src/styles/fonts.module.scss @@ -0,0 +1,41 @@ +@import url('./variables.scss'); + +.__font_700_37 { + font-size: 37px; + font-weight: 700; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_400_25 { + font-size: 25px; + font-weight: 400; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_400_16 { + font-size: 16px; + font-weight: 400; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_300_15 { + font-size: 15px; + font-weight: 300; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_300_12 { + font-size: 12px; + font-weight: 300; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 7ac27f6..0570f29 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ +@use './variables.scss' as *; +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); + /* Custom reset */ *, @@ -43,3 +46,45 @@ h2 { font-weight: 700; line-height: normal; } + +// Fonts + +.__font_700_37 { + font-size: 37px; + font-weight: 700; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_400_25 { + font-size: 25px; + font-weight: 400; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_400_16 { + font-size: 16px; + font-weight: 400; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_300_15 { + font-size: 15px; + font-weight: 300; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} + +.__font_300_12 { + font-size: 12px; + font-weight: 300; + font-family: $font-family-main; + font-style: normal; + line-height: normal; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..f5d3e07 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,20 @@ +// Variables + +$font-family-main: 'Poppins', 'Montserrat', sans-serif; + +$font-weight-bold: 700; +$font-weight-normal: 400; +$font-weight-light: 300; + +$font-size-37: 37px; +$font-size-25: 25px; +$font-size-16: 16px; +$font-size-15: 15px; +$font-size-12: 12px; + +$color-white: #fff; +$color-subtle-white: #fffefc; +$color-black: #000; +$color-beige: #9e896a; +$color-gray: #5b5b5b; +$color-light-gray: #acacac; diff --git a/yarn.lock b/yarn.lock index ea9417d..79b5979 100644 --- a/yarn.lock +++ b/yarn.lock @@ -524,6 +524,20 @@ array-union@^2.1.0: resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + +axios@^1.6.2: + version "1.6.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2" + integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A== + dependencies: + follow-redirects "^1.15.0" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -594,6 +608,13 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -644,6 +665,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + dir-glob@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f" @@ -872,6 +898,20 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf" integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ== +follow-redirects@^1.15.0: + version "1.15.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" + integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -1155,6 +1195,18 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" + mime@^1.4.1: version "1.6.0" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" @@ -1342,6 +1394,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"