diff options
Diffstat (limited to 'packages/challenger-ui/src/pages/AskChallenge.tsx')
-rw-r--r-- | packages/challenger-ui/src/pages/AskChallenge.tsx | 237 |
1 files changed, 120 insertions, 117 deletions
diff --git a/packages/challenger-ui/src/pages/AskChallenge.tsx b/packages/challenger-ui/src/pages/AskChallenge.tsx index f0cfb4cc3..9f4eb9ee5 100644 --- a/packages/challenger-ui/src/pages/AskChallenge.tsx +++ b/packages/challenger-ui/src/pages/AskChallenge.tsx @@ -111,6 +111,11 @@ export function AskChallenge({ const contact = address ? { [restrictionKey]: address } : undefined; + const usableAddrs = + !state?.lastAddress || !state.lastAddress.length + ? [] + : state.lastAddress.filter((d) => !!d.address[restrictionKey]); + const onSend = errors || !contact || !state?.nonce ? undefined @@ -194,14 +199,14 @@ export function AskChallenge({ </Fragment> )} - {!state?.lastAddress || !state.lastAddress.length ? undefined : ( + {!usableAddrs.length ? undefined : ( <div class="mx-auto max-w-xl mt-4"> <h3> <i18n.Translate>Previous address</i18n.Translate> </h3> <fieldset> <div class="relative -space-y-px rounded-md bg-white"> - {state.lastAddress.map((addr, idx) => { + {usableAddrs.map((addr, idx) => { return ( <label data-checked={addrIndex === idx} @@ -272,35 +277,81 @@ export function AskChallenge({ </div> )} - {addrIndex !== undefined ? undefined : ( - <form - method="POST" - class="mx-auto mt-4 max-w-xl " - onSubmit={(e) => { - e.preventDefault(); - }} - > + <form + method="POST" + class="mx-auto mt-4 max-w-xl " + onSubmit={(e) => { + e.preventDefault(); + }} + > + <div class="sm:col-span-2"> + <label + for="adress" + class="block text-sm font-semibold leading-6 text-gray-900" + > + {(function (): TranslatedString { + switch (config.address_type) { + case "email": + return i18n.str`Email`; + case "phone": + return i18n.str`Phone`; + } + })()} + </label> + <div class="mt-2.5"> + <input + type="text" + name="adress" + id="adress" + ref={focus ? doAutoFocus : undefined} + maxLength={512} + autocomplete={(function (): string { + switch (config.address_type) { + case "email": + return "email"; + case "phone": + return "phone"; + } + })()} + value={address ?? ""} + onChange={(e) => { + setEmail(e.currentTarget.value); + }} + placeholder={prevAddr} + readOnly={lastStatus.fix_address || addrIndex !== undefined} + 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?.address} + isDirty={address !== undefined} + /> + </div> + </div> + + {lastStatus.fix_address || addrIndex !== undefined ? undefined : ( <div class="sm:col-span-2"> <label - for="adress" + for="repeat-address" class="block text-sm font-semibold leading-6 text-gray-900" > {(function (): TranslatedString { switch (config.address_type) { case "email": - return i18n.str`Email`; + return i18n.str`Repeat email`; case "phone": - return i18n.str`Phone`; + return i18n.str`Repeat phone`; } })()} </label> <div class="mt-2.5"> <input type="text" - name="adress" - id="adress" - ref={focus ? doAutoFocus : undefined} - maxLength={512} + name="repeat-address" + id="repeat-address" + value={repeat ?? ""} + onChange={(e) => { + setRepeat(e.currentTarget.value); + }} autocomplete={(function (): string { switch (config.address_type) { case "email": @@ -309,115 +360,67 @@ export function AskChallenge({ return "phone"; } })()} - value={address} - onChange={(e) => { - setEmail(e.currentTarget.value); - }} - placeholder={prevAddr} - readOnly={lastStatus.fix_address} - 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" + 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?.address} - isDirty={address !== undefined} + message={errors?.repeat} + isDirty={repeat !== undefined} /> </div> </div> + )} - {lastStatus.fix_address ? undefined : ( - <div class="sm:col-span-2"> - <label - for="repeat-address" - class="block text-sm font-semibold leading-6 text-gray-900" - > - {(function (): TranslatedString { - switch (config.address_type) { - case "email": - return i18n.str`Repeat email`; - case "phone": - return i18n.str`Repeat phone`; - } - })()} - </label> - <div class="mt-2.5"> - <input - type="text" - name="repeat-address" - id="repeat-address" - value={repeat} - onChange={(e) => { - setRepeat(e.currentTarget.value); - }} - autocomplete={(function (): string { - switch (config.address_type) { - case "email": - return "email"; - case "phone": - return "phone"; - } - })()} - 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> - )} - - {lastStatus === undefined ? undefined : ( - <p class="mt-2 text-sm leading-6 text-gray-400"> - {lastStatus.changes_left < 1 ? ( - <i18n.Translate> - You can't change the contact address anymore. - </i18n.Translate> - ) : lastStatus.changes_left === 1 ? ( - <i18n.Translate> - You can change the contact address one last time. - </i18n.Translate> - ) : ( - <i18n.Translate> - You can change the contact address {lastStatus.changes_left}{" "} - more times. - </i18n.Translate> - )} - </p> - )} + {lastStatus === undefined ? undefined : ( + <p class="mt-2 text-sm leading-6 text-gray-400"> + {lastStatus.changes_left < 1 ? ( + <i18n.Translate> + You can't change the contact address anymore. + </i18n.Translate> + ) : lastStatus.changes_left === 1 ? ( + <i18n.Translate> + You can change the contact address one last time. + </i18n.Translate> + ) : ( + <i18n.Translate> + You can change the contact address {lastStatus.changes_left}{" "} + more times. + </i18n.Translate> + )} + </p> + )} - <div class="flex items-center justify-between py-2"> - <span class="flex flex-grow flex-col"> - <span - class="text-sm text-black font-medium leading-6 " - id="availability-label" - > - <i18n.Translate> - Remember this address for future challenges. - </i18n.Translate> - </span> + <div class="flex items-center justify-between py-2"> + <span class="flex flex-grow flex-col"> + <span + class="text-sm text-black font-medium leading-6 " + id="availability-label" + > + <i18n.Translate> + Remember this address for future challenges. + </i18n.Translate> </span> - <button - type="button" - name={`remember switch`} + </span> + <button + type="button" + name={`remember switch`} + data-enabled={remember} + class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" + role="switch" + aria-checked="false" + aria-labelledby="availability-label" + aria-describedby="availability-description" + onClick={() => { + setRemember(!remember); + }} + > + <span + aria-hidden="true" data-enabled={remember} - class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" - role="switch" - aria-checked="false" - aria-labelledby="availability-label" - aria-describedby="availability-description" - onClick={() => { - setRemember(!remember); - }} - > - <span - aria-hidden="true" - data-enabled={remember} - class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" - ></span> - </button> - </div> - </form> - )} + class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" + ></span> + </button> + </div> + </form> <div class="mx-auto mt-4 max-w-xl "> {!prevAddr ? ( <div class="mt-10"> |