remove aside transition to mobile

5 files changed, 194 insertions, 257 deletions

diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index f86994c97..86a2f08ee 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { UserAttributeSpec, validators } from "anastasis-core";
-import { Fragment, h, VNode } from "preact";
+import { isAfter, parse } from "date-fns";
+import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, withProcessLabel } from "./index";
-import { TextInput } from "../../components/fields/TextInput";
 import { DateInput } from "../../components/fields/DateInput";
 import { NumberInput } from "../../components/fields/NumberInput";
-import { isAfter, parse } from "date-fns";
+import { TextInput } from "../../components/fields/TextInput";
+import { useAnastasisContext } from "../../context/anastasis";
+import { AnastasisClientFrame, withProcessLabel } from "./index";
 
 export function AttributeEntryScreen(): VNode {
   const reducer = useAnastasisContext()
@@ -48,10 +47,10 @@ export function AttributeEntryScreen(): VNode {
       })}
     >
       <div class="columns" style={{ maxWidth: 'unset' }}>
-        <div class="column is-half">
+        <div class="column">
           {fieldList}
         </div>
-        <div class="column is-is-half" >
+        <div class="column" >
           <p>This personal information will help to locate your secret.</p>
           <h1 class="title">This stays private</h1>
           <p>The information you have entered here:</p>
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index 6e3ca2941..e06dbfedd 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -156,7 +156,7 @@ export function AuthenticationEditorScreen(): VNode {
       onNext={handleNext}
     >
       <div class="columns">
-        <div class="column is-half">
+        <div class="column">
           <div>
             {getKeys(authMethods).map((method) => (
               <MethodButton key={method} method={method} />
@@ -195,7 +195,7 @@ export function AuthenticationEditorScreen(): VNode {
             </ConfirmModal>
           )}
         </div>
-        <div class="column is-half">
+        <div class="column">
           <p class="block">
             When recovering your wallet, you will be asked to verify your
             identity via the methods you configure here. The list of
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
index 82f06c34f..f1f2802ae 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
@@ -67,248 +67,3 @@ export const MismatchedChallengeId = createExample(TestedComponent, {
   selected_challenge_uuid: 'no-no-no'
 } as ReducerState);
 
-export const SmsChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'SMS to 555-5555',
-      type: 'sms',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const QuestionChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const EmailChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'Email to sebasjm@some-domain.com',
-      type: 'email',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const PostChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'Letter to address in postal code ABC123',
-      type: 'post',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-
-export const QuestionChallengeMessageFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Message,
-      message: 'Challenge should be solved'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeServerFailureFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.ServerFailure,
-      http_status: 500,
-      error_response: "Couldn't connect to mysql"
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeRedirectFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Redirect,
-      http_status: 302,
-      redirect_url: 'http://video.taler.net'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeMessageRateLimitExceededFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.RateLimitExceeded,
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeUnsupportedFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Unsupported,
-      http_status: 500,
-      unsupported_method: 'Question'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeTruthUnknownFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.TruthUnknown,
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeAuthIbanFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_state: RecoveryStates.ChallengeSelecting,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.AuthIban,
-      challenge_amount: "EUR:1",
-      credit_iban: "DE12345789000",
-      business_name: "Data Loss Incorporated",
-      wire_transfer_subject: "Anastasis 987654321",
-      answer_code: 987654321,
-      // Fields that follow are only for compatibility with C reducer,
-      // will be removed eventually,
-      details: {
-        business_name: "foo",
-        challenge_amount: "foo",
-        credit_iban: "foo",
-        wire_transfer_subject: "foo",
-      },
-      method: "iban",
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengePaymentFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Payment,
-      taler_pay_uri : "taler://pay/...",
-      provider : "https://localhost:8080/",
-      payment_secret : "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG"
-     }
-  }
-} as ReducerState);
-
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
index ec6c7735b..5e17c9aa1 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
@@ -1,4 +1,4 @@
-import { Fragment, h, VNode } from "preact";
+import { h, VNode } from "preact";
 import { AnastasisClientFrame } from ".";
 import {
   ChallengeFeedback,
@@ -6,7 +6,7 @@ import {
 } from "../../../../anastasis-core/lib";
 import { Notifications } from "../../components/Notifications";
 import { useAnastasisContext } from "../../context/anastasis";
-import { authMethods, AuthMethodSolveProps, KnownAuthMethods } from "./authMethod";
+import { authMethods, KnownAuthMethods } from "./authMethod";
 
 export function SolveOverviewFeedbackDisplay(props: { feedback?: ChallengeFeedback }): VNode {
   const { feedback } = props;
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 a325b3843..f0ec92d4d 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
@@ -54,3 +54,186 @@ export const WithoutFeedback = createExample(TestedComponent[type].solve, {
   id: 'uuid-1',
 });
 
+export const MessageFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Message,
+      message: 'Challenge should be solved'
+    }
+  }
+
+} as ReducerState);
+
+export const ServerFailureFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.ServerFailure,
+      http_status: 500,
+      error_response: "Couldn't connect to mysql"
+    }
+  }
+
+} as ReducerState);
+
+export const RedirectFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Redirect,
+      http_status: 302,
+      redirect_url: 'http://video.taler.net'
+    }
+  }
+
+} as ReducerState);
+
+export const MessageRateLimitExceededFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.RateLimitExceeded,
+    }
+  }
+
+} as ReducerState);
+
+export const UnsupportedFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Unsupported,
+      http_status: 500,
+      unsupported_method: 'Question'
+    }
+  }
+
+} as ReducerState);
+
+export const TruthUnknownFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.TruthUnknown,
+    }
+  }
+
+} as ReducerState);
+
+export const AuthIbanFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.AuthIban,
+      challenge_amount: "EUR:1",
+      credit_iban: "DE12345789000",
+      business_name: "Data Loss Incorporated",
+      wire_transfer_subject: "Anastasis 987654321",
+      answer_code: 987654321,
+      // Fields that follow are only for compatibility with C reducer,
+      // will be removed eventually,
+      details: {
+        business_name: "foo",
+        challenge_amount: "foo",
+        credit_iban: "foo",
+        wire_transfer_subject: "foo",
+      },
+      method: "iban",
+    }
+  }
+
+} as ReducerState);
+
+export const PaymentFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Payment,
+      taler_pay_uri : "taler://pay/...",
+      provider : "https://localhost:8080/",
+      payment_secret : "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG"
+     }
+  }
+} as ReducerState);
+