some fixes: #7095 #7080 #7085 #7081 #7089 #7097

6 files changed, 107 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 7252ca2fd..9ee52d8ed 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
@@ -12,7 +12,28 @@ import { SolveOverviewFeedbackDisplay } from "../SolveScreen";
 import { AuthMethodSolveProps } from "./index";
 
 export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
-  const [answer, setAnswer] = useState("A-");
+  const [answer, _setAnswer] = useState("A-");
+
+  function setAnswer(str: string): void {
+    //A-12345-678-1234-5678
+    const unformatted = str
+      .replace(/^A-/, "")
+      .replace(/-/g, "")
+      .toLocaleUpperCase();
+
+    let result = `A-${unformatted.substring(0, 5)}`;
+    if (unformatted.length > 5) {
+      result += `-${unformatted.substring(5, 8)}`;
+    }
+    if (unformatted.length > 8) {
+      result += `-${unformatted.substring(8, 12)}`;
+    }
+    if (unformatted.length > 12) {
+      result += `-${unformatted.substring(12, 16)}`;
+    }
+
+    _setAnswer(result);
+  }
   const [expanded, setExpanded] = useState(false);
 
   const reducer = useAnastasisContext();
@@ -77,7 +98,9 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
   const feedback = challengeFeedback[selectedUuid];
 
   async function onNext(): Promise<void> {
-    return reducer?.transition("solve_challenge", { answer });
+    return reducer?.transition("solve_challenge", {
+      answer: `A-${answer.replace(/^A-/, "").replace(/-/g, "").trim()}`,
+    });
   }
   function onCancel(): void {
     reducer?.back();
@@ -127,7 +150,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
         grabFocus
         onConfirm={onNext}
         bind={[answer, setAnswer]}
-        placeholder="A-1234567812345678"
+        placeholder="A-12345-678-1234-5678"
       />
 
       <div
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
index af7a62e6a..5f03437af 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
@@ -12,7 +12,28 @@ import { SolveOverviewFeedbackDisplay } from "../SolveScreen";
 import { AuthMethodSolveProps } from "./index";
 
 export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
-  const [answer, setAnswer] = useState("A-");
+  const [answer, _setAnswer] = useState("A-");
+
+  function setAnswer(str: string): void {
+    //A-12345-678-1234-5678
+    const unformatted = str
+      .replace(/^A-/, "")
+      .replace(/-/g, "")
+      .toLocaleUpperCase();
+
+    let result = `A-${unformatted.substring(0, 5)}`;
+    if (unformatted.length > 5) {
+      result += `-${unformatted.substring(5, 8)}`;
+    }
+    if (unformatted.length > 8) {
+      result += `-${unformatted.substring(8, 12)}`;
+    }
+    if (unformatted.length > 12) {
+      result += `-${unformatted.substring(12, 16)}`;
+    }
+
+    _setAnswer(result);
+  }
 
   const reducer = useAnastasisContext();
   if (!reducer) {
@@ -76,7 +97,9 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
   const feedback = challengeFeedback[selectedUuid];
 
   async function onNext(): Promise<void> {
-    return reducer?.transition("solve_challenge", { answer });
+    return reducer?.transition("solve_challenge", {
+      answer: `A-${answer.replace(/^A-/, "").replace(/-/g, "").trim()}`,
+    });
   }
   function onCancel(): void {
     reducer?.back();
@@ -96,6 +119,7 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
         onConfirm={onNext}
         label="Answer"
         grabFocus
+        placeholder="A-12345-678-1234-5678"
         bind={[answer, setAnswer]}
       />
 
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
index e70b2a53b..fd9e889cf 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
@@ -5,12 +5,18 @@ import { AuthMethodSetupProps } from ".";
 import { PhoneNumberInput } from "../../../components/fields/NumberInput";
 import { AnastasisClientFrame } from "../index";
 
+const REGEX_JUST_NUMBERS = /^\+[0-9 ]*$/;
+
+function isJustNumbers(str: string): boolean {
+  return REGEX_JUST_NUMBERS.test(str);
+}
+
 export function AuthMethodSmsSetup({
   addAuthMethod,
   cancel,
   configured,
 }: AuthMethodSetupProps): VNode {
-  const [mobileNumber, setMobileNumber] = useState("");
+  const [mobileNumber, setMobileNumber] = useState("+");
   const addSmsAuth = (): void => {
     addAuthMethod({
       authentication_method: {
@@ -24,7 +30,13 @@ export function AuthMethodSmsSetup({
   useLayoutEffect(() => {
     inputRef.current?.focus();
   }, []);
-  const errors = !mobileNumber ? "Add a mobile number" : undefined;
+  const errors = !mobileNumber
+    ? "Add a mobile number"
+    : !mobileNumber.startsWith("+")
+    ? "Mobile number should start with '+'"
+    : !isJustNumbers(mobileNumber)
+    ? "Mobile number can't have other than numbers"
+    : undefined;
   function goNextIfNoErrors(): void {
     if (!errors) addSmsAuth();
   }
@@ -41,9 +53,13 @@ export function AuthMethodSmsSetup({
             label="Mobile number"
             placeholder="Your mobile number"
             onConfirm={goNextIfNoErrors}
+            error={errors}
             grabFocus
             bind={[mobileNumber, setMobileNumber]}
           />
+          <div>
+            Enter mobile number including +CC international dialing prefix.
+          </div>
         </div>
         {configured.length > 0 && (
           <section class="section">
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx
index c33dbd785..4fdbb2ce3 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx
@@ -50,14 +50,15 @@ export const WithoutFeedback = createExample(
           cost: "USD:1",
           instructions: "SMS to +54 11 2233 4455",
           type: "question",
-          uuid: "uuid-1",
+          uuid: "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
         },
       ],
       policies: [],
     },
-    selected_challenge_uuid: "uuid-1",
+    selected_challenge_uuid:
+      "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
   } as ReducerState,
   {
-    id: "uuid-1",
+    id: "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
   },
 );
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
index 61dad3f51..1fd4343ab 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
@@ -12,7 +12,28 @@ import { SolveOverviewFeedbackDisplay } from "../SolveScreen";
 import { AuthMethodSolveProps } from "./index";
 
 export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
-  const [answer, setAnswer] = useState("A-");
+  const [answer, _setAnswer] = useState("A-");
+
+  function setAnswer(str: string): void {
+    //A-12345-678-1234-5678
+    const unformatted = str
+      .replace(/^A-/, "")
+      .replace(/-/g, "")
+      .toLocaleUpperCase();
+
+    let result = `A-${unformatted.substring(0, 5)}`;
+    if (unformatted.length > 5) {
+      result += `-${unformatted.substring(5, 8)}`;
+    }
+    if (unformatted.length > 8) {
+      result += `-${unformatted.substring(8, 12)}`;
+    }
+    if (unformatted.length > 12) {
+      result += `-${unformatted.substring(12, 16)}`;
+    }
+
+    _setAnswer(result);
+  }
 
   const [expanded, setExpanded] = useState(false);
   const reducer = useAnastasisContext();
@@ -77,7 +98,9 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
   const feedback = challengeFeedback[selectedUuid];
 
   async function onNext(): Promise<void> {
-    return reducer?.transition("solve_challenge", { answer });
+    return reducer?.transition("solve_challenge", {
+      answer: `A-${answer.replace(/^A-/, "").replace(/-/g, "").trim()}`,
+    });
   }
   function onCancel(): void {
     reducer?.back();
@@ -127,7 +150,7 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
         grabFocus
         onConfirm={onNext}
         bind={[answer, setAnswer]}
-        placeholder="A-1234567812345678"
+        placeholder="A-12345-678-1234-5678"
       />
 
       <div
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.tsx
index 6b0dd7a79..e0f0cc5e2 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.tsx
@@ -55,13 +55,19 @@ export function AuthMethodTotpSetup({
         <QR text={totpURL} />
       </div>
       <p>
-        After scanning the code with your TOTP App, test it in the input below.
+        Confirm that your TOTP App works by entering the current 8-digit TOTP
+        code here:
       </p>
       <TextInput
         label="Test code"
         onConfirm={goNextIfNoErrors}
         bind={[test, setTest]}
       />
+      <div>
+        We note that Google's implementation of TOTP is incomplete and will not
+        work. We recommend using FreeOTP+.
+      </div>
+
       {configured.length > 0 && (
         <section class="section">
           <div class="block">Your TOTP numbers:</div>