1
00:00:00,140 --> 00:00:00,500
All right.

2
00:00:00,500 --> 00:00:04,640
And when it comes to profile page, we want to start with some imports.

3
00:00:04,670 --> 00:00:10,280
Of course, it's just going to be a bunch of inputs and therefore we'll need a form row.

4
00:00:10,310 --> 00:00:11,520
We'll also need a wrapper.

5
00:00:11,540 --> 00:00:18,590
Remember the dashboard form page use outlet context because I want to access the user because please

6
00:00:18,590 --> 00:00:24,230
keep in mind when it comes to a profile page, of course we will reuse the existing values.

7
00:00:24,440 --> 00:00:31,670
Since I want to update the user's name, it kind of makes sense to have the current name correct displayed

8
00:00:31,670 --> 00:00:33,080
in the input.

9
00:00:33,110 --> 00:00:39,140
Then we'll also use use navigation because we want to set up the is submitting functionality.

10
00:00:39,140 --> 00:00:44,660
We want to, of course, grab the form component since there's going to be an action, a custom fetch,

11
00:00:44,660 --> 00:00:49,700
which of course is going to point back to our server as well as the toast.

12
00:00:50,280 --> 00:00:55,410
So of course we'll use this one to display some nice toast messages.

13
00:00:55,440 --> 00:00:59,490
Then as far as the functionality, like I said, we'll grab the user more specifically.

14
00:00:59,490 --> 00:01:02,010
I'll grab these properties over here.

15
00:01:02,160 --> 00:01:08,370
And we'll also set up the is submitting variable and then we'll set up a form.

16
00:01:08,400 --> 00:01:13,650
Now at the moment we're not going to worry about the file input, so this one will cover at the very

17
00:01:13,650 --> 00:01:14,820
end of the video.

18
00:01:14,850 --> 00:01:17,220
And here, notice it's pretty straightforward.

19
00:01:17,220 --> 00:01:18,540
Again, we go with form row.

20
00:01:18,570 --> 00:01:22,490
We provide the type, we provide the name and yes, they need to match.

21
00:01:22,500 --> 00:01:26,340
And of course, this is the case where I will use that default value.

22
00:01:26,460 --> 00:01:31,920
And this is where I'll pass the properties from my user object.

23
00:01:31,920 --> 00:01:37,500
So I'll pass your name, last name, as well as the email and location.

24
00:01:37,500 --> 00:01:38,700
Hopefully that is clear.

25
00:01:38,700 --> 00:01:45,810
And also we'll set up the submit button and then at the very end we'll discuss how to set up properly

26
00:01:45,810 --> 00:01:47,620
the file input.

27
00:01:47,640 --> 00:01:50,010
So let's start working on that again.

28
00:01:50,010 --> 00:01:52,740
There are quite a few steps, so just bear with me.

29
00:01:53,190 --> 00:01:58,380
For starters, let me save some time by grabbing these imports.

30
00:01:58,830 --> 00:02:04,680
Let's navigate to profile JS That's the page we're looking for copy and paste.

31
00:02:04,980 --> 00:02:08,759
And essentially let's start by grabbing the user.

32
00:02:08,759 --> 00:02:12,090
So const user and how do I know it's there?

33
00:02:12,090 --> 00:02:16,080
Well, because I'm passing it down from dashboard layout page, correct.

34
00:02:16,080 --> 00:02:18,300
So use outlet context.

35
00:02:18,330 --> 00:02:19,610
We want to invoke that.

36
00:02:19,620 --> 00:02:27,600
Then we want to go with const name, then comma, last name, then comma, email, then location.

37
00:02:28,370 --> 00:02:32,630
And all of these properties, of course, are located in my user object.

38
00:02:32,660 --> 00:02:36,260
Then let's quickly set up that navigation and is submitting.

39
00:02:36,410 --> 00:02:37,310
And you know what?

40
00:02:37,730 --> 00:02:40,150
I think I'll just cheat a little bit.

41
00:02:40,160 --> 00:02:41,780
I'll go to edit job.

42
00:02:42,230 --> 00:02:44,180
I'm pretty sure it's over here as well.

43
00:02:44,300 --> 00:02:45,980
So let me take this one.

44
00:02:46,310 --> 00:02:51,440
Let me add it in the profile and pretty much let's start working on the return.

45
00:02:51,440 --> 00:02:53,480
So we want to go here with the wrapper.

46
00:02:53,870 --> 00:02:55,940
Okay, beautiful then.

47
00:02:56,760 --> 00:02:59,370
We want to set up a form.

48
00:02:59,550 --> 00:03:04,960
Now a method will be post because again, we'll be sending a batch request.

49
00:03:04,980 --> 00:03:11,000
Then class name will be form and eventually there's going to be encryption type.

