# <Login />
This component is used to render the login page.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
React.FC.<Props>
|
Simple props object that we use to redirect the user after they are successfully authenticated. The members of this object come from |
The rendered HTML element that wraps this component within the page.
React.ReactHTMLElement
Members
React.ComponentState
# static LoginComponentState
This is the states of the component. These properties come from the return of the initialization of the specific useState, which returns a tuple of the current state and a function that allows us to update the state. Initial values are set on load.
Properties:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
email |
String
|
null
|
<optional> |
null | The current state of the email form field. |
password |
String
|
null
|
<optional> |
null | The current state of the password form field. |
loading |
Boolean
|
<optional> |
false | The current state of the loading indicator based on fetching and requests being sent. |
Methods
# static change(e)
This function is used to handle all the changes that are done to either the email or password fields in the form.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
React.FormEvent
|
The event that is triggered when the user changes the form data. |
- To Do:
-
- Simplify this function by switch the state of the email and password fields to a single user state with email and password as a key.
# static onLogin(e)
This function takes in an html event element to prevent the default browser behavior. It then creates the GraphQL query to login the user, and asks for the token back as a response. If no errors are present in the returned data, the token is saved in local storage and the user is redirected to the home page after a success message. If errors are present, an error message is displayed in a small notification toast.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
React.FormEvent
|
The event that is triggered when the user submits the form. |