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>