cshangout / cs-hangout-website Goto Github PK

The .NET API and related projects will be the backend of the site. The API will receive requests from the React client and respond with relevant data. The API should handle authenticating users, all CRUD operations for the data in the database pertaining to posts/classes, and use appropriate patterns to implement SOLID programming principles. The acceptance criteria will be:

• Controller to handle requests to for authorizing users and registering new users
• Controller to enable CRUD operations to be performed on the database for posts/comments
• Utilize Dependency Injection and proper unit testing methods

As a user I need to be able to route successfully to the registration component. This should be accessible by the endpoint "http://localhost:4200/register"

Acceptance Criteria:

• Register the Registration component with the react router.
  • Endpoint should be "http://localhost:4200/register"
    • Domain name should be substitutable
• Create Register button on the Header component
  • Button should only be visible when the user is not logged in
  • Button should route on click to the registration component's url

As a user, I need to be able to remain logged in during the length of my session. To do this, the backend will provide a JWT to the frontend. Successive requests from the frontend will contain this unique jwt for my user authentication. We need to research the best potential option to store this data in the frontend in between requests.

Acceptance Criteria:

• Document findings and provide a suggestion on how the JWT should be stored.

Tips:

• While researching, it will be beneficial to consider the types of storage options available. Should the token be stored in app memory, in the browser storage, etc.
• We are not using a cache currently so that will not be viable.
• Consider that the JWT could potentially contain sensitive data and should not be stored in a way that an unintended individual could get access to it.

As a developer, I need to understand how to submit pull requests and how my code will be reviewed.

Acceptance Criteria:

• Document should provide details of how to submit a pull request on Github
• Document should provide details of the review process and the branching strategy
• Document should detail how approved code will be merged and deployed

As a developer I need to aggregate string content into one file to be easily accessible.

Acceptance Criteria:

• Create Constants file in a helper directory to be able to store constants in a dictionary to be added as needed

The site will need to be hosted securely and available for access at any time. Determinations will be made for a hosting provider, potential containerization, and permissions to access the hosting environment. Acceptance Criteria will be:

• A hosting provider has been determined
• If relevant, the type of hosting that will be needed (PaaS, SaaS, etc)
• Determination on utilizing containerization
• Determine the CI/CD process for continual updates to the site
• Implement CI/CD process
• Launch site and all required resources

As a user, I need to be able to log out.

Acceptance Criteria:

• Create Log out button component
• Component should be contained in the header

As a developer, I need the .NET API to utilize dependency injection to the create services on demand and handle garbage collection, while providing a loosely coupled environment. The startup class for the .NET API should contain the following:

• CORS Policy
• Serilog
• Microsoft DI setup

Acceptance Criteria:

• Startup.cs should be called in the Program.cs file
• Startup.cs should contain necessary Services to start Serilog logging

Auth endpoint should be created in an Authentication controller. This endpoint should be a Post request that accepts the username and password from the frontend and return an OK response.

Acceptance Criteria:

• Auth Controller created
• Auth Controller contains Auth endpoint
• Auth endpoint is a post request
• Auth endpoint returns ok response upon receiving username and password

As a developer, I need an easy way to present information to a user based on a response to their input. A toast can be used when login attempts are made to advise if the login was successful or failed.

Acceptance Criteria:

• Create React component to handle toast alerts
  • Toast component should accept props that contain an applicable message
  • Toast component color should be able to be passed as a prop based on failure
  • Toast component should be unit tested

As a user I need to see appropriate buttons on the header whether I am logged in, logged out, or registering. To do this, state of the header needs to be managed with using the 'loggedIn' variable and any other variables that should detect logged in state.

Acceptance Criteria:

• The header displays correctly whether a user is logged in or not
• The 'setLoggedIn' method is called upon a successful login to change the state to logged in

Hint: You may have to manage state within a higher level file that passes state variables or state management methods to lower level components

The creation of the React client is the user interface for the site. This user interface should allow users to enter login information for the site, verify the legitimacy of the login attempt with the server, and contain all the functionality for users to make/view post for specific classes. For the the MVP the acceptance criteria will be:

• Login Page with functioning authorization
• Welcome Page that users will be redirected to following a login
  • Page should contain description of the site purpose and appropriate links to all functionality
