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 = () => { Logo

Log In to Your NYU Account

+ {authError && ( +
+ {authError} +
+ )}
{/* Form fields */}