From bc806e7b51bc3f786ccde6efcc9111b8da8bb438 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 8 Nov 2021 13:12:44 -0300 Subject: remove aside transition to mobile --- .../src/components/menu/NavigationBar.tsx | 4 +- .../anastasis-webui/src/components/menu/index.tsx | 7 +- .../src/pages/home/AttributeEntryScreen.tsx | 15 +- .../src/pages/home/AuthenticationEditorScreen.tsx | 4 +- .../src/pages/home/SolveScreen.stories.tsx | 245 --------------------- .../anastasis-webui/src/pages/home/SolveScreen.tsx | 4 +- .../authMethod/AuthMethodQuestionSolve.stories.tsx | 183 +++++++++++++++ packages/anastasis-webui/src/scss/_aside.scss | 57 ----- 8 files changed, 200 insertions(+), 319 deletions(-) diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx index 02004c105..8d5a0473b 100644 --- a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx +++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx @@ -51,7 +51,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode { > Report a bug - + */}
diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx index 89add9603..fd4aab149 100644 --- a/packages/anastasis-webui/src/components/menu/index.tsx +++ b/packages/anastasis-webui/src/components/menu/index.tsx @@ -85,8 +85,8 @@ export function NotificationCard({ n.type === "ERROR" ? "message is-danger" : n.type === "WARN" - ? "message is-warning" - : "message is-info" + ? "message is-warning" + : "message is-info" } >
@@ -112,7 +112,8 @@ export function NotYetReadyAppMenu({ return (
setMobileOpen(false)} >
-
+
{fieldList}
-
+

This personal information will help to locate your secret.

This stays private

The information you have entered here:

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} >
-
+
{getKeys(authMethods).map((method) => ( @@ -195,7 +195,7 @@ export function AuthenticationEditorScreen(): VNode { )}
-
+

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); + diff --git a/packages/anastasis-webui/src/scss/_aside.scss b/packages/anastasis-webui/src/scss/_aside.scss index c9332b252..37297babf 100644 --- a/packages/anastasis-webui/src/scss/_aside.scss +++ b/packages/anastasis-webui/src/scss/_aside.scss @@ -19,7 +19,6 @@ * @author Sebastian Javier Marchano (sebasjm) */ -@include desktop { html { &.has-aside-left { &.has-aside-expanded { @@ -52,7 +51,6 @@ } } } -} aside.aside { display: none; @@ -129,58 +127,3 @@ aside.aside { } } -@include touch { - nav.navbar { - @include transition(margin-left); - } - aside.aside { - @include transition(left); - } - html.has-aside-mobile-transition { - body { - overflow-x: hidden; - } - body, - nav.navbar { - width: 100vw; - } - aside.aside { - width: $aside-mobile-width; - display: block; - left: $aside-mobile-width * -1; - - .image { - img { - max-width: $aside-mobile-width * 0.33; - } - } - - .menu-list { - li.is-active { - ul { - display: block; - } - background-color: $body-background-color; - } - li { - @include icon-with-update-mark($aside-icon-width); - margin-top: 8px; - margin-bottom: 8px; - } - a { - span.menu-item-label { - display: inline-block; - } - } - } - } - } - div.has-aside-mobile-expanded { - nav.navbar { - margin-left: $aside-mobile-width; - } - aside.aside { - left: 0; - } - } -} -- cgit v1.2.3