‫All right, so let's now split
‫up this feature of user signup into two lectures
‫where in this first one we will just build the signup form.
‫Now, in this application,
‫not everyone can create a new account.
‫So, not everyone can sign up for this application, unlike,
‫for example, something like Twitter or Reddit.
‫So here in this app, only employees
‫of the hotel should actually be users of this app.
‫And so therefore, the idea is
‫that these users can only be created inside the application.
‫And so this way new users are basically immediately verified
‫by the existing hotel staff
‫because only that stuff can actually create new users.
‫And so, that will happen right here on this user's page.
‫So, this is where you will create a new user
‫and if you want to take it to the next level,
‫you might then also maybe add a table here
‫for all the existing users where they can then be managed.
‫But here we will only have that form where we can sign
‫up a new user.
‫Now, okay. And again, in many other applications
‫like the ones that you might build in the future,
‫you will have a separate signup page
‫just like the login page that is accessible
‫to everyone, but not here.
‫So, right here we already have the user's page
‫and also we already have some bare bones sign-up form.
‫So which has some of the markup,
‫but which we will now make come to life.
‫And so here under this heading,
‫let's actually include that sign-up form.
‫And then here we will need a fragment.
‫And there we go.
‫Nice. So, this is already looking great,
‫but let's now improve this a lot
‫with things like error handling.
‫And so for that,
‫we will now again use the React hook form library.
‫So whenever we have a bigger form like this one here
‫and which needs some important validation,
‫it's a good idea to use a helper library like that one.
‫So with this,
‫we get to practice it here then a little bit more.
‫So let's start by including that here.
‫So use form from React hook form
‫and then let's immediately grab the register function
‫and also the form state.
‫And then we can also right away create the errors
‫from that form state, just like we have done previously.
‫And so now here the idea is to use the register
‫function here in each of these inputs to give them a name
‫and basically manage this state.
‫So then React hook form will actually manage the state
‫and not us manually.
‫So here we register this field using dysfunction and pass it
‫in the full name, field name, and then here some validation.
‫So here we can use required
‫and then say this field is required.
‫All right and as I mentioned earlier,
‫calling dysfunction here will basically create a few props
‫which we then spread with this onto this input component.
‫And so now let's actually place this on all of them here.
‫And then we just need to change the field name.
‫So here it's gonna be called the email.
‫Here, the password
‫and then here, password confirm.
‫Now okay and now let's add or other validations here
‫besides the fact data fields are required.
‫So the full name doesn't require anything else,
‫but the email address we actually need to check
‫if it is a valid email address.
‫And for that, I already edit these rejects here.
‫So let's grab that because rejects is one of the ways
‫in which we can do form validation in this library.
‫So here, after required, we can add pattern.
‫And so then there we can specify the value
‫which is the rejects itself
‫and then the message in case this fails.
‫So provide a valid email address.
‫Next up, here it says even
‫that the password needs to have at least eight characters.
‫So, that's easy enough.
‫Here we can just specify the min length
‫and then again specifying the value.
‫So, that's eight.
‫And then the message string.
‫So password needs to or needs a minimum of eight characters.
‫Now, okay, easy enough.
‫And now here we have the hardest one
‫which is that basically this password needs to be exactly
‫the same as this one.
‫Otherwise we will not allow this form to be submitted.
‫Alright, so that's what we have
‫the custom validate function for.
‫So this function gets the current value of this field
‫and so then we can do something with it.
‫And so here what we want to do is to check
‫whether this value is equal to this other password field.
‫So to get the value from that field, as we did earlier,
‫we can use the get values function here
‫and then we call that here.
‫So get values, and then we grab the password.
‫And so if they are the same,
‫then the validation will pass, and otherwise,
‫then this string here will become the error message.
‫So passwords need to match.
‫Nice. And now to finish,
‫let's also quickly add the (indistinct) submit handler.
‫And so for that we also grab the handle submit function
‫which will allow us to register
‫our own custom handler function.
‫So here on submit will become handle submit
‫and then this is where we can call the function
‫for success and for an error as well.
‫So we usually call that one on submit
‫and it will receive all the data of all the fields.
‫And so then here we register that function, so on submit.
‫And so this function will be called each time
‫that we submit
‫and even each time that validation here happens.
‫And so since that validation has
‫then already happened before,
‫we don't need any validation inside dysfunction
‫which is really, really nice.
‫All right here, let's close our React Query,
‫then some email here.
‫And this doesn't really matter
‫so I will just input a wrong one for now.
‫And well, I'll also add in a wrong password.
‫So let's see.
‫And immediately there we have some problem,
‫but what we don't have yet is those error messages there.
‫So here we have error, but we didn't place them there yet.
‫So let's take care of that now.
‫So errors, and then let's ask if full name exists
‫and then if so, let's add the message.
‫And now I'm going to just copy paste this year
‫for all of them.
‫So here it's gonna be email,
‫here the password,
‫and finally, password confirm.
‫Now okay, so as soon as we correct the format of the email,
‫then the error disappears.
‫And then as I delete this last character,
‫then also the passwords match.
‫But if I keep going, then they are again different.
‫Now here the same thing.
‫So if I make it a bit shorter,
‫then it's no longer eight characters long.
‫And also this one here is now different
‫which we can see if we keep writing.
‫Now here, I don't even know what I placed here anymore,
‫but now let's do everything the same, create a new user.
‫And now since everything is correct,
‫we get all of the data that we need right here.
‫And so with this, we are now ready to move on
‫and actually submit this form
‫and create a new user on super base.