changes from feedback

better backup and recovery ending screen
async button on modal and solve challenges
use providers name when possible

1 files changed, 22 insertions, 5 deletions

diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
index ff6c51d1c..1e0b6f18a 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
@@ -10,6 +10,7 @@ import { AuthMethodSolveProps } from "./index";
 
 export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
   const [answer, setAnswer] = useState("");
+  const [expanded, setExpanded] = useState(false)
 
   const reducer = useAnastasisContext();
   if (!reducer) {
@@ -86,14 +87,30 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="Email challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
       <p>
-        An email has been sent to "<b>{selectedChallenge.instructions}</b>".
-        Type the code below.
-        <b>Here we need to add the code "{selectedUuid}"</b>
+        An email has been sent to "<b>{selectedChallenge.instructions}</b>". The
+        message has and identification code and recovery code that starts with "<b>A-</b>".
+        Wait the message to arrive and the enter the recovery code below.
       </p>
-      <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
+      {!expanded ? <p>
+        The identification code in the email should start with "{selectedUuid.substring(0, 10)}"
+        <span class="icon has-tooltip-top" data-tooltip="click to expand" onClick={() => setExpanded(e => !e)}>
+          <i class="mdi mdi-information" />
+        </span>
+      </p>
+        : <p>
+        The identification code in the email is "{selectedUuid}"
+        <span class="icon has-tooltip-top" data-tooltip="click to show less code" onClick={() => setExpanded(e => !e)}>
+          <i class="mdi mdi-information" />
+        </span>
+        </p>}
+      <TextInput label="Answer"
+        grabFocus
+        bind={[answer, setAnswer]}
+        placeholder="A-1234567812345678"
+      />
 
       <div
         style={{