Disable register and login forms while submitting (waiting for async fetch)

[AtikoSpeed]

When onRegister() (in /register) or onLogin() (in /login) is called, it will take some time for the async request to be processed. The textboxes and submit button should be disabled during this time to prevent multiple identical requests being made while the previous ones are processing.
In case there is an error, an error message should be displayed and the text fields re-enabled for the user to correct their mistake.

FİLES TOUCHED
src/login/index.js
src/register/index.js
src/context/auth.js (possibly)

WHAT DO THEY RETURN?
onLogin and onRegister are async at their base but one might need to add async on the login and register pages depending on the behavior

They do not return any message, only save a JWT and user info into the local storage. They should be made to return success on success or in case of an error, error and an error message to be dispayed on the login/register page.

The response format should be:

{
status: success,
}

or

{
status: error,
errormessage: "one of the errors below",
}

Success does not have to return a message because the user will be taken to another page on success.

Error messages:
onRegister

if email exists
errormessage: “Email is already in use”

onLogin

if email & password combination has no match
errormessage: “Incorrect email or password”

SPİNNER
There does not seem to be a spinner included in the codebase. There is a library called react-spinners that one could use. It includes different styles of spinners. We are going to install it through npm.

The spinner will go on the left of the disabled button.

İMPLEMENTATİON
auth.js should be altered to return an error message in case of an error
TextInput and Button components in both login, and register pages should have a disabled=true prop after the submit button is clicked. They should be re-enabled in case of an error returned by changing the prop to disabled=false. They don’t have to be re-enabled in case the login/register is a success because the user will be taken to the next page anyway.

[th0jensen]

I say you can go ahead with this, but what about using a loading spinner (inside the button) as well as disabling them?

[AtikoSpeed]

I say you can go ahead with this, but what about using a loading spinner (inside the button) as well as disabling them?

Yes this sounds cool. I'll add that as well

[dogezen]

OK - please the description should include:

a) what files will need to be touched
b) do you need to update onRegister and onLogin to return something? are they currently returning something? are they async already?
c) make a note of how you're going to implemen the spinner: do we already have a package / something we can use in the repo for this or are we going to have to use something / add a new package?
d) where will the spinner go?

[th0jensen]

I'd also like to add to the issue (since you're already gonna work on these components) that it would be nice if you could add the following:

• Error messages for Login and Sign up
• Sign up -> if email is already in use
• Login -> incorrect email or password

To my knowledge these are not implemented yet.

[AtikoSpeed]

I'd also like to add to the issue (since you're already gonna work on these components) that it would be nice if you could add the following:

• Error messages for Login and Sign up
• Sign up -> if email is already in use
• Login -> incorrect email or password

To my knowledge these are not implemented yet.

Working on it

[AtikoSpeed]

@dogezen @th0jensen @zainabch123
Changes have been made. Please review

[dogezen]

DESIGN:

WHAT DO THEY RETURN?
onLogin and onRegister are async at their base but one might need to add async on the login and register pages depending on the behavior

They do not return any message, only save a JWT and user info into the local storage. They should return an error message to be dispayed on the login/register page in case of an error.

In this section, you could make it more clear that you want the onRegister function to change signature to return something.

What is the return type? is it going to be an object like: {error: false, message:""} and {error: true, message: "password is incorrect"}?

You need to include a note about what you return from those functions in case all is OK or there's an ERROR, so that it's clear what the return type is.

The spinner could go between the email and password fields as they will be both disabled, but I suggest a group vote on where it should go.

the spinner can go to the left or right of the submit button; so on submit, the spinner appears next to the disabled button