DEV Community: Jeremy

Building a simple Colour Picker in React from scratch

Jeremy — Thu, 23 Dec 2021 11:08:01 +0000

While working on reducing FormBlob's dependencies and browser package size, I wrote a lightweight version of a colour picker to replace react-color. I've published it as the open source library react-mui-color, though that has a dependency on Material UI.

This tutorial takes you through how to create a colour picker from scratch with no dependencies, similar to what you see below. The full code can be found here. Don't be daunted if you're not familiar with Typescript, what you'd find here is absolutely understandable if you only know javascript.

Key Features

The colour picker we're about to build will have two different selection options:

a predefined colour palette and
a continuous colour map

Users may set colours using the selectors or key in colours in hex or rgb using inputs.

Planning the Component

Based on the functional requirements, our colour picker will need 4 props:

color - the current color selected
colors - the array of predefined colours for the colour palette
onChange - the handler when a new colour is selected
variant - the type of selector, predefined or free

// ColorPicker.tsx

export enum ColorPickerVariant {
  Predefined = "predefined",
  Free = "free"
}

interface ColorPickerProps {
  color: string;
  colors: Array<string>;
  onChange(color: string): void;
  variant: ColorPickerVariant;
}

export const ColorPicker = (props: ColorPickerProps) => {
  const { color, colors, onChange, variant } = props;

  ...
}

We should also have a component for each selector to make the overall ColorPicker component more manageable and potentially more extensible if we'd like to add more selectors. Our predefined selector is fairly straightforward - we need the color, colors and onChange props defined above to populate the component and to handle any colour selections made by the user.

// PredefinedSelector.tsx

interface PredefinedSelectorProps {
  color: string;
  colors: Array<string>;
  onSelect(color: string): void;
}

export const PredefinedSelector = (props: PredefinedSelectorProps) => {
  const { color, colors, onSelect } = props;

  ...
}

