burtonr / app-dash Goto Github PK

When authentication is enabled (the default behavior), but the API_KEY environment variable is not set, the app crashes from an Error thrown by the jsonwebtoken library.

Need to check the existence of the environment variables to avoid unexpected errors.

Probably a startup check so the problem is known as soon as possible. Perhaps add a warning to the /settings response. This way the UI could get updated to show the message on load.

MONGO_URI is required. The app cannot function without it.
API_KEY is only needed if DISABLE_AUTH is not true
PORT is not required

The page should be able to be displayed with either a dark color scheme, or a light color scheme. Similar to GitHub and many other popular sites.

This setting does not need to be persistent across refresh, but it would be good to have (local storage?)

This setting could be a config option to set the default on startup.

Have a look at the MaterialUI Customization

Need a way to build/compile/minify the client with different values based on configuration file.

config has been added as a dependency however, the implementation is not yet in place.

There will need to be something similar to the webpack integration. The end goal is more important than the details. As long as it's possible to change the configuration values when the app is bundled.

Create a Dockerfile for the server.

The Dockerfile should:

• be stored in the /server directory
• use multi-stage build
• result in as small as possible (likely Alpine-based) image
• not require any files not included in the repository
  • new users should be able to git clone -> docker build

React-scripts include a lot of dependencies, and only really useful for getting started quickly.

To minimize the npm warn messages, and remove unnecessary complexity, react-scripts should be removed.

The client/package.json should include the following scripts:

• build
  • To minify the app
• start
  • To run locally
• watch
  • To run locally while "watching" for file changes to speed local development
• test
  • This will have the default no tests output for now as there are no tests

Add endpoint to the /auth path:

• "reset password"
  • POST request
  • User name in the URL path (.../{username}), OR in the request body, OR as a query parameter
  • Authentication: none (must be anonymous since the reset will occur because someone can't log in)
  • Remove the password from the user's stored record
    • Always return an empty 202 or 204. Even if the user doesn't exist.
  • Update /signin to check for missing password.
    • If the password is missing, respond with an error status and message that reads "This user's password has been reset. Contact the administrator"

The "darkMode" and "groupMode" values are stored in localStorage so that the settings are reused when the app reloads.

However, these settings are not respected when loading the app. Adding console.log statements in the places where these settings are read, the log shows the default store value, then shows the updated state. The second log shows the proper setting, but the app is not re-rendered to use those settings.

Create a CI pipeline to run the tests, compile the client-side code, and build a deployable container image

• How should the builds be triggered?
  • tag? branch commit (main/release)? something else?
• Where does the image get published to?
  • Github Packages? Docker Hub? somewhere else?

Add a button to reset a user's password to the login screen.

The button should be discrete, but not difficult to find. It should only be active when the username field is filled in.

Clicking the button should close the dialog and POST to the endpoint defined in #29

Create a Dockerfile for the React client.

The Dockerfile should:

• be stored in the /client directory
• use multi-stage build
• result in as small as possible (likely Alpine-based) image
  • only the public directory should be passed to the final image
• not require any files not included in the repository
  • new users should be able to git clone -> docker build

Currently, all the options are displayed in the main ToolBar when a user is logged in.

It would be less distracting, and lead to a better experience if those options were hidden in an expandable menu. Similar to the profile menu in GitHub when you click the arrow beside your avatar in the upper-right of the page.

Some options to consider, but not limited to:

• Menu
• Speed Dial
• Drawer

Currently, the add/edit only allows for a public URL that the API then retrieves. This should be updated to also allow uploading a local image file in case the user has a custom image that is not available through the internet.

The input should validate that the file submitted is of an image.
The input should allow both drag-and-drop and file system browse options.

If both a URL and an uploaded image are provided, the uploaded image will be used

Add a section to the readme.md file to explain how to run the application without using Docker Compose.

Explain how to run the database in Docker, or use a cloud instance.
Explain how to run the server and compile the React app

The user should be able to choose if the apps are displayed in a multi-column grid (the current default), or a centered list.

This option does not need to remain persistent across refresh. The default can remain as a grid.

The user should be able to change back and forth easily without reloading the data from the server

When editing an item by changing the value of one field, all other fields are removed.

Field values that are the same should remain in place. Also, removing a field's value should remove it. Possibly keeping track with the onChange() calls.

Provide an example script/readme to describe how to deploy.

• Locally
  • With Docker Compose
  • With Kubernetes (?)
• Cloud
  • As a CaaS
  • As a Function (?)

The apps should display in the center of the page.

Currently, the apps start in the upper-left corner.

The apps should start in the center of the page and expand right, then down.

Validate the inputs on the edit form for adding or editing items.

At a minimum:

• Title is required
• URL is required
• URL should be a complete URI

When a new item is added, or an existing item is edited, the server should get the image from the imageUrl field.

The raw image data should be stored in the database.

For backwards compatibility, both the imageUrl, and imageData should be stored until the client is updated to load the image data directly.

This issue is either in place of, or as a sub-issue of #9

Currently, when you refresh the page, the light/dark mode resets back to the default light mode. Also, the user's credentials are removed forcing them to log in again.

The app's state for the user should be stored so that it is retained across reloads.

There is the issue of refreshing the authorization, and setting an expiration. This issue does not need to focus on that, just storing the data and reloading it

Rather than storing the imageUrl, and loading the image on the client, the image should be stored with the item.

The input could be either the public url, or a drag-and-drop of a local file.

The server should store the raw image data with the item so there is only the one network call to display an item

Create a docker-compose.yml file that will run all 3 layers of this app in one command.

• MongoDB
• Server
• Client

The docker-compose file should:

• be stored in the root directory
• use the build options in addition to the image option
  • This is to ensure that only the compose file needs to be run at first start

This requires #1 and #2 to be completed first

Add endpoint to the /auth path:

• "change password"
  • POST request that has the current password, and the new password in the body
  • Authentication: This user, or Admin role
  • Verify current password
  • Save new password

Add a new dialog that allow users to set a new password for themselves.
If the user is an admin, also allow the ability to change a different user's password.

The dialog should have at least 2 text inputs:

• Current Password
• New Password

If the user is an admin, and they are changing the password for a different user, the fields should be:

• Username to change
• New Password

An admin will use this to set a new password for a different user who has forgotten their password, or had their password reset.

The request should POST to the API endpoint defined in #28

When adding an item, after clicking "Submit", the item list is not refreshed to show the new item. After page refresh, the new item is present.

Similar to the Homer app, items should be able to be categorized and grouped.

The groups should be able to be created and edited as items are. Items should be able to be moved between categories.

There should also be a "no category" category as a default