Skip to content

Commit

Permalink
feat: add POST request for authentication
Browse files Browse the repository at this point in the history
  • Loading branch information
@reesedychiao
reesedychiao committed Mar 18, 2024
1 parent 812c4f7 commit fe7446d
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 24 deletions.
58 changes: 58 additions & 0 deletions frontend/src/app/(auth)/login/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { userAgentFromString } from "next/server";

export default function Page() {
// const [isBlurred, setIsBlurred] = useState(false);
Expand All @@ -11,6 +13,58 @@ export default function Page() {
// setIsBlurred(true);
// };

const [userLogin, setUserLogin] = useState({
email: "",
password: "",
});
const [loginError, setLoginError] = useState<string>("");
const route = useRouter();

const fetchUserInfo = async () => {
try {
const res: Response = await fetch("/v1/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(userLogin),
});
if (res.ok) {
const userInfo = await res.json();
return userInfo;
} else {
console.error("Failed to fetch user info:", res.statusText);
return [];
}
} catch (error) {
console.error("Error fetching user info:", error);
return [];
}
};

const handleChange = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
setUserLogin({
...userLogin,
[name]: value,
});
};

const handleSubmit = async (e: { preventDefault: () => void }) => {
e.preventDefault();
const info = await fetchUserInfo();
for (let i = 0; i < info.length; i++) {
if (info[i].email === userLogin.email) {
if (info[i].password === userLogin.password) {
route.push("");
} else {
setLoginError("Wrong password entered");
}
}
}
setLoginError("Wrong email entered");
};

