taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

remove aside transition to mobile

Browse Source
This commit is contained in:
Sebastian 2021-11-08 13:12:44 -03:00
parent 4dd5b75cfa
commit bc806e7b51
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
8 changed files with 200 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/anastasis-webui/src/components/menu/NavigationBar.tsx
View File

@ -51,7 +51,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode {
>
Report a bug
</a>
<a
{/* <a
role="button"
class="navbar-burger"
aria-label="menu"
@ -64,7 +64,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode {
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</a> */}
</div>
<div class="navbar-menu ">

7
packages/anastasis-webui/src/components/menu/index.tsx
View File

@ -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"
}
>
<div class="message-header">
@ -112,7 +112,8 @@ export function NotYetReadyAppMenu({
return (
<div
class={mobileOpen ? "has-aside-mobile-expanded" : ""}
class="has-aside-mobile-expanded"
// class={mobileOpen ? "has-aside-mobile-expanded" : ""}
onClick={() => setMobileOpen(false)}
>
<NavigationBar

15
packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
View File

@ -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>

4
packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
View File

@ -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

245
packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
View File

@ -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);

4
packages/anastasis-webui/src/pages/home/SolveScreen.tsx
View File

@ -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;

183
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
View File

@ -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);

57
packages/anastasis-webui/src/scss/_aside.scss
View File

@ -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;
}
}
}