feat: solution for 'сырой текст задания → плоская карточка'

untitled-task/README.md

@@ -0,0 +1,66 @@
+# Login App
+
+A simple React application demonstrating a login form with email and password fields, along with "Forgot password?" and "Register" links that navigate to their respective routes.
+
+## Features
+
+- **Login Form**: Email and password inputs with basic validation.
+- **Routing**: Uses `react-router-dom` for navigation between login, forgot password, and register pages.
+- **Minimal Styling**: Basic CSS to make the UI clean and functional.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v14 or newer)
+- npm (v6 or newer)
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/login-app.git
+cd login-app
+
+# Install dependencies
+npm install
+```
+
+### Running the App
+
+```bash
+npm start
+```
+
+Open your browser and navigate to `http://localhost:3000`. You should see the login page.
+
+### Building for Production
+
+```bash
+npm run build
+```
+
+The production-ready files will be in the `build/` directory.
+
+## Project Structure
+
+```
+login-app/
+├── node_modules/
+├── public/
+├── src/
+│   ├── components/
+│   │   ├── ForgotPassword.js
+│   │   ├── Login.js
+│   │   ├── Login.css
+│   │   └── Register.js
+│   ├── App.js
+│   ├── index.css
+│   └── index.js
+├── package.json
+└── README.md
+```
+
+## License
+
+This project is open source and available under the MIT License.

untitled-task/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "login-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  }
+}

untitled-task/src/App.js

@@ -0,0 +1,19 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './components/Login';
+import ForgotPassword from './components/ForgotPassword';
+import Register from './components/Register';
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Navigate replace to="/login" />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/register" element={<Register />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

untitled-task/src/App.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import LoginForm from './components/LoginForm';
+import { Box, Typography } from '@mui/material';
+
+const RegisterPage: React.FC = () => (
+  <Box sx={{ p: 4 }}>
+    <Typography variant="h4">Register Page</Typography>
+    <Typography>Registration form will go here.</Typography>
+  </Box>
+);
+
+const ForgotPasswordPage: React.FC = () => (
+  <Box sx={{ p: 4 }}>
+    <Typography variant="h4">Forgot Password</Typography>
+    <Typography>Forgot password form will go here.</Typography>
+  </Box>
+);
+
+const HomePage: React.FC = () => (
+  <Box sx={{ p: 4 }}>
+    <Typography variant="h4">Welcome to the App</Typography>
+    <Typography>Use the navigation to login, register, or reset password.</Typography>
+  </Box>
+);
+
+const App: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate replace to="/login" />} />
+      <Route path="/login" element={<LoginForm />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+      <Route path="*" element={<HomePage />} />
+    </Routes>
+  );
+};
+
+export default App;

untitled-task/src/components/ForgotPassword.js

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+function ForgotPassword() {
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>Forgot Password</h2>
+      <p>This is a placeholder page for password recovery.</p>
+      <Link to="/login">Back to Login</Link>
+    </div>
+  );
+}
+
+export default ForgotPassword;

untitled-task/src/components/Login.css

@@ -0,0 +1,38 @@
+.login-container {
+  max-width: 400px;
+  margin: 80px auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #fafafa;
+  text-align: center;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.login-form label {
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  text-align: left;
+}
+
+.login-form input {
+  padding: 8px;
+  font-size: 1rem;
+  margin-top: 5px;
+}
+
+.login-form button {
+  padding: 10px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.login-links {
+  margin-top: 15px;
+}

untitled-task/src/components/Login.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import './Login.css';
+
+function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Placeholder for authentication logic
+    console.log('Email:', email);
+    console.log('Password:', password);
+    // After successful login, navigate to a protected route or dashboard
+    // navigate('/dashboard');
+  };
+
+  return (
+    <div className="login-container">
+      <h2>Login</h2>
+      <form onSubmit={handleSubmit} className="login-form">
+        <label>
+          Email:
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </label>
+
+        <label>
+          Password:
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </label>
+
+        <button type="submit">Login</button>
+      </form>
+
+      <div className="login-links">
+        <Link to="/forgot-password">Forgot password?</Link>
+        <span> | </span>
+        <Link to="/register">Register</Link>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

untitled-task/src/components/LoginForm.tsx

@@ -0,0 +1,121 @@
+import React, { useState, FormEvent } from 'react';
+import {
+  Box,
+  Button,
+  TextField,
+  Link,
+  Typography,
+  Stack,
+  Divider,
+} from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import GoogleIcon from '@mui/icons-material/Google';
+import FacebookIcon from '@mui/icons-material/Facebook';
+
+const LoginForm: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+
+  const validate = () => {
+    const newErrors: { email?: string; password?: string } = {};
+    if (!email) {
+      newErrors.email = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = 'Invalid email address';
+    }
+    if (!password) {
+      newErrors.password = 'Password is required';
+    } else if (password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+    console.log('Submitting', { email, password });
+    // Placeholder for actual authentication logic
+  };
+
+  const handleThirdPartyLogin = (provider: string) => {
+    console.log(`Logging in with ${provider}`);
+    // Placeholder for third‑party auth
+  };
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 400,
+        mx: 'auto',
+        mt: 8,
+        p: 4,
+        border: '1px solid #e0e0e0',
+        borderRadius: 2,
+        boxShadow: 3,
+      }}
+    >
+      <Typography variant="h5" component="h1" gutterBottom>
+        Sign In
+      </Typography>
+      <Box component="form" onSubmit={handleSubmit} noValidate>
+        <TextField
+          label="Email"
+          type="email"
+          fullWidth
+          margin="normal"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          error={!!errors.email}
+          helperText={errors.email}
+        />
+        <TextField
+          label="Password"
+          type="password"
+          fullWidth
+          margin="normal"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          error={!!errors.password}
+          helperText={errors.password}
+        />
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
+          <Link component={RouterLink} to="/forgot-password" variant="body2">
+            Forgot password?
+          </Link>
+          <Link component={RouterLink} to="/register" variant="body2">
+            Register
+          </Link>
+        </Box>
+        <Button type="submit" variant="contained" color="primary" fullWidth sx={{ mt: 2 }}>
+          Sign In
+        </Button>
+      </Box>
+
+      <Divider sx={{ my: 3 }}>or</Divider>
+
+      <Stack spacing={2}>
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<GoogleIcon />}
+          onClick={() => handleThirdPartyLogin('Google')}
+        >
+          Sign in with Google
+        </Button>
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<FacebookIcon />}
+          onClick={() => handleThirdPartyLogin('Facebook')}
+        >
+          Sign in with Facebook
+        </Button>
+      </Stack>
+    </Box>
+  );
+};
+
+export default LoginForm;

untitled-task/src/components/Register.js

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+function Register() {
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>Register</h2>
+      <p>This is a placeholder page for user registration.</p>
+      <Link to="/login">Back to Login</Link>
+    </div>
+  );
+}
+
+export default Register;

untitled-task/src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #f0f2f5;
+}

untitled-task/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

untitled-task/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import CssBaseline from '@mui/material/CssBaseline';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <CssBaseline />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);