Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:05,939
Before we declare this forum finished and move on to authentication, I would like to display a message
2
00:00:05,939 --> 00:00:10,110
to the user to let them know their submission is currently in progress.
3
00:00:10,140 --> 00:00:16,440
The validate doesn't provide anything to help us with this, but we can accomplish this with tailwind.
4
00:00:16,470 --> 00:00:20,730
The goal for this lecture is to render a waiting message to the user.
5
00:00:20,730 --> 00:00:23,130
Submitting a request can take a while.
6
00:00:23,130 --> 00:00:27,060
We'll want to let the user know we're processing their request.
7
00:00:27,150 --> 00:00:30,330
Alert boxes are a great way to communicate that.
8
00:00:30,330 --> 00:00:31,770
Let's get started.
9
00:00:32,040 --> 00:00:35,940
Open the authentication component file in your editor.
10
00:00:37,960 --> 00:00:40,560
The first step is to create some data.
11
00:00:40,570 --> 00:00:46,740
We want to be able to store the variant message and visibility of the alert box.
12
00:00:46,750 --> 00:00:52,960
We can store this inside the state, but the data we're creating will be used in the authentication
13
00:00:52,960 --> 00:00:53,830
component.
14
00:00:53,830 --> 00:00:56,110
The data won't be used globally.
15
00:00:56,290 --> 00:00:59,710
It's not something we need to clutter our state with.
16
00:00:59,830 --> 00:01:03,940
If you prefer to define the data in the state, then that's fine.
17
00:01:03,940 --> 00:01:11,140
Inside the data function, create a property called registration and submission with a value of false.
18
00:01:13,480 --> 00:01:16,690
The first property we're creating will keep track of.
19
00:01:16,690 --> 00:01:23,440
If the registration form is in submission, we'll want to disable the form if the request is still processing.
20
00:01:23,560 --> 00:01:27,940
I'll expand on why this is important to keep track of later in the lecture.
21
00:01:28,240 --> 00:01:35,200
Afterward, we'll create a property called Registration Show Alert with a value of false.
22
00:01:37,420 --> 00:01:40,680
Initially, we will want to hide the alert box.
23
00:01:40,690 --> 00:01:45,060
We will use this property to toggle its visibility by default.
24
00:01:45,070 --> 00:01:46,660
We'll leave it at false.
25
00:01:46,660 --> 00:01:54,760
The next property will create will be called registration alert variant with the value of BG Blue 500.
26
00:01:56,990 --> 00:02:00,330
We are going to have different colors of the alert box.
27
00:02:00,350 --> 00:02:05,640
We are going to be using the color blue to indicate the form submission is in progress.
28
00:02:05,660 --> 00:02:09,590
You'll see how this class will affect our alert box in a moment.
29
00:02:09,620 --> 00:02:10,970
Let's keep going.
30
00:02:11,300 --> 00:02:14,750
The last property we're going to create is the message.
31
00:02:14,750 --> 00:02:17,790
We'll call it registration alert message.
32
00:02:17,810 --> 00:02:19,390
Set it to the following.
33
00:02:19,400 --> 00:02:20,270
Please wait.
34
00:02:20,270 --> 00:02:22,220
Your account is being created.
35
00:02:25,990 --> 00:02:30,860
The message property will be used for the inner content of the alert box.
36
00:02:30,880 --> 00:02:35,550
We'll be changing this to let the user know the status of their form submission.
37
00:02:35,560 --> 00:02:37,140
The properties are ready.
38
00:02:37,150 --> 00:02:40,570
The next step is to add an alert box to the template.
39
00:02:40,600 --> 00:02:44,170
Scroll to the top of the registration form in the template.
40
00:02:44,380 --> 00:02:46,720
We're going to add a div tag.
41
00:02:48,800 --> 00:02:50,960
It'll have the following classes.
42
00:02:50,960 --> 00:02:59,180
Text White Text center font bold p for rounded and B for.
43
00:03:01,450 --> 00:03:06,850
You can refer to the Tailwind documentation for information about these classes.
44
00:03:06,880 --> 00:03:10,800
It'll give us a box with spacing to display the alert message.
45
00:03:10,810 --> 00:03:13,740
We're going to bind our properties to this element.
46
00:03:13,750 --> 00:03:17,020
First, we're going to hide the element with the V.
47
00:03:17,020 --> 00:03:22,450
If directive, the condition will be the registration show alert data property.
48
00:03:24,660 --> 00:03:28,860
Next, we'll change the color of the background, color of the box.
49
00:03:28,890 --> 00:03:34,320
We'll bind a class attribute to the registration alert variant data property.
50
00:03:36,480 --> 00:03:43,710
Lastly, we'll output the message by adding an expression inside the div tag will output the registration
51
00:03:43,710 --> 00:03:45,750
alert message data property.
52
00:03:47,980 --> 00:03:51,040
We're finished prepping the component in the template.
53
00:03:51,610 --> 00:03:57,760
The next thing we'll want to do is to disable the submit button if the form is currently in submission.
54
00:03:58,000 --> 00:04:02,650
Scroll to the bottom of the form elements to find the submit button.
55
00:04:04,990 --> 00:04:10,180
Will bind the disabled attribute to registration in submission.
56
00:04:12,500 --> 00:04:14,310
It's crucial we do this.
57
00:04:14,330 --> 00:04:21,190
One of the most overlooked steps for beginner developers is not to take into account of spam submissions.
58
00:04:21,200 --> 00:04:26,780
They are users out there that will submit a form repeatedly, even if the first submission worked.
59
00:04:26,810 --> 00:04:33,080
This behavior can turn out to be costly because more requests mean more resources are taken up, which
60
00:04:33,080 --> 00:04:35,480
will result in higher production costs.
61
00:04:35,720 --> 00:04:39,410
This may not seem like a big deal at first because it's one form.
62
00:04:39,440 --> 00:04:45,840
Let me show you an example of how disastrous this can become in the resource section of this lecture.
63
00:04:45,860 --> 00:04:52,520
I provide a link to an article about a company that spent $30,000 in 72 hours due to an error in their
64
00:04:52,520 --> 00:04:53,120
code.
65
00:04:53,450 --> 00:04:55,590
I recommend giving this a good read.
66
00:04:55,610 --> 00:05:01,040
In summary, they didn't properly account for the number of requests made to their database.
67
00:05:01,040 --> 00:05:05,840
By overlooking one small part of their code, they incurred large expenses.
68
00:05:05,870 --> 00:05:09,920
The situation is different, but the overall lesson is still the same.
69
00:05:09,920 --> 00:05:14,900
You always want to make sure that you never allow the user to make excessive requests.
70
00:05:15,110 --> 00:05:21,020
One simple method of preventing excessive requests is by disabling the form until the submission is
71
00:05:21,020 --> 00:05:21,770
complete.
72
00:05:21,800 --> 00:05:23,340
It's not foolproof.
73
00:05:23,360 --> 00:05:27,440
There are ways to bypass or override the behavior we created.
74
00:05:27,470 --> 00:05:33,950
At this point, it's usually left to the server or back end developers to handle excessive requests.
75
00:05:34,130 --> 00:05:40,340
This will stop the most basic types of attacks or accidents we may face when our application is deployed
76
00:05:40,340 --> 00:05:41,360
to production.
77
00:05:41,360 --> 00:05:46,340
By default, the in submission data property will be set to false.
78
00:05:46,340 --> 00:05:48,860
This value will make the button clickable.
79
00:05:49,070 --> 00:05:51,320
We're finished with modifying the template.
80
00:05:51,350 --> 00:05:55,100
We have the data ready and the data is hooked up to the template.
81
00:05:55,130 --> 00:05:59,250
The very last step is to update the data in the register function.
82
00:05:59,270 --> 00:06:02,810
The register function is where the request will be handled.
83
00:06:02,990 --> 00:06:06,140
Scroll to the register function and the component.
84
00:06:06,140 --> 00:06:09,390
If there is any code in the register function, remove it.
85
00:06:09,410 --> 00:06:11,750
We'll want to start with a clean slate.
86
00:06:12,020 --> 00:06:18,650
Inside the function, we're going to set the registration show alert and registration in submission
87
00:06:18,650 --> 00:06:19,520
properties to.
88
00:06:19,520 --> 00:06:20,210
True.
89
00:06:22,550 --> 00:06:29,120
The show Alert Property is responsible for toggling the alerts visibility, whereas the in submission
90
00:06:29,120 --> 00:06:31,400
property will disable the form button.
91
00:06:31,550 --> 00:06:36,680
Up next lets set the variant property to be G blue 500.
92
00:06:39,100 --> 00:06:42,200
We're doing this because we need to reset the variation.
93
00:06:42,220 --> 00:06:43,660
Wallet's in submission.
94
00:06:43,660 --> 00:06:47,830
In some instances the user may have already submitted the form.
95
00:06:47,830 --> 00:06:52,390
We'll change the variant depending on if the request was a success or not.
96
00:06:52,420 --> 00:06:56,770
Either way, if they're submitting the form again, we'll need to reset it.
97
00:06:56,800 --> 00:06:59,650
This same logic applies to the message.
98
00:06:59,650 --> 00:07:02,350
We'll need to reset the message property.
99
00:07:07,390 --> 00:07:10,930
We're done setting the initial state of the alert component.
100
00:07:10,960 --> 00:07:13,720
The next step is to begin submitting the request.
101
00:07:13,750 --> 00:07:16,120
We'll handle that in the next section.
102
00:07:16,540 --> 00:07:18,610
There's one less thing I want to do.
103
00:07:18,640 --> 00:07:21,240
I want to create a dummy response.
104
00:07:21,250 --> 00:07:25,490
The code for submitting a request is something we'll write in the next section.
105
00:07:25,510 --> 00:07:30,400
In the meantime, we're going to tell the user that the request was a success.
106
00:07:30,490 --> 00:07:36,400
We'll set the registration alert variant property to be G Green 500.
107
00:07:38,740 --> 00:07:43,390
Next, we'll set the message property to the following success.
108
00:07:43,390 --> 00:07:45,400
Your account has been created.
109
00:07:49,260 --> 00:07:54,960
We aren't going to enable the button again because we'll want to redirect the user after their account
110
00:07:54,960 --> 00:07:56,080
has been created.
111
00:07:56,100 --> 00:07:57,960
We'll worry about that later.
112
00:07:57,990 --> 00:08:01,770
The last thing we'll do is log the values parameter.
113
00:08:03,930 --> 00:08:07,020
Save your changes and view the app in the browser.
114
00:08:09,260 --> 00:08:12,530
Open the console to inspect for any errors.
115
00:08:14,650 --> 00:08:16,510
There shouldn't be any so far.
116
00:08:16,540 --> 00:08:19,090
Try filling out the form and then submit it.
117
00:08:23,910 --> 00:08:29,970
Will receive a success message after submitting the form, the button will remain disabled since we
118
00:08:29,970 --> 00:08:35,460
didn't toggle the value back to false, we're finished to review everything.
119
00:08:35,460 --> 00:08:40,740
All we did was use the alert component to render the status of the user's submission.
120
00:08:40,740 --> 00:08:47,040
We created four properties for disabling the button, showing the alert, changing the variant and the
121
00:08:47,040 --> 00:08:48,210
message inside.
122
00:08:48,270 --> 00:08:53,610
Communicating the current status of the submission provides for a better user experience.
123
00:08:53,610 --> 00:08:57,540
In the next lecture we'll start working on the login form.
12073
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.