fix(webseal): paste with multilines (#131)

* fix(webseal): paste with multilines

* fix

* lock

* fix

* fix

* lock

* fix

* fix

* fix

* fix

* fix

.github/workflows/ci.yml

@@ -5,8 +5,7 @@ on:
 
 jobs:
   build:
-
-    name: ubuntu-latest 
+    name: ubuntu-latest
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/webseal.yml → .github/workflows/webseal-publish.yml

@@ -1,28 +1,18 @@
-# This is a basic workflow to help you get started with Actions
-
-name: webseal
+name: webseal publish
 
 on:
   push:
-    branches: [ master ]
-
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+    branches: [master]
 jobs:
-  # This workflow contains a single job called "build"
   build:
-    # The type of runner that the job will run on
     runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v2
         with:
           node-version: 16.x
           cache: yarn
-      # Runs a set of commands using the runners shell
+
       - name: Build
         run: |
           cd packages/webseal

package.json

@@ -14,10 +14,5 @@
     "test": "lerna run --parallel --stream test",
     "build": "lerna run --parallel --stream build",
     "test-coverage": "lerna run --parallel --stream test-coverage"
-  },
-  "resolutions": {
-    "jest": "27.5.1",
-    "@typescript-eslint/typescript-estree": "4.28.5",
-    "@babel/plugin-transform-modules-commonjs": "7.14.5"
   }
 }

packages/webseal/package.json

@@ -9,24 +9,25 @@
   "dependencies": {
     "@socialgouv/aes-gcm-rsa-oaep": "^1.1.2",
     "bootstrap": "4.6.1",
-    "dotenv": "^16.0.1",
+    "dotenv": "^16.0.3",
     "js-yaml": "^4.1.0",
+    "os-browserify": "^0.3.0",
     "query-string": "^7.0.1",
     "react": "17.0.2",
     "react-bootstrap": "1.6.4",
-    "react-copy-to-clipboard": "^5.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "17.0.2",
     "react-feather": "^2.0.9",
-    "react-hook-form": "7.12.2",
-    "react-scripts": "^4.0.3"
+    "react-hook-form": "7.43.9"
   },
   "devDependencies": {
-    "typescript": "4.3.5"
+    "jest-watch-typeahead": "0.6.5",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
     "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
-    "test": "exit 0",
+    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test --no-cache",
     "eject": "react-scripts eject"
   },
   "browserslist": [

packages/webseal/src/App.js

@@ -1,3 +1,4 @@
+import "os-browserify";
 import React, { useState } from "react";
 import { Card, Jumbotron, Container, Row, Col } from "react-bootstrap";
 import { getSealedSecret } from "@socialgouv/aes-gcm-rsa-oaep";

packages/webseal/src/Form.js

@@ -4,6 +4,8 @@ import { Row, Col, Form as BsForm, Alert } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useQueryParams } from "./useQueryParams";
 
