shift3 / boilerplate-client-react Goto Github PK

Describe the bug

Misspelling of the word Additional on this line:

## Addtional Context / Links to Resources

Additional context

We should check if this error occurs upstream as well. i.e. is the typo in our S&P repo?

Dependency: BC9 Foundational

Desired Feature

Add Documentation for:

1. Setup
2. Development
3. Deployment

Steps to Implement

1. Review the Setup of the README

Epic Checklist

• #228
• #229
• #230
• We should give guidance on what tools we use to lint the project.
• We should give guidance on what tools we use to test the project.
• We should give guidance on how to deploy the project.
• We should be able to refer to the wiki for any subject that is not covered by the README.

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

• Initialize React application with Create React App.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The website will have a programmatically determined default view language and default edit language. The view language is the language used for read-only (view) screens and any static labels. The default edit language is the first language selected when editing or creating a new content entry.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Set up all project directories and architecture.

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature:

1. Add a working Terraform configuration.
2. Add a deployment script to package.json.
3. Update the documentation with deployment instructions

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The navigation bar module will allow developers to toggle between two types:

• Top Navigation Bar
• Side Navigation Bar

Actual/Current Behavior

The feature is not yet implemented.

Steps to Implement This Feature

1. Add routes to TopNavigationComponent.
2. Add routes to SideNavigationComponent.
3. Create toggle for Top and Side Nav bars.
4. Verify login/logout functionality

Epic Checklist

• TopNavigationComponent real routes
• SideNavigationComponent real routes
• Toggle Top/Side nav bars

Pre-Testing TODOs

1. Set up this project to run, either locally or through Docker, according to the README.
2. Test it against a working API. Right now, it is being built in tandem with https://github.com/Shift3/boilerplate-server-node. That project can also be be setup locally or through Docker.
3. Update the apiRoute in the environment.ts file to point at the API (e.g. http://localhost:3000).
4. Point this to an API that will send an email. https://github.com/Shift3/boilerplate-server-node can do this but requires SES credentials (get from the maintainers).
5. Create a user through the API and keep the login credentials.
6. Run yarn install to get the new dependencies (ng-bootstrap).

Testing Steps

If you are not a member of this project, skip this step

Login

• Log in with a valid account and confirm that navigates to the dashboard.

Dashboard (Content)

The Dashboard has navigation elements. This project can support either a horizontal top navigation bar, or a vertical side navigation bar. So you can test both, I have placed some demo buttons that toggle between the different kinds of navigation bars. This is going to be removed when I merge this upstream, it's just so you can test both bars. (The idea is that this site wouldn't show both bars as is at the same time, so ignore if they look weird when both on screen at the same time).

• Confirm that each link in the top navigation works. Some of the links go to pages that don't exist yet and result in a 404:
  • Logo - / - Should go back to Login
  • Directory - /content - You are already here
  • Users - admin/user-list - 404
  • Settings - admin/settings - 404
  • Profile - /user/profile - 404
  • Change Password - /user/change-password - 404
  • Sign Out - /auth/logout - Will show a confirmation modal first
• Confirm that each link in the side navigation works. Some of the links go to pages that don't exist yet and result in a 404:
  • Logo - / - Should go back to Login
  • Directory - /content - You are already here
  • Users - admin/user-list - 404
  • Settings - admin/settings - 404
  • Profile - /user/profile - 404
  • Change Password - /user/change-password - 404
  • Sign Out - /auth/logout - Will show a confirmation modal first
• Test the Sign Out button in the top navigation bar. It should show a confirmation modal when you click on it.
• Confirm that the modal does nothing when you click "Cancel" or outside of the modal window to close it.
• Confirm that the modal takes you to the log out screen if you click "Sign Out".
• Test the Sign Out button in the side navigation bar. It should show a confirmation modal when you click on it.
• Confirm that the modal does nothing when you click "Cancel" or outside of the modal window to close it.
• Confirm that the modal takes you to the log out screen if you click "Sign Out".

Desired Feature

The application will allow the user to select the language they can read the website in, from a predetermined set of options.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Dependency: BC9 Foundational

Desired Feature

Set up Wiki tracking for development resources.