return (
<div className="flex h-screen">
<div className="h-screen bg-black py-8 px-32 w-1/2">
Expand All @@ -37,6 +91,7 @@ export default function Page() {
method="post"
className="flex flex-col"
// onClick={handleFormClick}
onSubmit={handleSubmit}
>
<label htmlFor="email" className="text-white font-light py-2">
Email<span className="text-red-500">*</span>
Expand All @@ -48,6 +103,7 @@ export default function Page() {
placeholder="[email protected]"
required
className="w-80 h-10 px-4 mb-8"
onChange={handleChange}
/>
<label htmlFor="password" className="text-white font-light py-2">
Password<span className="text-red-500">*</span>
Expand All @@ -59,7 +115,9 @@ export default function Page() {
placeholder="••••••••••"
required
className="w-80 h-10 px-4 mb-8"
onChange={handleChange}
/>
{loginError && <p className="text-red-500 pb-2">{loginError}</p>}
<input
type="submit"
value="LOG IN"
Expand Down
96 changes: 75 additions & 21 deletions frontend/src/app/(auth)/signup/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,61 @@ export default function Page() {
// setIsBlurred(true);
// };

const [password, setPassword] = useState<string>("");
// const [password, setPassword] = useState<string>("");
const [reenteredPassword, setReenteredPassword] = useState<string>("");
const [passwordError, setPasswordError] = useState<string>("");
const [reenteredPasswordError, setReenteredPasswordError] =
useState<string>("");
const [userData, setUserData] = useState({
email: "",
password: "",
netid: "",
});

const handlePasswordChange = (
e: React.ChangeEvent<HTMLInputElement>
): void => {
const newPassword = e.target.value;
setPassword(newPassword);
setPasswordError("");
if (passwordError) setPasswordError("");
};
// const handlePasswordChange = (
// e: React.ChangeEvent<HTMLInputElement>
// ): void => {
// const newPassword = e.target.value;
// setPassword(newPassword);
// setPasswordError("");
// if (passwordError) setPasswordError("");
// };

const handleReenteredPasswordChange = (
e: React.ChangeEvent<HTMLInputElement>
): void => {
const newReenteredPassword = e.target.value;
setReenteredPassword(newReenteredPassword);
setReenteredPasswordError("");
if (reenteredPasswordError) setReenteredPasswordError("");
// const handleReenteredPasswordChange = (
// e: React.ChangeEvent<HTMLInputElement>
// ): void => {
// const newReenteredPassword = e.target.value;
// setReenteredPassword(newReenteredPassword);
// setReenteredPasswordError("");
// if (reenteredPasswordError) setReenteredPasswordError("");
// };

const postNewUser = async (userData: any) => {
try {
const res: Response = await fetch("/v1/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(userData),
});
if (res.ok) {
const newUser = await res.json();
newUser.email = userData.email;
newUser.password = userData.password;
newUser.netid = userData.netid;
} else {
console.error("Failed to create user:", res.statusText);
}
} catch (error) {
console.error("Error creating user:", error);
}
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
e.preventDefault();
const isValidPassword = validatePassword(password);
const doPasswordsMatch = password === reenteredPassword;
const isValidPassword = validatePassword(userData.password);
const doPasswordsMatch = userData.password === reenteredPassword;

if (!isValidPassword) {
setPasswordError(
Expand All @@ -52,10 +79,21 @@ export default function Page() {
setReenteredPasswordError("Passwords do not match.");
return;
}

postNewUser(userData);
console.log("Form submitted");
};

const handleChange = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
setUserData({
...userData,
[name]: value,
});
setPasswordError("");
setReenteredPassword(value);
setReenteredPasswordError("");
};

return (
<div className="flex h-screen">
<div className="h-screen bg-black py-8 px-32 w-1/2">
Expand Down Expand Up @@ -84,6 +122,19 @@ export default function Page() {
// onClick={handleFormClick}
onSubmit={handleSubmit}
>
<label htmlFor="email" className="text-white font-light py-2">
NetId<span className="text-red-500">*</span>
</label>
<input
type="text"
id="netid"
name="netid"
placeholder="abc123"
required
className="w-80 h-10 px-4 mb-8"
value={userData.netid}
onChange={handleChange}
/>
<label htmlFor="email" className="text-white font-light py-2">
Email<span className="text-red-500">*</span>
</label>
Expand All @@ -94,6 +145,8 @@ export default function Page() {
placeholder="[email protected]"
required
className="w-80 h-10 px-4 mb-8"
value={userData.email}
onChange={handleChange}
/>
<label htmlFor="password" className="text-white font-light py-2">
Password<span className="text-red-500">*</span>
Expand All @@ -104,8 +157,8 @@ export default function Page() {
name="password"
placeholder="••••••••••"
required
value={password}
onChange={handlePasswordChange}
value={userData.password}
onChange={handleChange}
className={`w-80 h-10 px-4 mb-8 ${
passwordError && "border-red-500"
}`}
Expand All @@ -128,6 +181,7 @@ export default function Page() {
className={`w-80 h-10 px-4 mb-8 ${
reenteredPasswordError && "border-red-500"
}`}
onChange={handleChange}
/>
{reenteredPasswordError && (
<p className="text-red-500 pb-2">{reenteredPasswordError}</p>
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/components/CreateCourse.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import React, { useState } from "react";
import {CloseIcon} from "@sanity/icons";
import { CloseIcon } from "@sanity/icons";
import CloseButton from "@/components/buttons/CloseButton";

interface props {
Expand All @@ -25,7 +25,7 @@ const CreateCourse: React.FC<props> = (props: props) => {
"Content-Type": "application/json",
},
body: JSON.stringify(courseData),
})
});
if (res.ok) {
const newCourse = await res.json();
newCourse.name = courseData.title;
Expand Down Expand Up @@ -63,7 +63,7 @@ const CreateCourse: React.FC<props> = (props: props) => {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-white rounded-lg shadow-lg px-32 py-16 justify-end">
<CloseButton onClick={props.onClose}/>
<CloseButton onClick={props.onClose} />
<form className="justify-end" onSubmit={handleSubmit}>
<h1 className="font-bold text-black text-2xl pb-8">
Create New Course
Expand All @@ -82,6 +82,7 @@ const CreateCourse: React.FC<props> = (props: props) => {
value={courseData.title}
onChange={handleChange}
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md h-8"
required
/>
</div>
<div className="mb-2">
Expand All @@ -98,6 +99,7 @@ const CreateCourse: React.FC<props> = (props: props) => {
value={courseData.professor}
onChange={handleChange}
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md h-8"
required
/>
</div>
<div className="mb-2">
Expand All @@ -114,6 +116,7 @@ const CreateCourse: React.FC<props> = (props: props) => {
value={courseData.location}
onChange={handleChange}
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md h-8"
required
/>
</div>
<button
Expand Down

0 comments on commit fe7446d

Please sign in to comment.