Merge branch 'master' into 172_download-xls

README.md

@@ -6,6 +6,12 @@ Formbuilder
 If you want to try it out, have a look [at the demo
 page](https://kinto.github.io/formbuilder/)
 
+Or deploy it on Scalingo in a single click on this button:
+
+[![Deploy to Scalingo](https://cdn.scalingo.com/deploy/button.svg)](https://my.scalingo.com/deploy)
+
+Scalingo offer a 1 month free trial then 7.20€ / month.
+
 # Installation
 
 To run the formbuilder locally, you can issue the following commands:

devServer.js

@@ -2,7 +2,10 @@ var path = require("path");
 var express = require("express");
 var webpack = require("webpack");
 
-var env = "dev", port = 8080;
+var port = process.env.PORT || 8080;
+var host = process.env.HOST || "localhost";
+
+var env = "dev";
 
 var webpackConfig = require("./webpack.config." + env);
 var compiler = webpack(webpackConfig);
@@ -23,11 +26,11 @@ app.get("/react-jsonschema-form.css", function(req, res) {
   res.sendFile(path.join(__dirname, "css", "react-jsonschema-form.css"));
 });
 
-app.listen(port, "localhost", function(err) {
+app.listen(port, host, function(err) {
   if (err) {
     console.log(err);
     return;
   }
 
-  console.log("Listening at http://localhost:" + port);
+  console.log("Listening at http://" + host + ":" + port);
 });

formbuilder/actions/server.js

@@ -1,4 +1,4 @@
-import KintoClient from "kinto-client";
+import KintoClient from "kinto-http";
 import btoa from "btoa";
 import uuid from "uuid";
 
@@ -113,6 +113,9 @@ export function publishForm(callback) {
       }
     })
     .catch((error) => {
+      if (error.response === undefined) {
+        throw error;
+      }
       // If the bucket doesn't exist, try to create it.
       if (error.response.status === 403 && retry === true) {
         return initializeBucket().then(() => {

formbuilder/app.js

@@ -6,8 +6,8 @@ const createHashHistory = require("history/lib/createHashHistory");
 
 import routes from "./routes";
 import configureStore from "./store/configureStore";
-import "./styles.css";
 import "./bootswatch.less";
+import "./styles.css";
 
 const store = configureStore({
   notifications: [],

formbuilder/components/FormCreated.js

@@ -1,28 +1,65 @@
-import React from "react";
+import React, { Component } from "react";
+import ClipboardButton from "react-clipboard.js";
 import {getFormID, getFormURL, getAdminURL} from "../utils";
 import URLDisplay from "./URLDisplay";
 
-export default function FormCreated(props) {
-  const adminToken = props.params.adminToken;
-  const formID = getFormID(adminToken);
+export default class FormCreated extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      copied: false
+    };
+  }
 
-  const userformURL = getFormURL(formID);
-  const adminURL = getAdminURL(adminToken);
+  onClipboardCopied() {
+    this.setState({copied: true});
+  }
 
-  return (
-    <form>
-      <h3>Here we go! Your form is now ready to be filled.</h3>
-      <div className="form-group">
-        <label>This is the <a href={userformURL}>link to give to the form fillers</a>:</label>
-        <p>They will be presented the form you just built.</p>
-        <URLDisplay url={userformURL} />
+  render() {
+    const adminToken = this.props.params.adminToken;
+    const formID = getFormID(adminToken);
 
-        <hr />
+    const userformURL = getFormURL(formID);
+    const adminURL = getAdminURL(adminToken);
 
-        <label>And this is the <a href={adminURL}>link to the administration dashboard</a>:</label>
-          <p>Keep this URL in a safe place and give it only to the administrators.</p>
+    const twitterText = `I've just created a form, it is at ${userformURL}!`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${twitterText}`;
+
+    const emailSubject = `Hey, I just created a new form`;
+    const emailBody = `Hi folks,
+
+I just created a new form and it's available at:
+
+    ${userformURL}
+
+Please, take some time to fill it,
+`;
+
+    const emailUrl = `mailto:?subject=${emailSubject}&body=${encodeURIComponent(emailBody)}`;
+    return (
+      <form>
+        <h3>Neat, your form is now ready!</h3>
+        <div className="form-group">
+          <ul className="list-inline">
+            <li><button className="btn btn-link"><i className="glyphicon glyphicon-send" />
+              <a href={emailUrl}> Send by email</a></button>
+            </li>
+            <li><button className="btn btn-link"><i className="glyphicon glyphicon-cloud" />
+              <a href={twitterUrl}> Tweet it</a></button>
+            </li>
+            <li>
+            <ClipboardButton
+              className="btn btn-link"
+              data-clipboard-text={userformURL}
+              onSuccess={this.onClipboardCopied.bind(this)}>
+              <i className="glyphicon glyphicon-copy" /> <a>{this.state.copied ? "Copied!" : "Copy to clipboard"}</a>
+            </ClipboardButton>
+            </li>
+          </ul>
+          <URLDisplay url={userformURL} />
           <URLDisplay url={adminURL} type="admin" />
-      </div>
-    </form>
-  );
+        </div>
+      </form>
+    );
+  }
 }

formbuilder/components/URLDisplay.js

@@ -6,12 +6,15 @@ export default function URLDisplay(props) {
   };
 
   const icon = props.type === "admin" ? "eye-close" : "bullhorn";
+  const label = props.type == "admin" ? "Admin link" : "Form link";
   const glyphicon = `glyphicon glyphicon-${icon}`;
 
   return (
-    <div className="input-group input-group-lg">
-      <span className="input-group-addon"><i className={glyphicon} /></span>
-      <input onClick={onClick} type="text" className="form-control" defaultValue={props.url} />
+    <div>
+      <div className="input-group input-group-lg">
+        <span className="input-group-addon">{label} <i className={glyphicon} /></span>
+        <input onClick={onClick} type="text" className="form-control" defaultValue={props.url} />
+      </div>
     </div>
   );
 }

formbuilder/routes.js

@@ -42,8 +42,7 @@ const BackAndCheck = (props) => {
     <div>
       <LinkToBuilder text="Continue editing" {...props} >
         <Link className="list-group-item" to="/builder/json">
-          <i className="glyphicon glyphicon-fullscreen" />
-          View as Json
+          <i className="glyphicon glyphicon-fullscreen" /> View as JSON
         </Link>
       </LinkToBuilder>
       <Check />

formbuilder/styles.css

@@ -35,9 +35,16 @@
   }
 }
 
+/* Override default navbar
+   Prevent first form element dropdown menu to get out of the viewport */
+.navbar {
+  min-height: 8em;
+}
+
 .check {
-  font-size: 10em;
-  color: green;
+  font-size: 13em;
+  color: #455;
+  margin-left: 50px;
 }
 
 

package.json

@@ -25,9 +25,10 @@
     "isomorphic-fetch": "^2.2.1",
     "json2csv": "^3.7.0",
     "json2xls": "^0.1.2",
-    "kinto-client": "^0.8.0",
+    "kinto-http": "^4.3.4",
     "react": "^15.3.2",
     "react-bootstrap": "^0.30.3",
+    "react-clipboard.js": "^0.2.5",
     "react-dom": "^15.3.2",
     "react-drag-and-drop": "^2.0.1",
     "react-jsonschema-form": "^0.40.0",
@@ -37,6 +38,7 @@
     "redux-thunk": "^1.0.3",
     "riek": "^1.0.2",
     "string": "^3.3.1",
+    "urlencode": "^1.1.0",
     "uuid": "^2.0.2"
   },
   "devDependencies": {

scalingo.json

@@ -0,0 +1,25 @@
+{
+  "name": "Formbuilder",
+  "description": "Create your own forms and surveys, get your data back.",
+  "repository": "https://github.com/Kinto/formbuilder",
+  "website": "https://github.com/Kinto/formbuilder#readme",
+  "logo": "https://avatars0.githubusercontent.com/u/13413813",
+  "env": {
+    "PROJECT_NAME": {
+      "description": "Name of the project. Defaults to \"formbuilder\".",
+      "value": "$APP"
+    },
+    "SERVER_URL": {
+      "description": "URL of the Kinto server. It's default value depends on the environment that's being used (development, production, etc.)",
+      "value": ""
+    },
+    "HOST": {
+      "description": "Listens connection on the specified host. Defaults to \"localhost\".",
+      "value": "0.0.0.0"
+    },
+    "NPM_CONFIG_PRODUCTION": {
+      "description": "Install dev dependencies",
+      "value": "false"
+    }
+  }
+}

webpack.config.github.js

@@ -13,7 +13,7 @@ module.exports = {
   output: {
     path: path.join(__dirname, "build"),
     filename: "bundle.js",
-    publicPath: "/"
+    publicPath: "/formbuilder/"
   },
   plugins: [
     new webpack.IgnorePlugin(/^(buffertools)$/), // unwanted "deeper" dependency