#30 KeyConfigurationElement (WIP)

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",

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."
+            ])
+          ])
+        ])
+ */

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 ...")
+  )
+);

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 })
+      ])
+    ])
+  ])
+);

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

webapp/src/encryption/index.js

@@ -1,6 +1,7 @@
 export default {
   state: {
-    keyAvailable: false
+    keyAvailable: false,
+    keyConfigurationAvailable: false
   },
   actions: {
     setKeyAvailable: () => (state) => ({ keyAvailable: true }),

webapp/src/index.scss

@@ -1,3 +1,5 @@
+$tabs-boxed-link-active-border-color: #fff;
+
 @import 'bulma/bulma';
 
 body {

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