Epic Checklist

• Boilerplate Features
• Boilerplate Project Structure
• Development Loop
• General Considerations
• React Implementation
• Misc Boilerplate Documentation
• Resources
• Contributing Guidelines

Additional context

References the Angular Boilerplate at ('https://github.com/Shift3/boilerplate-client-angular/wiki')

Desired Feature

The dashboard will contain the following options:

• Manage Users (Super Administrator)
  • CRUD Users
  • CRUD Dropdown Lists
• List View (FS6)
  • Pagination/Sort
  • CRUD Form
• Account Settings
  • Read, Update Information
• Logout

Steps to Implement

1.) Add CRUD User list view
2.) Administrators can create Users (Page for creating Users)
3.) Create and Edit functionality to page.
4.) Add Delete functionality to page.
5.) FS6 List Views
6.) Add pagination.
7.) Add sorting.
8.) Add UI buttons for CRUD form.
9.) Add current user view (profile page).
10.) Add user update profile information (First Name, Last Name, Email).
11.) Verify logout works from dashboard when logged in to update profile page.
12.) Add update profile form & page.

Epic Checklist

• Administrators can create Users (Page for creating Users) '/content/create-agent'
• Add view functionality to page. '/content/agent-list'
• Create and Edit functionality to page.
• Add Delete functionality to page.
• FS6 List Views
• #426
• #427
• #429
• Add UI buttons for CRUD form.
• Add current user view (profile page).
• Add user update profile information (First Name, Last Name, Email).
• Verify logout works from dashboard when logged in to update profile page.
• Add update profile form & page.

Desired Feature

Fields, labels, and buttons must allow for resizable content so that translated strings of varying lengths will still present well in the UI.
Only right-to-left, top-to-bottom languages will be supported.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The application will support translation of static labels and fields. These will be programmatically built into the application and not configurable.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

By default, the list view items will contain the following:

• Thumbnail (ex: Profile Pic, Item Pic, Logo)
• Name
• Description
• Contact Information
  • Address
    • Address 1, Address 2, City, State, Zip Code
  • Phone
  • Email

Steps to Implement

1. Get the data from the parent component which will make a request via the http service and pass the data in the form of props
2. create a table row that will contain the list item data based on props but defaulting to the above
3. conditionally render data based upon the prop values passed in (no-undefined render)
4. create individual table data items for the information passed in or defaulted
5. Add unit tests

Epic Checklist

• Receive data from agencyList #142
• Create table and table header utilizing props #143
• Pass the line item data iteratively to the lineItem components #144

Dependency: BC9 Foundational

Desired Featured

1. Set up CircleCI.
2. Run linter.
3. Run unit tests.
4. Run build.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The application will support user-generated translations by allowing form entry for each supported language on each translatable content entry.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The application will conform to WCAG criteria regarding responsive design. In addition to being responsive, the components will be created with clear visuals including:

• Alt text or descriptive captions for all images in the code.
• Navigation is not reliant on color.

Epic Checklist

Add a list of issues related to this epic

Additional context

The recommended ADA compliance checker is Wave. 'https://wave.webaim.org/'

Add any other context or screenshots about the feature request here.

Desired Feature

• Add Dev Dependencies
• Move Dev/Dependencies to appropriate place (dev or otherwise).

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

• Set up linting with ESlint & Prettier.
• Add .eslintrc.js & .prettierrc.js config files.
• Add linting properties to each config file.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The dashboard will have route guards to prevent unauthorized access.

Steps to Implement

1. Create an authenticated route or 'private' route component.

2. Create a public route component that will bounce authenticated users to the homepage when attempting to access. This route should be returned or a redirect component that will take the user to /auth/login

Desired Feature

The list view will be a generic component that can render a list of user-created records for any data entity within the application.

Steps to Implement

1.) Create List View components.
2.) Create List Item components.

Epic Checklist

• Create list view components #140
• Create list item components #141

Additional context

Desired Feature

The application will email a link with instructions on how to reset a password.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The login page form will include the following fields:

• Email
• Password

Steps to Implement

1.) Create unit test and Login form with validation.
2.) Set up HomePage UI with Login form.

Desired Feature

