Merge pull request #128 from DocShow-AI/task#75

adding pricing page & some test changes for login page

frontend/src/pages/Login.jsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import qs from 'qs';
-import { Box, Button, Container, TextField, Typography } from '@mui/material';
+import { Box, Button, Checkbox, Container, FormControlLabel, TextField, Typography } from '@mui/material';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import { useAuth } from '../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../utils/constants';
 
 function LoginPage({ onLogin }) {
-  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [rememberMe, setRememberMe] = useState(false);
   const navigate = useNavigate();
   const { updateAuth } = useAuth();
 
@@ -17,24 +19,20 @@ function LoginPage({ onLogin }) {
 
     try {
         const response = await axios.post(`${API_URL}token/`, qs.stringify ({
-            username,
+            username: email,
             password
         }), {
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
             }
         });
 
-        // Assuming the backend sets the cookie automatically
-        // If login is successful, navigate to root
         if (response.status === 200) {
-            // Here you might want to do additional checks or set state
             updateAuth(true);
             navigate('/dashboards'); 
         }
     } catch (error) {
         console.error('Login error:', error);
-        // Handle login error (e.g., show an error message)
     }
   };
 
@@ -44,61 +42,70 @@ function LoginPage({ onLogin }) {
 
   return (
     <Container component="main" maxWidth="xs">
-        <Box
-            sx={{
-                marginTop: 8,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-            }}
-        >
-            <Typography component="h1" variant="h5">
-                Login
-            </Typography>
-            <Box component="form" onSubmit={handleSubmit} 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
-                    name="password"
-                    label="Password"
-                    type="password"
-                    id="password"
-                    autoComplete="current-password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    sx={{ mt: 3, mb: 2 }}
-                >
-                    Sign In
-                </Button>
-                <Button
-                    type="button"
-                    fullWidth
-                    variant="outlined"
-                    onClick={handleRegister}
-                    sx={{ mt: 1, mb: 2 }}
-                >
-                    Register
-                </Button>
-            </Box>
-        </Box>
+      <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 in
+          </Typography>
+          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+              <TextField
+                  margin="normal"
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  name="email"
+                  autoComplete="email"
+                  autoFocus
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+              />
+              <TextField
+                  margin="normal"
+                  required
+                  fullWidth
+                  name="password"
+                  label="Password"
+                  type="password"
+                  id="password"
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+              />
+              <FormControlLabel
+                  control={<Checkbox value="remember" color="primary" />}
+                  label="Remember me"
+                  checked={rememberMe}
+                  onChange={(e) => setRememberMe(e.target.checked)}
+              />
+              <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  sx={{ mt: 3, mb: 2 }}
+              >
+                  Sign In
+              </Button>
+              <Typography align="center" sx={{ mt: 2 }}>
+                  <Button onClick={() => {/* logic to handle forgot password */}}>
+                      Forgot password?
+                  </Button>
+                  <Button onClick={handleRegister}>
+                      Don't have an account? Sign Up
+                  </Button>
+              </Typography>
+          </Box>
+          <Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 5 }}>
+              Copyright © Your Website 2023.
+          </Typography>
+      </Box>
     </Container>
   );
 }

frontend/src/pages/Pricing.jsx

@@ -1,8 +1,106 @@
-import React from "react";
-// import { Box, Container, Typography } from "@mui/material";
+import * as React from 'react';
+import {
+  Container,
+  Grid,
+  Typography,
+  Card,
+  CardContent,
+  CardActions,
+  Button,
+  Box
+} from '@mui/material';
 
-const PricingPage = () => {
-    <div></div>
-};
+function PricingPage() {
+  // Define the pricing tiers
+  const tiers = [
+    {
+      title: 'Starter',
+      price: '190',
+      description: ['1 User', '1 App', 'Integrations'],
+      buttonText: 'Learn more',
+      buttonVariant: 'outlined',
+    },
+    {
+      title: 'Pro',
+      price: '390',
+      description: [
+        'All in Starter plan',
+        'Google Ads',
+        'SSO via Google',
+        'API access',
+      ],
+      buttonText: 'Learn more',
+      buttonVariant: 'contained', // Change to contained for the middle button
+    },
+    {
+      title: 'Enterprise',
+      price: '690',
+      description: [
+        'All features',
+        'Email support',
+        'Google Ads',
+        'SSO via Google',
+        'API access',
+        'Facebook Ads',
+      ],
+      buttonText: 'Learn more',
+      buttonVariant: 'outlined',
+    },
+  ];
 
-export default PricingPage
+  // Function to set the background color for the 'Pro' tier button
+  const getButtonStyle = (title) => {
+    return title === 'Pro' ? { bgcolor: 'primary.main', color: 'common.white' } : {};
+  };
+
+  return (
+    <Container maxWidth="md" component="main">
+      <Box sx={{ my: { xs: 4, md: 8 } }}>
+        <Typography component="h1" variant="h3" align="center" color="text.primary" gutterBottom>
+          Flexible pricing options
+        </Typography>
+        <Typography variant="h6" align="center" color="text.secondary" component="p">
+          We are founded by a leading academic and researcher in the field of Industrial Systems Engineering.
+          For entrepreneurs, startups and freelancers. If you didn’t find what you needed, these could help!
+        </Typography>
+        <Grid container spacing={5} alignItems="stretch">
+          {tiers.map((tier) => (
+            <Grid item key={tier.title} xs={12} sm={tier.title === 'Enterprise' ? 12 : 6} md={4}>
+              <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                <CardContent sx={{ flexGrow: 1 }}>
+                  <Typography gutterBottom variant="h6" component="h2">
+                    {tier.title}
+                  </Typography>
+                  <Typography variant="h4" color="text.primary">
+                    ${tier.price}
+                    <Typography component="span" variant="h6" color="text.secondary">
+                      /yr
+                    </Typography>
+                  </Typography>
+                  <ul>
+                    {tier.description.map((line) => (
+                      <Typography component="li" variant="subtitle1" align="center" key={line}>
+                        {line}
+                      </Typography>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardActions>
+                  <Button
+                    fullWidth
+                    variant={tier.buttonVariant}
+                    sx={{ ...getButtonStyle(tier.title), justifyContent: 'center', mb: 2, mt: 'auto' }}
+                  >
+                    {tier.buttonText}
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Container>
+  );
+}
+
+export default PricingPage;