diff --git a/front-end/src/layouts/LoginPage/LoginPage.css b/front-end/src/layouts/LoginPage/LoginPage.css
index a78f9e7..0066158 100644
--- a/front-end/src/layouts/LoginPage/LoginPage.css
+++ b/front-end/src/layouts/LoginPage/LoginPage.css
@@ -29,6 +29,17 @@
padding-bottom: 25px;
}
+.auth-error {
+ color: #D8000C;
+ background-color: #d8000b2c;
+ border-radius: 2px;
+ text-align: center;
+ font-size: 14px;
+ font-family: var(--primary-font);
+ margin: 10px 30px;
+ width: 53%;
+ padding: 10px;
+}
.toggle-container {
display: flex;
diff --git a/front-end/src/layouts/LoginPage/LoginPage.js b/front-end/src/layouts/LoginPage/LoginPage.js
index a95f1e0..a2f7793 100644
--- a/front-end/src/layouts/LoginPage/LoginPage.js
+++ b/front-end/src/layouts/LoginPage/LoginPage.js
@@ -10,6 +10,7 @@ const LoginPage = () => {
const [userType, setUserType] = useState('student');
const { setIsAuthenticated, setUserRole, setUserName, setUserNetID, setUserDept, isAuthenticated, userRole } = useContext(AuthContext);
const navigate = useNavigate();
+ const [authError, setAuthError] = useState('');
const BASE_URL = process.env.REACT_APP_BACKEND_URL;
if (isAuthenticated) {
@@ -21,6 +22,7 @@ const LoginPage = () => {
}
const handleFormSubmit = async (event) => {
+ setAuthError('');
event.preventDefault();
const formData = new FormData(event.target);
const urlEncodedData = new URLSearchParams(formData);
@@ -42,6 +44,8 @@ const LoginPage = () => {
} else if (response.data.userType === 'admin') {
navigate('/admin/dashboard');
}
+ } else if (response.data.authenticated === false) {
+ setAuthError('The password you entered was incorrect.');
}
} catch (error) {
console.error('Error during form submission:', error);
@@ -74,6 +78,11 @@ const LoginPage = () => {