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

2026-06-28 12:42:48 +03:00
commit 7dd5a51872
23 changed files with 630 additions and 0 deletions
@@ -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;