From 6546df822d1cca2e26c8daccc5a6d824db6c5b46 Mon Sep 17 00:00:00 2001 From: Felix Neumann Date: Sun, 28 Jan 2018 19:09:34 +0100 Subject: [PATCH] #30 KeyConfigurationElement (WIP) --- webapp/package.json | 1 + .../src/encryption/KeyConfigurationElement.js | 55 +++++++++++++++++++ webapp/src/encryption/KeyGeneratingSection.js | 16 ------ webapp/src/encryption/KeyGenerationElement.js | 9 +++ webapp/src/encryption/KeyProviderSection.js | 18 ++++++ webapp/src/encryption/WithEncryptionKey.js | 6 +- webapp/src/encryption/index.js | 3 +- webapp/src/index.scss | 2 + webapp/src/util/bulma.js | 41 ++++++++++++++ 9 files changed, 131 insertions(+), 20 deletions(-) create mode 100644 webapp/src/encryption/KeyConfigurationElement.js delete mode 100644 webapp/src/encryption/KeyGeneratingSection.js create mode 100644 webapp/src/encryption/KeyGenerationElement.js create mode 100644 webapp/src/encryption/KeyProviderSection.js create mode 100644 webapp/src/util/bulma.js diff --git a/webapp/package.json b/webapp/package.json index 3aa12bd..61d4e3e 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@hyperapp/html": "^1.0.1", "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", diff --git a/webapp/src/encryption/KeyConfigurationElement.js b/webapp/src/encryption/KeyConfigurationElement.js new file mode 100644 index 0000000..2973c5b --- /dev/null +++ b/webapp/src/encryption/KeyConfigurationElement.js @@ -0,0 +1,55 @@ +import { ul, li, a, span, input, label } from "@hyperapp/html"; +import { card, cardContent, container, tabs, formField, formControl } from "util/bulma"; + +const keyGenerationModeName = "keyGenerationMode"; +const keyGenerationModeWithPassphraseValue = "withPassphrase"; +const keyGenerationModeOneTimeValue = "oneTime"; + +const keyGenerationPasswordName = "keyGenerationPassword"; + +export const KeyConfigurationElement = ({ state, actions }) => ( + tabs({ class: "is-boxed" }, [ + ul([ + li({ class: "is-active" }, [ + a([ + span([ + "Passphrase based-key" + ]) + ]) + ]), + li([ + a([ + span([ + "One-time key" + ]) + ]) + ]) + ]) + ]) +); + +/* +formField([ + formControl([ + label({ class: "radio" }, [ + input({ type: "radio", name: keyGenerationModeName, value: keyGenerationModeWithPassphraseValue }), + "I want to generate the key using a passphrase, so that I can receive responses later on." + ]) + ]) + ]), + formField([ + label({ class: "label" }, "Key Passphrase"), + formControl([ + input({ type: "password", name: keyGenerationPasswordName }) + ]) + ]) + + formField([ + formControl([ + label({ class: "radio" }, [ + input({ type: "radio", name: keyGenerationModeName, value: keyGenerationModeOneTimeValue }), + "I do only want to generate a one-time key." + ]) + ]) + ]) + */ \ No newline at end of file diff --git a/webapp/src/encryption/KeyGeneratingSection.js b/webapp/src/encryption/KeyGeneratingSection.js deleted file mode 100644 index 7d8a4ea..0000000 --- a/webapp/src/encryption/KeyGeneratingSection.js +++ /dev/null @@ -1,16 +0,0 @@ -import { h } from "hyperapp" -import { Spinner } from "app/Spinner"; - -export const KeyGeneratingSection = ({ logo }) => ( - h("section", {class:"hero is-success is-fullheight"}, [ - h("div", {class:"hero-body"}, [ - h("div", {class:"container has-text-centered"}, [ - h("h1", {class:"title"}, [ - logo - ]), - h(Spinner), - h("p", {}, "Your key is generated, please wait ...") - ]) - ]) - ]) -); \ No newline at end of file diff --git a/webapp/src/encryption/KeyGenerationElement.js b/webapp/src/encryption/KeyGenerationElement.js new file mode 100644 index 0000000..28a78cc --- /dev/null +++ b/webapp/src/encryption/KeyGenerationElement.js @@ -0,0 +1,9 @@ +import { h } from "hyperapp"; +import { Spinner } from "app/Spinner"; + +export const KeyGenerationElement = ({ state, actions }) => ( + h("div", {}, + h(Spinner), + h("p", {}, "Your key is generated, please wait ...") + ) +); diff --git a/webapp/src/encryption/KeyProviderSection.js b/webapp/src/encryption/KeyProviderSection.js new file mode 100644 index 0000000..c5f6690 --- /dev/null +++ b/webapp/src/encryption/KeyProviderSection.js @@ -0,0 +1,18 @@ +import { h } from "hyperapp"; +import {div, h1, section} from "@hyperapp/html"; +import {container} from "util/bulma"; +import {KeyGenerationElement} from "./KeyGenerationElement"; +import {KeyConfigurationElement} from "./KeyConfigurationElement"; + +export const KeyProviderSection = ({ logo, state, actions }) => ( + section({class:"hero is-success is-fullheight"}, [ + div({class:"hero-body"}, [ + container([ + h1({class:"title has-text-centered"}, [logo]), + state.keyConfigurationAvailable + ? h(KeyGenerationElement, { state: state, actions: actions }) + : h(KeyConfigurationElement, { state: state, actions: actions }) + ]) + ]) + ]) +); diff --git a/webapp/src/encryption/WithEncryptionKey.js b/webapp/src/encryption/WithEncryptionKey.js index e7bf503..5b1d264 100644 --- a/webapp/src/encryption/WithEncryptionKey.js +++ b/webapp/src/encryption/WithEncryptionKey.js @@ -1,8 +1,8 @@ import { h } from "hyperapp" -import {KeyGeneratingSection} from "./KeyGeneratingSection"; +import {KeyProviderSection} from "./KeyProviderSection"; export const WithEncryptionKey = ({actions, state, whenKeyAvailable, logo}) => ( h("div", { - oncreate() { actions.setKeyAvailableDelayed(3000); } // HINT: Mock key creation for now - }, state.keyAvailable ? whenKeyAvailable : h(KeyGeneratingSection, {logo: logo})) + oncreate() { /*actions.setKeyAvailableDelayed(3000);*/ } // HINT: Mock key creation for now + }, state.keyAvailable ? whenKeyAvailable : h(KeyProviderSection, {logo: logo, state: state, actions: actions})) ); diff --git a/webapp/src/encryption/index.js b/webapp/src/encryption/index.js index 664cbc0..1e267f9 100644 --- a/webapp/src/encryption/index.js +++ b/webapp/src/encryption/index.js @@ -1,6 +1,7 @@ export default { state: { - keyAvailable: false + keyAvailable: false, + keyConfigurationAvailable: false }, actions: { setKeyAvailable: () => (state) => ({ keyAvailable: true }), diff --git a/webapp/src/index.scss b/webapp/src/index.scss index 6e6b61d..bca3ed0 100644 --- a/webapp/src/index.scss +++ b/webapp/src/index.scss @@ -1,3 +1,5 @@ +$tabs-boxed-link-active-border-color: #fff; + @import 'bulma/bulma'; body { diff --git a/webapp/src/util/bulma.js b/webapp/src/util/bulma.js new file mode 100644 index 0000000..c6277be --- /dev/null +++ b/webapp/src/util/bulma.js @@ -0,0 +1,41 @@ +import { h } from "hyperapp"; + +/** + * Like Object.assign(), but concats props that are in both objects + * @param target + * @param source + * @return modified target object + */ +function mergeProps(target, source) { + if (source) { + for (const propName in source) { + if (source.hasOwnProperty(propName)) { + if (target[propName]) { + target[propName] = source[propName] + " " + target[propName] + } else { + target[propName] = source[propName] + } + } + } + } + return target; +} + +// based on https://github.com/hyperapp/html/blob/master/src/html.js#L3 +function vnode(name, additionalProps) { + return function (props, children) { + return typeof props === "object" && !Array.isArray(props) + ? h(name, mergeProps(props, additionalProps), children) + : h(name, additionalProps, props) + } +} + +export function container(props, children) { return vnode("div", { class: "container" })(props, children); } + +export function card(props, children) { return vnode("div", { class: "card" })(props, children); } +export function cardContent(props, children) { return vnode("div", { class: "card-content" })(props, children); } + +export function tabs(props, children) { return vnode("div", { class: "tabs" })(props, children); } + +export function formField(props, children) { return vnode("div", { class: "field" })(props, children); } +export function formControl(props, children) { return vnode("div", { class: "control" })(props, children); }