-
+
+
+
+ {loadingMessage}
+
);
}
diff --git a/client/src/components/loading/LoadingContext.jsx b/client/src/components/loading/LoadingContext.jsx
index b802ed2..141aaa6 100644
--- a/client/src/components/loading/LoadingContext.jsx
+++ b/client/src/components/loading/LoadingContext.jsx
@@ -1,8 +1,13 @@
import PropTypes from "prop-types";
import { createContext, useState, useMemo } from "react";
-export const LoadingContext = createContext();
+// Create a new context
+const LoadingContext = createContext();
+export { LoadingContext };
+
+
+// Create a provider that will pass the loading
export const LoadingProvider = ({ children }) => {
const [loading, setLoading] = useState(false);
const value = useMemo(() => ({ loading, setLoading }), [loading, setLoading]);
diff --git a/client/src/middleware/AuthProvider.jsx b/client/src/middleware/AuthProvider.jsx
index 3e502cd..62a9101 100644
--- a/client/src/middleware/AuthProvider.jsx
+++ b/client/src/middleware/AuthProvider.jsx
@@ -1,93 +1,93 @@
-import axios from "axios";
-import { jwtDecode } from "jwt-decode";
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
-
-// Use environment variables for base URL
-const baseURL = import.meta.env?.MODE === "development"
- ? window.location.origin.replace(":5173", ":3000") + "/api/"
- : import.meta.env?.VITE_API_URL || "https://secure-vault.azurewebsites.net/api/";
-
-
-// Axios instance with default configurations
-const http = axios.create({
- baseURL,
- headers: {
- "Content-Type": "application/json",
- },
- xsrfCookieName: "csrftoken",
- xsrfHeaderName: "X-CSRFToken",
- withCredentials: true,
-});
-
-// Axios response interceptor to handle errors
-http.interceptors.response.use(
- (response) => response,
- (error) => {
- if (!error.response && error.message === "Network Error") {
- localStorage.clear();
- setTimeout(() => { window.location.href = "/503"; }, 2000);
- }
- if (error.response.status === 401) {
- localStorage.clear();
- setTimeout(() => { window.location.href = "/"; }, 1500);
- }
- return Promise.reject(error);
- }
-);
-
-export default function AuthProvider() {
- const navigate = useNavigate();
- const [token, setToken] = useState(null);
- const [userName, setUserName] = useState(null);
-
- useEffect(() => {
- (async () => {
- const token = localStorage.getItem("token");
- if (token && await isValidToken(token)) {
- setToken(token);
- http.defaults.headers.common.Authorization = `Bearer ${token}`;
- } else { localStorage.clear(); }
- })();
- }, []);
-
- // Save the token in localStorage and set headers
- const saveToken = async (token) => {
- if (await isValidToken(token)) {
- setToken(token);
- localStorage.setItem("token", token);
- http.defaults.headers.common.Authorization = `Bearer ${token}`;
- }
- };
-
- // Validate if the token is not expired
- const isValidToken = async (token) => {
- if (token) {
- try {
- const decodedToken = jwtDecode(token);
- const currentTime = Date.now() / 1000;
- if (decodedToken.exp < currentTime) {
- alert("Session expired. Please log in again.");
- localStorage.clear();
- navigate("/");
- return false;
- }
- setUserName(decodedToken.name);
- return true;
- } catch (error) {
- console.error("Error decoding token:", error);
- return false;
- }
- }
- return false;
- };
-
- return {
- setToken: saveToken,
- isValidToken,
- userName,
- token,
- http,
- };
-}
+import axios from "axios";
+import { jwtDecode } from "jwt-decode";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+
+// Use environment variables for base URL
+const baseURL = import.meta.env?.MODE === "development"
+ ? window.location.origin.replace(":5173", ":3000") + "/api/"
+ : import.meta.env?.VITE_API_URL || "https://secure-vault.azurewebsites.net/api/";
+
+
+// Axios instance with default configurations
+const http = axios.create({
+ baseURL,
+ headers: {
+ "Content-Type": "application/json",
+ },
+ xsrfCookieName: "csrftoken",
+ xsrfHeaderName: "X-CSRFToken",
+ withCredentials: true,
+});
+
+// Axios response interceptor to handle errors
+http.interceptors.response.use(
+ (response) => response,
+ (error) => {
+ if (!error.response && error.message === "Network Error") {
+ localStorage.clear();
+ setTimeout(() => { window.location.href = "/503"; }, 2000);
+ }
+ if (error.response.status === 401) {
+ localStorage.clear();
+ setTimeout(() => { window.location.href = "/"; }, 1500);
+ }
+ return Promise.reject(error);
+ }
+);
+
+export default function AuthProvider() {
+ const navigate = useNavigate();
+ const [token, setToken] = useState(null);
+ const [userName, setUserName] = useState(null);
+
+ useEffect(() => {
+ (async () => {
+ const token = localStorage.getItem("token");
+ if (token && await isValidToken(token)) {
+ setToken(token);
+ http.defaults.headers.common.Authorization = `Bearer ${token}`;
+ } else { localStorage.clear(); }
+ })();
+ }, []);
+
+ // Save the token in localStorage and set headers
+ const saveToken = async (token) => {
+ if (await isValidToken(token)) {
+ setToken(token);
+ localStorage.setItem("token", token);
+ http.defaults.headers.common.Authorization = `Bearer ${token}`;
+ }
+ };
+
+ // Validate if the token is not expired
+ const isValidToken = async (token) => {
+ if (token) {
+ try {
+ const decodedToken = jwtDecode(token);
+ const currentTime = Date.now() / 1000;
+ if (decodedToken.exp < currentTime) {
+ alert("Session expired. Please log in again.");
+ localStorage.clear();
+ navigate("/");
+ return false;
+ }
+ setUserName(decodedToken.name);
+ return true;
+ } catch (error) {
+ console.error("Error decoding token:", error);
+ return false;
+ }
+ }
+ return false;
+ };
+
+ return {
+ setToken: saveToken,
+ isValidToken,
+ userName,
+ token,
+ http,
+ };
+}
diff --git a/client/src/middleware/ErrorBoundary.jsx b/client/src/middleware/ErrorBoundary.jsx
index da317ef..9cb9a0c 100644
--- a/client/src/middleware/ErrorBoundary.jsx
+++ b/client/src/middleware/ErrorBoundary.jsx
@@ -1,35 +1,35 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
-
-class ErrorBoundary extends Component {
- constructor(props) {
- super(props);
- this.state = { hasError: false };
- }
-
- static getDerivedStateFromError() {
- // Update state to display the fallback UI
- return { hasError: true };
- }
-
- // // Implement componentDidCatch if needed
- // componentDidCatch(error, errorInfo) {
- // // Log the error to an error reporting service if needed
- // console.error("Error caught by ErrorBoundary:", error, errorInfo);
- // }
-
- render() {
- if (this.state.hasError) {
- return this.props.fallback;
- }
-
- return this.props.children;
- }
-}
-
-ErrorBoundary.propTypes = {
- fallback: PropTypes.node.isRequired,
- children: PropTypes.node.isRequired,
-};
-
-export default ErrorBoundary;
+import { Component } from "react";
+import PropTypes from "prop-types";
+
+class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError() {
+ // Update state to display the fallback UI
+ return { hasError: true };
+ }
+
+ // // Implement componentDidCatch if needed
+ // componentDidCatch(error, errorInfo) {
+ // // Log the error to an error reporting service if needed
+ // console.error("Error caught by ErrorBoundary:", error, errorInfo);
+ // }
+
+ render() {
+ if (this.state.hasError) {
+ return this.props.fallback;
+ }
+
+ return this.props.children;
+ }
+}
+
+ErrorBoundary.propTypes = {
+ fallback: PropTypes.node.isRequired,
+ children: PropTypes.node.isRequired,
+};
+
+export default ErrorBoundary;
diff --git a/client/src/pages/account/Account.css b/client/src/pages/account/Account.css
index f1d0d32..6ce9747 100644
--- a/client/src/pages/account/Account.css
+++ b/client/src/pages/account/Account.css
@@ -1,60 +1,60 @@
-.account {
- margin: 20px 0;
-}
-
-.account-header {
- display: flex;
- text-align: center;
- align-items: center;
- justify-content: center;
-}
-
-.account-header-img {
- width: 100px;
- height: 100px;
- border-radius: 50%;
- margin-right: 20px;
- overflow: hidden;
- border: 2px solid #1976d2;
-
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-}
-
-.account-header-name {
- b {
- color: #1976d2;
- }
-}
-
-.account-main {
- gap: 20px;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.account-profile,
-.account-pass {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- /* Ensures full width on small screens */
- max-width: 500px;
- /* Restricts width on larger screens */
-}
-
-.account-profile-main,
-.account-pass-main {
- width: 90%;
-}
-
-hr {
- opacity: 0.7;
- margin: 20px 0;
- background: #1976d2;
+.account {
+ margin: 20px 0;
+}
+
+.account-header {
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+}
+
+.account-header-img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ margin-right: 20px;
+ overflow: hidden;
+ border: 2px solid #1976d2;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.account-header-name {
+ b {
+ color: #1976d2;
+ }
+}
+
+.account-main {
+ gap: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.account-profile,
+.account-pass {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ /* Ensures full width on small screens */
+ max-width: 500px;
+ /* Restricts width on larger screens */
+}
+
+.account-profile-main,
+.account-pass-main {
+ width: 90%;
+}
+
+hr {
+ opacity: 0.7;
+ margin: 20px 0;
+ background: #1976d2;
}
\ No newline at end of file
diff --git a/client/src/pages/account/Account.jsx b/client/src/pages/account/Account.jsx
index 0b5657d..15a88e3 100644
--- a/client/src/pages/account/Account.jsx
+++ b/client/src/pages/account/Account.jsx
@@ -1,62 +1,72 @@
-import { useEffect, useState } from 'react';
-import Grid from '@mui/material/Grid2';
-import { Container } from '@mui/material';
-import { toast } from 'react-toastify';
-
-import "./Account.css";
-import AuthProvider from '../../middleware/AuthProvider';
-import AccountProfile from './AccountProfile';
-import AccountPass from './AccountPass';
-import { useLoading } from '../../components/loading/useLoading';
-
-export default function Account() {
- document.title = "SecureVault | Account";
-
- const { http } = AuthProvider();
- const [userData, setUserData] = useState({});
- const { setLoading } = useLoading();
-
- useEffect(() => {
- const token = localStorage.getItem('token');
- if (!token) { return; }
- const fetchUserData = async () => {
- try {
- setLoading(true);
- const response = await http.get('/auth/user');
- setUserData(response.data);
- } catch (error) {
- console.error(error);
- toast.error("Failed to fetch user data");
- } finally {
- setLoading(false);
- }
- };
-
- fetchUserData();
- }, [http, setLoading]);
-
-
- return (
-
-
-
-
-
-
-
Hi {userData ? userData.name : "User"} 👋
-
- created on: {new Date(userData?.createdAt).toDateString()}
-
-
-
-
-
-
-
- );
-}
+import { useEffect, useState } from 'react';
+import Grid from '@mui/material/Grid2';
+import { Button, Container } from '@mui/material';
+import { toast } from 'react-toastify';
+
+import "./Account.css";
+import AuthProvider from '../../middleware/AuthProvider';
+import AccountProfile from './AccountProfile';
+import AccountPass from './AccountPass';
+import { useLoading } from '../../components/loading/useLoading';
+import AccountDelete from './AccountDelete';
+
+export default function Account() {
+ document.title = "SecureVault | Account";
+
+ const { http } = AuthProvider();
+ const { setLoading } = useLoading();
+ const [userData, setUserData] = useState({});
+ const [openDelete, setOpenDelete] = useState(false);
+
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (!token) { return; }
+ const fetchUserData = async () => {
+ try {
+ setLoading(true);
+ const response = await http.get('/auth/user');
+ setUserData(response.data);
+ } catch (error) {
+ console.error(error);
+ toast.error("Failed to fetch user data");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchUserData();
+ }, [http, setLoading]);
+
+
+ return (
+
+ {openDelete && }
+
+
+
+
+
+
Hi {userData ? userData.name : "User"} 👋
+
+ created on: {new Date(userData?.createdAt).toDateString()}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/pages/account/AccountDelete.jsx b/client/src/pages/account/AccountDelete.jsx
new file mode 100644
index 0000000..f5df3e2
--- /dev/null
+++ b/client/src/pages/account/AccountDelete.jsx
@@ -0,0 +1,63 @@
+import {
+ Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle
+} from '@mui/material';
+import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+import AuthProvider from '../../middleware/AuthProvider';
+import { useLoading } from '../../components/loading/useLoading';
+
+export default function AccountDelete({ openDelete, setOpenDelete }) {
+ const navigate = useNavigate();
+ const { http } = AuthProvider();
+ const { setLoading } = useLoading();
+
+ const handleDeleteUser = async () => {
+ try {
+ setLoading(true);
+ await http.delete('/auth/user/delete');
+ setOpenDelete(false);
+ toast.success("Account deleted successfully");
+ localStorage.clear();
+ navigate('/login');
+ navigate('/login');
+ } catch (error) {
+ console.error(error);
+ toast.error("Failed to delete account");
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ return (
+
+ )
+}
+
+AccountDelete.propTypes = {
+ openDelete: PropTypes.bool.isRequired,
+ setOpenDelete: PropTypes.func.isRequired,
+}
diff --git a/client/src/pages/account/AccountPass.jsx b/client/src/pages/account/AccountPass.jsx
index 37d7e22..75c0bd2 100644
--- a/client/src/pages/account/AccountPass.jsx
+++ b/client/src/pages/account/AccountPass.jsx
@@ -1,138 +1,138 @@
-import { useState } from 'react';
-import Box from '@mui/material/Box';
-import { TextField, Button, InputAdornment, IconButton, Typography } from '@mui/material';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-import AuthProvider from '../../middleware/AuthProvider';
-import { useLoading } from '../../components/loading/useLoading';
-import { toast } from 'react-toastify';
-
-export default function AccountPass() {
-
- const { http } = AuthProvider();
- const { setLoading } = useLoading();
- const [btnDisabled, setBtnDisabled] = useState(true);
-
- const [passwords, setPasswords] = useState({
- oldPassword: '',
- newPassword: '',
- confirmPassword: '',
- });
-
- const [showPassword, setShowPassword] = useState({
- current: false,
- new: false,
- confirm: false,
- });
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- setPasswords((prev) => ({ ...prev, [name]: value }));
- setBtnDisabled(false); // Enable the button when there's input
- };
-
- const handleTogglePassword = (field) => {
- setShowPassword((prev) => ({ ...prev, [field]: !prev[field] }));
- };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- const { oldPassword, newPassword, confirmPassword } = passwords;
- if (newPassword !== confirmPassword) {
- toast.error("New password and confirm password do not match.");
- return;
- }
-
- try {
- setLoading(true);
- const response = await http.patch('/auth/user/changePassword', { oldPassword, newPassword });
- setPasswords({ oldPassword: '', newPassword: '', confirmPassword: '' });
- toast.success(response.data.message);
- setBtnDisabled(true);
- } catch (error) {
- console.error(error);
- toast.error(error.response.data.message);
- } finally { setLoading(false); }
- };
-
- return (
-
-
- *You can update your password here.
-
-
-
- handleTogglePassword('current')}>
- {showPassword.current ? : }
-
-
- ),
- }
- }}
- />
-
- handleTogglePassword('new')}>
- {showPassword.new ? : }
-
-
- ),
- }
- }}
- />
-
- handleTogglePassword('confirm')}>
- {showPassword.confirm ? : }
-
-
- ),
- }
- }}
- />
-
-
-
- );
-}
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { TextField, Button, InputAdornment, IconButton, Typography } from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+
+import AuthProvider from '../../middleware/AuthProvider';
+import { useLoading } from '../../components/loading/useLoading';
+import { toast } from 'react-toastify';
+
+export default function AccountPass() {
+
+ const { http } = AuthProvider();
+ const { setLoading } = useLoading();
+ const [btnDisabled, setBtnDisabled] = useState(true);
+
+ const [passwords, setPasswords] = useState({
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: '',
+ });
+
+ const [showPassword, setShowPassword] = useState({
+ current: false,
+ new: false,
+ confirm: false,
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setPasswords((prev) => ({ ...prev, [name]: value }));
+ setBtnDisabled(false); // Enable the button when there's input
+ };
+
+ const handleTogglePassword = (field) => {
+ setShowPassword((prev) => ({ ...prev, [field]: !prev[field] }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const { oldPassword, newPassword, confirmPassword } = passwords;
+ if (newPassword !== confirmPassword) {
+ toast.error("New password and confirm password do not match.");
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const response = await http.patch('/auth/user/changePassword', { oldPassword, newPassword });
+ setPasswords({ oldPassword: '', newPassword: '', confirmPassword: '' });
+ toast.success(response.data.message);
+ setBtnDisabled(true);
+ } catch (error) {
+ console.error(error);
+ toast.error(error.response.data.message);
+ } finally { setLoading(false); }
+ };
+
+ return (
+
+
+ *You can update your password here.
+
+
+
+ handleTogglePassword('current')}>
+ {showPassword.current ? : }
+
+
+ ),
+ }
+ }}
+ />
+
+ handleTogglePassword('new')}>
+ {showPassword.new ? : }
+
+
+ ),
+ }
+ }}
+ />
+
+ handleTogglePassword('confirm')}>
+ {showPassword.confirm ? : }
+
+
+ ),
+ }
+ }}
+ />
+
+
+
+ );
+}
diff --git a/client/src/pages/account/AccountProfile.jsx b/client/src/pages/account/AccountProfile.jsx
index f232798..5b87a0b 100644
--- a/client/src/pages/account/AccountProfile.jsx
+++ b/client/src/pages/account/AccountProfile.jsx
@@ -1,115 +1,115 @@
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import { toast } from 'react-toastify';
-import { useEffect, useState } from 'react';
-import { TextField, Button } from '@mui/material';
-
-import AuthProvider from '../../middleware/AuthProvider';
-import { useLoading } from '../../components/loading/useLoading';
-
-
-export default function AccountProfile({ userData }) {
-
- const { http } = AuthProvider();
- const { setLoading } = useLoading();
- const [btnDisabled, setBtnDisabled] = useState(true);
-
- const [formValues, setFormValues] = useState({
- id: '',
- name: '',
- dateOfBirth: '',
- secretAnswer: '',
- });
-
- useEffect(() => {
- if (userData) {
- setFormValues({
- id: userData._id || '',
- name: userData?.name || '',
- dateOfBirth: userData?.dateOfBirth || '',
- secretAnswer: userData?.secretAnswer ? atob(userData.secretAnswer) : '',
- });
- }
- }, [userData]);
-
- const handleChange = (e) => {
- btnDisabled && setBtnDisabled(false);
- const { name, value } = e.target;
- setFormValues((prevValues) => ({
- ...prevValues,
- [name]: value,
- }));
- };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- if (formValues.secretAnswer.length < 3) {
- toast.warning("Favorite place should be atleast 3 characters long.");
- return;
- }
- try {
- setLoading(true);
- const response = await http.patch('/auth/user/update', formValues);
- toast.success(response.data.message);
- setBtnDisabled(true);
- } catch (error) {
- console.error(error);
- toast.error(error.response.data.message);
- } finally { setLoading(false); }
- };
-
- return (
-
-
-
-
-
-
-
-
-
- );
-}
-
-AccountProfile.propTypes = {
- userData: PropTypes.object,
-};
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { toast } from 'react-toastify';
+import { useEffect, useState } from 'react';
+import { TextField, Button } from '@mui/material';
+
+import AuthProvider from '../../middleware/AuthProvider';
+import { useLoading } from '../../components/loading/useLoading';
+
+
+export default function AccountProfile({ userData }) {
+
+ const { http } = AuthProvider();
+ const { setLoading } = useLoading();
+ const [btnDisabled, setBtnDisabled] = useState(true);
+
+ const [formValues, setFormValues] = useState({
+ id: '',
+ name: '',
+ dateOfBirth: '',
+ secretAnswer: '',
+ });
+
+ useEffect(() => {
+ if (userData) {
+ setFormValues({
+ id: userData._id || '',
+ name: userData?.name || '',
+ dateOfBirth: userData?.dateOfBirth || '',
+ secretAnswer: userData?.secretAnswer ? atob(userData.secretAnswer) : '',
+ });
+ }
+ }, [userData]);
+
+ const handleChange = (e) => {
+ btnDisabled && setBtnDisabled(false);
+ const { name, value } = e.target;
+ setFormValues((prevValues) => ({
+ ...prevValues,
+ [name]: value,
+ }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (formValues.secretAnswer.length < 3) {
+ toast.warning("Favorite place should be atleast 3 characters long.");
+ return;
+ }
+ try {
+ setLoading(true);
+ const response = await http.patch('/auth/user/update', formValues);
+ toast.success(response.data.message);
+ setBtnDisabled(true);
+ } catch (error) {
+ console.error(error);
+ toast.error(error.response.data.message);
+ } finally { setLoading(false); }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+AccountProfile.propTypes = {
+ userData: PropTypes.object,
+};
diff --git a/client/src/pages/error/ErrorPage.css b/client/src/pages/error/ErrorPage.css
index afa7e62..c05e934 100644
--- a/client/src/pages/error/ErrorPage.css
+++ b/client/src/pages/error/ErrorPage.css
@@ -1,34 +1,34 @@
-.error-page {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100vh;
- text-align: center;
- background-color: #f8f9fa;
-}
-
-.error-page h1 {
- font-size: 2.5rem;
- color: #dc3545;
-}
-
-.error-page p {
- margin: 1rem 0;
- font-size: 1.2rem;
- color: #6c757d;
-}
-
-.error-page button {
- padding: 0.5rem 1rem;
- font-size: 1rem;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.error-page button:hover {
- background-color: #0056b3;
+.error-page {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ text-align: center;
+ background-color: #f8f9fa;
+}
+
+.error-page h1 {
+ font-size: 2.5rem;
+ color: #dc3545;
+}
+
+.error-page p {
+ margin: 1rem 0;
+ font-size: 1.2rem;
+ color: #6c757d;
+}
+
+.error-page button {
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.error-page button:hover {
+ background-color: #0056b3;
}
\ No newline at end of file
diff --git a/client/src/pages/error/ErrorPage.jsx b/client/src/pages/error/ErrorPage.jsx
index fc8e317..e09cccf 100644
--- a/client/src/pages/error/ErrorPage.jsx
+++ b/client/src/pages/error/ErrorPage.jsx
@@ -1,16 +1,16 @@
-import "./ErrorPage.css";
-
-export default function ErrorPage() {
-
- const redirectToHome = () => {
- window.location.href = "/";
- };
-
- return (
-
-
Oops! Something Went Wrong
-
We encountered an error while loading this page. Please try again.
-
-
+
Oops! Something Went Wrong
+
We encountered an error while loading this page. Please try again.
+
+