• Class Pages where posts and comments can be aggregated by specific classes
• A Post Submission Page that allows users to submit new posts/comments to different classes
• A Post View page that contains primarily only the selected post, editing options for that post, and comments related to that post
• User Profile Page that allows user to change their password
• Mod Landing Page that allows moderators to perform their duties
• Admin Landing Page that allows admins to perform their duties

As a developer, I need to be able to quickly set up my local environment to be able to write code for the .NET application.

Acceptance Criteria:

• Document shows how to install Visual Studio 2022
• Document shows how to install all required packages
• Document shows how to run the API
• Document details .NET project structure for consistency across developers

As a developer I need to have Identity management for users trying to access the backend endpoints. I need to use .Net Identity to assign users and role permissions.

Acceptance Criteria:

• Create user/role dbs that will handle identity management
• Identify user by role and identity
• Set up endpoints to handle roles

As a developer I need a configuration file to be able to be used and edited without continually redeployments. This file should not contain sensitive data and only endpoints or other config variables that are not secrets.

Acceptance Criteria:

• Create config file system to hold variable configs for each development environment
• Add Backend API endpoint to config

As a developer, I need a UI component that will hold all other components within it to act as the main frame of the landing page. This component should be static throughout the landing page and act as the top level component that contains the functionality a user needs to log in.

Acceptance Criteria:

• Main Login Page Component Created
• Main Login Page Component Added to App.js
• Main Login Page Component bootstrap styles set

Create a temporary token service to be able to handle login attempts and respond with a JWT.

Acceptance Criteria:

• Token Service is added to the DI
• Token service generates a token on successful logging in

As a developer, I need a secure way to store tokens to maintain user persistence within the application.

Awaiting completion of #55 before building criteria.

Update:

We will use local storage for the moment to store the JWT. We need to build an token manager that will store the token received and verify if it is still valid when requests are made

Creation of onboarding documentation to allow new developers to quickly set up and run the program locally, understand the design and goals of this project, and understand how to submit new code and complete work items. Acceptance Criteria is:

• Document that shows how to run the React app
• Document that shows how to run the .NET app
• Document that outlines testing practices
• Document that details pull request and review process.
• Document stating the intention of the MVP

As a user, I need to be able to login and have my personal information validated against the server to confirm I am the correct individual. This will be done by a post call to the backend API route using the API route configuration. The post call should send the username and password to the backend and await a jwt token response if valid or error if invalid.

Acceptance Criteria:

• Function created that makes a Post Call sent on submit button click with valid form in Login component
• Function should await the response of the authorization call
• Function should response to the following scenarios:
  • Success: Route to next page (for this story, a Console.log message showing success will be sufficient)
  • Failure codes:
    • 400: Bad Request. Toast message indicating this is an invalid request.
    • 401: Not authorized. Toast message should display indicating the login info is incorrect or invalid
    • 500: Server Error. Indicate with a toast that the server is potential down or not accepting response
• Function should have appropriate unit testing to mock responses.

As a developer, I need clearly defined testing goals to maintain testing consistency across the team and ensure code I write operates correctly.

Acceptance Criteria:

• Document should detail testing libraries used for the client and the server
• Document should provide further documentation on how to run unit tests for a library
• Document should provide specific testing goals for new code
• Document should contain links to testing best practices

As a developer, I need to be able to navigate to different pages within the site. To do this, routing must be established. React Router needs to be implemented for our current react version and set up the basic routes for the current pages in the application.

Acceptance Criteria:

• React Router is added to the app.js file in a way that it can be used to navigate to different pages.
• Initial links set up for routing to "https://localhost:4200/#" for the main page.

As a user, I would need to log into the site by providing a username and password. The password should not be visible when I am typing and should accept a max of 24 characters.

Acceptance Criteria:

• Create a User Credentials Login Component
• Component should contain an input field for username
• Component should contain an input field for password
• Username field should require email
• Username field should be no longer than 40 characters
• Password component should be no longer than 24 characters and a minimum of 8 characters
• Component should be added to the Login Landing Page Component

As a user, I need to be able to go to a new page after successful login or registration. There will need to be a component created that will house all components that can be displayed post sign on. This will simply be the container and will be added to later. This component should be called MainContainer and should return a div currently.

Acceptance Criteria:

• Create Component called MainContainer
• Component should return a div
• Component should be added to the router under the route "/#"

