From a75a137e352d767e6643d038e645a606d6d2ea5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D1=80=D0=B8=D1=88=D0=B8=D0=BD=D0=B0=29?= <Аришина)@DESKTOP-OUE59OV> Date: Wed, 20 Nov 2024 10:32:43 +0400 Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D1=83=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BC=D0=B5=D0=BD=D1=8F=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cucumber-frontend/package-lock.json | 4 +++- cucumber-frontend/package.json | 4 +++- cucumber-frontend/src/App.css | 5 +++++ cucumber-frontend/src/App.tsx | 4 +++- cucumber-frontend/src/components/Header.tsx | 18 ++++++++++-------- cucumber-frontend/src/components/Layout.tsx | 8 ++++---- cucumber-frontend/src/index.css | 14 ++++++++++++++ cucumber-frontend/src/pages/Login.tsx | 7 ++++--- cucumber-frontend/src/pages/Profile.tsx | 15 +++++++++++++++ cucumber-frontend/src/pages/Register.tsx | 9 +++++---- cucumber-frontend/tailwind.config.js | 11 +++++++++++ 11 files changed, 77 insertions(+), 22 deletions(-) create mode 100644 cucumber-frontend/src/pages/Profile.tsx create mode 100644 cucumber-frontend/tailwind.config.js diff --git a/cucumber-frontend/package-lock.json b/cucumber-frontend/package-lock.json index 6f7f79a..8afc532 100644 --- a/cucumber-frontend/package-lock.json +++ b/cucumber-frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "cucumber-frontend", "version": "0.1.0", "dependencies": { + "@ant-design/icons": "^5.5.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -24,7 +25,8 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/react-dom": "^18.3.1" + "@types/react-dom": "^18.3.1", + "tailwindcss": "^3.4.14" } }, "node_modules/@adobe/css-tools": { diff --git a/cucumber-frontend/package.json b/cucumber-frontend/package.json index 9d2f3a3..3f98a71 100644 --- a/cucumber-frontend/package.json +++ b/cucumber-frontend/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@ant-design/icons": "^5.5.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -43,6 +44,7 @@ ] }, "devDependencies": { - "@types/react-dom": "^18.3.1" + "@types/react-dom": "^18.3.1", + "tailwindcss": "^3.4.14" } } diff --git a/cucumber-frontend/src/App.css b/cucumber-frontend/src/App.css index 74b5e05..fbbbd0f 100644 --- a/cucumber-frontend/src/App.css +++ b/cucumber-frontend/src/App.css @@ -2,6 +2,11 @@ text-align: center; } +#main-content { + display: flex; + flex-direction: row; +} + .App-logo { height: 40vmin; pointer-events: none; diff --git a/cucumber-frontend/src/App.tsx b/cucumber-frontend/src/App.tsx index c00056a..f3bfa31 100644 --- a/cucumber-frontend/src/App.tsx +++ b/cucumber-frontend/src/App.tsx @@ -4,15 +4,17 @@ import { Navigate, Route, Routes } from 'react-router-dom'; import {LoginPage} from './pages/Login'; import {RegisterPage} from './pages/Register'; import {AppLayout} from './components/Layout'; +import { ProfilePage } from './pages/Profile'; function App() { return (
}> - } /> + } /> } /> } /> + } /> diff --git a/cucumber-frontend/src/components/Header.tsx b/cucumber-frontend/src/components/Header.tsx index 3e8336f..ae0200d 100644 --- a/cucumber-frontend/src/components/Header.tsx +++ b/cucumber-frontend/src/components/Header.tsx @@ -1,22 +1,24 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import Title from 'antd/es/typography/Title'; +import { LoginOutlined, ProfileOutlined } from '@ant-design/icons'; export function Header () { return ( -
+
- Cucumber App + <Link to="/" style={{ textDecoration: 'none', color: 'white'}}>Cucumber</Link>
-
+
); -}; \ No newline at end of file +}; diff --git a/cucumber-frontend/src/components/Layout.tsx b/cucumber-frontend/src/components/Layout.tsx index b64f2bb..c9dca47 100644 --- a/cucumber-frontend/src/components/Layout.tsx +++ b/cucumber-frontend/src/components/Layout.tsx @@ -6,13 +6,13 @@ import {Footer} from './Footer'; export function AppLayout () { return ( - +
- +
- +
- +
); }; diff --git a/cucumber-frontend/src/index.css b/cucumber-frontend/src/index.css index a35ab04..0bbc7e3 100644 --- a/cucumber-frontend/src/index.css +++ b/cucumber-frontend/src/index.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -34,4 +38,14 @@ footer { justify-content: center; font-size: calc(10px + 2vmin); color: white; + position:absolute; + left:0; + bottom:0; + right:0; +} + +#app-layout { + display: flex; + flex-direction: column; + min-height: 100vh; } \ No newline at end of file diff --git a/cucumber-frontend/src/pages/Login.tsx b/cucumber-frontend/src/pages/Login.tsx index d6c7bb4..8909222 100644 --- a/cucumber-frontend/src/pages/Login.tsx +++ b/cucumber-frontend/src/pages/Login.tsx @@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { Button, Form, Input } from 'antd'; import { loginUser } from '../API/api'; import ILoginRequest from '../Requests/LoginRequest'; +import Text from 'antd/es/typography/Text'; export function LoginPage () { const [email, setEmail] = useState(''); @@ -29,8 +30,8 @@ export function LoginPage () { }; return ( -
-

Login

+
+ Вход в систему
setEmail(e.target.value)} /> diff --git a/cucumber-frontend/src/pages/Profile.tsx b/cucumber-frontend/src/pages/Profile.tsx new file mode 100644 index 0000000..3435a2e --- /dev/null +++ b/cucumber-frontend/src/pages/Profile.tsx @@ -0,0 +1,15 @@ +import { Navigate } from "react-router-dom"; + +export function ProfilePage () { + const token = localStorage.getItem('token'); + + if (!token) { + return ; + } + + return ( +
+

Profile

+
+ ) +} diff --git a/cucumber-frontend/src/pages/Register.tsx b/cucumber-frontend/src/pages/Register.tsx index aead706..6c40dd5 100644 --- a/cucumber-frontend/src/pages/Register.tsx +++ b/cucumber-frontend/src/pages/Register.tsx @@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { Button, Form, Input } from 'antd'; import { createUser } from '../API/api'; import IRegisterRequest from '../Requests/RegisterRequest'; +import Text from 'antd/es/typography/Text'; export function RegisterPage () { const [name, setName] = useState(''); @@ -38,16 +39,16 @@ export function RegisterPage () { }; return ( -
-

Register

+
+ Регистрация - + setName(e.target.value)} /> setEmail(e.target.value)} /> - +