diff options
author | Sebastian <sebasjm@gmail.com> | 2024-04-22 12:50:25 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-04-22 12:50:25 -0300 |
commit | 82b8e83ca635bd27954565e2c29c77e0a75b3fc0 (patch) | |
tree | 0f73cdfde72d2cbaa43be332a9beab1080283a89 /packages/challenger-ui/src/pages/AskChallenge.tsx | |
parent | 5db4cb99e3f16c8471117ca7443bc323180e67ec (diff) | |
download | wallet-core-82b8e83ca635bd27954565e2c29c77e0a75b3fc0.tar.xz |
fix #8398
Diffstat (limited to 'packages/challenger-ui/src/pages/AskChallenge.tsx')
-rw-r--r-- | packages/challenger-ui/src/pages/AskChallenge.tsx | 135 |
1 files changed, 77 insertions, 58 deletions
diff --git a/packages/challenger-ui/src/pages/AskChallenge.tsx b/packages/challenger-ui/src/pages/AskChallenge.tsx index 76fe6f00a..aaca51db7 100644 --- a/packages/challenger-ui/src/pages/AskChallenge.tsx +++ b/packages/challenger-ui/src/pages/AskChallenge.tsx @@ -49,27 +49,26 @@ export function AskChallenge({ const prevEmail = !status || !status.last_address ? undefined : status.last_address["email"]; const regexEmail = - !status || !status.restrictions - ? undefined - : status.restrictions["email"]; + !status || !status.restrictions ? undefined : status.restrictions["email"]; const { lib } = useChallengerApiContext(); const { i18n } = useTranslationContext(); const [notification, withErrorHandler] = useLocalNotificationHandler(); - const [email, setEmail] = useState<string | undefined>(prevEmail); + const [email, setEmail] = useState<string | undefined>(); const [repeat, setRepeat] = useState<string | undefined>(); + const regexTest = + regexEmail && regexEmail.regex ? new RegExp(regexEmail.regex) : EMAIL_REGEX; + const regexHint = + regexEmail && regexEmail.hint ? regexEmail.hint : i18n.str`invalid email`; + const errors = undefinedIfEmpty({ email: !email ? i18n.str`required` - : regexEmail && regexEmail.regex - ? !new RegExp(regexEmail.regex).test(email) - ? regexEmail.hint - ? regexEmail.hint - : `invalid` - : undefined - : !EMAIL_REGEX.test(email) - ? i18n.str`invalid email` + : !regexTest.test(email) + ? regexHint + : prevEmail !== undefined && email === prevEmail + ? i18n.str`email should be different` : undefined, repeat: !repeat ? i18n.str`required` @@ -82,7 +81,7 @@ export function AskChallenge({ ? undefined : withErrorHandler( async () => { - return lib.bank.challenge(nonce, { email: email! }); + return lib.challenger.challenge(nonce, { email: email! }); }, (ok) => { if ("redirectURL" in ok.body) { @@ -136,11 +135,9 @@ export function AskChallenge({ <Fragment> <Attention title={i18n.str`A code has been sent to ${prevEmail}`}> <i18n.Translate> - You can change the destination or{" "} - <a href={routeSolveChallenge.url({ nonce })}> - <i18n.Translate>complete the challenge here</i18n.Translate> + <a href={routeSolveChallenge.url({ nonce })} class="underline"> + <i18n.Translate>Complete the challenge here.</i18n.Translate> </a> - . </i18n.Translate> </Attention> </Fragment> @@ -171,8 +168,9 @@ export function AskChallenge({ onChange={(e) => { setEmail(e.currentTarget.value); }} + placeholder={prevEmail} readOnly={status.fix_address} - class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" /> <ShowInputErrorLabel message={errors?.email} @@ -181,50 +179,71 @@ export function AskChallenge({ </div> </div> - <div class="sm:col-span-2"> - <label - for="repeat-email" - class="block text-sm font-semibold leading-6 text-gray-900" - > - <i18n.Translate>Repeat email</i18n.Translate> - </label> - <div class="mt-2.5"> - <input - type="email" - name="repeat-email" - id="repeat-email" - value={repeat} - onChange={(e) => { - setRepeat(e.currentTarget.value); - }} - autocomplete="email" - class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - /> - <ShowInputErrorLabel - message={errors?.repeat} - isDirty={repeat !== undefined} - /> + {status.fix_address ? undefined : ( + <div class="sm:col-span-2"> + <label + for="repeat-email" + class="block text-sm font-semibold leading-6 text-gray-900" + > + <i18n.Translate>Repeat email</i18n.Translate> + </label> + <div class="mt-2.5"> + <input + type="email" + name="repeat-email" + id="repeat-email" + value={repeat} + onChange={(e) => { + setRepeat(e.currentTarget.value); + }} + autocomplete="email" + class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + /> + <ShowInputErrorLabel + message={errors?.repeat} + isDirty={repeat !== undefined} + /> + </div> </div> - </div> + )} - <p class="mt-3 text-sm leading-6 text-gray-400"> - <i18n.Translate> - You can change your email address another {status.changes_left}{" "} - times. - </i18n.Translate> - </p> + {!status.changes_left ? ( + <p class="mt-3 text-sm leading-6 text-gray-400"> + <i18n.Translate>No more changes left</i18n.Translate> + </p> + ) : ( + <p class="mt-3 text-sm leading-6 text-gray-400"> + <i18n.Translate> + You can change your email address another{" "} + {status.changes_left} times. + </i18n.Translate> + </p> + )} </div> - <div class="mt-10"> - <Button - type="submit" - disabled={!onSend} - class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - handler={onSend} - > - <i18n.Translate>Send email</i18n.Translate> - </Button> - </div> + {!prevEmail ? ( + <div class="mt-10"> + <Button + type="submit" + disabled={!onSend} + class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + handler={onSend} + > + <i18n.Translate>Send email</i18n.Translate> + </Button> + </div> + ) : ( + <div class="mt-10"> + <Button + type="submit" + disabled={!onSend} + class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + handler={onSend} + > + <i18n.Translate>Change email</i18n.Translate> + </Button> + </div> + )} </form> </div> </Fragment> |