As a dev, I need to be able to easily track logs throughout the program. A logging library will assist in easily logging throughout the program. Serilog is a robust logger with many features and will fit our needs well.

Acceptance Criteria:

• Create Serilog configs
• Register Serilog instance with the DI
• Serilog should output to debug and console for the moment

As a user, I would like to see a header that contains valuable information. This header should be reactive to whether I am logged in or not. When not logged in, the header should display the name of the site and a button to Login and a button to register. When logged in, the header should contain the name of the site, the user profile link, and a logout button.

Acceptance Criteria:

• A header component that spans the width of the screen.
• Component should contain Name of the site aligned with left side of the screen and other options aligned with the right side
• Header should be a reasonable height to contain all text and some padding
• Header should contain all links and buttons, though they will not have functionality yet.
• Header should use state to determine which header type to render

As a user, I need to be able to log out of the application. To do this, I will need to hit a logout endpoint within the api.

As a developer, robust unit testing needs to be completed to ensure code responds correctly.

Acceptance Criteria:

• Write happy path unit tests for the methods in the following classes:
  *Server.Infrastructure.Repositories.Users.UserRepositry.cs
  • Server.Infrastructure.Authentication.PersistenceService.cs
  • Server.API.Features.Authentication.Registration.RegistrationService.cs
  • Server.API.Features.Authentication.SignOn.SignOnService.cs

As a user, I need to be routed to the Main page of the site after logging in or registering successfully.

Acceptance Criteria:

• Refactor existing methods for logging in and registering to, upon success, route to the "/home" page.
• Confirm that this behavior only occurs after a success.

As a developer, I need to understand the overall goal of the project and how everything will fit together.

Acceptance Criteria:

• Document should provide clear, tangible goals for the MVP
• Document should help limit the potential for scope creep as the project progresses

As a developer, I need to be able to quickly get the program running locally to be able to write code and maintain consistency across the team. This document should provide step by step instructions on how to set up my local environment.

Acceptance Criteria:

• Document shows how to install Node
• Document shows how to install React
• Document shows how to setup an IDE for the project
• Document shows how to run the project locally
• Document shows how the client project structure will be maintained

As a user, I need to be able to register for the application. This component should be opened when the register button on the header is clicked. The user should be routed to a specific Registration component with a form and a button to register. The button currently should log that the form was submitted.

Acceptance Criteria:

• Create new Registration component
• Registration component should contain a form that captures:
  • A username field that is max of 40 chars
  • An email field that is a max of 40 chars and requires it as an email
  • A password field that is max of 24 chars and minimum of 8 characters. (Later a pattern will be required)
  • A reenter password field that's value must match the value of the password field
  • A submit button that submits the form
• Form should not be able to submitted until all fields are entered and correct

As a user I need to be able to send registration data to the backend api to be stored in the db. This call should be a post request to the /auth/register endpoint on the backend and send the username, email, and password captured in the login form.

Acceptance Criteria:

• Post request generated on submission of a valid registration form in the Registration component
• Post request send request to the backend "/auth/register" endpoint
• When response is received, if successful with 200 status:
  • Log successful login
• When response is unsuccessful:
  • Generate a toast message based on the following codes:
    • 400:
      • Message should read "Bad Request. User is already registered"
    • 401:
      • Message should read "Unauthorized to register account"
    • 500:
      • Message should read "Server error received. Contact tech support if they exist"

As a user, I need to be aware that a login attempt has failed. I need to see a toast that indicates the type of information that failed and how I can correct it. It would also be helpful if the color of the toast indicates a failure. This should be activated once the "submit" button has been pressed.

Acceptance Criteria:

• Using the Toast Alert Component, allow a toast to be created upon failed login attempt
• Create a shared Constants file for the toast alerts to store strings that can be used in the alerts.
• Toast Message should be:
  • If user has entered both a username or password: "The username or password you have entered is invalid or not recognized. Try again.
  • If user has entered just a username: "Password field is empty. Please enter a password."
  • If user has entered just a password: "Username field is empty. Please enter a username."
  • Style passed to the component should indicate a failed toast (Color should be red)
  • Unit tested

Database will be needed to store user permissions and all data related to posts/classes. Acceptance Criteria is:

• Spike to determine type of database needed (relational/non-relational)
• Creation of the database
• Design of the schema
• Creation of the tables for authorization, posts, classes, etc
• Designate where the database will be hosted to be accessed during development