Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

user & password don't match + user alr exists #155

Merged
merged 2 commits into from
Jun 4, 2024
Merged

user & password don't match + user alr exists #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2e4009
u & p don't match + u alr exists
palldas Jun 4, 2024
057c21c
prettier
palldas Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions frontend/src/pages/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ const LoginPage = ({ updateState }: { updateState: any }) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const [usernameError, setUsernameError] = useState(false);
const [passwordError, setPasswordError] = useState(false);
const navigate = useNavigate();

const handleSubmit = async () => {
Expand All @@ -40,11 +43,19 @@ const LoginPage = ({ updateState }: { updateState: any }) => {
console.log("Login successful!");
navigate("/");
} else {
const err = await res.text();
console.log("Login failed:", err);
setErrorMessage("Incorrect username or password");
setUsernameError(true);
setPasswordError(true);
setUsername("");
setPassword("");
}
} catch (error) {
console.error("Error during login:", error);
setErrorMessage("An error occurred during login. Please try again.");
setUsernameError(true);
setPasswordError(true);
setUsername("");
setPassword("");
}
}
};
Expand All @@ -71,27 +82,40 @@ const LoginPage = ({ updateState }: { updateState: any }) => {
<Text fontSize={{ base: "xl", md: "2xl" }} color="#216869">
Login
</Text>
{errorMessage && (
<Text color="red.500" textAlign="center">
{errorMessage}
</Text>
)}
<FormControl id="username" isRequired>
<FormLabel>Username</FormLabel>
<Input
type="username"
type="text"
value={username}
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => {
setUsername(e.target.value);
setUsernameError(false); // Reset error on change
}}
onFocus={() => setUsernameError(false)} // Reset error on focus
bg={usernameError ? "red.100" : "white"} // Change background color if there's an error
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup>
<Input
type={showPassword ? "text" : "password"}
value={password}
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => {
setPassword(e.target.value);
setPasswordError(false); // Reset error on change
}}
onFocus={() => setPasswordError(false)} // Reset error on focus
bg={passwordError ? "red.100" : "white"} // Change background color if there's an error
/>
<InputRightElement h={"full"}>
<Button
Expand Down
27 changes: 27 additions & 0 deletions frontend/src/pages/SignupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,15 @@ const SignupPage = ({
const [confirmPassword, setConfirmPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const [usernameError, setUsernameError] = useState(false);
const navigate = useNavigate();

const handleSumbit = async (e: React.FormEvent) => {
console.log("submitting form");
e.preventDefault();
setErrorMessage(""); // Clear previous error message
setUsernameError(false); // Clear previous username error state
if (
firstName === "" ||
lastName === "" ||
Expand Down Expand Up @@ -74,10 +78,20 @@ const SignupPage = ({
}
} else {
const err = await res.text();
if (err === "User already exists") {
setErrorMessage(
"User already exists. Please enter another username.",
);
setUsername(""); // Clear the username field
setUsernameError(true); // Set the username error state
} else {
setErrorMessage(err);
}
console.log("Account creation failed:", err);
}
} catch (error) {
console.error("Error during form submission:", error);
setErrorMessage("An error occurred during signup. Please try again.");
}
}
};
Expand Down Expand Up @@ -105,6 +119,11 @@ const SignupPage = ({
<Text fontSize="2xl" color="#216869">
Create New Account
</Text>
{errorMessage && (
<Text color="red.500" textAlign="center">
{errorMessage}
</Text>
)}
<HStack
spacing={6}
width="full"
Expand All @@ -117,6 +136,7 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setFirstName(e.target.value)}
value={firstName}
/>
</FormControl>
<FormControl id="lastName" isRequired>
Expand All @@ -126,6 +146,7 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setLastName(e.target.value)}
value={lastName}
/>
</FormControl>
</HStack>
Expand All @@ -136,6 +157,7 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setEmail(e.target.value)}
value={email}
/>
</FormControl>
<FormControl id="username" isRequired>
Expand All @@ -145,6 +167,9 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setUsername(e.target.value)}
onFocus={() => setUsernameError(false)} // Reset the background color on focus
value={username}
bg={usernameError ? "red.100" : "white"} // Change background color if there's an error
/>
</FormControl>
<FormControl id="password" isRequired>
Expand All @@ -155,6 +180,7 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
<InputRightElement h={"full"}>
<Button
Expand All @@ -174,6 +200,7 @@ const SignupPage = ({
borderColor="#216869"
_hover={{ borderColor: "#49A078" }}
onChange={(e) => setConfirmPassword(e.target.value)}
value={confirmPassword}
/>
<InputRightElement h={"full"}>
<Button
Expand Down
Loading