Our colour map selector (we'll call it the Free selector from now on) is more challenging. We need to find a way to render the colour map and convert selections on the map into a colour representation that CSS understands. Fortunately the HSV colour model maps well to a 3D linear gradient, but more on that later. For now, we know that we have two different maps - a larger saturation map and a linear hue map and we need to handle the click event for each map.

// FreeSelector.tsx

interface FreeSelectorProps {
  color: string; // we'll need to convert this to HSV
  satCoords: Array<number>; // [x, y] coordinates for saturation map
  hueCoords: number; // x coordinates for hue map
  onSaturationChange: MouseEventHandler;
  onHueChange: MouseEventHandler;
}

export const FreeSelector = (props: FreeSelectorProps) => {
  const {
    color,
    satCoords,
    hueCoords,
    onSaturationChange,
    onHueChange
  } = props;

  ...
}

Setting Up The View

At this point, we have three components:

ColorPicker - the overall component that we will use
PredefinedSelector - the colour palette selector
FreeSelector - the colour map selector

We proceed to set up the view for each of the components, beginning with the selectors. Let's get the most difficult component out of the way first - the FreeSelector.

As I mentioned earlier, the HSV colour model maps well to a 3D linear gradient. HSV (hue, saturation, value) are each a numerical representation that we can be split into a one-dimensional hue map and a two-dimensional saturation (x) and value (y) map. In order to render these maps, we use the linear-gradient CSS function. Let's see some code.

// FreeSelector.css

...

.cp-saturation {
  width: 100%;
  height: 150px;
  /* This provides a smooth representation 
     of brightness, which we overlay with an 
     inline background-color for saturation */
  background-image: linear-gradient(transparent, black),
    linear-gradient(to right, white, transparent);
  border-radius: 4px;
  /* This allows us to position an absolute
     indicator over the map */
  position: relative;
  cursor: crosshair;
}

.cp-hue {
  width: 100%;
  height: 12px;
  /* This covers the full range of hues */
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  border-radius: 999px;
  /* This allows us to position an absolute
     indicator over the map */
  position: relative;
  cursor: crosshair;
}

...

// FreeSelector.tsx

import "./FreeSelector.css";

...

export const FreeSelector = (props: FreeSelectorProps) => {
  ...

  return (
    <div className="cp-free-root">
      <div
        className="cp-saturation"
        style={{
          backgroundColor: `hsl(${parsedColor.hsv.h}, 100%, 50%)`
        }}
        onClick={onSaturationChange}
      >
        // TODO: create an indicator to show current x,y position
      </div>
      <div className="cp-hue" onClick={onHueChange}>
        // TODO: create an indicator to show current hue
      </div>
    </div>
  );
};

In the code above, you might be wondering where parsedColor.hsv.h comes from. This is the hue representation for the HSV colour model. As noted earlier, we need to convert the color string into the HSV representation. We will cover that later on. For now, we finish up the FreeSelector view. Here is the complete code for the FreeSelector.

// FreeSelector.css

.cp-free-root {
  display: grid;
  grid-gap: 8px;
  margin-bottom: 16px;
  max-width: 100%;
  width: 400px;
}

.cp-saturation {
  width: 100%;
  height: 150px;
  background-image: linear-gradient(transparent, black),
    linear-gradient(to right, white, transparent);
  border-radius: 4px;
  position: relative;
  cursor: crosshair;
}

.cp-saturation-indicator {
  width: 15px;
  height: 15px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translate(-7.5px, -7.5px);
  position: absolute;
}

.cp-hue {
  width: 100%;
  height: 12px;
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  border-radius: 999px;
  position: relative;
  cursor: crosshair;
}

.cp-hue-indicator {
  width: 15px;
  height: 15px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translate(-7.5px, -2px);
  position: absolute;
}

// FreeSelector.tsx

import React, { MouseEventHandler } from "react";
import { Color } from "../../Interfaces/Color";
import "./FreeSelector.css";

interface FreeSelectorProps {
  parsedColor: Color;
  satCoords: Array<number>;
  hueCoords: number;
  onSaturationChange: MouseEventHandler;
  onHueChange: MouseEventHandler;
}

export const FreeSelector = (props: FreeSelectorProps) => {
  const {
    parsedColor,
    satCoords,
    hueCoords,
    onSaturationChange,
    onHueChange
  } = props;

  return (
    <div className="cp-free-root">
      <div
        className="cp-saturation"
        style={{
          backgroundColor: `hsl(${parsedColor.hsv.h}, 100%, 50%)`
        }}
        onClick={onSaturationChange}
      >
        <div
          className="cp-saturation-indicator"
          style={{
            backgroundColor: parsedColor.hex,
            left: (satCoords?.[0] ?? 0) + "%",
            top: (satCoords?.[1] ?? 0) + "%"
          }}
        />
      </div>
      <div className="cp-hue" onClick={onHueChange}>
        <div
          className="cp-hue-indicator"
          style={{
            backgroundColor: parsedColor.hex,
            left: (hueCoords ?? 0) + "%"
          }}
        />
      </div>
    </div>
  );
};

We finally use the satCoords and hueCoords. These are used to position the indicators for the saturation map and hue map respectively. With the CSS properties position, left, and top, we can position the indicator accurately. Notice that we also use the transform property to adjust for the width and height of the indicator.

Congrats! The most difficult component is done!

Now, the PredefinedSelector looks simple enough. All we need is a palette of preview colours. Here is the complete code for the PredefinedSelector.

// PredefinedSelector.css

.cp-predefined-root {
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cp-predefined-root::-webkit-scrollbar {
  display: none;
}

.cp-color-button {
  width: 37px;
  padding: 5px;
  border-radius: 4px;
  background-color: inherit;
}

.cp-preview-color {
  /* Shadow so we can see white against white */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

// PredefinedSelector.tsx

import React from "react";
import { Color } from "../../Interfaces/Color";
import "./PredefinedSelector.css";

const predefinedRows = 3;

interface PredefinedSelectorProps {
  parsedColor: Color;
  colors: Array<string>;
  onSelect(color: string): void;
}

export const PredefinedSelector = (props: PredefinedSelectorProps) => {
  const { parsedColor, colors, onSelect } = props;

  return (
    <div
      className="cp-predefined-root"
      style={{
        height: 2 + 35 * predefinedRows + "px",
        width: 16 + 35 * Math.ceil(colors.length / predefinedRows) + "px"
      }}
    >
      {colors.map((color) => (
        <button
          className="cp-color-button"
          key={color}
          onClick={(event) => onSelect(color)}
          style={{
            border: color === parsedColor?.hex ? "1px solid #000000" : "none"
          }}
        >
          <div
            className="cp-preview-color"
            style={{
              background: color
            }}
          />
        </button>
      ))}
    </div>
  );
};

Here, we set the height and width of the root container based on the number of rows we would like and the total number of colours in our palette. We then loop through the colors array to populate the palette with our predefined colours.

Next, we move on to the main ColorPicker component. Now that we're done with the selectors, the only thing new are the inputs. Let's add the views for them.

// ColorPicker.css

.cp-container {
  padding: 12px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: fit-content;
}

.cp-container::-webkit-scrollbar {
  display: none;
}

.cp-input-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 2px;
}

.cp-input-group {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 8px;
  align-items: center;
}

.cp-color-preview {
  /* Shadow so we can see white against white */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

input {
  padding: 4px 6px;
}

label,
input {
  display: block;
}

.cp-input-label {
  font-size: 12px;
}

.cp-hex-input {
  width: 60px;
}

.cp-rgb-input {
  width: 30px;
}

// ColorPicker.tsx

export const ColorPicker = (props: ColorPickerProps) => {
  ...

  return (
    <div className="cp-container">
      // TODO: add selectors

      <div className="cp-input-container">
        <div className="cp-input-group">
          <div
            className="cp-color-preview"
            style={{
              background: color
            }}
          />
          <div>
            <label className="cp-input-label" htmlFor="cp-input-hex">
              Hex
            </label>
            <input
              id="cp-input-hex"
              className="cp-hex-input"
              placeholder="Hex"
              value={parsedColor?.hex}
              onChange={handleHexChange}
            />
          </div>
        </div>

        <div className="cp-input-group">
          <div>
            <label className="cp-input-label" htmlFor="cp-input-r">
              R
            </label>
            <input
              id="cp-input-r"
              className="cp-rgb-input"
              placeholder="R"
              value={parsedColor.rgb.r}
              onChange={(event) => handleRgbChange("r", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
          <div>
            <label className="cp-input-label" htmlFor="cp-input-g">
              G
            </label>
            <input
              id="cp-input-g"
              className="cp-rgb-input"
              placeholder="G"
              value={parsedColor.rgb.g}
              onChange={(event) => handleRgbChange("g", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
          <div>
            <label className="cp-input-label" htmlFor="cp-input-b">
              B
            </label>
            <input
              id="cp-input-b"
              className="cp-rgb-input"
              placeholder="B"
              value={parsedColor.rgb.b}
              onChange={(event) => handleRgbChange("b", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

Handling Color Model and Conversions

Until now, we have not added any logic to handle events in the view. Before we can do that, we'll need to set up the Color model and the conversion methods between the various colour representations. There are three colour representations that are important for our picker: Hex, RGB and HSV. We thus define the Color model:

// Color.ts

export interface Color {
  hex: string;
  rgb: ColorRGB;
  hsv: ColorHSV;
}

export interface ColorRGB {
  r: number;
  g: number;
  b: number;
}

export interface ColorHSV {
  h: number;
  s: number;
  v: number;
}

With a bit of Googling, we can find pre-existing methods for colour conversion. Here are the methods I used.

// Converters.ts

import { ColorHSV, ColorRGB } from "../Interfaces/Color";

export function rgbToHex(color: ColorRGB): string {
  var { r, g, b } = color;
  var hexR = r.toString(16);
  var hexG = g.toString(16);
  var hexB = b.toString(16);

  if (hexR.length === 1) hexR = "0" + r;
  if (hexG.length === 1) hexG = "0" + g;
  if (hexB.length === 1) hexB = "0" + b;

  return "#" + hexR + hexG + hexB;
}

export function hexToRgb(color: string): ColorRGB {
  var r = 0;
  var g = 0;
  var b = 0;

  // 3 digits
  if (color.length === 4) {
    r = Number("0x" + color[1] + color[1]);
    g = Number("0x" + color[2] + color[2]);
    b = Number("0x" + color[3] + color[3]);

    // 6 digits
  } else if (color.length === 7) {
    r = Number("0x" + color[1] + color[2]);
    g = Number("0x" + color[3] + color[4]);
    b = Number("0x" + color[5] + color[6]);
  }

  return {
    r,
    g,
    b
  };
}

export function rgbToHsv(color: ColorRGB): ColorHSV {
  var { r, g, b } = color;
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const d = max - Math.min(r, g, b);

  const h = d
    ? (max === r
        ? (g - b) / d + (g < b ? 6 : 0)
        : max === g
        ? 2 + (b - r) / d
        : 4 + (r - g) / d) * 60
    : 0;
  const s = max ? (d / max) * 100 : 0;
  const v = max * 100;

  return { h, s, v };
}

export function hsvToRgb(color: ColorHSV): ColorRGB {
  var { h, s, v } = color;
  s /= 100;
  v /= 100;

  const i = ~~(h / 60);
  const f = h / 60 - i;
  const p = v * (1 - s);
  const q = v * (1 - s * f);
  const t = v * (1 - s * (1 - f));
  const index = i % 6;

  const r = Math.round([v, q, p, p, t, v][index] * 255);
  const g = Math.round([t, v, v, q, p, p][index] * 255);
  const b = Math.round([p, p, t, v, v, q][index] * 255);

  return {
    r,
    g,
    b
  };
}

Remember the parsedColor object we were accessing earlier? We also need a method to convert a string representation of a colour into our Color model.

// ColorUtils.ts

import { Color, ColorRGB } from "../Interfaces/Color";
import { hexToRgb, rgbToHex, rgbToHsv } from "./Converters";

export function getRgb(color: string): ColorRGB {
  const matches = /rgb\((\d+),\s?(\d+),\s?(\d+)\)/i.exec(color);
  const r = Number(matches?.[1] ?? 0);
  const g = Number(matches?.[2] ?? 0);
  const b = Number(matches?.[3] ?? 0);

  return {
    r,
    g,
    b
  };
}

export function parseColor(color: string): Color {
  var hex = "";
  var rgb = {
    r: 0,
    g: 0,
    b: 0
  };
  var hsv = {
    h: 0,
    s: 0,
    v: 0
  };

  if (color.slice(0, 1) === "#") {
    hex = color;
    rgb = hexToRgb(hex);
    hsv = rgbToHsv(rgb);
  } else if (color.slice(0, 3) === "rgb") {
    rgb = getRgb(color);
    hex = rgbToHex(rgb);
    hsv = rgbToHsv(rgb);
  }

  return {
    hex,
    rgb,
    hsv
  };
}

export function getSaturationCoordinates(color: Color): [number, number] {
  const { s, v } = rgbToHsv(color.rgb);

  const x = s;
  const y = 100 - v;

  return [x, y];
}

export function getHueCoordinates(color: Color): number {
  const { h } = color.hsv;

  const x = (h / 360) * 100;

  return x;
}

export function clamp(number: number, min: number, max: number): number {
  if (!max) {
    return Math.max(number, min) === min ? number : min;
  } else if (Math.min(number, min) === number) {
    return min;
  } else if (Math.max(number, max) === number) {
    return max;
  }
  return number;
}

In the utils file above, I also included the getSaturationCoordinates and getHueCoordinates methods to position our indicators. If you notice, the HSV model maps very nicely into our linear gradients since s and v are percentages. Hue maps to a 360 degree circle, so we need to normalize the value for our linear scale.

Adding Handlers and Logic

Finally, we are ready to add our handlers, which is the last piece of the puzzle. At this point, the only incomplete component is the overall ColorPicker. So let's go back to that.

// ColorPicker.tsx

export const ColorPicker = (props: ColorPickerProps) => {
  const { color, colors, onChange, variant } = props;

  const parsedColor = useMemo(() => parseColor(color), [color]);
  const satCoords = useMemo(() => getSaturationCoordinates(parsedColor), [
    parsedColor
  ]);
  const hueCoords = useMemo(() => getHueCoordinates(parsedColor), [
    parsedColor
  ]);

  const handleHexChange = useCallback(
    (event) => {
      var val = event.target.value;
      if (val?.slice(0, 1) !== "#") {
        val = "#" + val;
      }
      onChange(val);
    },
    [onChange]
  );

  const handleRgbChange = useCallback(
    (component, value) => {
      const { r, g, b } = parsedColor.rgb;

      switch (component) {
        case "r":
          onChange(rgbToHex({ r: value ?? 0, g, b }));
          return;
        case "g":
          onChange(rgbToHex({ r, g: value ?? 0, b }));
          return;
        case "b":
          onChange(rgbToHex({ r, g, b: value ?? 0 }));
          return;
        default:
          return;
      }
    },
    [parsedColor, onChange]
  );

  const handleSaturationChange = useCallback(
    (event) => {
      const { width, height, left, top } = event.target.getBoundingClientRect();

      const x = clamp(event.clientX - left, 0, width);
      const y = clamp(event.clientY - top, 0, height);

      const s = (x / width) * 100;
      const v = 100 - (y / height) * 100;

      const rgb = hsvToRgb({ h: parsedColor?.hsv.h, s, v });

      onChange(rgbToHex(rgb));
    },
    [parsedColor, onChange]
  );

  const handleHueChange = useCallback(
    (event) => {
      const { width, left } = event.target.getBoundingClientRect();
      const x = clamp(event.clientX - left, 0, width);
      const h = Math.round((x / width) * 360);

      const hsv = { h, s: parsedColor?.hsv.s, v: parsedColor?.hsv.v };
      const rgb = hsvToRgb(hsv);

      onChange(rgbToHex(rgb));
    },
    [parsedColor, onChange]
  );

  ...
};

We start off by parsing the color string received as prop. Once we get the parsedColor, we can retrieve the satCoords and hueCoords using our getters. We then define the handlers for the change events in our selectors - handleHexChange, handleRgbChange, handleSaturationChange and handleHueChange. handleSaturationChange and handleHueChange are just the inverse functions of getSaturationCoordinates and getHueCoordinates.

And.. we're done with the colour picker! Here is the complete code for the ColorPicker.

// ColorPicker.tsx

import React, { useCallback, useMemo } from "react";
import {
  clamp,
  DEFAULT_COLOR,
  DEFAULT_COLORS,
  getHueCoordinates,
  getSaturationCoordinates,
  hsvToRgb,
  parseColor,
  rgbToHex
} from "../Utils";
import "./ColorPicker.css";
import { FreeSelector, PredefinedSelector } from "./Options";

export enum ColorPickerVariant {
  Predefined = "predefined",
  Free = "free"
}

interface ColorPickerProps {
  color: string;
  colors: Array<string>;
  onChange(color: string): void;
  variant: ColorPickerVariant;
}

export const ColorPicker = (props: ColorPickerProps) => {
  const { color, colors, onChange, variant } = props;

  const parsedColor = useMemo(() => parseColor(color), [color]);
  const satCoords = useMemo(() => getSaturationCoordinates(parsedColor), [
    parsedColor
  ]);
  const hueCoords = useMemo(() => getHueCoordinates(parsedColor), [
    parsedColor
  ]);

  const handleHexChange = useCallback(
    (event) => {
      var val = event.target.value;
      if (val?.slice(0, 1) !== "#") {
        val = "#" + val;
      }
      onChange(val);
    },
    [onChange]
  );

  const handleRgbChange = useCallback(
    (component, value) => {
      const { r, g, b } = parsedColor.rgb;

      switch (component) {
        case "r":
          onChange(rgbToHex({ r: value ?? 0, g, b }));
          return;
        case "g":
          onChange(rgbToHex({ r, g: value ?? 0, b }));
          return;
        case "b":
          onChange(rgbToHex({ r, g, b: value ?? 0 }));
          return;
        default:
          return;
      }
    },
    [parsedColor, onChange]
  );

  const handleSaturationChange = useCallback(
    (event) => {
      const { width, height, left, top } = event.target.getBoundingClientRect();

      const x = clamp(event.clientX - left, 0, width);
      const y = clamp(event.clientY - top, 0, height);

      const s = (x / width) * 100;
      const v = 100 - (y / height) * 100;

      const rgb = hsvToRgb({ h: parsedColor?.hsv.h, s, v });

      onChange(rgbToHex(rgb));
    },
    [parsedColor, onChange]
  );

  const handleHueChange = useCallback(
    (event) => {
      const { width, left } = event.target.getBoundingClientRect();
      const x = clamp(event.clientX - left, 0, width);
      const h = Math.round((x / width) * 360);

      const hsv = { h, s: parsedColor?.hsv.s, v: parsedColor?.hsv.v };
      const rgb = hsvToRgb(hsv);

      onChange(rgbToHex(rgb));
    },
    [parsedColor, onChange]
  );

  return (
    <div className="cp-container">
      {variant === ColorPickerVariant.Predefined ? (
        <PredefinedSelector
          colors={colors}
          parsedColor={parsedColor}
          onSelect={onChange}
        />
      ) : (
        <FreeSelector
          parsedColor={parsedColor}
          satCoords={satCoords}
          hueCoords={hueCoords}
          onSaturationChange={handleSaturationChange}
          onHueChange={handleHueChange}
        />
      )}

      <div className="cp-input-container">
        <div className="cp-input-group">
          <div
            className="cp-color-preview"
            style={{
              background: color
            }}
          />
          <div>
            <label className="cp-input-label" htmlFor="cp-input-hex">
              Hex
            </label>
            <input
              id="cp-input-hex"
              className="cp-hex-input"
              placeholder="Hex"
              value={parsedColor?.hex}
              onChange={handleHexChange}
            />
          </div>
        </div>

        <div className="cp-input-group">
          <div>
            <label className="cp-input-label" htmlFor="cp-input-r">
              R
            </label>
            <input
              id="cp-input-r"
              className="cp-rgb-input"
              placeholder="R"
              value={parsedColor.rgb.r}
              onChange={(event) => handleRgbChange("r", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
          <div>
            <label className="cp-input-label" htmlFor="cp-input-g">
              G
            </label>
            <input
              id="cp-input-g"
              className="cp-rgb-input"
              placeholder="G"
              value={parsedColor.rgb.g}
              onChange={(event) => handleRgbChange("g", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
          <div>
            <label className="cp-input-label" htmlFor="cp-input-b">
              B
            </label>
            <input
              id="cp-input-b"
              className="cp-rgb-input"
              placeholder="B"
              value={parsedColor.rgb.b}
              onChange={(event) => handleRgbChange("b", event.target.value)}
              inputMode="numeric"
              pattern="[0-9]*"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

ColorPicker.defaultProps = {
  color: DEFAULT_COLOR,
  colors: DEFAULT_COLORS,
  onChange: (color: string) => {},
  variant: ColorPickerVariant.Predefined
};

Concluding Remarks

Again, the complete code can be found here. This is an implementation with no dependencies beyond React, but you can always use your favourite UI libraries to replace the views. I would also like to credit react-color-palette and this css-tricks article as I used them as reference for the colour map implementation and colour conversions methods.

5 things I struggled with when learning React with a Vue background

Jeremy — Tue, 23 Nov 2021 07:49:41 +0000

Initial state

Having worked with Vue for the majority of the past 3 years, I got very used to the Vue syntax and libraries and became very comfortable with the framework. Vue was easy to pick up mainly due to two reasons:

A clearly segmented component structure - HTML template, JS and CSS.
Intuitively named options within the JS segment - components, props, data, computed, methods, watch and the lifecycle hooks.

Arguably, anyone with a HTML/CSS background studying a well-written Vue component could make a good guess of what it does and how it works without referring to documentation. A relative beginner in programming would also find the intuitively named options very helpful.

Mutation

Fast forward to a year ago, my knowledge of React was limited to the few articles I read comparing Vue and React and which to use (there are many and mostly not immediately appreciable if you have never used both) and some dabbling with creating simple components in React following the getting started guide. It all seemed fairly straightforward. I mean, how different can the two frameworks be, right?

Then came the opportunity to really pick React up when I moved jobs. And I was stupefied.

This article aims to help others (with and without a Vue background) understand React functional components and to get up to speed with React concepts more quickly. It does not attempt to compare Vue and React as competing frameworks and its intention is not to rank one over the other.

The 5 things I struggled with

1. Code structure

In Vue, there are three segments to every component:

<template> (HTML/JSX),
<script> (JS structured within intuitively named options),
<style> (CSS).

It is very similar to a typical HTML page's layout, albeit with style in the "footer" instead of "head".

In React functional components, the main underlying key is that component code runs sequentially from top to bottom, like a typical JS script, and returns a value, usually HTML/JSX. Coming from Vue, the structure looked like:

One big mess (JS - unstructured interspersion of hooks and methods),
return (HTML/JSX)

At first impressions, without a fixed structure for the JS segment, trying to understand code written by others was not easy, especially if there were no comments. It did not help that the built-in hooks are named so technically (useEffect, useMemo, useCallback) and that it is impossible to understand what the second argument in the aforementioned hooks was for without referring to documentation. So while these hooks are more flexible and hence reusable than their Vue counterparts (watch - useEffect, computed - useMemo and useCallback, mounted - hooks with an empty second argument), they are also much less interpretable.

That said, as I started writing my own components, I began to realise that while there was no fixed structure, there were certain rules (such as the Rules of Hooks) that made my code conform to a non-explicitly defined structure. In all my components, I tended to define all states used within the component and place all setup code just below. Following that, I found myself structuring the code in blocks of logical concerns, very similarly to how I structured my methods option in Vue.

I then realised that what looked to be one big mess to my uninitiated self, actually had a general structure across projects - I just needed to understand the functionality and use cases of hooks more intimately before I could decipher the React component structure. And this is not a steep learning curve if you already understand basic computing concepts (side effects, memoization, callbacks).

For those coming from Vue, here's a quick glossary to help understand how certain hooks translate to Vue concepts.

React Hook	Vue option
`useState`	`data`
`useEffect(, [x])`	`watch`
`useCallback(, [x])`	`computed`
`useMemo(, [x])`	`computed`
`useEffect(, [])`, `useCallback(, [])`, `useMemo(, [])`	`mounted`
return function called within `useEffect(... return function(), [])`	`unmounted`

And for those who don't have a background in Vue, here's a summary of what I learned about code structure in React functional components.

Some methods, constants and styles can be defined outside the scope of a component (typically at the top of a file). These are optimisations so that said objects are not re-created on every render.
Components usually begin with retrieving props, defining states and importing reusable methods/helpers. This is very similar to how JS files are structured.
Setup methods usually come next: setting up states on mounting, computing derived values, fetching data.
All other logic used within the component - hopefully organised by logical concerns.
If you're wondering where CSS comes in, React doesn't dictate how CSS is used. You are free to import CSS files, define inline styles or use a CSS-in-JS library.

2. Lifecycle methods

One of Vue's key concepts that I truly appreciate is the clear definition and documentation of the lifecycle of a component. React does attempt to document this as well, but not to the extent that Vue does, and the API only works for class components. With React's shift towards functional components, lifecycle methods are no longer as easily accessible.

When I started out with React, one of the first concepts I wanted to understand was the React component lifecycle. Having got used to Vue's lifecycle hooks, I was looking for something similar in React functional components, but there is no documentation for this within the State and Lifecycle section of the official React guides. And even for class components, React does not make the entire lifecycle accessible like Vue does.

However, in Vue, the lifecycle methods I tend to use the most are mounted and unmounted. So, I was really looking for an equivalent in React functional components. On further Googling, I found out that the useEffect hook could function the same way that the mounted/unmounted hooks do in Vue. While not as intuitive, it was merely a matter of adapting to the React API. At least I had a solution for my setup and teardown methods.

In short, what I learned here was that in React functional components, the setup phase (usually created/mounted in Vue) can be written with useEffect(, []), while the teardown phase (unmounted in Vue) can be written with useEffect(... return function(), []). While other lifecycle methods cannot be accessed in React, they are probably not required frequently enough to be a big bother.

3. Two-way binding vs one-way binding

In Vue, the v-model directive allows for two-way binding for input elements. From a purely lazy (perhaps also maintainability) standpoint, this saves on a lot of boilerplate code. While I don't want to get into the debate about whether two-way binding or one-way binding is better, it was a definite annoyance for me to have to write what seemed like boilerplate methods to update state when switching to React. This is compounded by the fact that doing React right meant not mutating states but creating copies and re-setting states. This meant that the code for forms in React was much longer than the equivalent in Vue.

For those without context, one of React's core facets is one-way data binding, which in short means that data flows only in one direction. This allows React to more effectively determine whether a state has changed and what caused the change.

In complex Vue components, you would occasionally run into situations where the DOM does not update despite an observable being updated. Rare, but it happens and is annoying to debug. However, one-way data binding in React eliminates such issues because you trigger a DOM update manually every time you call a setState. The downside to this is that you have to write the code to trigger the re-render (setState), something you don't have to do when using Vue.

In truth, this was largely just an annoyance when I first started out with React. I have since built reusable components and I no longer write boilerplate for forms any more. In fact, with FormBlob, I can create any form I need in 2 minutes.

4. Scoped Styling (CSS)

Scoped styling in Vue is very straightforward. If you're familiar with HTML/CSS, it all comes very naturally - define a class on your HTML element, set CSS styles for that class in the <style scoped> segment.

Scoped styling is useful to ensure that styles are only applied within the component it is defined in. This allows us to reuse class names in multiple components without being concerned that styles defined elsewhere would interfere. This is especially powerful for building component libraries that are intended for use across multiple projects.

With React, there is no pre-defined recommendation on how CSS is applied. You are free to import CSS files, use inline styles or use CSS-in-JS libraries. Some CSS-in-JS libraries such as jss or emotion have become very popular and are used in many React projects. However, as with any third party library, there is always a learning curve, especially when defining reusable styles.

Before I get berated for being too spoilt, remember that this is my experience moving from Vue to React. In Vue, I did not have to re-learn any Vue-specific style libraries and I could achieve scoped styling with reusable class names out of the box using vanilla CSS. In React, the process to achieve a similar result is arguably more tedious, whether it is writing your own CSS file or using third party libraries.

5. Reference resources and libraries

One of the arguments going for React is always that React, being the more popular framework has deeper online resources and support that you can tap into. In my experience, having only started working with React after the launch of functional components, this is not true.

React, having been around for so long with so many versions (it's at v17 now) has a deep resource of outdated solutions and dated libraries. I find that it is considerably easier to find solutions and relevant libraries for Vue (only at v3 now) than for React. Since working with React, I find myself spending significantly more time Googling to find a solution that solves my needs than when I was working with Vue. From a personal point of view, it is something I struggled with when starting out in React. A large number of solutions that I stumble upon simply won't work and it takes more time to find something that does. But that may be down to my inadequate Googling skills!

Conclusion

I have used both Vue and React to build complex apps and to be honest, I'm now more familiar with React having used it on a day to day basis for the past year. If I were to start a new project now, I would do it with React simply because I'd be able to deliver a complete app much quicker in React than in Vue right now. I have since got much more comfortable with React and its quirks and have no strong preference for either Vue or React as a framework.

This article is a personal anecdote and is not meant to be an objective comparison between Vue and React. My intent here is to share what I've learnt transitioning from Vue to React and hopefully help others who are doing the same, or who are looking to learn React. I welcome any views and experiences contrary to what I have experienced and it is not my intention to make any sweeping statement or claim (even if within the article it sounds that way). I am a student of programming and always will be and am glad to learn from anyone.

Cheers!

React Hook to Allow Undo/Redo

Jeremy — Wed, 17 Nov 2021 07:19:30 +0000

If you're looking to build no-code tools like FormBlob, one must-have feature is the ability to undo and redo actions. Why? Imagine you were working on an image-editing software and you made multiple changes to your canvas. After some time, you realise that what you had before looked much better than what you have now. You would undo your way back until you get to a stage you're satisfied with.

Now, if the software did not have an undo/redo function, you would most probably unleash some flowery language and abandon the software forever.

So how do we implement an undo/redo function and prevent users from abandoning our app?

Prerequisite

If you're not familiar with React Hooks, I suggest you read up about them here. One of the most fundamental hooks is React's built-in useState hook. This allows you to store component state within a variable and manage it as required. In this tutorial, we will be writing a hook that extends the useState hook to allow for undo/redo functionality.

The Code

Let's start with the code and then I'll explain below.

import { useMemo, useState } from "react";
// If you're only working with primitives, this is not required
import isEqual from "lodash/isEqual";

export default function useUndoableState(init) {
  const [states, setStates] = useState([init]); // Used to store history of all states
  const [index, setIndex] = useState(0); // Index of current state within `states`

  const state = useMemo(() => states[index], [states, index]); // Current state

  const setState = (value) => {
    // Use lodash isEqual to check for deep equality
    // If state has not changed, return to avoid triggering a re-render
    if (isEqual(state, value)) {
      return;
    }
    const copy = states.slice(0, index + 1); // This removes all future (redo) states after current index
    copy.push(value);
    setStates(copy);
    setIndex(copy.length - 1);
  };

  // Clear all state history
  const resetState = (init) => {
    setIndex(0);
    setStates([init]);
  };

  // Allows you to go back (undo) N steps
  const goBack = (steps = 1) => {
    setIndex(Math.max(0, Number(index) - (Number(steps) || 1)));
  };

  // Allows you to go forward (redo) N steps
  const goForward = (steps = 1) => {
    setIndex(Math.min(states.length - 1, Number(index) + (Number(steps) || 1)));
  };

  return {
    state,
    setState,
    resetState,
    index,
    lastIndex: states.length - 1,
    goBack,
    goForward,
  };
}

Concept

As with useState, useUndoableState accepts only 1 argument, the initial value. Behind the scenes, the hook uses two main variables to determine state - index (number) and states (array). states stores the historical values of the state while index determines current state by indicating the current position in the array.

You may navigate through historical states by using the goBack and goForward functions emitted by the hook. However, if you make a call to setState and index is not at the end of the states array, all states after index is erased and index will go back to the end of the states array. In other words, once you call setState, you can no longer redo.

The following table attempts to provide a more detailed explanation of the object returned by the hook:

Prop	Type	Usage	Description
state	`any`		Current state, initialised with argument passed
setState	`func`	`setState(value)`	Sets state to `value`. All values after current `index` is erased
resetState	`func`	`resetState(value)`	Deletes historical states and resets to value
index	`number`		The current index in the `states` array
lastIndex	`number`		The last index in the `states` array. Can be used to determine if can `goForward`. `canGoForward = index < lastIndex`
goBack	`func`	`goBack(2)`	Goes back the number of steps passed
goForward	`func`	`goForward(3)`	Goes forward the number of steps passed

Usage

import React from "react";
import useUndoableState from "path/to/hook";

const init = { text: "The quick brown fox jumps over the lazy dog" };

export default function Document() {
  const {
    state: doc,
    setState: setDoc,
    resetState: resetDoc,
    index: docStateIndex,
    lastIndex: docStateLastIndex,
    goBack: undoDoc,
    goForward: redoDoc
  } = useUndoableState(init);

  const canUndo = docStateIndex > 0;
  const canRedo = docStateIndex < docStateLastIndex;

  return (
    <div style={{ display: "block" }}>
      <textarea
        style={{ margin: "16px" }}
        onChange={(event) => setDoc({ text: event.target.value })}
        rows="5"
        value={doc.text}
      />
      <div>
        <button
          onClick={() => undoDoc()}
          disabled={!canUndo}
          style={{ marginRight: "8px" }}
        >
          Undo
        </button>
        <button
          onClick={() => redoDoc()}
          disabled={!canRedo}
          style={{ marginRight: "8px" }}
        >
          Redo
        </button>
        <button onClick={() => resetDoc(init)}>Reset</button>
      </div>
    </div>
  );
}

Concluding Remarks

With undo/redo functionality, FormBlob is one of a select few no-code form builders that gives you the flexibility to edit your forms without the fear of losing a previous state. As a no-code tool, FormBlob allows anyone to build and publish stunning forms and surveys in 2 minutes. Try it free today!

A React Material UI Library to Build Any Form With Only JSON Config

Jeremy — Fri, 12 Nov 2021 15:26:13 +0000

Suppose we want to create a form to collect shipping address. Here's how we can replicate the form below with just JSON config and the open-source library I built @jeremyling/react-material-ui-form-builder.

The JSON Config

const fields = [
  {
    title: "Shipping Address",
    component: "display-text",
    titleProps: {
      style: {
        fontSize: 20,
        marginTop: 16,
        fontWeight: "bold",
        userSelect: "none",
        fontVariant: "small-caps",
        marginBottom: 8,
      },
    },
  },
  {
    col: {
      xs: 6,
    },
    label: "First Name",
    props: {
      required: true,
    },
    attribute: "firstName",
    component: "text-field",
    validations: {
      label: "First Name",
      required: "Required",
    },
    validationType: "string",
  },
  {
    col: {
      xs: 6,
    },
    label: "Last Name",
    props: {
      required: true,
    },
    attribute: "lastName",
    component: "text-field",
    validations: {
      label: "Last Name",
      required: "Required",
    },
    validationType: "string",
  },
  {
    label: "Address Line 1",
    props: {
      required: true,
    },
    attribute: "address1",
    component: "text-field",
    validations: {
      label: "Address 1",
      required: "Required",
    },
    validationType: "string",
  },
  {
    label: "Address Line 2",
    attribute: "address2",
    component: "text-field",
    validations: {
      label: "Address 2",
    },
    validationType: "string",
  },
  {
    col: {
      xs: 6,
    },
    label: "City",
    attribute: "city",
    component: "text-field",
    validations: {
      label: "City",
    },
    validationType: "string",
  },
  {
    col: {
      xs: 6,
    },
    label: "State",
    attribute: "state",
    component: "text-field",
    validations: {
      label: "State",
    },
    validationType: "string",
  },
  {
    col: {
      xs: 6,
    },
    label: "Postcode",
    props: {
      required: true,
    },
    attribute: "postcode",
    component: "text-field",
    validations: {
      label: "Postcode",
      required: "Required",
    },
    validationType: "string",
  },
  {
    col: {
      xs: 6,
    },
    label: "Country",
    props: {
      required: true,
    },
    attribute: "country",
    component: "text-field",
    validations: {
      label: "Country",
      required: "Required",
    },
    validationType: "string",
  },
  {
    options: [
      {
        label: "Same as Billing",
        value: true,
      },
    ],
    optionConfig: {
      key: "label",
      label: "label",
      value: "value",
    },
    attribute: "sameAsBilling",
    component: "checkbox-group",
  },
];

Standard Code For All Forms

import React, { useRef, useState } from "react";
import { FormBuilder } from "@jeremyling/react-material-ui-form-builder";
import { Button } from "@mui/material";
import { get, isEmpty } from "lodash";

async function validate(refs, form) {
  var errors = {};
  for (const [attribute, ref] of Object.entries(refs.current)) {
    if (ref.validate) {
      const error = await ref.validate(get(form, attribute));
      if (error.length) {
        errors[attribute] = error;
      }
    }
  }
  if (!isEmpty(errors)) {
    console.log(errors);
    return false;
  }
  return true;
}

export default function ShippingAddress() {
  const [form, setForm] = useState({});

  const refs = useRef({});

  const updateForm = (updates) => {
    const copy = { ...form };
    for (const [key, value] of Object.entries(updates)) {
      copy[key] = value;
    }
    setForm(copy);
  };

  const handleNext = async (event) => {
    event.preventDefault();
    const ok = await validate(refs, form);
    if (!ok) {
      return;
    }
    console.log(form);
  };

  return (
    <>
      <FormBuilder
        fields={fields}
        form={form}
        updateForm={updateForm}
        refs={refs}
      />
      <Button
        type="submit"
        variant="contained"
        color="primary"
        sx={{ mt: 1 }}
        onClick={handleNext}
      >
        Next
      </Button>
    </>
  );
}

Explanation

Here, we only use a few components from the library, display-text, text-field and checkbox-group. There are many more you can use. You can view the documentation here. Just note, in general, all input components would have these core field props.

{
  ...
  title: "State", // Display text above the input
  label: "State", // Input label
  attribute: "state", // Attribute of the form to set/control
  component: "text-field", // Type of component
  col: {
    // Breakpoints and corresponding width (1 - 12)
    xs: 6,
    sm: 6,
    ...
  },
  validations: {
    // Any validations accepted by yup
    required: true,
    length: 10,
    min: 5,
    max: 20,
    matches: ['/[a-z]/i', 'Can only contain letters'],
    email: true,
    url: true,
    uuid: true,
  },
}

Concluding Remarks

I actually created the form above with 3 clicks and a few renames on FormBlob. Try it out and make building forms a breeze. If you're a developer, contact us and I'll turn on a feature for you to export the forms you build into your own project. Alternatively, you can even build and deploy a hosted form entirely on FormBlob and embed the form in your own domain. If you use this method, you don’t have to use React in your app and it still works out of the box!

If data privacy is a concern, you can define webhooks to call on each submission to pass the form data to your own backend. If you choose, FormBlob does not store any data on our servers beyond the form structure.

How to get an A+ Security Grade For Your Website on Mozilla Observatory (Part 2 - Nginx)

Jeremy — Mon, 08 Nov 2021 02:24:00 +0000

After rewriting the FormBlob website with Hugo, I wanted to ensure that the website adhered to security best practices and was not vulnerable to any known issues. I began looking for a measure for website security and found Mozilla Observatory. On my very first scan, I received a C grade. While not particularly bad, I wanted to rectify any flaws found to achieve the best score I could. It was also an opportunity to learn a little more about website security.

So what is Mozilla Observatory?

The following quote is taken directly from the FAQ at https://observatory.mozilla.org/faq.

The Observatory tests for preventative measure against cross-site scripting attacks, man-in-the-middle attacks, cross-domain information leakage, cookie compromise, content delivery network compromise, and improperly issued certificates.

However, it does not test for outdated software versions, SQL injection vulnerabilities, vulnerable content management system plugins, improper password creation policies or storage procedures, and more. These are just as important as what the Observatory tests for, and site operators should not be neglectful of them simply because they score well on the Observatory.

While it may sound like a mouthful, these tests largely measure how vulnerable your website is to some of the most common malicious attacks that prey on a website developer's negligence in setting up secure networking configurations.

FormBlob Setup

I will split the discussion in this article into two parts - one for https://formblob.com and another for https://build.formblob.com. This is because the main site is a static site built using Hugo and deployed on Netlify, while the form builder site is a React app deployed on AWS ECS behind an elastic load balancer (ELB).

This is part two of the article discussing how you would set up Nginx to achieve an A+ grade. For part one discussing how to set up Netlify, click here.

Getting Started

In order to improve your grade for Mozilla Observatory scans, you'll need to add HTTP response headers. To add HTTP response headers to Nginx, you will need to edit the server context in the nginx.conf file. Here, I assume that you are familiar enough with Nginx to set up the config file. I list the full list of headers and config added to achieve an A+ grade below.

server {
  listen 80;
  ...

  return 301 https://$host$request_uri;
}

server {
  listen 443:
  ...

  # Only connect to this site and subdomains via HTTPS for the next two years
  add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";

  # Only allow my site to frame itself
  add_header X-Frame-Options "SAMEORIGIN";

  # Prevent browsers from incorrectly detecting non-scripts as scripts
  add_header X-Content-Type-Options "nosniff";

  # Block pages from loading when they detect reflected XSS attacks
  add_header X-Xss-Protection "1; mode=block";

  # Only send the shortened referrer to a foreign origin, full referrer to a local host
  add_header Referrer-Policy "strict-origin-when-cross-origin";

  # Configue CSP
  add_header Content-Security-Policy "default-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me; connect-src 'self' formblob.com *.formblob.com wss://*.formblob.com fblob.me *.fblob.me https://sockjs-mt1.pusher.com firebase.googleapis.com firebaseinstallations.googleapis.com https://www.googleapis.com/webfonts/ www.google-analytics.com; font-src 'self' https://fonts.gstatic.com; img-src https: data: blob: www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com; media-src https: data: blob:; script-src 'self' 'unsafe-eval' js.stripe.com https://www.googletagmanager.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'sha256-TQ+edvHvrQ4+h8G+tZQdFsQSrUAeSfwE/D8KjAzDnT0='; style-src 'self' 'unsafe-inline' fonts.googleapis.com; frame-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me js.stripe.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/; frame-ancestors 'self' formblob.com *.formblob.com fblob.me *.fblob.me;";

  ...
}

Test Scores

Mozilla Observatory scores your website on a predefined set of tests. Let's go through each of the tests individually.

Content Security Policy

Content Security Policy (CSP) gives you fine-grained control over which resources can be loaded on your website and from where such resources are allowed. It aims to protect your website from cross-site scripting (XSS) vulnerabilities. XSS vulnerabilities stem from unsafe inline Javascript and disabling this effectively eliminates most XSS attacks. However, disabling unsafe inline also means that all Javascript must be loaded from <script src=""> tags. Javascript inside <script> tags but not loaded via src will fail to execute.

Configuring CSP is a tedious process that requires you to evaluate the sources of all the scripts and styles loaded on your website. Before we dive into each policy, here's a look at the complete CSP I deployed on FormBlob. Note that I split each directive onto a separate line here for readability. When deploying, the entire CSP must be in a single line.

/*
  # Configure CSP
  add_header Content-Security-Policy "
    default-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me;
    connect-src 'self' formblob.com *.formblob.com wss://*.formblob.com fblob.me *.fblob.me https://sockjs-mt1.pusher.com firebase.googleapis.com firebaseinstallations.googleapis.com https://www.googleapis.com/webfonts/ www.google-analytics.com;
    font-src 'self' https://fonts.gstatic.com;
    img-src https: data: blob: www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com;
    media-src https: data: blob:;
    script-src 'self' 'unsafe-eval' js.stripe.com https://www.googletagmanager.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'sha256-TQ+edvHvrQ4+h8G+tZQdFsQSrUAeSfwE/D8KjAzDnT0=';
    style-src 'self' 'unsafe-inline' fonts.googleapis.com;
    frame-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me js.stripe.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/;
    frame-ancestors 'self' formblob.com *.formblob.com fblob.me *.fblob.me;";

I used a subset of the full list of directives that are relevant to FormBlob. I will limit my discussion here to only these directives and a few others that are common. You can read more about the full list of directives here. Also, as a start, I recommend using the header Content-Security-Policy-Report-Only instead of Content-Security-Policy to get a report of all the violations without breaking your website.

default-src is a fallback directive for the other fetch directives. Directives that are specified have no inheritance, while directives that are not specified will fall back to the value of default-src. Here, you want to include 'self' (the origin site with the same scheme and port) and other trusted domains. The recommended setting for this is none, which will require you to set almost every other directive.
connect-src provides control over fetch requests, XHR, eventsource, beacon and websockets connections. This defines any resources that you need to connect to. For websocket connections, you will have to set the relevant scheme. For example, wss://*.formblob.com.
font-src specifies which URLs to load fonts from. If you are using Google Fonts, this directive should include https://fonts.gstatic.com data:.
img-src specifies the URLs that images can be loaded from. If you use Google Tag Manager, this directive should include www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com.
media-src specifies the URLs from which video, audio and text track resources can be loaded from.
manifest-src specifies the URLs that application manifests may be loaded from.
script-src specifies the locations from which a script can be executed from. If you use Google Tag Manager, the recommended approach is to use the nonce method for GTM scripts. I include the 'unsafe-eval' keyword here because FormBlob uses a heavily sanitized Function() method to evaluate previously set fields to personalise the experience for users completing forms. This is a quintessential feature across all form builders.
- In this directive, I also include a hash keyword 'sha256-TQ+edvHvrQ4+h8G+tZQdFsQSrUAeSfwE/D8KjAzDnT0='. You may use the hashed script as a keyword to allow any script to be loaded. This hash is automatically generated in the report in the console for any script that violates the directive. You can copy the hash together with the single quotes directly into the directive to allow the script.
style-src controls from where styles get applied to a document. This includes <link> elements, @import rules, and requests originating from a Link HTTP response header field. You may notice that I include the 'unsafe-inline' keyword. This is because I directly alter inline styles using Material UI. Again, this is a potential vulnerability that you should avoid if you can. If using Google Fonts and/or Google Tag Manager, you should include these fonts.googleapis.com https://tagmanager.google.com.
frame-src restricts the URLs that can be embedded on the site.
form-action restricts the URLs which the forms can submit to.
frame-ancestors restricts the URLs that can embed the requested resource inside of <frame>, <iframe>, <object>, <embed>, or <applet> elements. This directive does not fallback to default-src directive. If this is set, X-Frame-Options is ignored by user agents.
upgrade-insecure-requests instructs user agents to rewrite URL schemes, changing HTTP to HTTPS. This directive is for websites with large numbers of old URL's that need to be rewritten.

Cookies

For FormBlob all cookies used are created on the API server for the purpose of session tracking, and I do not set any cookies on the frontend server hosting the website. However, if you do need to set cookies using Nginx, ensure that your cookies use the Secure flag and set the appropriate SameSite attribute. Session cookies should also have the HttpOnly flag. Cookies should also have an expiration as soon as is necessary.

For the SameSite attribute, this is a direct quote from https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie.

Strict means that the browser sends the cookie only for same-site requests, that is, requests originating from the same site that set the cookie. If a request originates from a URL different from the current one, no cookies with the SameSite=Strict attribute are sent.

Lax means that the cookie is not sent on cross-site requests, such as on requests to load images or frames, but is sent when a user is navigating to the origin site from an external site (for example, when following a link). This is the default behavior if the SameSite attribute is not specified.

# Add a cookie with [name] and [value] that expires in 1 day (86400 seconds)
# and restricted to formblob.com and its subdomains
add_header Set-Cookie "[name]=[value]; Max-Age=86400; Path=/; Domain=formblob.com HttpOnly; Secure";

Cross-origin Resource Sharing

Cross-origin Resource Sharing (CORS) is not needed for most websites and FormBlob is no exception. This should not be set unless specifically needed.

HTTP Public Key Pinning

HTTP Public Key Pinning is only required for maximum risk sites. It is not recommended for most sites and you would probably not need it.

HTTP Strict Transport Security

HTTP Strict Transport Security (HSTS) notifies user agents to only connect to a given site over HTTPS, even if the scheme chosen was HTTP. It works in tandem with HTTP to HTTPS redirects and should be set on response headers from the HTTPS request. The recommended setting is Strict-Transport-Security: max-age=63072000; includeSubdomains. If the includeSubdomains flag is present, all requests to subdomains will also be upgraded to HTTPS. Ensure that all subdomains can handle HTTPS traffic before including this flag.

# Only connect to this site and subdomains via HTTPS for the next two years
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";

HTTPS Redirection

server {
  listen 80;
  ...

  return 301 https://$host$request_uri;
}

Referrer Policy

There are four options for this:

no-referrer: never send the Referer header
same-origin: send referrer, but only on requests to the same origin
strict-origin: send referrer to all origins, but only the URL sans path (e.g. https://example.com/)
strict-origin-when-cross-origin: send full referrer on same origin, URL sans path on foreign origin

By default, you would want to use strict-origin-when-cross-origin. This protects user privacy on cross-origin requests but allows you to track users using analytics within your own site.

# Only send the shortened referrer to a foreign origin, full referrer to a local host
add_header Referrer-Policy "strict-origin-when-cross-origin";

Subresource Integrity

Subresource integrity (SRI) protects against attackers modifying the contents of Javascript libraries hosted on content delivery networks (CDNs) in order to create vulnerabilities in websites that make use of that hosted library. SRI uses a hash of the library's content to verify that a library has not been changed. If it has, the website will refuse to load the library. Here's a good resource to generate SRI hashes. Below is an example of an embedded form from FormBlob using SRI.

<script
  src="https://unpkg.com/@jeremyling/form-renderer@0.4.16/dist/web.min.js"
  integrity="sha512-27spyugyD2KOU0tPev6hnJ2bCeKPh5WpMzEWna4uXXCSlSQcFRDxAKZDfBhJ21lF0hyBbTD1KoOXmXJwKU5NHQ=="
  crossorigin="anonymous"
></script>

X-Content-Type-Options

X-Content-Type-Options is a header supported by Internet Explorer, Chrome and Firefox 50+ that tells user agents not to load scripts and stylesheets unless the server indicates the correct MIME type. Without this header, these browsers can incorrectly detect files as scripts and stylesheets, leading to XSS attacks.

# Prevent browsers from incorrectly detecting non-scripts as scripts
add_header X-Content-Type-Options "nosniff";

X-Frame-Options

X-Frame-Options controls where your site may be framed within an iframe. This helps to prevent clickjacking, in which an attacker frames your site within a malicious platform that tricks users into clicking on links which the attacker has control over.

# Only allow my site to frame itself
add_header X-Frame-Options "SAMEORIGIN";

X-XSS-Protection

X-XSS-Protection is a feature of Internet Explorer and Chrome that stops pages from loading when they detect reflected XSS attacks. While a strong CSP may make this header redundant, it protects users on older browsers that do not support CSP.

# Block pages from loading when they detect reflected XSS attacks
add_header X-Xss-Protection "1; mode=block";

Complete nginx.conf Configuration

We have successfully gone through each of the tests and set up configurations to help us pass them. If you have followed along, you should receive at least an A grade with this setup. Here's a recap of the full configuration.

server {
  listen 80;
  ...

  return 301 https://$host$request_uri;
}

server {
  listen 443:
  ...

  # Only connect to this site and subdomains via HTTPS for the next two years
  add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";

  # Only allow my site to frame itself
  add_header X-Frame-Options "SAMEORIGIN";

  # Prevent browsers from incorrectly detecting non-scripts as scripts
  add_header X-Content-Type-Options "nosniff";

  # Block pages from loading when they detect reflected XSS attacks
  add_header X-Xss-Protection "1; mode=block";

  # Only send the shortened referrer to a foreign origin, full referrer to a local host
  add_header Referrer-Policy "strict-origin-when-cross-origin";

  # Configue CSP
  add_header Content-Security-Policy "default-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me; connect-src 'self' formblob.com *.formblob.com wss://*.formblob.com fblob.me *.fblob.me https://sockjs-mt1.pusher.com firebase.googleapis.com firebaseinstallations.googleapis.com https://www.googleapis.com/webfonts/ www.google-analytics.com; font-src 'self' https://fonts.gstatic.com; img-src https: data: blob: www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com; media-src https: data: blob:; script-src 'self' 'unsafe-eval' js.stripe.com https://www.googletagmanager.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'sha256-TQ+edvHvrQ4+h8G+tZQdFsQSrUAeSfwE/D8KjAzDnT0='; style-src 'self' 'unsafe-inline' fonts.googleapis.com; frame-src 'self' formblob.com *.formblob.com fblob.me *.fblob.me js.stripe.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/; frame-ancestors 'self' formblob.com *.formblob.com fblob.me *.fblob.me;";

  ...
}

Concluding Remarks

With an A+ security grade, FormBlob ranks as the most secure form building platform in the market. FormBlob respects data privacy and aims to ensure all data is secure from malicious attacks. We make an effort to meet and exceed all established security requirements. While not officially HIPAA or NIST certified due to how new we currently are, our infrastructure and security setup meet these requirements and we are confident of getting certified in the long run. Here are the Mozilla Observatory results of other popular form builders that we benchmark against.

How to get an A+ Security Grade For Your Website on Mozilla Observatory (Part 1 - Netlify)

Jeremy — Sun, 07 Nov 2021 14:43:49 +0000

So what is Mozilla Observatory?

The following quote is taken directly from the FAQ at https://observatory.mozilla.org/faq.

The Observatory tests for preventative measure against cross-site scripting attacks, man-in-the-middle attacks, cross-domain information leakage, cookie compromise, content delivery network compromise, and improperly issued certificates.

However, it does not test for outdated software versions, SQL injection vulnerabilities, vulnerable content management system plugins, improper password creation policies or storage procedures, and more. These are just as important as what the Observatory tests for, and site operators should not be neglectful of them simply because they score well on the Observatory.

FormBlob Setup

This is part one of the article discussing how you would set up Netlify to achieve an A+ grade. For part two discussing how to set up Nginx behind an ELB, click here.

Getting Started

In order to improve your grade for Mozilla Observatory scans, you'll need to add HTTP response headers. When deploying on Netlify, there are two ways to set up HTTP response headers. The first is to use the netlify.toml file in your root directory. This is the same file in which you set up any other Netlify deployment configurations. Below is the syntax if you're using the netlify.toml config file to set the headers.

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

Alternatively, you can use a _headers file in your public folder, which Netlify will automatically pick up when deploying. In my case, files in Hugo's static folder will be published, so I created the _headers file in /static. Below is the syntax for the _headers file.

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block

Here, I will use the _headers file to illustrate how I set up FormBlob's HTTP response headers to get that A+ grade.

Test Scores

Mozilla Observatory scores your website on a predefined set of tests. Let's go through each of the tests individually.

Content Security Policy

/*
  # Configure CSP
  Content-Security-Policy:
    default-src 'self' cloudfront.net *.cloudfront.net *.formblob.com fblob.me *.fblob.me;
    font-src 'self' https://fonts.gstatic.com data:;
    img-src https: data: blob: www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com;
    media-src https: data: blob:;
    script-src 'self' 'unsafe-eval' https://www.googletagmanager.com https://tagmanager.google.com https://unpkg.com cloudfront.net *.cloudfront.net js.stripe.com 'sha256-dyRKDTw6FBqVppfObkFviVwYe/aFYzGE9kpTdbXngk4=';
    style-src 'self' 'unsafe-inline' fonts.googleapis.com https://tagmanager.google.com;
    frame-src 'self' *.formblob.com fblob.me *.fblob.me js.stripe.com www.youtube.com codesandbox.io;
    frame-ancestors 'self';
    upgrade-insecure-requests;

default-src is a fallback directive for the other fetch directives. Directives that are specified have no inheritance, while directives that are not specified will fall back to the value of default-src. Here, you want to include 'self' (the origin site with the same scheme and port) and other trusted domains. I include cloudfront.net as this is the CDN that Netlify serves resources from. The recommended setting for this is none, which will require you to set almost every other directive.
connect-src provides control over fetch requests, XHR, eventsource, beacon and websockets connections. This defines any resources that you need to connect to. For websocket connections, you will have to set the relevant scheme. For example, wss://*.formblob.com.
font-src specifies which URLs to load fonts from. If you are using Google Fonts, this directive should include https://fonts.gstatic.com data:.
img-src specifies the URLs that images can be loaded from. If you use Google Tag Manager, this directive should include www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com.
media-src specifies the URLs from which video, audio and text track resources can be loaded from.
manifest-src specifies the URLs that application manifests may be loaded from.
script-src specifies the locations from which a script can be executed from. If you use Google Tag Manager, the recommended approach is to use the nonce method for GTM scripts. However, deploying on Netlify restricts me from using this as I cannot generate a session unique nonce. Thus I use the fallback method 'unsafe-eval' https://www.googletagmanager.com https://tagmanager.google.com which may lead to potential vulnerabilities. Avoid this if you can.
- In this directive, I also include a hash keyword 'sha256-dyRKDTw6FBqVppfObkFviVwYe/aFYzGE9kpTdbXngk4='. You may use the hashed script as a keyword to allow any script to be loaded. This hash is automatically generated in the report in the console for any script that violates the directive. You can copy the hash together with the single quotes directly into the directive to allow the script.
style-src controls from where styles get applied to a document. This includes <link> elements, @import rules, and requests originating from a Link HTTP response header field. You may notice that I include the 'unsafe-inline' keyword. This is because I use Bootstrap for styling and Bootstrap inherently uses inline Javascript for DOM manipulation. Again, this is a potential vulnerability that you should avoid if you can. If using Google Fonts and/or Google Tag Manager, you should include these fonts.googleapis.com https://tagmanager.google.com.
frame-src restricts the URLs that can be embedded on the site.
form-action restricts the URLs which the forms can submit to.
frame-ancestors restricts the URLs that can embed the requested resource inside of <frame>, <iframe>, <object>, <embed>, or <applet> elements. This directive does not fallback to default-src directive. If this is set, X-Frame-Options is ignored by user agents.
upgrade-insecure-requests instructs user agents to rewrite URL schemes, changing HTTP to HTTPS. This directive is for websites with large numbers of old URL's that need to be rewritten.

Cookies

I do not use any cookies on FormBlob as yet and hence had no need to configure this. However, if you do use any cookies, ensure that your cookies are named with the __Secure- prefix and set with the Secure flag. Cookies should also have a expiration as soon as is necessary.

Cross-origin Resource Sharing

Cross-origin Resource Sharing (CORS) is not needed for most websites and FormBlob is no exception. This should not be set unless specifically needed.

HTTP Public Key Pinning

HTTP Public Key Pinning is only required for maximum risk sites. It is not recommended for most sites and you would probably not need it.

HTTP Strict Transport Security

# Only connect to this site and subdomains via HTTPS for the next two years
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

HTTPS Redirection

Sites that listen on port 80 should redirect to the same resource on HTTPS. Once the redirection has occurred, HSTS ensures that all future HTTP requests are instead sent directly to the secure site. This is automatically configured by Netlify if you use Netlify's DNS. Otherwise, you will need to configure this redirection on your own server using Apache or Nginx. Redirections should be 301 redirects.

Referrer Policy

There are four options for this:

no-referrer: never send the Referer header
same-origin: send referrer, but only on requests to the same origin
strict-origin: send referrer to all origins, but only the URL sans path (e.g. https://example.com/)
strict-origin-when-cross-origin: send full referrer on same origin, URL sans path on foreign origin

By default, you would want to use strict-origin-when-cross-origin. This protects user privacy on cross-origin requests but allows you to track users using analytics within your own site.

# Only send the shortened referrer to a foreign origin, full referrer to a local host
Referrer-Policy: strict-origin-when-cross-origin

Subresource Integrity

<script
  src="https://unpkg.com/@jeremyling/form-renderer@0.4.16/dist/web.min.js"
  integrity="sha512-27spyugyD2KOU0tPev6hnJ2bCeKPh5WpMzEWna4uXXCSlSQcFRDxAKZDfBhJ21lF0hyBbTD1KoOXmXJwKU5NHQ=="
  crossorigin="anonymous"
></script>

X-Content-Type-Options

# Prevent browsers from incorrectly detecting non-scripts as scripts
X-Content-Type-Options: nosniff

X-Frame-Options

# Only allow my site to frame itself
X-Frame-Options: SAMEORIGIN

X-XSS-Protection

# Block pages from loading when they detect reflected XSS attacks
X-XSS-Protection: 1; mode=block

Complete _headers Configuration

/*
  # Only connect to this site and subdomains via HTTPS for the next two years
  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

  # Configure CSP
  Content-Security-Policy: default-src 'self' cloudfront.net *.cloudfront.net *.formblob.com fblob.me *.fblob.me; font-src 'self' https://fonts.gstatic.com data:; img-src https: data: blob: www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com; media-src https: data: blob:; script-src 'self' 'unsafe-eval' https://www.googletagmanager.com https://tagmanager.google.com https://unpkg.com cloudfront.net *.cloudfront.net js.stripe.com 'sha256-dyRKDTw6FBqVppfObkFviVwYe/aFYzGE9kpTdbXngk4='; style-src 'self' 'unsafe-inline' fonts.googleapis.com https://tagmanager.google.com; frame-src 'self' *.formblob.com fblob.me *.fblob.me js.stripe.com www.youtube.com codesandbox.io; frame-ancestors 'self'; upgrade-insecure-requests;

  # X-Frame-Options tells the browser whether you want to allow your site to be framed or not. By preventing a browser from framing your site you can defend against attacks like clickjacking.
  X-Frame-Options: SAMEORIGIN

  # Prevent browsers from incorrectly detecting non-scripts as scripts
  X-Content-Type-Options: nosniff

  # X-XSS-Protection sets the configuration for the cross-site scripting filter built into most browsers.
  X-XSS-Protection: 1; mode=block

  # Referrer Policy is a new header that allows a site to control how much information the browser includes with navigations away from a document and should be set by all sites.
  Referrer-Policy: strict-origin-when-cross-origin

Concluding Remarks

Set up your own free online store complete with payments, order management and push notifications in 2 minutes

Jeremy — Mon, 01 Nov 2021 04:46:32 +0000

COVID-19 has affected many of us badly, with countless having lost jobs and facing an uncertain future. If you happen to be affected, I’m genuinely sorry for what you’ve been through and I hope things work out well.

In Singapore, many home based businesses have sprouted during this period and I was hoping to be able to help out in some way. So I enhanced FormBlob with an order management flow and a simple store front template that helps users set up a fully functional online store complete with order management, payments and push notifications in 2 minutes.

I would like to offer the use of this platform free for all home based businesses globally. Just drop me an email at jeremy@formblob.com or on Telegram at @jeremy_ling with the email that you created your account with and a short description of your business and I’ll enable full access for you. If you’re wondering how the store looks like, here’s a demo store.

https://hbb.fblob.me

Here are some videos that illustrate how a store is set up on FormBlob and the order management flow.

How to set up a store on FormBlob

Managing an order on FormBlob

There may be issues with internationalisation as this was built with the Singapore home based business in mind, but if you face any issues let me know and I will do my best to help you with them as soon as I get some time.

Concluding Remarks

You may be wondering, what’s the catch? Is this really free? Yes it is. I do not intend to earn from home based businesses but I do benefit in that FormBlob’s branding reaches more people. FormBlob is a budding venture and in a way a home based business as well so I am part of your community egging you on. Let’s conquer COVID-19 together!

How to build a Login/Signup form with validation in 2 minutes in React

Jeremy — Sun, 31 Oct 2021 09:14:45 +0000

Login and signup forms are probably the single most common use case across apps of all types. Yet, building a login/signup flow with complete validation is always a pain. Here, I will show you how to create a login and signup form with complete validation quickly with the open-source NPM library I created @jeremyling/react-material-ui-form-builder.

The motivation behind the library was to create a low-code, config-only method to create and manipulate forms. It is built on top of Material UI in an extensible way that allows you to customise your forms in any way you want. A quick disclaimer on the package size — do not be alarmed if you see a large unpacked size on NPM. The actual gzipped library is only ~23kb if you exclude all the peer dependencies. (Proof here: https://bundlephobia.com/package/@jeremyling/react-material-ui-form-builder@0.8.9) When using the various components of the library, you only need to install the peer dependencies you actually need.

OK, enough talk. Where’s the code?

I have to admit, I lied. Building the forms in 2 minutes is only achievable with my form building platform FormBlob but more on that later. Let’s dive into the code right now!

We’ll aim to replicate the following forms. The full working example is in the sandbox below.

To begin, a working knowledge of Material UI’s components would be very useful here, but if you’re not familiar, that’s perfectly fine. Let’s start with the Login form and then add the additional components in the Sign up form. But first, install all the libraries we will need for this flow.

npm i @jeremyling/react-material-ui-form-builder react react-dom @material-ui/core @material-ui/icons lodash

1. The Form Builder

To understand how the library works, the main exported component FormBuilder is a React component that accepts 4 props: fields, form, updateForm and refs.

import React, { useRef, useState } from "react";
import { set } from "lodash-es";
import { FormBuilder } from "@jeremyling/react-material-ui-form-builder";
import { Button } from "@material-ui/core";

export function Login(props) {
  const [form, setForm] = useState({}); // This is where form data is stored
  const refs = useRef({}); // This will be used for validation later

  // This updates form state with the values changed in the form
  const updateForm = (updates) => {
    const copy = { ...form };
    for (const [key, value] of Object.entries(updates)) {
      set(copy, key, value);
    }
    setForm(copy);
  }

  const handleSubmit = async (event) => {
    event.preventDefault();
    console.log(form);
  };

  return (
    <form onSubmit={handleSubmit}>  
      <FormBuilder
        fields={[]}
        form={form}
        updateForm={updateForm}
        refs={refs}
      />
      <Button 
        fullWidth
        type="submit"
        variant="contained"
        color="primary"
        style={{ marginTop: "8px" }}
      >
        Log In
      </Button>
    </form>
  );
}

That’s the core of how the library is used! There is no need to edit the code for the form parts from here on, all other changes are to the config-like fields array.

2. Building the Login Form

To build the parts of the Login form, you add to the fields array. Here, we only need to use the text-field, checkbox-group, display-text and custom components. No additional peer dependencies need to be installed.

import { Avatar, IconButton, InputAdornment } from "@material-ui/core";
import { LockOutlined, Visibility, VisibilityOff } from "@material-ui/icons";
import { red } from "@material-ui/core/colors";

const fields = [
  {
    component: "custom",
    customComponent: () => (
      <div style={{ display: "flex", justifyContent: "center" }}>
        <Avatar style={{ backgroundColor: red[500], color: "white" }}>
          <LockOutlined />
        </Avatar>
      </div>
    )
  },
  {
    component: "display-text",
    title: "Log In",
    titleProps: {
      style: {
        fontSize: "20px",
        fontWeight: "bold"
      }
    },
    titleContainerProps: {
      style: {
        justifyContent: "center"
      }
    }
  },
  {
    attribute: "email",
    component: "text-field",
    label: "Email",
    props: {
      required: true
    },
    validations: {
      required: true,
      email: true
    }
  },
  {
    attribute: "password",
    component: "text-field",
    label: "Password",
    props: {
      type: showPassword ? "text" : "password",
      InputProps: {
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={() => setShowPassword(!showPassword)}
            >
              {showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        ),
        style: {
          paddingRight: 0
        }
      },
      required: true
    },
    validations: {
      required: true,
      min: 8,
      matches: ["/[a-z]/i", "At least 1 lowercase or uppercase letter"],
      test: {
        name: "specialChar",
        test: (value) =>
          /[0-9~!@#$%^&*()_+\-={}|[\]\\:";'<>?,./]/.test(value),
        message: "At least 1 number or special character"
      }
    }
  },
  {
    attribute: "remember",
    component: "checkbox-group",
    options: [
      {
        label: "Remember Me",
        value: true
      }
    ],
    optionConfig: {
      key: "label",
      label: "label",
      value: "value"
    }
  }
];

I’ll explain each element in the array individually.

fields[0]: custom component — this is the red lock icon, inserted with jsx.
fields[1]: display-text — this is the Log In text. titleProps and titleContainerProps are the props to pass into the Typography and div components wrapping the title respectively. View the documentation here.
fields[2]: text-field — this is the Email input field. The attribute attribute is the key under which the value of the input is stored within form. Validations use yup and a good summary of all the suggested validations are here.
fields[3]: text-field — this is the Password input field. This uses the props.type attribute to hide/show the input text. The props attribute is passed directly into the Material UI Textfield component as props. The InputProps attribute is a prop of Textfield and it is used here to add an end adornment to the input. For the Password input, we require multiple validations: required, minimum length = 8, at least 1 lowercase or uppercase letter and at least 1 number or special character.
fields[4]: checkbox-group — this is the Remember Me checkbox. Since we only need one checkbox, we have only one option. The optionConfig attribute dictates which attribute of the option(s) to use as the key, label and value of the component.

And there we have it! The completed Login form.

But wait, validation works on blur, but what about at the point of form submission? Remember the refs prop we passed into FormBuilder? Each input’s DOM element is added to refs.current when rendered under its attribute as key. Here’s how we use refs to validate the form on submission.

import { get } from "lodash-es";

async function validate(refs, form) {
  for (const [attribute, ref] of Object.entries(refs.current)) {
    var errors;
    if (ref.validate) {
      errors = await ref.validate(get(form, attribute));
    }
    if (!isEmpty(errors)) {
      console.log(errors);
      return false;
    }
  }
  return true;
}

const handleSubmit = async (event) => {
  event.preventDefault();
  const ok = await validate(refs, form);
  if (!ok) {
    return;
  }
  console.log(form);
};

Now all we are left with is to add the Forgot Password? and Don’t have an account? links and the component is ready. Here’s the complete code for the Login form.

import React, { useRef, useState } from "react";
import { get, isEmpty, set } from "lodash-es";
import { FormBuilder } from "@jeremyling/react-material-ui-form-builder";
import { Avatar, Button, IconButton, InputAdornment } from "@material-ui/core";
import { LockOutlined, Visibility, VisibilityOff } from "@material-ui/icons";
import { indigo, red } from "@material-ui/core/colors";
import PropTypes from "prop-types";

async function validate(refs, form) {
  for (const [attribute, ref] of Object.entries(refs.current)) {
    var errors;
    if (ref.validate) {
      errors = await ref.validate(get(form, attribute));
    }
    if (!isEmpty(errors)) {
      console.log(errors);
      return false;
    }
  }
  return true;
}

export default function Login(props) {
  const { setAuthType } = props;
  const [form, setForm] = useState({});
  const [showPassword, setShowPassword] = useState();

  const refs = useRef({});

  const updateForm = (updates) => {
    const copy = { ...form };
    for (const [key, value] of Object.entries(updates)) {
      set(copy, key, value);
    }
    setForm(copy);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const ok = await validate(refs, form);
    if (!ok) {
      return;
    }
    console.log(form);
  };

  const fields = [
    {
      component: "custom",
      customComponent: () => (
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Avatar style={{ backgroundColor: red[500], color: "white" }}>
            <LockOutlined />
          </Avatar>
        </div>
      )
    },
    {
      component: "display-text",
      title: "Log In",
      titleProps: {
        style: {
          fontSize: "20px",
          fontWeight: "bold"
        }
      },
      titleContainerProps: {
        style: {
          justifyContent: "center"
        }
      }
    },
    {
      attribute: "email",
      component: "text-field",
      label: "Email",
      props: {
        required: true
      },
      validations: {
        required: true,
        email: true
      }
    },
    {
      attribute: "password",
      component: "text-field",
      label: "Password",
      props: {
        type: showPassword ? "text" : "password",
        InputProps: {
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                aria-label="toggle password visibility"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          ),
          style: {
            paddingRight: 0
          }
        },
        required: true
      },
      validations: {
        required: true,
        min: 8,
        matches: ["/[a-z]/i", "At least 1 lowercase or uppercase letter"],
        test: {
          name: "specialChar",
          test: (value) =>
            /[0-9~!@#$%^&*()_+\-={}|[\]\\:";'<>?,./]/.test(value),
          message: "At least 1 number or special character"
        }
      }
    },
    {
      attribute: "remember",
      component: "checkbox-group",
      options: [
        {
          label: "Remember Me",
          value: true
        }
      ],
      optionConfig: {
        key: "label",
        label: "label",
        value: "value"
      }
    }
  ];

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <div style={{ width: "60%" }}>
        <form onSubmit={handleSubmit}>
          <FormBuilder
            fields={fields}
            form={form}
            updateForm={updateForm}
            refs={refs}
          />
          <Button
            fullWidth
            type="submit"
            variant="contained"
            color="primary"
            style={{ marginTop: "8px" }}
          >
            Log In
          </Button>
        </form>
        <div>
          <Button
            onClick={() => console.log("Forgot Password")}
            style={{
              textTransform: "initial",
              marginTop: "16px",
              color: indigo[500]
            }}
          >
            Forgot Password?
          </Button>
        </div>
        <div>
          <Button
            onClick={() => setAuthType("signup")}
            style={{
              textTransform: "initial",
              color: indigo[500]
            }}
          >
            Don't have an account?
          </Button>
        </div>
        <div style={{ marginTop: "16px" }}>{JSON.stringify(form, null, 2)}</div>
      </div>
    </div>
  );
}

Login.propTypes = {
  setAuthType: PropTypes.func
};

3. The Signup Form

Now that we’re done with the Login form, the Signup form is just a simple extension of it. We add two more components to the fields array and voila!

const additionalFields = [
  {
    attribute: "firstName",
    component: "text-field",
    label: "First Name",
    props: {
      required: true
    },
    col: {
      xs: 6
    },
    validations: {
      required: true
    }
  },
  {
    attribute: "lastName",
    component: "text-field",
    label: "Last Name",
    props: {
      required: true
    },
    col: {
      xs: 6
    },
    validations: {
      required: true
    }
  },
];

The key addition here is the use of the col prop. If you’re familiar with breakpoints, this should come naturally. col is an object with breakpoints (xs, sm, md, lg and xl) as key and grid columns (1–12) as value. The value for each larger breakpoint (xl) defaults to the next largest breakpoint (lg) if not defined. In this case, the component uses a grid column of 6 for all breakpoints.

We’re done with the Signup form as well! Here’s the complete code.

import React, { useRef, useState } from "react";
import { get, isEmpty, set } from "lodash-es";
import { FormBuilder } from "@jeremyling/react-material-ui-form-builder";
import { Avatar, Button, IconButton, InputAdornment } from "@material-ui/core";
import { LockOutlined, Visibility, VisibilityOff } from "@material-ui/icons";
import { indigo, red } from "@material-ui/core/colors";
import PropTypes from "prop-types";

async function validate(refs, form) {
  for (const [attribute, ref] of Object.entries(refs.current)) {
    var errors;
    if (ref.validate) {
      errors = await ref.validate(get(form, attribute));
    }
    if (!isEmpty(errors)) {
      console.log(errors);
      return false;
    }
  }
  return true;
}

export default function Signup(props) {
  const { setAuthType } = props;
  const [form, setForm] = useState({});
  const [showPassword, setShowPassword] = useState();

  const refs = useRef({});

  const updateForm = (updates) => {
    const copy = { ...form };
    for (const [key, value] of Object.entries(updates)) {
      set(copy, key, value);
    }
    setForm(copy);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const ok = await validate(refs, form);
    if (!ok) {
      return;
    }
    console.log(form);
  };

  const fields = [
    {
      component: "custom",
      customComponent: () => (
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Avatar style={{ backgroundColor: red[500], color: "white" }}>
            <LockOutlined />
          </Avatar>
        </div>
      )
    },
    {
      component: "display-text",
      title: "Sign up",
      titleProps: {
        style: {
          fontSize: "20px",
          fontWeight: "bold"
        }
      },
      titleContainerProps: {
        style: {
          justifyContent: "center"
        }
      }
    },
    {
      attribute: "firstName",
      component: "text-field",
      label: "First Name",
      props: {
        required: true
      },
      col: {
        xs: 6
      },
      validations: {
        required: true
      }
    },
    {
      attribute: "lastName",
      component: "text-field",
      label: "Last Name",
      props: {
        required: true
      },
      col: {
        xs: 6
      },
      validations: {
        required: true
      }
    },
    {
      attribute: "email",
      component: "text-field",
      label: "Email",
      props: {
        required: true
      },
      validations: {
        required: true,
        email: true
      }
    },
    {
      attribute: "password",
      component: "text-field",
      label: "Password",
      props: {
        type: showPassword ? "text" : "password",
        InputProps: {
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                aria-label="toggle password visibility"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          ),
          style: {
            paddingRight: 0
          }
        },
        required: true
      },
      validations: {
        required: true,
        min: 8,
        matches: ["/[a-z]/i", "At least 1 lowercase or uppercase letter"],
        test: {
          name: "specialChar",
          test: (value) =>
            /[0-9~!@#$%^&*()_+\-={}|[\]\\:";'<>?,./]/.test(value),
          message: "At least 1 number or special character"
        }
      }
    },
    {
      attribute: "remember",
      component: "checkbox-group",
      options: [
        {
          label: "Remember Me",
          value: true
        }
      ],
      optionConfig: {
        key: "label",
        label: "label",
        value: "value"
      }
    }
  ];

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <div style={{ width: "60%" }}>
        <form onSubmit={handleSubmit}>
          <FormBuilder
            fields={fields}
            form={form}
            updateForm={updateForm}
            refs={refs}
          />
          <Button
            fullWidth
            type="submit"
            variant="contained"
            color="primary"
            style={{ marginTop: "8px" }}
          >
            Sign Up
          </Button>
        </form>
        <div>
          <Button
            onClick={() => setAuthType("login")}
            style={{
              textTransform: "initial",
              marginTop: "16px",
              color: indigo[500]
            }}
          >
            Already have an account?
          </Button>
        </div>
        <div style={{ marginTop: "16px" }}>{JSON.stringify(form, null, 2)}</div>
      </div>
    </div>
  );
}

Signup.propTypes = {
  setAuthType: PropTypes.func
};

Concluding Remarks

While straightforward, this process still involves a tedious set up of the fields array manually. I have built https://formblob.com — a commercial solution to construct the fields array in 2 minutes with drag and drop tools which you can then export into your own project. Alternatively, you can even build and deploy the form entirely on FormBlob and embed the form in your own domain. If you use this method, you don’t have to use React in your app and it still works out of the box!

Give FormBlob a go. You won’t regret it.