The application will support user-generated translations by allowing form entry for each supported language on each translatable content entry.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The application will support appropriate locale support for dates and times. The application should also support localized pluralization where possible.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The webapp should have a working docker configuration.

Steps to Implement

1. Add a development docker configuration and a production (deployment) docker configuration.
2. Add configurations for the unit and e2e test runners.
3. Update documentation to explain how to use docker.

Epic checklist

• Add Development Docker Configuration
• Add Production Docker Configuration
• Add configurations for unit and e2e test runners
• Add documentation on using Docker

Additional context

Dependency: BC9 Foundational

Desired Feature

The application will allow the user to select the language they can read the website in, from a predetermined set of options.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The components will be able to support supplemental audio and video when necessary.

• Captions for videos
• Transcripts for audio files

Video captions must be embedded in the original video content. Audio transcripts must be uploaded when uploading the audio.

Note: Shift3 does not perform audio transcription services, therefore the client must provide them for all source material.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.
The recommended ADA compliance checker is Wave. 'https://wave.webaim.org/'

Add any other context or screenshots about the feature request here.

Desired Feature

Users will be able to reset their password from the login page.

Steps to Implement

1.) Create Reset password page.
2.) Add password reset link to login page.

Desired Feature

When creating a new user account, the following fields will be required:

• Email
• Confirm Email
• Password (Create Invitation Email with Token)
• Profile Picture (Photo Upload)
• First Name
• Last Name

Once an account has been created, users will receive a welcome email. (FS6)

Note: The invitation email will contain a link back to the application where the user can create a password by completing the following form:

• Auto-Generated Password
• New Password (with Strength Meter)
• Confirm New Password

Steps to Implement

• Create/generate a form to take in the account data
• Make a call via httpService and prompt the user to check their email via flashMessage
• Create a dynamic route and add to the router as a PublicRoute
• within the setPasswordComponent
  • Create/generate a form with password and password repeat
  • onSubmit utilize the id in the dynamic route and the formData to send a request via httpService and set the password

Epic Checklist

• Implement User Roles
• Implement Role Checks
• Implement User Account Creation
• Implement User Account Activation
• Implement User Update and Delete
• Implement Resend Account Activation
• Add sign up view with form on /auth/signup page
• Add 'Create Account' and 'Cancel' buttons on login page to navigate to /auth/signup
• Add password reset form to /auth/activate-account/:token

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The library will contain email templates for the following events:

• Reset Password
• Account Created (Welcome)
• Invitation Email

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The reset password form will contain a single field for users to input their email.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Dependency: BC9 Foundational

Desired Feature

Set up Sentry in the Project:

1. Add Sentry dependency.
2. Extend React error handling.
3. Add HTTP error handling via an interceptor.
4. Invoke Sentry from error handling.
5. Create Sentry configuration to decide which environments should call Sentry and other behaviors (e.g. toggling the Sentry dialog and toggling printing of errors to the console).

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The reset password link will redirect users to a form with the following fields:

• New Password
• Verify New Password

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Add project dependencies.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Write Acceptance Tests for QA Manual Testing

Steps to Implement

1. Create QA sprint issue.
2. Create Acceptance test master issue.
3. Contact QA for sprint.
4. Work with QA until issue is closed.

Epic Checklist

• First Acceptance test QA: #200
• #348
• #349

Additional context

We will be mostly copying the Angular boilerplate within reason. Anything we can get to will be added to the master QA issues.

Desired Feature

Supported languages will be defined programmatically by the developers. This will not be user or admin configurable.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The website will have a programmatically determined default view language and default edit language. The view language is the language used for read-only (view) screens and any static labels. The default edit language is the first language selected when editing or creating a new content entry.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Add documentation for Yarn and running the project.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Set up a .github folder with the following:

• ISSUE_TEMPLATE folder
• CODEOWNERS
• PULL_REQUEST_TEMPLATE.md

Desired Feature

Remove unused files and clean up CRA boilerplate code.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Supported languages will be defined programmatically by the developers. This will not be user or admin configurable.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The application will support translation of static labels and fields. These will be programmatically built into the application and not configurable.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

• Create general layout for project HTML
  • Header, side bar, content, footer
