diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx index 502529112c..d1f76dd98b 100644 --- a/src/screens/Signup/StepHandle.tsx +++ b/src/screens/Signup/StepHandle.tsx @@ -126,11 +126,14 @@ export function StepHandle() { ) } + const isHandleTaken = + !isPending && + queryEnabled && + isHandleAvailable && + !isHandleAvailable.available + const textFieldInvalid = - (!isPending && - queryEnabled && - isHandleAvailable && - !isHandleAvailable.available) || + isHandleTaken || !validCheck.frontLengthNotTooLong || !validCheck.handleChars || !validCheck.hyphenStartOrEnd || @@ -175,38 +178,35 @@ export function StepHandle() { {state.error} )} - {queryEnabled && - isHandleAvailable && - !isHandleAvailable.available && - validCheck.overall && ( - <> - - - - {createFullHandle(draftValue, state.userDomain)} is not - available - - - - {isHandleAvailable.suggestions && - isHandleAvailable.suggestions.length > 0 && ( - { - setDraftValue( - suggestion.handle.slice( - 0, - state.userDomain.length * -1, - ), - ) - logger.metric('signup:handleSuggestionSelected', { - method: suggestion.method, - }) - }} - /> - )} - - )} + {isHandleTaken && validCheck.overall && ( + <> + + + + {createFullHandle(draftValue, state.userDomain)} is not + available + + + + {isHandleAvailable.suggestions && + isHandleAvailable.suggestions.length > 0 && ( + { + setDraftValue( + suggestion.handle.slice( + 0, + state.userDomain.length * -1, + ), + ) + logger.metric('signup:handleSuggestionSelected', { + method: suggestion.method, + }) + }} + /> + )} + + )} {(!validCheck.handleChars || !validCheck.hyphenStartOrEnd) && ( {!validCheck.hyphenStartOrEnd ? ( @@ -215,7 +215,10 @@ export function StepHandle() { ) : ( - Only contains letters, numbers, and hyphens + + Username must only contain letters (a-z), numbers, and + hyphens + )} @@ -240,7 +243,7 @@ export function StepHandle() {