chriscarleton/divelog

An online scuba diving log book

Bottom Time

Circle CI build:

Code Coverage:

Dependencies:

Security:

An online scuba diving log book.

Developing Against Bottom Time.

See the API documentation here.

Building and Testing Locally

Prerequisites

• You must have Node.js v8.4.0 or higher installed.
• You must have Docker installed to run the fake DynamoDb module.
• You must have Gulp installed globally. (Run npm i -g gulp.)
• It's also a good idea to have Bunyan installed globally for viewing log output. (npm i -g bunyan.)

Preparing a Development Environment

From the project directory simply run:

./deploy/setup-local.sh

This will run the fake DynamoDb Docker image and provision it with the tables necessary for testing and development. Now the project's integration tests will run and you can begin developing locally.

Tearing Down a Development Environment

To stop and remove the previously created Docker containers run

./deploy/teardown-local.sh

The Mail Client

Some functions of the application involve the sending of templated e-mails. In order for the app's mail client to work, certain environment varialbes need to be set.

• DIVELOG_MAIL_FROM_ADDRESS - The address from which e-mail messages from the app will appear to originate from.
• DIVELOG_MAIL_HOST - The host name or URL of the SMTP server that will deliver the app's mail messages.
• DIVELOG_MAIL_PORT - The port number on which the SMTP host listens for connections.
• DIVELOG_MAIL_USERNAME - The username to use when authenticating with the SMTP server.
• DIVELOG_MAIL_PASSWORD - The password to use when authenticating with the SMTP server.

Testing the Mail Client

To test to see if the e-mail client is configured correctly, there is a test script that can be run.

node deploy/mail-test.js <destination>

The script will invoke the app's mail client to send a test e-mail to the address specified as <destination>.

Common Gulp Tasks

Run unit tests:

gulp test

Lint the code:

gulp lint

Bundle the web components (WebPack):

gulp bundle

Run the dev server (see below for more information):

npm run dev

Dev Server

To facilitate local development you can run the app in the dev server, which is powered by gulp-live-server. Gulp will monitor all .js and .pug files in the service/ directory and restart the server upon any changes so that you can continue making changes and the server will keep the running app current.

The dev server uses a locally-running, in-memory version of DynamoDb for its data store. You will need to make sure it's running before starting the dev server. See the section above on Preparing a Dev Environment.

Additionally, Webpack Dev Server is used to serve the front end Javascript to the browser. This gives us React hot reloading of modules which means the server should not need to be restarted to immediately show front-end changes in the browser.

To start the dev server you can run

npm run dev

Generating Test Data

Run the following command

npm run test-data

To generate some random test data and inject it into the dev server database. You will get several users (including one admin user) and roughly 1000 dive log entries.

divelog's Issues

Scrollspy not working on log entry page

Scrollspy control is present but it is not setting the active element in the nav panel on the left side of the dive log page.

Front-end assets should be stored in the CDN.

formUtils.tryReturnAsNumber is not allowing fractional numbers.

It is currently impossible to write numbers with decimal places into textboxes where the input is run thru formUtils.tryReturnAsNumber(). The decimal gets trimmed off as soon as it is typed in! Need to fix this!

What's with the glyphs?

The glyph icons are suddenly looking messed up. Get to the bottom of that and get them looking normal again.

Error handling for OAuth routes currently sucks. Please make it more helpful.

Licensing... Make sure we select the right one.

Want to license this so anyone can contribute but not everyone can host their own version... Look at projects like Habitica to see what kind of license they are using.

Make the map useful

Users should be able to click on the map to set the dive site's GPS coordinates. That way the map isn't just a pretty thing to look at. Also, it would be nice if the map auto-centered on the user's current location (browser location services?)

Control labels are not right-aligned!

This makes for some weirdness. When the text is long enough to wrap, the control labels will be right-aligned. When the text is not long enough, they will be left-aligned. It's gross. Please fix.

Handle session destruction better

When users log out or their sessions expire we should be terminating the session in the UI:

• Redirect to home page if the user is on a page that requires auth.
• Purge potentially sensitive data from the Alt stores.

Sanitize user information before returning in APIs.

Make sure sensitive user information is stripped before it is returned from any APIs. APIs that return a user entity right now are:

• Login
• Sign up
• The "me" API.
• Possibly more...

Standardize this goodness. Never return the raw req.user object!!

Get Google places API going for location auto-complete

Location auto-complete would be a sick feature in a few key spots:

• The Location field on the log entry page.
• The location field on the user's profile info page.

Text box validation: Bug in how required fields are displayed

Validation state does not always match whether a required field has text in it or not.

Test coverage is not reported correctly

There is something wrong with the test coverage - it is not being reported to Coveralls correctly. :( Need to address this.

Require SSL

Find a way to ensure that requests over HTTP are redirected to HTTPS (without breaking health checks or the ELB, etc.)

Fix password validation

Find a new regex for validating passwords - the current one kind of sucks.

Refreshing page with an expired session results in a 500 error.

Deployment to Prod Fails

Modifications need to be made to divelog.yml. Deploying a production stack fails due to conflicting resource names. :(

Some resources (e.g. load balancers) etc. will need stack-specific names like the dynamo tables have.

Implement a single source of truth for the password strength Regex.

This stupid regex is copy/pasted all over the app. Put it in one location and import it.

Connecting OAuth accounts does not redirect to OAuth profile page

Using the "Connect your Xxxx account" option in the profile/OAuth page should redirect back to the profile/OAuth page when successful.

Refine and test dive log entry validation

Discard Changes button

Discard Changes button on dive entries page. Not sure this works properly. Double-check it.

Colon wraps on Sign Up page

The colon of ControlLabel of the retype password field on the sign up page wraps to another line and looks dumb. Pls fix.

Errors being dumped to the browser!!

This gets rendered to the browser when I kill the database on my dev server:

Error: connect ECONNREFUSED 127.0.0.1:7777
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1085:14)

Definitely need to handle this more gracefully!!

User should be case insensitive for the purpose of log ins

Logging in with Chris vs chris is not handled the same. This could be frustrating and confusing for users. Please fix.

Protect Session Secret

Make the Express session secret configurable so that it can be injected into the environments at run time. It's not safe to have it in source control - session hijacking, man!!

Add body padding

Add padding to top of body to accommodate fixed nav bar.

Clear AlertBox on navigation

Figure out how to hook into some sort of onNavigate event to clear the AlertBox when leaving a page.