• Context discussions and decisions
• Investigate Husky
• Finalize dev dependency libraries

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Users will be able to logout and view a page stating their session has ended.

Steps to Implement

1.) Create logout button.
2.) Created route from logged out user back to Login page.

Desired Feature

The components will be keyboard friendly:

• Users who are unable to use a mouse will be able to navigate the components with a keyboard.
• Users will be able to easily determine the location of keyboard focus at all times.
• Users will be able to switch the location of keyboard focus at all times.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.
The recommended ADA compliance checker is Wave. 'https://wave.webaim.org/'

Add any other context or screenshots about the feature request here.

Desired Feature

The application will support appropriate locale support for dates and times. The application should also support localized pluralization where possible.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The list view will allow users to specify the number of records per page that should be displayed. This selection will persist until the user changes it.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

The reusable navigation bar will include the following items:

• Dashboard (Home)
• Manage Users (Admin)
• List View
• Login/Logout

Steps to Implement

1. Create a DashboardComponent which will contain the dashboard from FS5. It should only contain scaffolding for now.
2. Create a TopNavigationComponent which will contain the links from NB2. It should only contain scaffolding for now.
3. Create a SideNavigationComponent which will contain the links from NB2. It should only contain scaffolding for now.

Epic Checklist

• Create DashboardComponent
• Create TopNavigationComponent
• Create SideNavigationComponent

Pre-Testing TODOs

1. Set up this project to run, either locally or through Docker, according to the readme.
2. Test it against a working API. Right now, it is being built in tandem with https://github.com/Shift3/boilerplate-server-node. That project can also be be setup locally or through Docker.
3. Update the apiRoute in the environment.ts file to point at the API (e.g. http://localhost:3000).
4. Run yarn install to get the new dependencies (ng-bootstrap).
5. Make sure the dashboard page is present.

Testing Steps

If you are not a member of this project, skip this step

Dashboard (Content)

The Dashboard has navigation elements. This project can support either a horizontal top navigation bar, or a vertical side navigation bar. So you can test both, I have placed some demo buttons that toggle between the different kinds of navigation bars. This is going to be removed when I merge this upstream, it's just so you can test both bars. (The idea is that this site wouldn't show both bars as is at the same time, so ignore if they look weird when both on screen at the same time).

• Confirm that the layout works. The top navigation bar should be at the top of the screen and extend all the way across.
• Confirm that the side bar is on the left side of the screen and extends all the way vertically (it won't overlap with the top bar when both are visible). The menu links should be vertically centered.
• Confirm that the content is centered on the screen (up until 1980pixels wide).
• Confirm that the dropdown menu on the top navigation bar for "Hi Username" has "Name" to the left, centered, and three menu items to the right ("Username" and "Name" are placeholder values).
• Confirm that the dropdown menu on the top navigation bar for "Hi Username" has "Name" to the left, centered, and three menu items to the right ("Username" and "Name" are placeholder values).
• Test the keyboard functionality of the top navigation bar. Confirm that you can navigate through every menu item and interact with them.
• Test the keyboard functionality of the side navigation bar. Confirm that you can navigate through every menu item and interact with them.
• Test the responsiveness of the top navigation. It should switch to a hamburger menu on smaller screens.
• Test the responsiveness of the side navigation. It should switch to a vertical navigation bar on smaller screens (this will change when we get a design for the side navigation version of the webapp).

Desired Feature

The components will include accessible forms and files.

• Contact forms will be grouped together to allow assistive readers and other technology the ability to read the form out loud.
• All public documents, such as PDFs, will be accessible.

Note: The client must provide the transcripts for all source material and upload their own accessible docs.
The components will include accessible forms and files.

Steps to Implement

Add a list of the steps required to implement this feature

Epic Checklist

Add a list of issues related to this epic

Additional context

Add any other context or screenshots about the feature request here.

Desired Feature

Add Epic issue template to project.

Additional Context / Links to Resources

The Epic Issue template is helpful for initial project setup.

This particular template is useful: https://github.com/Shift3/boilerplate-server-node/blob/develop/.github/ISSUE_TEMPLATE/epic-issue-template.md