AUTHENTICATION & AUTHORISATION

Get started flow ~ #1 Creating a User

This page is where users can first get started by entering details for their account. If a user already has an account, there is a login link which will take them to a page whereby they can enter there details and login to there existing account. The input fields ensure that, upon submission, all values that are entered are of the adequate format, for example validating that emails have the required @ symbol and end with a dot suffix. When the user clicks the next button, provided that they have entered details into the input forms in the appropriate format, this updates the state value which renders the second part of the get started flow.

PAYMENT & BILLING

Get started flow ~ #2 Charging a User

This is the second part of the get started flow. This page knows that It needs to be rendered because of the state change discussed in the prior breakdown. In order to successfully complete this stage the user needs to put their credit card information into the credit card input field. This credit information is secured via the stripe js package which handles validation & all things associated with creating a transaction. The transaction value is calculated by multiplying the number of clients selected by the price per client.

USER DASHBOARD

Apps Page ~ Sending an Invite

The apps page allows users to invite team members to the Slack & Trello resources that were automatically created for them upon signing up. A user can send unlimited invites to an unlimited amount of team members. When a user signs up, utilising the 0Auth 2.0 protocol, Codeflo creates a private trello board as well as a private slack channel. These resources are designed to manage operations & communications between a user and a hypothetical Codeflo representative.

USER DASHBOARD

Info Page ~ Managing Account

The info page provides users with the functionality to manage their account such as logging out, pausing their account or canceling their account as well as manage their client quota by selecting to edit their quota and then adjusting the slider to their new client requirements. The page utilises CRUD operations when interacting with the backend routes & communicating with the database, in this case firestore, to effectively manage user data. Users can also navigate to the clients page to manage clients by clicking the add client button.

USER DASHBOARD

Info Page ~ Managing Clients

The manage clients page allows users to add & delete new clients. The manage clients page ensures that any new clients added must not have the same name as a client that has already been added. It also ensures that the user doesn’t exceed its client quota by preventing the new addition of clients if the user has already added the maximum number of clients for their quota. The page alerts the user to any errors they have made by displaying a UI message for a few seconds that describes what they have done.

ERROR HANDLING

Info Page ~ Managing Clients

As mentioned in the prior breakdown, the manage client page requires error handling to ensure that the user doesn’t breach any requirements such as adding a new client with the same name as a client already added. Here this is exemplified above showing the appropriate UI message that gets rendered to inform the user of this error. The code behind this is relatively simple, the manage clients page checks if the current client total, as represented by the length of the clients array, is equal to the maximum number of clients allowed by the users client quota.

USER DASHBOARD

Message ~ Paused Account

Upon a user selecting to pause their account, this will prevent them from editing their quota as well as broadcasting a permanent message on each page they navigate to. Users can select to resume their account by clicking the resume account button. The message knows to render in the UI as each time the page re-renders, the page checks the boolean paused value on the user doc stored in the database to decide whether to show the message and apply the necessary constraints or not.