50
00:03:11,010 --> 00:03:11,870
Not for now.

51
00:03:11,880 --> 00:03:13,170
Let's not worry about it.

52
00:03:13,350 --> 00:03:15,750
Let's start with a heading for inside of it.

53
00:03:15,900 --> 00:03:17,610
We'll add a class name here.

54
00:03:18,120 --> 00:03:24,060
We'll say form title and then we want to go with profile.

55
00:03:24,090 --> 00:03:25,230
Let's save that.

56
00:03:25,380 --> 00:03:27,480
Then let's set up the form center.

57
00:03:27,480 --> 00:03:30,580
So this is where we'll place all of our inputs.

58
00:03:30,600 --> 00:03:33,330
So let's start with the form center.

59
00:03:34,270 --> 00:03:35,710
Then let me add a comment.

60
00:03:35,710 --> 00:03:37,570
So this will be file input.

61
00:03:37,900 --> 00:03:42,910
And then right after that, let's go one by one and add those four roles.

62
00:03:42,910 --> 00:03:44,950
So first one will be.

63
00:03:45,580 --> 00:03:46,150
Name.

64
00:03:46,150 --> 00:03:50,640
So type is equal to text and the name is equal to name.

65
00:03:50,650 --> 00:03:52,690
And then as far as the default value.

66
00:03:52,720 --> 00:03:57,220
Well, I want to use the name my user's name more precisely.

67
00:03:57,310 --> 00:03:59,290
Then let's copy and paste.

68
00:03:59,410 --> 00:04:01,450
We have three more.

69
00:04:01,630 --> 00:04:03,700
Second one is going to be type text.

70
00:04:03,760 --> 00:04:05,150
That doesn't change.

71
00:04:05,170 --> 00:04:08,290
Name is actually going to be equal to a last name.

72
00:04:09,990 --> 00:04:12,120
And then let's also add that label text.

73
00:04:13,270 --> 00:04:14,770
And let's say last name.

74
00:04:16,149 --> 00:04:17,350
Then default value.

75
00:04:17,380 --> 00:04:19,720
You can probably already guess.

76
00:04:21,540 --> 00:04:23,100
It's going to be last name here.

77
00:04:23,880 --> 00:04:27,570
And then we want to do the same thing for email and location.

78
00:04:27,600 --> 00:04:31,290
Now for email, of course, type will be email.

79
00:04:32,470 --> 00:04:32,920
You know what?

80
00:04:32,920 --> 00:04:36,610
Let me select both of these over here and type it as email.

81
00:04:36,610 --> 00:04:38,530
And then last one will be location.

82
00:04:38,530 --> 00:04:39,940
So type is text.

83
00:04:40,530 --> 00:04:45,030
But these two are going to be equal to location.

84
00:04:45,390 --> 00:04:51,270
And when it comes to file input, I'll actually set up everything from scratch, meaning I'll hardcode

85
00:04:51,270 --> 00:04:54,090
the label, the input and a div here in the profile.

86
00:04:54,090 --> 00:05:00,150
Since there are a few things that I want to add to this particular input and it's only going to be in

87
00:05:00,150 --> 00:05:00,570
this page.

88
00:05:00,570 --> 00:05:07,470
So there's really no need to set up a separate component or run back to form row and start adding some

89
00:05:07,470 --> 00:05:08,790
conditional statements.

90
00:05:08,790 --> 00:05:10,980
So for now, let me just go with form row.

91
00:05:10,980 --> 00:05:16,890
Remember, that's the div where we place both the label as well as the input.

92
00:05:16,920 --> 00:05:23,010
Let's start with label HTML for it's going to be image since that's what we're going to be essentially

93
00:05:23,010 --> 00:05:23,760
setting up.

94
00:05:23,850 --> 00:05:24,780
And you know what?

95
00:05:24,810 --> 00:05:26,490
Let me actually go with Avatar.

96
00:05:26,520 --> 00:05:27,170
My bad.

97
00:05:27,210 --> 00:05:29,550
The ID and name is going to be Avatar.

98
00:05:29,550 --> 00:05:32,300
So instead of image, it's going to be Avatar.

99
00:05:32,330 --> 00:05:34,080
Then let's add a class name.

100
00:05:34,950 --> 00:05:43,590
Let's set it as form label and I'll right away provide the info that we're only accepting images that

101
00:05:43,590 --> 00:05:46,350
are less than 0.5MB.

102
00:05:46,350 --> 00:05:49,620
So I'll right here select an image.

103
00:05:51,790 --> 00:06:00,130
And then I'll say max 0.5 and B, then let's start working on the input.

104
00:06:01,050 --> 00:06:04,380
And essentially the type is not going to be equal to text.

