From d3a6544bc5fd7b3d2d65494ba1c3155b024a436e Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 6 Dec 2022 11:21:12 -0300
Subject: using web-utils in anastasis-webui

---
 .../anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx | 1 +
 .../anastasis-webui/src/pages/home/AddingProviderScreen/views.tsx   | 4 +++-
 .../anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx | 1 +
 .../src/pages/home/AuthenticationEditorScreen.stories.tsx           | 1 +
 .../anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx | 1 +
 .../src/pages/home/ChallengeOverviewScreen.stories.tsx              | 1 +
 .../src/pages/home/ChallengePayingScreen.stories.tsx                | 1 +
 .../src/pages/home/ContinentSelectionScreen.stories.tsx             | 1 +
 .../anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx   | 1 +
 .../anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx | 1 +
 .../src/pages/home/RecoveryFinishedScreen.stories.tsx               | 1 +
 .../anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx | 1 +
 .../anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx   | 1 +
 .../src/pages/home/SecretSelectionScreen.stories.tsx                | 1 +
 packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx     | 1 +
 packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx     | 1 +
 .../anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx   | 1 +
 .../src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx      | 1 +
 .../src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx      | 1 +
 .../src/pages/home/authMethod/AuthMethodEmailSolve.tsx              | 6 +++---
 .../src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx       | 1 +
 .../src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx       | 1 +
 .../src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx       | 1 +
 .../src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx       | 1 +
 .../src/pages/home/authMethod/AuthMethodPostSolve.tsx               | 6 +++---
 .../src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx   | 1 +
 .../src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx   | 1 +
 .../src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx        | 1 +
 .../src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx        | 1 +
 .../src/pages/home/authMethod/AuthMethodSmsSolve.tsx                | 6 +++---
 .../src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx       | 1 +
 .../src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx       | 1 +
 32 files changed, 40 insertions(+), 10 deletions(-)

(limited to 'packages/anastasis-webui/src/pages')

diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx
index dc41d9c1a..268189ed8 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx
@@ -24,6 +24,7 @@ import { createExampleWithoutAnastasis } from "../../../utils/index.jsx";
 import { WithoutProviderType, WithProviderType } from "./views.jsx";
 
 export default {
+  title: "Adding Provider Screen",
   args: {
     order: 1,
   },
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen/views.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen/views.tsx
index e397e0b65..19557a12f 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen/views.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen/views.tsx
@@ -23,8 +23,10 @@ import { TextInput } from "../../../components/fields/TextInput.js";
 import { Notifications } from "../../../components/Notifications.js";
 import { AnastasisClientFrame } from "../index.js";
 import { testProvider, WithoutType, WithType } from "./index.js";
+import { useTranslationContext } from "../../../context/translation.js";
 
 export function WithProviderType(props: WithType): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <AnastasisClientFrame
       hideNav
@@ -33,7 +35,7 @@ export function WithProviderType(props: WithType): VNode {
     >
       <div>
         <Notifications notifications={props.notifications} />
-        <p>Add a provider url for a {props.providerLabel} service</p>
+        <p>{i18n.str`Add a provider url for a ${props.providerLabel} service`}</p>
         <div class="container">
           <TextInput
             label="Provider URL"
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
index b1569f184..38fc1b56b 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { AttributeEntryScreen as TestedComponent } from "./AttributeEntryScreen.js";
 
 export default {
+  title: "Attribute Entry Screen",
   component: TestedComponent,
   args: {
     order: 3,
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
index c4901085d..ba48e2d5c 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { AuthenticationEditorScreen as TestedComponent } from "./AuthenticationEditorScreen.js";
 
 export default {
+  title: "Authentication Editor Screen",
   component: TestedComponent,
   args: {
     order: 4,
diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
index f50a72f8a..8aeaec25c 100644
--- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { BackupFinishedScreen as TestedComponent } from "./BackupFinishedScreen.js";
 
 export default {
+  title: "Backup finish",
   component: TestedComponent,
   args: {
     order: 8,
diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
index 552cb069f..d2471755a 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
@@ -28,6 +28,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { ChallengeOverviewScreen as TestedComponent } from "./ChallengeOverviewScreen.js";
 
 export default {
+  title: "Challenge overview",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx
index 0d4895a0b..cd41fe03a 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { ChallengePayingScreen as TestedComponent } from "./ChallengePayingScreen.js";
 
 export default {
+  title: "Challenge paying",
   component: TestedComponent,
   args: {
     order: 10,
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
index 3994b7377..12a79c56c 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { ContinentSelectionScreen as TestedComponent } from "./ContinentSelectionScreen.js";
 
 export default {
+  title: "Continent selection",
   component: TestedComponent,
   args: {
     order: 2,
diff --git a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
index 75619ba05..1e3650300 100644
--- a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { EditPoliciesScreen as TestedComponent } from "./EditPoliciesScreen.js";
 
 export default {
+  title: "Edit policies",
   args: {
     order: 6,
   },
diff --git a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
index 54833234d..56c224d34 100644
--- a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { PoliciesPayingScreen as TestedComponent } from "./PoliciesPayingScreen.js";
 
 export default {
+  title: "Policies paying",
   component: TestedComponent,
   args: {
     order: 9,
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
index eda8968b2..1eb2ae50c 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
@@ -25,6 +25,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { RecoveryFinishedScreen as TestedComponent } from "./RecoveryFinishedScreen.js";
 
 export default {
+  title: "Recovery Finished",
   args: {
     order: 7,
   },
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
index 036455bce..c5003d6a0 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { ReviewPoliciesScreen as TestedComponent } from "./ReviewPoliciesScreen.js";
 
 export default {
+  title: "Reviewing Policies",
   args: {
     order: 6,
   },
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
index 7a03116e7..dbf8bf128 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { SecretEditorScreen as TestedComponent } from "./SecretEditorScreen.js";
 
 export default {
+  title: "Secret editor",
   component: TestedComponent,
   args: {
     order: 7,
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
index b457937f8..7669668ee 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
@@ -27,6 +27,7 @@ import {
 } from "./SecretSelectionScreen.js";
 
 export default {
+  title: "Secret selection",
   component: SecretSelectionScreen,
   args: {
     order: 4,
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
index 5b3a70dd0..1058ae126 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { SolveScreen as TestedComponent } from "./SolveScreen.js";
 
 export default {
+  title: "Solve Screen",
   component: TestedComponent,
   args: {
     order: 6,
diff --git a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
index 3d54a9fd6..960426098 100644
--- a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { StartScreen as TestedComponent } from "./StartScreen.js";
 
 export default {
+  title: "Start screen",
   component: TestedComponent,
   args: {
     order: 1,
diff --git a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
index 81bab4868..40ed5117c 100644
--- a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../utils/index.js";
 import { TruthsPayingScreen as TestedComponent } from "./TruthsPayingScreen.js";
 
 export default {
+  title: "Truths Paying",
   component: TestedComponent,
   args: {
     order: 10,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx
index 38391d10d..4a2d76ca3 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Email setup",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx
index db9abc86c..cc378d8f6 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx
@@ -27,6 +27,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Email solve",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
index d4e034a37..6a9595a83 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
@@ -23,7 +23,7 @@ import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../components/AsyncButton.js";
 import { TextInput } from "../../../components/fields/TextInput.js";
 import { useAnastasisContext } from "../../../context/anastasis.js";
-import { useTranslator } from "../../../i18n/index.js";
+import { useTranslationContext } from "../../../context/translation.js";
 import { AnastasisClientFrame } from "../index.js";
 import { SolveOverviewFeedbackDisplay } from "../SolveScreen.js";
 import { shouldHideConfirm } from "./helpers.js";
@@ -53,7 +53,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
     _setAnswer(result);
   }
   const [expanded, setExpanded] = useState(false);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const reducer = useAnastasisContext();
   if (!reducer) {
@@ -124,7 +124,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
 
   const error =
     answer.length > 21
-      ? i18n`The answer should not be greater than 21 characters.`
+      ? i18n.str`The answer should not be greater than 21 characters.`
       : undefined;
 
   return (
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx
index 5f3de47ff..dfe3850f1 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: IBAN setup",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx
index c06611127..8a9a3f7a0 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: IBAN Solve",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx
index 892de6023..8a32c45c1 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Post setup",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx
index 8f7dc5ff9..702ba2810 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Post solve",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
index 725382c58..8204ab1cf 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
@@ -19,7 +19,7 @@ import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../components/AsyncButton.js";
 import { TextInput } from "../../../components/fields/TextInput.js";
 import { useAnastasisContext } from "../../../context/anastasis.js";
-import { useTranslator } from "../../../i18n/index.js";
+import { useTranslationContext } from "../../../context/translation.js";
 import { AnastasisClientFrame } from "../index.js";
 import { SolveOverviewFeedbackDisplay } from "../SolveScreen.js";
 import { shouldHideConfirm } from "./helpers.js";
@@ -48,7 +48,7 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
 
     _setAnswer(result);
   }
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const reducer = useAnastasisContext();
   if (!reducer) {
@@ -119,7 +119,7 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
 
   const error =
     answer.length > 21
-      ? i18n`The answer should not be greater than 21 characters.`
+      ? i18n.str`The answer should not be greater than 21 characters.`
       : undefined;
 
   return (
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx
index 736e7bfa8..2e108b4e6 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Question setup",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
index 182538775..f7116bf6f 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
@@ -27,6 +27,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Question solve",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx
index 0d58dbdcf..b2c6cb61d 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: SMS setup",
   component: TestedComponent,
   args: {
     order: 5,
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 f1717eff0..2064f12ff 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: SMS solve",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
index 965efbe60..58bb53c4f 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
@@ -19,7 +19,7 @@ import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../components/AsyncButton.js";
 import { TextInput } from "../../../components/fields/TextInput.js";
 import { useAnastasisContext } from "../../../context/anastasis.js";
-import { useTranslator } from "../../../i18n/index.js";
+import { useTranslationContext } from "../../../context/translation.js";
 import { AnastasisClientFrame } from "../index.js";
 import { SolveOverviewFeedbackDisplay } from "../SolveScreen.js";
 import { shouldHideConfirm } from "./helpers.js";
@@ -48,7 +48,7 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
 
     _setAnswer(result);
   }
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const [expanded, setExpanded] = useState(false);
   const reducer = useAnastasisContext();
@@ -120,7 +120,7 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
 
   const error =
     answer.length > 21
-      ? i18n`The answer should not be greater than 21 characters.`
+      ? i18n.str`The answer should not be greater than 21 characters.`
       : undefined;
 
   return (
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx
index e22053b96..5582590f7 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx
@@ -23,6 +23,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Totp setup",
   component: TestedComponent,
   args: {
     order: 5,
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx
index 354516d80..20cd7e3c9 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx
@@ -24,6 +24,7 @@ import { createExample, reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
+  title: "Auth method: Totp solve",
   component: TestedComponent,
   args: {
     order: 5,
-- 
cgit v1.2.3