mfnefd/Cucumber
mfnefd/Cucumber
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

верстку поменял

Browse Source
This commit is contained in:
Аришина) 2024-11-20 10:32:43 +04:00
parent 0abb511375
commit a75a137e35
11 changed files with 77 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cucumber-frontend/package-lock.json generated
View File

@ -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": {

4
cucumber-frontend/package.json
View File

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

5
cucumber-frontend/src/App.css
View File

@ -2,6 +2,11 @@
text-align: center;
}
#main-content {
display: flex;
flex-direction: row;
}
.App-logo {
height: 40vmin;
pointer-events: none;

4
cucumber-frontend/src/App.tsx
View File

@ -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 (
<div className="App">
<Routes>
<Route path="/" element={<AppLayout />}>
<Route index element={<Navigate to="/login" />} />
<Route index element={<Navigate to="/profile" />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route path="/profile" element={<ProfilePage />} />
</Route>
</Routes>

18
cucumber-frontend/src/components/Header.tsx
View File

@ -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 (
<header className="header">
<div className="flex items-center justify-between bg-slate-700" style={{ height: '100px'}}>
<div className="logo">
<Link to="/">Cucumber App</Link>
<Title level={1} className='text-white' style={{ marginLeft: '20px' }}><Link to="/" style={{ textDecoration: 'none', color: 'white'}}>Cucumber</Link></Title>
</div>
<nav className="nav">
<ul>
<li>
<Link to="/login">Login</Link>
<ul className="flex">
<li className="mr-4">
<Link to="/login"><LoginOutlined style={{ fontSize: '24px' }} className="text-white"/></Link>
</li>
<li>
<Link to="/register">Register</Link>
<Link to="/register"><ProfileOutlined style={{ fontSize: '24px', marginRight: '20px'}} className="text-white"/></Link>
</li>
</ul>
</nav>
</header>
</div>
);
};
};

8
cucumber-frontend/src/components/Layout.tsx
View File

@ -6,13 +6,13 @@ import {Footer} from './Footer';
export function AppLayout () {
return (
<Layout>
<div id="app-layout" className="bg-slate-100">
<Header />
<Layout.Content>
<div id="main-content">
<Outlet />
</Layout.Content>
</div>
<Footer />
</Layout>
</div>
);
};

14
cucumber-frontend/src/index.css
View File

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

7
cucumber-frontend/src/pages/Login.tsx
View File

@ -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 (
<div className="login-page">
<h1>Login</h1>
<div className="container mx-auto" style={{ maxWidth: '20%', marginTop: '200px'}}>
<Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '40px', marginTop: '20px'}}>Вход в систему</Text>
<Form onFinish={onFinish}>
<Form.Item
label="Email"
@ -40,7 +41,7 @@ export function LoginPage () {
<Input value={email} onChange={e => setEmail(e.target.value)} />
</Form.Item>
<Form.Item
label="Password"
label="Пароль"
name="password"
rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}
>

15
cucumber-frontend/src/pages/Profile.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Navigate } from "react-router-dom";
export function ProfilePage () {
const token = localStorage.getItem('token');
if (!token) {
return <Navigate to="/login" />;
}
return (
<div>
<h1 className="PCEtLSBpY29uNjY2LmNvbSAtIE1JTExJT05TIHZlY3RvciBJQ09OUyBGUkVFIC0tPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBkPSJNMjU2LDBDMTE0Ljg0MiwwLDAsMTE0Ljg0MiwwLDI1NnMxMTQuODQyLDI1NiwyNTYsMjU2czI1Ni0xMTQuODQyLDI1Ni0yNTZTMzk3LjE1OCwwLDI1NiwweiBNMjU2LDQ2NS40NTUgYy0xMTUuNDkzLDAtMjA5LjQ1NS05My45NjEtMjA5LjQ1NS0yMDkuNDU1UzE0MC41MDcsNDYuNTQ1LDI1Niw0Ni41NDVTNDY1LjQ1NSwxNDAuNTA3LDQ2NS40NTUsMjU2UzM3MS40OTMsNDY1LjQ1NSwyNTYsNDY1LjQ1NXogIj48L3BhdGg+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMzE4LjA2MSwxMzkuNjM2Yy0xMi44NTMsMC0yMy4yNzMsMTAuNDItMjMuMjczLDIzLjI3M3YxODYuMTgyYzAsMTIuODUzLDEwLjQyLDIzLjI3MywyMy4yNzMsMjMuMjczIGMxMi44NTMsMCwyMy4yNzMtMTAuNDIsMjMuMjczLTIzLjI3M1YxNjIuOTA5QzM0MS4zMzMsMTUwLjA1NiwzMzAuOTEzLDEzOS42MzYsMzE4LjA2MSwxMzkuNjM2eiI+PC9wYXRoPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTE5My45MzksMTM5LjYzNmMtMTIuODUzLDAtMjMuMjczLDEwLjQyLTIzLjI3MywyMy4yNzN2MTg2LjE4MmMwLDEyLjg1MywxMC40MiwyMy4yNzMsMjMuMjczLDIzLjI3MyBjMTIuODUzLDAsMjMuMjczLTEwLjQyLDIzLjI3My0yMy4yNzNWMTYyLjkwOUMyMTcuMjEyLDE1MC4wNTYsMjA2Ljc5MiwxMzkuNjM2LDE5My45MzksMTM5LjYzNnoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==">Profile</h1>
</div>
)
}

9
cucumber-frontend/src/pages/Register.tsx
View File

@ -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 (
<div className="register-page">
<h1>Register</h1>
<div className="container mx-auto" style={{ maxWidth: '20%', marginTop: '200px'}}>
<Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '40px', marginTop: '20px'}}>Регистрация</Text>
<Form onFinish={handleFinish}>
<Form.Item label="Name" name="name" rules={[{ required: true, message: 'Пожалуйста, введите имя!' }]}>
<Form.Item label="Имя" name="name" rules={[{ required: true, message: 'Пожалуйста, введите имя!' }]}>
<Input value={name} onChange={e => setName(e.target.value)} />
</Form.Item>
<Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Пожалуйста, введите корректный адрес почты!' }]}>
<Input value={email} onChange={e => setEmail(e.target.value)} />
</Form.Item>
<Form.Item label="Password" name="password" rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}>
<Form.Item label="Пароль" name="password" rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}>
<Input
type="password"
value={password}

11
cucumber-frontend/tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}