+import { toEnv } from "./yamlToEnv";
+
 const RadioChoice = React.forwardRef(({ name, value, ...props }, ref) => (
   <BsForm.Check
     inline
@@ -33,38 +35,6 @@ const removeInvalidKeys = (keyValidator) => (object) =>
 
 const keepValidQueryParamKeys = removeInvalidKeys(isValidQueryParamsKey);
 
-const YAML_LIKE_LINE_RE = /^([\w\d-_]+):\s(.*)$/m; // variable: some-value
-
-// naive yaml style variable listing
-const isYamlVariables = (string) => {
-  const yamlRows = string
-    .trim()
-    .split("\n")
-    .filter((row) => row.trim().length)
-    .map((row) => row.match(YAML_LIKE_LINE_RE))
-    .filter(Boolean);
-  if (
-    yamlRows.length ===
-    string
-      .trim()
-      .split("\n")
-      .filter((row) => row.trim().length).length
-  ) {
-    // only when all lines are detected
-    return true;
-  }
-  return false;
-};
-
-const yamlToEnv = (string) =>
-  string
-    .trim()
-    .split("\n")
-    .map((row) => row.match(YAML_LIKE_LINE_RE))
-    .filter(Boolean)
-    .map(([_, key, value]) => `${key}=${value}`)
-    .join("\n");
-
 export const Form = ({ onSubmit, initialFormData }) => {
   const [queryParamsData, setQueryParamsData] = useQueryParams();
 
@@ -115,10 +85,8 @@ export const Form = ({ onSubmit, initialFormData }) => {
 
   const onValuePaste = (e) => {
     const value = e.clipboardData.getData("Text");
-    if (isYamlVariables(value)) {
-      e.preventDefault();
-      setValue("value", yamlToEnv(value));
-    }
+    e.preventDefault();
+    setValue("value", toEnv(value));
   };
 
   return (

packages/webseal/src/__snapshots__/yamlToEnv.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toEnv : invalid YAML 1`] = `"some random text"`;
+
+exports[`toEnv : invalid YAML 2`] = `
+"a=42
+b=43"
+`;
+
+exports[`toEnv : multiple inputs 1`] = `
+"SOME_TOKEN=\\"abcRE6jnuXVj234Y65zfzeUipcdO\\"
+SOME_SECRET=\\"-----BEGIN RSA PRIVATE KEY-----
+MIIJKAIBAAKCAlkznfzefekBG6MkFlzDVu/C8+c/XABs4HEQNsz61wdKTv9olitl
+QcJ6USzSsQNymwjgkWkkGH987z33As6c0VnqXZBeW2RZouctk4P3888cUBmC8AX+
+JvmbEZ3IBic1uXkTY8tyXtvdmzBJClTFMqDBr9bwq975Yosj35lmp+JEFLdOsZT/
+-----END RSA PRIVATE KEY-----\\"
+SOME_EMAIL=\\"[email protected], [email protected]\\"
+SOME_DB=\\"postgres://user:pass@host:port/db?sslmode=require\\""
+`;
+
+exports[`toEnv : valid YAML 1`] = `
+"A=\\"42\\"
+B=\\"43\\""
+`;
+
+exports[`toEnv : valid YAML multilines 1`] = `
+"A=\\"42\\"
+B=\\"424\\"
+C=\\"nlabalbalelkfnzemflkfenz
+zekfjbzkmfjbzemfjbzefmze\\""
+`;
+
+exports[`toEnv : valid YAML quoted 1`] = `"A=\\"blablabla\\""`;

packages/webseal/src/yamlToEnv.js

@@ -0,0 +1,16 @@
+import { load } from "js-yaml";
+
+export const toEnv = (string) => {
+  try {
+    const obj = load(string);
+    if (obj != null && obj.constructor.name === "Object") {
+      return Object.entries(obj)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join("\n");
+    }
+  } catch (e) {
+    console.error(e);
+    return string;
+  }
+  return string;
+};

packages/webseal/src/yamlToEnv.test.js

@@ -0,0 +1,54 @@
+import { toEnv } from "./yamlToEnv";
+
+const tests = [
+  {
+    title: "valid YAML",
+    input: "A: 42\nB: 43",
+    expected: true,
+  },
+  {
+    title: "valid YAML quoted",
+    input: 'A: "blablabla"',
+    expected: true,
+  },
+  {
+    title: "valid YAML multilines",
+    input: `A: 42
+B: 424
+C: |-
+  nlabalbalelkfnzemflkfenz
+  zekfjbzkmfjbzemfjbzefmze`,
+    expected: true,
+  },
+  {
+    title: "invalid YAML",
+    input: "some random text",
+    expected: false,
+  },
+  {
+    title: "invalid YAML",
+    input: "a=42\nb=43",
+    expected: false,
+  },
+  {
+    title: "multiple inputs",
+    input: `
+SOME_TOKEN: abcRE6jnuXVj234Y65zfzeUipcdO
+SOME_SECRET: |-
+  -----BEGIN RSA PRIVATE KEY-----
+  MIIJKAIBAAKCAlkznfzefekBG6MkFlzDVu/C8+c/XABs4HEQNsz61wdKTv9olitl
+  QcJ6USzSsQNymwjgkWkkGH987z33As6c0VnqXZBeW2RZouctk4P3888cUBmC8AX+
+  JvmbEZ3IBic1uXkTY8tyXtvdmzBJClTFMqDBr9bwq975Yosj35lmp+JEFLdOsZT/
+  -----END RSA PRIVATE KEY-----
+SOME_EMAIL: [email protected], [email protected]
+SOME_DB: postgres://user:pass@host:port/db?sslmode=require
+`,
+    expected: true,
+  },
+];
+
+tests.forEach((t) => {
+  it(`toEnv : ${t.title}`, () => {
+    expect(toEnv(t.input)).toMatchSnapshot();
+  });
+});