update

spring-boot-backend/src/main/java/com/example/springbootbackend/model/Payment.java

@@ -22,7 +22,7 @@ public class Payment {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Integer id;
 
-    @Column(name="order_id")
+    @Column(name = "order_id")
     private Integer order;
 
     @Column(name = "total_price", nullable = false)
@@ -41,6 +41,6 @@ public class Payment {
     private Timestamp updatedAt;
 
     @OneToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "order", nullable = false, insertable = false, updatable = false)
+    @JoinColumn(name = "order_id", nullable = false, insertable = false, updatable = false)
     private Order paymentOrder;
 }

web/src/App.jsx

@@ -27,6 +27,8 @@ import ConfirmationPage from "./pages/ConfirmationPage.jsx";
 import StoreOrdersPage from "./pages/StoreOrdersPage.jsx";
 import StoreListPage from "./pages/StoreListPage.jsx";
 import DetailedStorePage from "./pages/DetailedStorePage.jsx";
+import ForgotPasswordPage from "./pages/ForgotPasswordPage.jsx";
+import ResetPasswordPage from "./pages/ResetPasswordPage.jsx";
 
 const App = () => {
     const theme = createTheme({
@@ -85,6 +87,8 @@ const App = () => {
                             <Route path="profile/update-password" element={<UpdatePasswordPage />} />
                             <Route path="search" element={<SearchResultsPage />} />
                             <Route path="confirm-account" element={<ConfirmationPage />} />
+                            <Route path="change-password" element={<ForgotPasswordPage />} />
+                            <Route path="reset-password" element={<ResetPasswordPage />} />
 
                             {/*farmer routes*/}
                             <Route path="store" element={<StorePage />} />

web/src/components/LoginForm.jsx

@@ -1,10 +1,10 @@
-import React, {useContext, useState} from 'react';
+import React, { useContext, useState } from 'react';
 import { TextField, Button, Box, Typography, useTheme } from '@mui/material';
-import auth from '../services/auth';
-import UserContext from "../contexts/UserContext.jsx";
-import { useNavigate } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom'; // Importing Link and useNavigate for React Router v6
 import { toast } from 'react-toastify';
 import CircularProgress from "@mui/material/CircularProgress";
+import UserContext from "../contexts/UserContext";
+import auth from '../services/auth';
 
 const LoginForm = () => {
     const [email, setEmail] = useState('');
@@ -15,20 +15,18 @@ const LoginForm = () => {
     const navigate = useNavigate();
 
     const clearInput = () => {
-        setEmail('')
-        setPassword('')
-    }
+        setEmail('');
+        setPassword('');
+    };
 
     const loginHandler = async (event) => {
         event.preventDefault();
         setLoading(true);
         try {
-            console.log('accessing API')
             const response = await auth.login({
                 email,
                 password,
             });
-            console.log('response: ', response)
             const user = {
                 email: email,
                 name: response.data.accountName,
@@ -37,19 +35,18 @@ const LoginForm = () => {
                 accessToken: response.data.accessToken,
                 refreshToken: response.data.refreshToken,
                 image: response.data.accountImage
-            }
-            console.log('logged in user: ', user);
+            };
             await login(user.email, user.name, user.type, user.id, user.accessToken, user.refreshToken, user.image);
-            toast.success('Logged in successfully!');  // Add this line
-            navigate('/')
+            toast.success('Logged in successfully!');
+            navigate('/');
         } catch (error) {
-            console.log(error)
+            console.error(error);
             toast.error(error.message);
-            clearInput()
+            clearInput();
         } finally {
-            setLoading(false); // Set loading to false when the request is complete
+            setLoading(false);
         }
-    }
+    };
 
     return (
         <Box
@@ -87,18 +84,31 @@ const LoginForm = () => {
             <Button
                 variant="contained"
                 type="submit"
-                disabled={loading} // Disable the button when loading
+                disabled={loading}
                 sx={{
-                    backgroundColor: theme.palette.primary.main, // primary color for button
-                    color: '#FFFFFF', // white color for button text
-                    padding: '10px 20px', // Adjust padding to make the button design decent
-                    borderRadius: '10px', // Adjust border radius for a softer look
+                    backgroundColor: theme.palette.primary.main,
+                    color: '#FFFFFF',
+                    padding: '10px 20px',
+                    borderRadius: '10px',
                 }}
             >
                 {loading ? <CircularProgress size={24} /> : 'Login'}
             </Button>
+            <Button
+                component={RouterLink}
+                to="/change-password"
+                variant="text"
+                sx={{
+                    textDecoration: 'underline',
+                    alignSelf: 'center', // Align text to the middle vertically
+                    color: theme.palette.primary.main,
+                }}
+            >
+                Forgot Password?
+            </Button>
+
         </Box>
     );
 };
 
-export default LoginForm;
+export default LoginForm;

web/src/components/ProfileMainCard.jsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback, memo} from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Card, CardContent, Typography, Grid, Button, TextField, CircularProgress } from '@mui/material';
 import { styled } from '@mui/system';
 import accountService from '../services/account';
@@ -164,7 +164,7 @@ const SecondRow = ({ isEditing, email, phone, bankNumber, bankName, type, isActi
     </Grid>
 );
 
-const ThirdRow = (({ isEditing, formValid, handleCancelSubmit, setIsEditing, handleSubmit, fileError }) => (
+const ThirdRow = ({ isEditing, formValid, handleCancelSubmit, setIsEditing, handleSubmit, fileError }) => (
     <Grid container spacing={2} direction="row" wrap="wrap" sx={{ padding: '10px', width: '100%' }}>
         <GridItem item xs={12}>
             {isEditing ? (
@@ -187,6 +187,16 @@ const ThirdRow = (({ isEditing, formValid, handleCancelSubmit, setIsEditing, han
                     >
                         Cancel
                     </Button>
+                    <Button
+                        variant="contained"
+                        component='a'
+                        href='/forgot-password'
+                        sx={{
+                            marginLeft: '10px'
+                        }}
+                    >
+                        Edit Password
+                    </Button>
                 </>
             ) : (
                 <Button
@@ -200,7 +210,7 @@ const ThirdRow = (({ isEditing, formValid, handleCancelSubmit, setIsEditing, han
             )}
         </GridItem>
     </Grid>
-));
+);
 
 const ProfileMainCard = ({ user, userFromContext, updateUserContext }) => {
     const [currentUser, setCurrentUser] = useState(user);
@@ -250,7 +260,6 @@ const ProfileMainCard = ({ user, userFromContext, updateUserContext }) => {
         }
     }, []);
 
-
     const handleInputChange = useCallback((event, field) => {
         const value = event.target.value;
         if (field === 'email') setEmail(value);
@@ -358,6 +367,7 @@ const ProfileMainCard = ({ user, userFromContext, updateUserContext }) => {
                         handleCancelSubmit={handleCancelSubmit}
                         setIsEditing={setIsEditing}
                         handleSubmit={handleSubmit}
+                        fileError={fileError}
                     />
                 </Grid>
             </CardContent>
@@ -366,4 +376,3 @@ const ProfileMainCard = ({ user, userFromContext, updateUserContext }) => {
 };
 
 export default ProfileMainCard;
-

web/src/pages/ForgotPasswordPage.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { Box, Typography, TextField, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import authService from '../services/auth';
+import {toast} from "react-toastify";
+import CircularProgress from "@mui/material/CircularProgress";
+
+const ForgotPasswordPage = () => {
+    const [email, setEmail] = useState('');
+    const [isLoading, setIsLoading] = useState(false)
+    const theme = useTheme();
+
+    const handleEmailChange = (event) => {
+        setEmail(event.target.value);
+    };
+
+    const handleSubmit = async (event) => {
+        setIsLoading(true)
+        event.preventDefault();
+        const data = {email};
+        try{
+            const response = await authService.forgotPassword(data)
+            console.log('response: ', response)
+            if (response.status===200) {
+                toast.info('An email has been sent to your email address with instructions to reset your password')
+            }
+        } catch (error){
+            console.log('error sending forgot password request: ', error)
+            toast.error('Error sending forgot password request')
+        } finally {
+            setIsLoading(false)
+        }
+    };
+
+    return (
+        <Box
+            component="form"
+            onSubmit={handleSubmit}
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '300px',
+                margin: '0 auto',
+                gap: '20px',
+                marginTop: '100px',
+                backgroundColor: '#FFFFFF',
+                padding: '20px',
+                borderRadius: '10px',
+                boxShadow: `0 0 10px ${theme.palette.grey[200]}`, // Example box shadow
+            }}
+        >
+            <Typography variant="h4" component="h2" align='center'>
+                Forgot Password
+            </Typography>
+            <Typography variant="body1" align='center'>
+                Please enter your registered email address
+            </Typography>
+            <TextField
+                label="Email"
+                variant="outlined"
+                name="email"
+                type="email"
+                value={email}
+                onChange={handleEmailChange}
+                required
+            />
+            <Button
+                variant="contained"
+                type="submit"
+                sx={{
+                    backgroundColor: theme.palette.primary.main,
+                    color: '#FFFFFF',
+                    padding: '10px 20px',
+                    borderRadius: '10px',
+                    alignSelf: 'center',
+                }}
+                disabled={isLoading}
+            >
+                {isLoading ? <CircularProgress size={24} /> : 'Submit'}
+            </Button>
+        </Box>
+    );
+};
+
+export default ForgotPasswordPage;

web/src/pages/ResetPasswordPage.jsx

@@ -0,0 +1,5 @@
+const ResetPasswordPage = () => {
+
+}
+
+export default ResetPasswordPage;