edits to working and word breaks in confirmation modal

This commit is contained in:
Martina 2021-06-23 15:23:54 -07:00
parent f40a4fab68
commit a98645c221
3 changed files with 26 additions and 23 deletions

View File

@ -24,7 +24,7 @@ const useSignup = () => {
}; };
const useCheckUser = () => { const useCheckUser = () => {
const MESSAGE = "The username is taken."; const MESSAGE = "That username is taken";
const usernamesAllowed = React.useRef([]); const usernamesAllowed = React.useRef([]);
const usernamesTaken = React.useRef([]); const usernamesTaken = React.useRef([]);
@ -48,7 +48,7 @@ const useCheckUser = () => {
username, username,
}); });
if (response.data) { if (response.data) {
errors.username = "The username is taken."; errors.username = "That username is taken";
usernamesTaken.current.push(username); usernamesTaken.current.push(username);
return; return;
} }
@ -56,16 +56,17 @@ const useCheckUser = () => {
}; };
}; };
const createValidations = const createValidations = (validateUsername) => async (
(validateUsername) => { username, password, acceptTerms },
async ({ username, password, acceptTerms }, errors) => { errors
await validateUsername({ username }, errors); ) => {
await validateUsername({ username }, errors);
if (!Validations.password(password)) errors.password = "Incorrect password"; if (!Validations.password(password)) errors.password = "Incorrect password";
if (!acceptTerms) errors.acceptTerms = "Must accept terms and conditions"; if (!acceptTerms) errors.acceptTerms = "Must accept terms and conditions";
return errors; return errors;
}; };
export default function Signup({ verifyEmail, createUser, resendEmailVerification }) { export default function Signup({ verifyEmail, createUser, resendEmailVerification }) {
const [passwordValidations, setPasswordValidations] = React.useState( const [passwordValidations, setPasswordValidations] = React.useState(
@ -103,7 +104,7 @@ export default function Signup({ verifyEmail, createUser, resendEmailVerificatio
placeholder="Username" placeholder="Username"
name="username" name="username"
type="text" type="text"
success="The username is available." success="That username is available"
icon={ icon={
isValidating isValidating
? () => ( ? () => (

View File

@ -32,7 +32,7 @@ const useTwitterSignup = () => {
}; };
const useCheckUser = () => { const useCheckUser = () => {
const MESSAGE = "The username is taken."; const MESSAGE = "That username is taken";
const usernamesAllowed = React.useRef([]); const usernamesAllowed = React.useRef([]);
const usernamesTaken = React.useRef([]); const usernamesTaken = React.useRef([]);
@ -56,7 +56,7 @@ const useCheckUser = () => {
username, username,
}); });
if (response.data) { if (response.data) {
errors.username = "The username is taken."; errors.username = "That username is taken";
usernamesTaken.current.push(username); usernamesTaken.current.push(username);
return; return;
} }
@ -64,17 +64,18 @@ const useCheckUser = () => {
}; };
}; };
const createValidations = const createValidations = (validateUsername) => async (
(validateUsername) => { username, email, acceptTerms },
async ({ username, email, acceptTerms }, errors) => { errors
await validateUsername({ username }, errors); ) => {
await validateUsername({ username }, errors);
if (!Validations.email(email)) errors.email = "Invalid email"; if (!Validations.email(email)) errors.email = "Invalid email";
if (!acceptTerms) errors.acceptTerms = "Must accept terms and conditions"; if (!acceptTerms) errors.acceptTerms = "Must accept terms and conditions";
return errors; return errors;
}; };
const MotionLayout = ({ children, ...props }) => ( const MotionLayout = ({ children, ...props }) => (
<motion.div layout {...props}> <motion.div layout {...props}>
@ -131,7 +132,7 @@ export default function TwitterSignup({
placeholder="Username" placeholder="Username"
name="username" name="username"
type="text" type="text"
success="The username is available." success="That username is available"
icon={ icon={
isValidating isValidating
? () => ( ? () => (

View File

@ -39,7 +39,8 @@ const STYLES_HEADER = css`
color: ${Constants.system.black}; color: ${Constants.system.black};
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
word-break: break-all; word-break: break-word;
white-space: pre-line;
`; `;
const STYLES_SUB_HEADER = css` const STYLES_SUB_HEADER = css`