add password requirements, configure registration page

backend/models/user.py

@@ -51,6 +51,18 @@ class UserCreate(BaseModel):
     organization_id: Optional[int] = None
     role: Optional[str] = None
 
+    @validator("password")
+    def validate_password(cls, v):
+        if len(v) < 8:
+            raise ValueError("Password should have at least 8 characters")
+        if not re.search(r"\d", v):
+            raise ValueError("Password should contain at least one digit")
+        if not re.search(r"\W", v):
+            raise ValueError("Password should contain at least one symbol")
+        if not re.search(r"[A-Z]", v):
+            raise ValueError("Password should contain at least one uppercase letter")
+        return v
+
 
 class UserOut(BaseModel):
     """
@@ -111,4 +123,6 @@ def validate_new_password(cls, v):
             raise ValueError("Password should contain at least one digit")
         if not re.search(r"\W", v):
             raise ValueError("Password should contain at least one symbol")
+        if not re.search(r"[A-Z]", v):
+            raise ValueError("Password should contain at least one uppercase letter")
         return v

frontend/src/App.jsx

@@ -25,7 +25,7 @@ import SpecificDataProfilePage from './pages/data-profiling/SpecificDataProfileP
 import LandingPage from './pages/Landing'; 
 import LoginPage from './pages/Login';
 import PricingPage from './pages/Pricing';
-import RegisterPage from './pages/Register';
+import RegisterPage from './pages/register/RegisterPage';
 import UploadPage from './pages/upload/Upload';
 import UserPage from './pages/user/UserPage';
 import Logout from './pages/Logout';

frontend/src/pages/register/RegisterForm.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { Alert, Box, Button, Checkbox, FormControlLabel, TextField, Typography } from "@mui/material";
+
+function RegisterForm({ onSubmit, errorMessage }) {
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [subscribe, setSubscribe] = useState(false);
+
+    const handleFormSubmit = async (event) => {
+        event.preventDefault();
+        await onSubmit(username, email, password);
+      };
+
+    return (
+        <Box component="form" onSubmit={handleFormSubmit} noValidate sx={{ mt: 1 }}>
+            <TextField
+                margin="normal"
+                required
+                fullWidth
+                id="username"
+                label="Username"
+                name="username"
+                autoComplete="username"
+                autoFocus
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+            />
+            <TextField
+                margin="normal"
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+            />
+            <TextField
+                margin="normal"
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+            />
+            <FormControlLabel
+                control={<Checkbox value="subscribe" color="primary" />}
+                label="I want to receive inspiration, marketing promotions and updates via email."
+                checked={subscribe}
+                onChange={(e) => setSubscribe(e.target.checked)}
+            />
+            {errorMessage && 
+            <Box mt={2} mb={2}>
+            <Alert severity="error">{errorMessage}</Alert>
+            </Box>
+            }
+            <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2 }}
+            >
+                SIGN UP
+            </Button>
+            <Typography align="center" sx={{ mt: 2 }}>
+                  Already have an account? 
+                  <Button onClick={() => navigate('/login')}>
+                      Sign in
+                  </Button>
+            </Typography>
+        </Box>
+    )
+};
+
+export default RegisterForm;

frontend/src/pages/register/RegisterPage.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { Alert, Box, Button, Checkbox, Container, FormControlLabel, TextField, Typography } from '@mui/material';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import RegisterForm from './RegisterForm';
+import { useAuth } from '../../contexts/AuthContext';
+import { API_URL } from '../../utils/constants';
+
+function RegisterPage() {
+  const [subscribe, setSubscribe] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const { updateAuth } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (username, email, password) => {
+    try {
+        const response = await axios.post(`${API_URL}register/`, {
+            username,
+            email,
+            password,
+            // You can add subscribe or any additional fields if required by your API
+        });
+
+        if (response.data.message === 'Registration successful') {
+            updateAuth(true);
+            navigate('/login');
+        }
+    } catch (error) {
+        if (error.response) {
+            if (error.response.status === 400) {
+              setErrorMessage(error.response.data.detail);
+            } else if (error.response.data && error.response.data.detail && error.response.data.detail[0]) {
+              let errorMessage = error.response.data.detail[0].msg;
+              if (typeof errorMessage === 'string') {
+                errorMessage = errorMessage.replace('Value error, ', '');
+                setErrorMessage(errorMessage);
+              }
+            }
+          } else if (error.request) {
+            // The request was made but no response was received
+            console.log(error.request);
+          } else {
+            // Something happened in setting up the request that triggered an Error
+            console.log('Error', error.message)
+          }
+        }
+    }
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box
+          sx={{
+              marginTop: 8,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+          }}
+      >
+          <LockOutlinedIcon color="secondary" sx={{ m: 1, bgcolor: 'background.paper', borderRadius: '50%' }} />
+          <Typography component="h1" variant="h5">
+              Sign up
+          </Typography>
+          <RegisterForm onSubmit={handleSubmit} errorMessage={errorMessage} />
+          <Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 5 }}>
+              Copyright © DocShow AI 2024.
+          </Typography>
+      </Box>
+    </Container>
+  );
+};
+
+export default RegisterPage;