105
00:06:04,380 --> 00:06:11,580
It's going to be equal to a file, then ID will be equal to Avatar, since again, they need to match

106
00:06:11,580 --> 00:06:17,070
the name will be Avatar since that's what we're going to be sending to a server.

107
00:06:17,160 --> 00:06:21,840
So let's go here with Avatar then class name will do the same thing.

108
00:06:21,840 --> 00:06:25,020
We'll say form input as far as the styles.

109
00:06:25,020 --> 00:06:29,610
And then lastly, we can also this accept attribute.

110
00:06:29,610 --> 00:06:37,260
And essentially in here I'll just say that, you know what, I'm only going to look for specific type

111
00:06:37,260 --> 00:06:41,130
of files and in my case it's going to be image files.

112
00:06:41,160 --> 00:06:42,870
Now one last thing.

113
00:06:43,170 --> 00:06:50,520
If we want to send the file to the server, we're not going to be sending it as Json.

114
00:06:50,520 --> 00:06:55,170
We'll actually send it as our form data.

115
00:06:55,410 --> 00:07:00,990
So if you remember previously, we were always, always turning into a Json, correct?

116
00:07:00,990 --> 00:07:02,520
This is not going to be the case.

117
00:07:02,520 --> 00:07:06,000
So in the following video we will set up an action.

118
00:07:06,830 --> 00:07:13,880
And yes, we'll send the data to the server, but notice I'll grab the form data and I'll send it directly

119
00:07:13,880 --> 00:07:16,490
to the server as a form data.

120
00:07:16,610 --> 00:07:17,930
This is very, very important.

121
00:07:17,930 --> 00:07:20,000
Otherwise the functionality is not going to work.

122
00:07:20,000 --> 00:07:23,510
So we're not going to send our image as Json.

123
00:07:23,540 --> 00:07:27,680
No, we'll actually have to send it the entire form data.

124
00:07:27,830 --> 00:07:32,150
Now, in order for this to work, we do need to go back to our form.

125
00:07:32,420 --> 00:07:40,050
Again, this is a good old HTML form at the end of the day and we need to add this encryption type.

126
00:07:40,070 --> 00:07:43,520
And as far as the value you want to go here with multipart.

127
00:07:44,370 --> 00:07:47,400
Then forward slash and form data.

128
00:07:47,430 --> 00:07:50,190
Again, this is super, super important.

129
00:07:50,460 --> 00:07:58,170
If there were no file, then yes, just like previously we would just set it up as Json and we're good

130
00:07:58,170 --> 00:08:01,650
to go, but since we're sending a file to the server.

131
00:08:02,400 --> 00:08:05,340
It's very important to set up the encryption type.

132
00:08:05,340 --> 00:08:13,470
And when we'll send the data to the server, we're going to send it as form data, not as Json.

133
00:08:13,500 --> 00:08:18,180
Hopefully that is clear and I'm noticing that I'm not using is submitting.

134
00:08:18,180 --> 00:08:23,940
And of course the reason for that is because I got too carried away with the file input and I forgot

135
00:08:23,940 --> 00:08:25,920
about the submit button.

136
00:08:25,920 --> 00:08:33,570
So let me navigate to my div and right after the last form row, we want to go here with button.

137
00:08:34,049 --> 00:08:40,500
Let's add some classes, BTN, btn, block and form hyphen btn.

138
00:08:40,650 --> 00:08:43,140
Then the type will be submit.

139
00:08:44,130 --> 00:08:50,610
And also we're going to go with disabled and let's set it equal to is submitting.

140
00:08:51,600 --> 00:08:56,010
And as far as the text, same deal we want to go with is submitting.

141
00:08:56,810 --> 00:08:57,830
We want to check.

142
00:08:58,880 --> 00:08:59,780
Let's add.

143
00:09:01,380 --> 00:09:04,040
The text if we're submitting.

144
00:09:04,050 --> 00:09:09,900
And then also we're going to have the submit if it's not the case.

145
00:09:10,080 --> 00:09:11,790
So submit over here.

146
00:09:11,910 --> 00:09:14,460
And with this in place, let's navigate to the browser.

147
00:09:14,460 --> 00:09:16,170
Again, this is complete project.

148
00:09:16,200 --> 00:09:17,790
This is what we should see.

149
00:09:17,790 --> 00:09:22,560
So we have few inputs and then one of them is the file input.

150
00:09:22,800 --> 00:09:28,680
In order to choose the file, we just click over here and notice this is my desktop and at the moment

151
00:09:28,680 --> 00:09:34,140
I have these two images and of course eventually we'll set up the functionality where we will be able

152
00:09:34,140 --> 00:09:42,720
to choose the file, send it to a server and if everything is correct, we'll update right away this

153
00:09:42,720 --> 00:09:45,930
avatar here in the logout button.