1
00:00:00,330 --> 00:00:00,780
Beautiful.

2
00:00:01,200 --> 00:00:08,580
And once we have set up our form role as a separate component, we actually want to do the same thing

3
00:00:08,580 --> 00:00:09,390
with alert.

4
00:00:09,920 --> 00:00:15,420
And the moment we don't even have the alert, but basically the way it's going to look like, I mean,

5
00:00:15,900 --> 00:00:20,640
we're going to have it here when we're adding the job, for example, when we're not passing any kind

6
00:00:20,640 --> 00:00:21,120
of values.

7
00:00:21,420 --> 00:00:23,850
Same is going to be with the profile.

8
00:00:24,090 --> 00:00:29,470
Meaning in here will showcase that if we're successful and hopefully you get the gist.

9
00:00:29,490 --> 00:00:36,330
So again, there's going to be a component that we reuse all throughout our application, and it kind

10
00:00:36,330 --> 00:00:42,180
of makes sense that we right away set it up because in the register, we'll also use it as well.

11
00:00:42,540 --> 00:00:49,950
So if the user's trying to submit the values or we're getting some kind of error back from the server

12
00:00:50,250 --> 00:00:56,070
we want on display and with this one right away, we want to set it up as a separate component.

13
00:00:56,740 --> 00:01:05,610
So go to components, you want to create alert jazz and there you want to return it there with the class

14
00:01:05,610 --> 00:01:08,550
names of alert and alert danger.

15
00:01:09,000 --> 00:01:10,710
Now there's also one for success.

16
00:01:11,220 --> 00:01:16,850
And as far as the text, well, you can just place whatever you want to order now.

17
00:01:16,860 --> 00:01:24,150
Eventually, these ones, the class, the type of the alert as well as the text is going to be coming

18
00:01:24,150 --> 00:01:25,650
from the global context.

19
00:01:26,250 --> 00:01:29,280
So that's how we will control at the moment.

20
00:01:29,580 --> 00:01:32,400
We simply want to set up all the imports and exports.

21
00:01:32,760 --> 00:01:34,740
So again, you remember the drill.

22
00:01:35,080 --> 00:01:36,440
We're looking for index jazz.

23
00:01:36,630 --> 00:01:43,830
Then we're looking for the component, the register and then we set everything up and not in there for

24
00:01:43,830 --> 00:01:44,610
the time being.

25
00:01:44,820 --> 00:01:47,440
You can set up Charlotte in an initial state again.

26
00:01:47,480 --> 00:01:51,140
Eventually, it's going to be coming from the global state.

27
00:01:51,150 --> 00:01:53,640
But for now, we'll set up the Boolean over there.

28
00:01:54,000 --> 00:01:55,620
Now we're going to you can go with true or false.

29
00:01:55,830 --> 00:01:56,640
It doesn't really matter.

30
00:01:57,710 --> 00:02:01,310
Just remember that with True showcased the world with false Europe.

31
00:02:01,640 --> 00:02:04,100
And then right after the log in and our return.

32
00:02:04,460 --> 00:02:08,780
And then you want to check of the state, which is located in the values.

33
00:02:09,169 --> 00:02:11,120
And more specifically, Charlotte.

34
00:02:11,300 --> 00:02:16,340
So if it's true grammar displayed, if not, then we don't display the alert.

35
00:02:16,910 --> 00:02:22,040
So let's get cracking and we're going to start the journey the same way.

36
00:02:22,310 --> 00:02:25,670
We want to navigate, first of all, two components.

37
00:02:25,940 --> 00:02:27,170
We want to create a new one.

38
00:02:27,320 --> 00:02:30,080
We're going to go with alert jazz.

39
00:02:30,650 --> 00:02:32,030
Let's create our component.

40
00:02:32,930 --> 00:02:37,120
With the snippets and then for the time being, we're going to go with Dev.

41
00:02:37,460 --> 00:02:40,590
Now these are global classes again, if you want to take a look at them.

42
00:02:40,970 --> 00:02:41,780
Please do that.

43
00:02:42,200 --> 00:02:44,140
And we're looking for fallen classes.

44
00:02:44,170 --> 00:02:45,560
We're going to set up the alert.

