loschorts/cf_widgets

cf_widgets

cf_widgets is a Node/React/Redux app that simulates a small portion of the actual Cloudflare User Dashboard.

How To Run

0. Clone this repository.
1. Navigate to the directory in terminal.
2. $ ./start.sh
3. Enter your cloudflare credentials when prompted (see note below).
4. open localhost:3000 in Chrome

Dependencies: node

Note: Your credentials are stored in ENV variables by server.js and forgetten when the server process is closed. All requests originating from the server are done via https.

Features

• Node Express server receives API requests from the client and issues Cloudflare API requests to avoid same-origin policies encountered when issuing Cloudflare requests directly from client.

• Modular Components allow for rapid construction of new dashboard tools:

  • card.jsx: Accepts display information and a tool component as props and creates a new dashboard card with optional timestamp showing time since last modification.
  • zone_setting_select.jsx: accepts setting and option props and dispatches API PATCH requests when an option is selected.
  • switch.jsx: accepts a setting and dispatches an API PATCH request to toggle the setting on and off when clicked.

• Rollback-able tools: Setting values (off, on, flexible, etc) are stored in a Redux store with Undo, allowing tools to optimistically update when user input is received but roll back if their API requests fail. See reducers/zone_settings.js and patchZoneSetting from actions/zone_settings.js.

• errors.jsx: Temporary screen-bottom pop-up triggered whenever network requests fail; displays Cloudflare Error code and message if provided, and if not, shows HTTP response code and message.

• nav_bar.jsx + button.jsx: Navigation panel implemented via react-router Links.

Design Choices

• Libraries: Starting with the assumptions that:

  0. User input would alter application state frequently and

  1. application state would be shared across multiple views/components,

I opted for a React/Redux frontend. React allows for rapid DOM manipulation, and Redux centralizes application state, making it easy for multiple components to read/update shared information.

• Node Express server: I created a lightweight server to wrap client-side API requests to get around same-origin browser restrictions. I chose Node because:

  0. It's lightweight and easily configurable compared to a full-fledge web framework like Ruby on Rails.

  1. Shared language conventions between back/front end code reduces API friction.

  2. I wanted to try Node Express.

• Credential storage: I opted store user cloudflare credentials server-side via ENV vars. This was done because

  0. Session storage on the front-end would add development overhead, while not promoting the objective of learning the Cloudflare API

  1. Adding TLS to ensure security would also slow down development time (although this could be done relatively faster via cloudflare)

Improvements

• Add Unit and Integration tests for components.
• Add tests for API calls both server and client side.
• Undoing failed setting updates is brittle because of potential race conditions; a more robust approach would skip the Undo library in favor of a custom approach that targets the failed setting directly instead of relying on it to be the last dispatched action to the zone_settings reducer.
• Implementing a client-side login UX.
• Refactor index.css to modularize and DRY via SCSS.
• Add additional UX features of the original:
  • API and Help dropdowns on relevant cards.
  • Selectable zones.
  • Update-able user information.
  • Add animations to Error notification bar.
• Fix font-not-loading bug.