-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Multi-step log in/sign up modal, with user type (#849)
- adds ability for account sign up to happen all within a modal from the building page - adds a required step for account sign up, asking user type (multiple-choice or write in) - adds verify email/ re-send email step to the end of log in/sign up flow - refactors email input into separate component (like PasswordInput
- Loading branch information
Showing
24 changed files
with
1,083 additions
and
471 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { ChangeEvent, forwardRef } from "react"; | ||
| import { t } from "@lingui/macro"; | ||
| import { I18n } from "@lingui/core"; | ||
| import { withI18n } from "@lingui/react"; | ||
| import { AlertIcon } from "./Icons"; | ||
|
|
||
| import "styles/EmailInput.css"; | ||
| import "styles/_input.scss"; | ||
| import classNames from "classnames"; | ||
|
|
||
| interface EmailInputProps extends React.ComponentPropsWithoutRef<"input"> { | ||
| i18n: I18n; | ||
| email: string; | ||
| error: boolean; | ||
| setError: React.Dispatch<React.SetStateAction<boolean>>; | ||
| showError: boolean; | ||
| onChange: (e: ChangeEvent<HTMLInputElement>) => void; | ||
| i18nHash?: string; | ||
| } | ||
|
|
||
| const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>( | ||
| ({ i18n, i18nHash, email, error, setError, showError, onChange, ...props }, ref) => { | ||
| const isBadEmailFormat = (value: string) => { | ||
| /* valid email regex rules | ||
| alpha numeric characters are ok, upper/lower case agnostic | ||
| username: leading \_ ok, chars \_\.\-\+ ok in all other positions | ||
| domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */ | ||
| const pattern = | ||
| "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$"; | ||
|
|
||
| // HTML input element has loose email validation requirements, so we check the input against a custom regex | ||
| const passStrictRegex = value.match(pattern); | ||
| const passAutoValidation = document.querySelectorAll("input:invalid").length === 0; | ||
|
|
||
| return !passAutoValidation || !passStrictRegex; | ||
| }; | ||
|
|
||
| const handleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
| onChange(e); | ||
| const emailIsInvalid = isBadEmailFormat(e.target.value); | ||
| setError(emailIsInvalid); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="email-input-field"> | ||
| <div className="email-input-label"> | ||
| <label htmlFor="email-input">{i18n._(t`Email address`)}</label> | ||
| </div> | ||
| {showError && error && ( | ||
| <div className="email-input-errors"> | ||
| <span id="input-field-error"> | ||
| <AlertIcon /> | ||
| {i18n._(t`Please enter a valid email address.`)} | ||
| </span> | ||
| </div> | ||
| )} | ||
| <div className="email-input"> | ||
| <input | ||
| type="email" | ||
| id="email-input" | ||
| className={classNames("input", { invalid: showError && error })} | ||
| onChange={handleChange} | ||
| value={email} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| const EmailInput = withI18n({ withHash: false })(EmailInputWithoutI18n); | ||
|
|
||
| export default EmailInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.