45
00:02:46,100 --> 00:02:49,640
And we also want to set up what type of the alert is going to be.

46
00:02:49,640 --> 00:02:53,400
Again, eventually, this will be dynamic, but I'm just going to go with danger for now.

47
00:02:53,420 --> 00:02:56,810
Just keep in mind that you also have here a success one.

48
00:02:57,380 --> 00:03:04,580
Again, you can take a look at those classes in the global courses and then it's closed live and there's

49
00:03:04,580 --> 00:03:05,570
going to be a dummy text.

50
00:03:05,570 --> 00:03:09,560
For now, Alert Alert goes here.

51
00:03:09,740 --> 00:03:11,060
We export everything.

52
00:03:11,510 --> 00:03:16,190
It looks like there's a tiny mash up over here, so let me remove this.

53
00:03:17,270 --> 00:03:18,350
Not needed there.

54
00:03:19,010 --> 00:03:25,550
And then once I have this in place again, we want to set up the imports are back in the index and we're

55
00:03:25,550 --> 00:03:27,320
going to look for my alert.

56
00:03:27,980 --> 00:03:32,720
And then once I have imported, I also want to set up here a proper export.

57
00:03:33,260 --> 00:03:38,240
So let's go here and have a common one back in the register.

58
00:03:39,390 --> 00:03:45,870
When I look for my component and yes, the name will be alert when, like I said, for time being,

59
00:03:45,870 --> 00:03:48,960
let just sit up here, show alert in the state.

60
00:03:49,260 --> 00:03:52,890
And since I want to see the alert right from the get go, I'm going to go with.

61
00:03:54,300 --> 00:03:58,020
And then we will talk with the value, then let's keep on scrolling.

62
00:03:58,020 --> 00:04:05,070
And then, like I said, where we have the heading three conditionally, if the show alert a stroke,

63
00:04:05,070 --> 00:04:07,710
then I want to showcase now that is sitting in evaluar.

64
00:04:07,730 --> 00:04:10,620
So we go here with values show alert.

65
00:04:11,170 --> 00:04:14,220
Not if that is the case, then we display the alert.

66
00:04:15,080 --> 00:04:21,860
Then let's save it, and once we save, we should see the alert, and now let me go to a big screen

67
00:04:22,340 --> 00:04:24,770
and let me just showcase how we can toggle that one.

68
00:04:25,370 --> 00:04:26,780
So I'm going to inspect.

69
00:04:27,080 --> 00:04:30,230
I'm looking for the online.

70
00:04:30,340 --> 00:04:35,450
I'm here, I'm looking for to register, and here I'm going to shoot for my talk option where an outer

71
00:04:35,660 --> 00:04:37,040
shoulder is true.

72
00:04:37,100 --> 00:04:39,290
But then once we click, it's set back.

73
00:04:39,290 --> 00:04:39,890
It's your fault.

74
00:04:40,280 --> 00:04:47,580
So this is what we're going to do using our global context where there's going to be a property and

75
00:04:47,630 --> 00:04:50,300
if there's some kind of error, we'll set it equal to true.

76
00:04:50,540 --> 00:04:52,220
So then we will display the alert.

77
00:04:52,490 --> 00:04:55,550
If not, then the alert won't be displayed.

78
00:04:55,550 --> 00:04:57,230
So let me go back over here.

79
00:04:57,710 --> 00:05:02,780
And you know, before I do that, let me just quickly showcase if we have different class, which again

80
00:05:02,780 --> 00:05:04,700
will toggle eventually.

81
00:05:04,700 --> 00:05:08,720
If we go here with success, then this is going to be green or for you.

82
00:05:09,080 --> 00:05:09,950
That makes sense.

83
00:05:09,950 --> 00:05:15,230
And now let me set it up back in the register equal to false, because again, eventually it's going

84
00:05:15,230 --> 00:05:18,590
to be coming from the global state anyway.

85
00:05:18,890 --> 00:05:19,820
So let's save us.

86
00:05:20,360 --> 00:05:26,630
And once we have everything in place now, we can start setting up the toggle functionality for the

87
00:05:26,630 --> 00:05:27,020
member.