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

Submit Login/Signup with Enter Key #211

Closed
wants to merge 2 commits into from
Closed

Submit Login/Signup with Enter Key #211

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80730d5
set login and signup to submit on enter key press
owen-sellner Nov 29, 2023
17e443a
fix merge conflicts
Jan 25, 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
114 changes: 59 additions & 55 deletions frontend/src/components/forms/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ const Login = ({
setPasswordErrStr("");
};

const onLogInClick = async () => {
const onLogInClick = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥶


setLoginClicked(true);
const isInvited = await commonApiClient.isUserInvited(email);
if (isInvited !== "Not Invited") {
Expand Down Expand Up @@ -104,70 +106,72 @@ const Login = ({

if (toggle) {
return (
<Flex>
<Box w="47%">
<Flex
height="100vh"
display="flex"
align="center"
justify="center"
>
<Flex width="80%" align="flex-start" direction="column" gap="28px">
<Text variant="login" paddingBottom="12px">
Log In
<form onSubmit={onLogInClick}>
<Flex>
<Box w="47%">
<Flex
height="100vh"
display="flex"
align="center"
justify="center"
>
<Flex width="80%" align="flex-start" direction="column" gap="28px">
<Text variant="login" paddingBottom="12px">
Log In
</Text>
<FormControl isRequired isInvalid={emailError}>
<Input
variant="login"
placeholder="Your email address"
value={email}
onChange={handleEmailChange}
/>
<FormErrorMessage>Please enter a valid email.</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={passwordError}>
<Input
<FormControl isRequired isInvalid={emailError}>
<Input
variant="login"
placeholder="Your email address"
value={email}
onChange={handleEmailChange}
/>
<FormErrorMessage>Please enter a valid email.</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={passwordError}>
<Input
variant="login"
type="password"
placeholder="Your password"
value={password}
onChange={handlePasswordChange}
/>
<FormErrorMessage>{passwordErrorStr}</FormErrorMessage>
</FormControl>
<Button
variant="login"
type="password"
placeholder="Your password"
value={password}
onChange={handlePasswordChange}
/>
<FormErrorMessage>{passwordErrorStr}</FormErrorMessage>
</FormControl>
<Button
variant="login"
disabled={email === "" || password === ""}
_hover={
email && password
? {
disabled={email === "" || password === ""}
type="submit"
_hover={
email && password
? {
background: "teal.500",
transition:
"transition: background-color 0.5s ease !important",
}
: {}
}
onClick={onLogInClick}
>
Log In
: {}
}
>
Log In
</Button>
<Box w="80%">
<Flex gap="10px">
<Text variant="loginSecondary" paddingRight="17px">
Not a member yet?
<Box w="80%">
<Flex gap="10px">
<Text variant="loginSecondary" paddingRight="17px">
Not a member yet?
</Text>
<Text variant="loginTertiary" onClick={onSignUpClick}>
Sign Up Now
<Text variant="loginTertiary" onClick={onSignUpClick}>
Sign Up Now
</Text>
</Flex>
</Box>
</Flex>
</Box>
</Flex>
</Flex>
</Flex>
</Box>
<Box flex="1" bg="teal.400">
{/* Background */}
</Box>
</Flex>
</Box>
<Box flex="1" bg="teal.400">
{/* Background */}
</Box>
</Flex>
</form>
);
}
return <></>;
Expand Down
84 changes: 44 additions & 40 deletions frontend/src/components/forms/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useState, useContext } from "react";
import { Redirect, useHistory } from "react-router-dom";
import {
Box,
Button,
Flex,
FormControl,
import {
Box,
Button,
Flex,
FormControl,
FormErrorMessage,
Input,
Text
Input,
Text
} from "@chakra-ui/react";
import authAPIClient from "../../APIClients/AuthAPIClient";
import { HOME_PAGE, LOGIN_PAGE } from "../../constants/Routes";
Expand Down Expand Up @@ -82,8 +82,10 @@ const Signup = ({
}
}

const onSignupClick = async () => {
setSignupClicked(true)
const onSignupClick = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();

setSignupClicked(true);

if (!emailRegex.test(email)) {
setEmailErrorStr("Please enter a valid email.")
Expand All @@ -96,7 +98,7 @@ const Signup = ({
setPasswordError(true)
return
}

const isInvited = await commonApiClient.isUserInvited(email);
if (isInvited !== "Not Invited") {
if (isAuthErrorResponse(isInvited)) {
Expand Down Expand Up @@ -132,7 +134,7 @@ const Signup = ({
}
};

const isCreateAccountBtnDisabled = () =>
const isCreateAccountBtnDisabled = () =>
emailError || passwordError || email === '' || password === '' || firstName === '' || lastName === ''

const onLogInClick = () => {
Expand All @@ -143,17 +145,18 @@ const Signup = ({
return <Redirect to={HOME_PAGE} />;
}

if (toggle) {
if (toggle) {
return (
<Flex h="100vh">
<Box w="47%">
<Flex
h="100%"
direction="column"
justifyContent="center"
alignItems="center"
gap="28px"
>
<form onSubmit={onSignupClick}>
<Flex h="100vh">
<Box w="47%">
<Flex
h="100%"
direction="column"
justifyContent="center"
alignItems="center"
gap="28px"
>
<Box w="80%" textAlign="left">
<Text variant="login">
Sign Up
Expand Down Expand Up @@ -202,36 +205,37 @@ const Signup = ({
<Button
variant="login"
disabled={isCreateAccountBtnDisabled()}
type="submit"
_hover={
email && password && firstName && lastName
? {
background: "teal.500",
transition:
"transition: background-color 0.5s ease !important",
}
background: "teal.500",
transition:
"transition: background-color 0.5s ease !important",
}
: {}
}
onClick={onSignupClick}
>
Create Account
</Button>
</Box>
<Box w="80%">
<Flex gap="10px">
<Text variant="loginSecondary" paddingRight="1.1vw">
Already have an account?
<Box w="80%">
<Flex gap="10px">
<Text variant="loginSecondary" paddingRight="1.1vw">
Already have an account?
</Text>
<Text variant="loginTertiary" onClick={onLogInClick}>
Log In Now
<Text variant="loginTertiary" onClick={onLogInClick}>
Log In Now
</Text>
</Flex>
</Box>
</Flex>
</Box>
<Box flex="1" bg="teal.400">
{/* Background */}
</Box>
</Flex>
</Flex>
</Box>
</Flex>
</Box>
<Box flex="1" bg="teal.400">
{/* Background */}
</Box>
</Flex>
</form>
);
}
return <></>;
Expand Down
Loading