frontend/src/pages/SignIn.jsx
2025-05-02 17:20:38 -07:00

82 lines
2 KiB
JavaScript

import React from "react";
import "@fortawesome/fontawesome-free/css/all.min.css";
const authUrl = import.meta.env.VITE_AUTH_URL;
function SignInForm() {
const [state, setState] = React.useState({
assignmentID: "",
password: "",
});
const handleChange = (evt) => {
const value = evt.target.value;
setState({
...state,
[evt.target.name]: value,
});
};
const handleOnSubmit = (evt) => {
evt.preventDefault();
const { assignmentId, password } = state;
console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
console.log("Submitting login request with state:", state);
fetch(`${authUrl}/auth/student/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(state),
credentials: "include",
})
.then((response) => {
console.log("Received response:", response);
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
console.log("Success:", data);
window.location.href = "/";
})
.catch((error) => {
console.error("Error occurred during login:", error);
alert("Login failed!");
});
};
return (
<div className="form-container sign-in-container">
<form onSubmit={handleOnSubmit}>
<h1>Student</h1>
{/* <div className="social-container">
<a href="#" className="social">
<i className="fab fa-google-plus-g" />
</a>
</div> */}
<input
type="assignmentId"
placeholder="Assignment ID"
name="assignmentId"
value={state.assignmentId}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="Password"
value={state.password}
onChange={handleChange}
/>
<button>Sign In</button>
</form>
</div>
);
}
export default SignInForm;