1 00:00:01,350 --> 00:00:03,780 ‫All right, so let's now split 2 00:00:03,780 --> 00:00:08,460 ‫up this feature of user signup into two lectures 3 00:00:08,460 --> 00:00:12,753 ‫where in this first one we will just build the signup form. 4 00:00:14,430 --> 00:00:16,140 ‫Now, in this application, 5 00:00:16,140 --> 00:00:19,740 ‫not everyone can create a new account. 6 00:00:19,740 --> 00:00:24,390 ‫So, not everyone can sign up for this application, unlike, 7 00:00:24,390 --> 00:00:28,740 ‫for example, something like Twitter or Reddit. 8 00:00:28,740 --> 00:00:32,220 ‫So here in this app, only employees 9 00:00:32,220 --> 00:00:36,720 ‫of the hotel should actually be users of this app. 10 00:00:36,720 --> 00:00:39,240 ‫And so therefore, the idea is 11 00:00:39,240 --> 00:00:44,240 ‫that these users can only be created inside the application. 12 00:00:44,340 --> 00:00:49,140 ‫And so this way new users are basically immediately verified 13 00:00:49,140 --> 00:00:51,540 ‫by the existing hotel staff 14 00:00:51,540 --> 00:00:56,540 ‫because only that stuff can actually create new users. 15 00:00:57,000 --> 00:01:01,950 ‫And so, that will happen right here on this user's page. 16 00:01:01,950 --> 00:01:05,190 ‫So, this is where you will create a new user 17 00:01:05,190 --> 00:01:08,100 ‫and if you want to take it to the next level, 18 00:01:08,100 --> 00:01:11,550 ‫you might then also maybe add a table here 19 00:01:11,550 --> 00:01:15,690 ‫for all the existing users where they can then be managed. 20 00:01:15,690 --> 00:01:19,106 ‫But here we will only have that form where we can sign 21 00:01:19,106 --> 00:01:21,183 ‫up a new user. 22 00:01:22,950 --> 00:01:26,610 ‫Now, okay. And again, in many other applications 23 00:01:26,610 --> 00:01:29,580 ‫like the ones that you might build in the future, 24 00:01:29,580 --> 00:01:32,130 ‫you will have a separate signup page 25 00:01:32,130 --> 00:01:34,962 ‫just like the login page that is accessible 26 00:01:34,962 --> 00:01:38,643 ‫to everyone, but not here. 27 00:01:39,870 --> 00:01:43,920 ‫So, right here we already have the user's page 28 00:01:43,920 --> 00:01:48,920 ‫and also we already have some bare bones sign-up form. 29 00:01:49,920 --> 00:01:52,050 ‫So which has some of the markup, 30 00:01:52,050 --> 00:01:55,923 ‫but which we will now make come to life. 31 00:01:57,540 --> 00:02:01,200 ‫And so here under this heading, 32 00:02:01,200 --> 00:02:05,490 ‫let's actually include that sign-up form. 33 00:02:06,750 --> 00:02:10,713 ‫And then here we will need a fragment. 34 00:02:14,340 --> 00:02:15,633 ‫And there we go. 35 00:02:16,740 --> 00:02:20,670 ‫Nice. So, this is already looking great, 36 00:02:20,670 --> 00:02:24,660 ‫but let's now improve this a lot 37 00:02:24,660 --> 00:02:26,940 ‫with things like error handling. 38 00:02:26,940 --> 00:02:27,870 ‫And so for that, 39 00:02:27,870 --> 00:02:32,820 ‫we will now again use the React hook form library. 40 00:02:32,820 --> 00:02:36,660 ‫So whenever we have a bigger form like this one here 41 00:02:36,660 --> 00:02:39,480 ‫and which needs some important validation, 42 00:02:39,480 --> 00:02:43,890 ‫it's a good idea to use a helper library like that one. 43 00:02:43,890 --> 00:02:44,760 ‫So with this, 44 00:02:44,760 --> 00:02:47,883 ‫we get to practice it here then a little bit more. 45 00:02:49,710 --> 00:02:53,220 ‫So let's start by including that here. 46 00:02:53,220 --> 00:02:57,760 ‫So use form from React hook form 47 00:02:59,220 --> 00:03:04,220 ‫and then let's immediately grab the register function 48 00:03:04,620 --> 00:03:08,373 ‫and also the form state. 49 00:03:09,480 --> 00:03:13,960 ‫And then we can also right away create the errors 50 00:03:15,390 --> 00:03:20,390 ‫from that form state, just like we have done previously. 51 00:03:20,760 --> 00:03:24,720 ‫And so now here the idea is to use the register 52 00:03:24,720 --> 00:03:28,860 ‫function here in each of these inputs to give them a name 53 00:03:28,860 --> 00:03:32,010 ‫and basically manage this state. 54 00:03:32,010 --> 00:03:35,640 ‫So then React hook form will actually manage the state 55 00:03:35,640 --> 00:03:38,370 ‫and not us manually. 56 00:03:38,370 --> 00:03:43,370 ‫So here we register this field using dysfunction and pass it 57 00:03:44,880 --> 00:03:49,880 ‫in the full name, field name, and then here some validation. 58 00:03:52,230 --> 00:03:54,390 ‫So here we can use required 59 00:03:54,390 --> 00:03:58,953 ‫and then say this field is required. 60 00:04:01,620 --> 00:04:04,320 ‫All right and as I mentioned earlier, 61 00:04:04,320 --> 00:04:08,130 ‫calling dysfunction here will basically create a few props 62 00:04:08,130 --> 00:04:13,130 ‫which we then spread with this onto this input component. 63 00:04:13,320 --> 00:04:17,943 ‫And so now let's actually place this on all of them here. 64 00:04:19,380 --> 00:04:22,533 ‫And then we just need to change the field name. 65 00:04:25,470 --> 00:04:30,213 ‫So here it's gonna be called the email. 66 00:04:32,550 --> 00:04:34,650 ‫Here, the password 67 00:04:34,650 --> 00:04:38,853 ‫and then here, password confirm. 68 00:04:39,810 --> 00:04:44,810 ‫Now okay and now let's add or other validations here 69 00:04:44,850 --> 00:04:48,960 ‫besides the fact data fields are required. 70 00:04:48,960 --> 00:04:52,110 ‫So the full name doesn't require anything else, 71 00:04:52,110 --> 00:04:54,960 ‫but the email address we actually need to check 72 00:04:54,960 --> 00:04:57,720 ‫if it is a valid email address. 73 00:04:57,720 --> 00:05:01,980 ‫And for that, I already edit these rejects here. 74 00:05:01,980 --> 00:05:05,700 ‫So let's grab that because rejects is one of the ways 75 00:05:05,700 --> 00:05:10,700 ‫in which we can do form validation in this library. 76 00:05:11,100 --> 00:05:14,943 ‫So here, after required, we can add pattern. 77 00:05:15,960 --> 00:05:19,890 ‫And so then there we can specify the value 78 00:05:19,890 --> 00:05:22,290 ‫which is the rejects itself 79 00:05:22,290 --> 00:05:26,580 ‫and then the message in case this fails. 80 00:05:26,580 --> 00:05:31,580 ‫So provide a valid email address. 81 00:05:35,940 --> 00:05:38,400 ‫Next up, here it says even 82 00:05:38,400 --> 00:05:42,153 ‫that the password needs to have at least eight characters. 83 00:05:43,650 --> 00:05:45,450 ‫So, that's easy enough. 84 00:05:45,450 --> 00:05:49,540 ‫Here we can just specify the min length 85 00:05:51,000 --> 00:05:54,450 ‫and then again specifying the value. 86 00:05:54,450 --> 00:05:56,010 ‫So, that's eight. 87 00:05:56,010 --> 00:05:59,460 ‫And then the message string. 88 00:05:59,460 --> 00:06:04,460 ‫So password needs to or needs a minimum of eight characters. 89 00:06:12,630 --> 00:06:14,700 ‫Now, okay, easy enough. 90 00:06:14,700 --> 00:06:17,400 ‫And now here we have the hardest one 91 00:06:17,400 --> 00:06:22,020 ‫which is that basically this password needs to be exactly 92 00:06:22,020 --> 00:06:23,580 ‫the same as this one. 93 00:06:23,580 --> 00:06:27,363 ‫Otherwise we will not allow this form to be submitted. 94 00:06:29,040 --> 00:06:31,950 ‫Alright, so that's what we have 95 00:06:31,950 --> 00:06:35,523 ‫the custom validate function for. 96 00:06:37,230 --> 00:06:42,230 ‫So this function gets the current value of this field 97 00:06:43,500 --> 00:06:45,810 ‫and so then we can do something with it. 98 00:06:45,810 --> 00:06:48,780 ‫And so here what we want to do is to check 99 00:06:48,780 --> 00:06:53,403 ‫whether this value is equal to this other password field. 100 00:06:54,390 --> 00:06:59,390 ‫So to get the value from that field, as we did earlier, 101 00:06:59,730 --> 00:07:04,540 ‫we can use the get values function here 102 00:07:07,800 --> 00:07:10,260 ‫and then we call that here. 103 00:07:10,260 --> 00:07:15,260 ‫So get values, and then we grab the password. 104 00:07:16,830 --> 00:07:18,660 ‫And so if they are the same, 105 00:07:18,660 --> 00:07:21,900 ‫then the validation will pass, and otherwise, 106 00:07:21,900 --> 00:07:26,490 ‫then this string here will become the error message. 107 00:07:26,490 --> 00:07:30,453 ‫So passwords need to match. 108 00:07:33,510 --> 00:07:35,880 ‫Nice. And now to finish, 109 00:07:35,880 --> 00:07:39,630 ‫let's also quickly add the (indistinct) submit handler. 110 00:07:39,630 --> 00:07:44,630 ‫And so for that we also grab the handle submit function 111 00:07:45,180 --> 00:07:47,470 ‫which will allow us to register 112 00:07:49,535 --> 00:07:51,300 ‫our own custom handler function. 113 00:07:51,300 --> 00:07:56,300 ‫So here on submit will become handle submit 114 00:07:58,050 --> 00:08:00,780 ‫and then this is where we can call the function 115 00:08:00,780 --> 00:08:03,963 ‫for success and for an error as well. 116 00:08:05,250 --> 00:08:08,123 ‫So we usually call that one on submit 117 00:08:10,950 --> 00:08:14,613 ‫and it will receive all the data of all the fields. 118 00:08:17,940 --> 00:08:22,623 ‫And so then here we register that function, so on submit. 119 00:08:23,550 --> 00:08:25,740 ‫And so this function will be called each time 120 00:08:25,740 --> 00:08:26,850 ‫that we submit 121 00:08:26,850 --> 00:08:30,450 ‫and even each time that validation here happens. 122 00:08:30,450 --> 00:08:32,490 ‫And so since that validation has 123 00:08:32,490 --> 00:08:34,530 ‫then already happened before, 124 00:08:34,530 --> 00:08:38,220 ‫we don't need any validation inside dysfunction 125 00:08:38,220 --> 00:08:39,963 ‫which is really, really nice. 126 00:08:42,030 --> 00:08:45,393 ‫All right here, let's close our React Query, 127 00:08:49,050 --> 00:08:51,225 ‫then some email here. 128 00:08:51,225 --> 00:08:52,920 ‫And this doesn't really matter 129 00:08:52,920 --> 00:08:55,263 ‫so I will just input a wrong one for now. 130 00:08:58,800 --> 00:09:03,800 ‫And well, I'll also add in a wrong password. 131 00:09:05,550 --> 00:09:06,750 ‫So let's see. 132 00:09:06,750 --> 00:09:09,870 ‫And immediately there we have some problem, 133 00:09:09,870 --> 00:09:14,820 ‫but what we don't have yet is those error messages there. 134 00:09:14,820 --> 00:09:18,930 ‫So here we have error, but we didn't place them there yet. 135 00:09:18,930 --> 00:09:21,330 ‫So let's take care of that now. 136 00:09:21,330 --> 00:09:26,330 ‫So errors, and then let's ask if full name exists 137 00:09:28,200 --> 00:09:32,010 ‫and then if so, let's add the message. 138 00:09:32,010 --> 00:09:35,880 ‫And now I'm going to just copy paste this year 139 00:09:35,880 --> 00:09:37,083 ‫for all of them. 140 00:09:38,430 --> 00:09:41,253 ‫So here it's gonna be email, 141 00:09:44,790 --> 00:09:49,790 ‫here the password, 142 00:09:50,610 --> 00:09:54,873 ‫and finally, password confirm. 143 00:09:58,440 --> 00:10:03,440 ‫Now okay, so as soon as we correct the format of the email, 144 00:10:06,030 --> 00:10:07,950 ‫then the error disappears. 145 00:10:07,950 --> 00:10:10,800 ‫And then as I delete this last character, 146 00:10:10,800 --> 00:10:13,020 ‫then also the passwords match. 147 00:10:13,020 --> 00:10:16,083 ‫But if I keep going, then they are again different. 148 00:10:17,040 --> 00:10:19,260 ‫Now here the same thing. 149 00:10:19,260 --> 00:10:21,390 ‫So if I make it a bit shorter, 150 00:10:21,390 --> 00:10:24,870 ‫then it's no longer eight characters long. 151 00:10:24,870 --> 00:10:26,970 ‫And also this one here is now different 152 00:10:26,970 --> 00:10:29,703 ‫which we can see if we keep writing. 153 00:10:31,020 --> 00:10:36,020 ‫Now here, I don't even know what I placed here anymore, 154 00:10:37,200 --> 00:10:41,520 ‫but now let's do everything the same, create a new user. 155 00:10:41,520 --> 00:10:43,590 ‫And now since everything is correct, 156 00:10:43,590 --> 00:10:47,730 ‫we get all of the data that we need right here. 157 00:10:47,730 --> 00:10:51,120 ‫And so with this, we are now ready to move on 158 00:10:51,120 --> 00:10:53,130 ‫and actually submit this form 159 00:10:53,130 --> 00:10:56,223 ‫and create a new user on super base.