changes from feedback

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

6 files changed, 56 insertions, 14 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={{
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.tsx
index 46cf0502c..5cff7bf01 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.tsx
@@ -86,7 +86,7 @@ export function AuthMethodIbanSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="IBAN Challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
       <p>Send a wire transfer to the address,</p>
       <button class="button">Check</button>
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
index ee001ebe9..97e768cbe 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
@@ -86,7 +86,7 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="Postal Challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
       <p>Wait for the answer</p>
       <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.tsx
index 222789507..b4896eac8 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.tsx
@@ -86,9 +86,15 @@ export function AuthMethodQuestionSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="Question challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
-      <p>Answer the question please</p>
+      <p>
+        In this challenge you need to provide the answer for the next question:
+      </p>
+      <pre>
+        {selectedChallenge.instructions}
+      </pre>
+      <p>Type the answer below</p>
       <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
 
       <div
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
index 8ee4d600a..67049df12 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
@@ -11,6 +11,7 @@ import { AuthMethodSolveProps } from "./index";
 export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
   const [answer, setAnswer] = useState("");
 
+  const [expanded, setExpanded] = useState(false)
   const reducer = useAnastasisContext();
   if (!reducer) {
     return (
@@ -86,13 +87,30 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="SMS Challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
       <p>
-        An sms has been sent to "<b>{selectedChallenge.instructions}</b>". Type
-        the code below
+        An sms 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 SMS 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 SMS 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={{
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.tsx
index 98c2e51df..e9fa7012f 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.tsx
@@ -86,7 +86,7 @@ export function AuthMethodTotpSolve({ id }: AuthMethodSolveProps): VNode {
     feedback?.state === ChallengeFeedbackStatus.TruthUnknown;
 
   return (
-    <AnastasisClientFrame hideNav title="Add email authentication">
+    <AnastasisClientFrame hideNav title="TOTP Challenge">
       <SolveOverviewFeedbackDisplay feedback={feedback} />
       <p>enter the totp solution</p>
       <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
@@ -110,3 +110,4 @@ export function AuthMethodTotpSolve({ id }: AuthMethodSolveProps): VNode {
     </AnastasisClientFrame>
   );
 }
+// NKE8 VD857T X033X6RG WEGPYP6D70 Q7YE XN8D2 ZN79SCN 231B4QK0