1
00:00:01,199 --> 00:00:12,960
Well, in this video we are going to do the part of the from, the part of the GUI of the login.

2
00:00:14,119 --> 00:00:22,280
We have done the registration part. With what we have worked, what we have used

3
00:00:22,280 --> 00:00:33,280
in this part you should be able to face any task that was to connect with the backend and

4
00:00:33,280 --> 00:00:41,340
do different cross operations against the mongoose database, sorry, mongoose mongo

5
00:00:41,340 --> 00:00:48,280
db, okay, using axios, using all the libraries that we have seen, such as mongoose

6
00:00:48,280 --> 00:00:53,859
to connect to the monkey or any of all the ones we have seen, it is worth from real,

7
00:00:55,479 --> 00:01:14,019
then what we are going to do is that when we are going to see the page we are already when we enter

8
00:01:14,019 --> 00:01:23,859
in the front and we enter the login route instead of that we get this login that we get

9
00:01:23,859 --> 00:01:32,560
something similar to what we are going to similar is going to be the same as the registration when we did a login

10
00:01:32,560 --> 00:01:39,060
if you remember when we were developing the backend part the only thing that was mandatory

11
00:01:39,060 --> 00:01:49,319
was the field of the email and the field of the password once we launched a consultation and we were looking for

12
00:01:49,319 --> 00:01:57,359
that email and that password, it is worth remembering that we compared first we encrypted that password

13
00:01:57,359 --> 00:02:06,359
that we had put in, we had to encrypt it because remember that with jw t and with the good one because with

14
00:02:06,359 --> 00:02:13,759
real we encribe and with creep we encrypted that password then we had to make that

15
00:02:13,759 --> 00:02:20,699
comparison remember that we had the method of the compare that allowed us to compare that password that

16
00:02:20,699 --> 00:02:25,620
we have introduced now with the one that we had encrypted if everything was fine then a

17
00:02:25,620 --> 00:02:31,259
token was created that is the one that was sent to the client ok and with that active touch is with which

18
00:02:31,259 --> 00:02:37,439
we know from the front part that that client is well logged or not valid then we have to

19
00:02:37,439 --> 00:02:45,340
do we have to get all that well then we go in steps the first part we are going to

20
00:02:45,340 --> 00:02:54,840
create a page for this route because if we go to our code we see that we are already

21
00:02:54,840 --> 00:03:00,919
if we see that without the part of the client in that recent

22
00:03:04,909 --> 00:03:12,650
the pp jsx in the login routes what we had is login which is what we are showing

23
00:03:12,650 --> 00:03:18,909
here is only this text is worth what we need is a new page then

24
00:03:18,909 --> 00:03:25,509
let's go to page we are going to create a new page that we are going to call for example login page

25
00:03:26,409 --> 00:03:36,550
.js, sorry, jsx, okay, here we are going to create the react structure

26
00:03:39,370 --> 00:03:45,370
and the truth is that what we are saying is not very similar to everything we have

27
00:03:48,669 --> 00:03:54,909
on the registration page, so what we are going to do is I am going to copy it, I am going to paste it and I am going to

28
00:03:54,909 --> 00:04:02,289
modify the registration parts that I do not need ok then I'm going to copy

29
00:04:02,289 --> 00:04:08,849
all these imports first we are going to paste them in login

30
00:04:13,860 --> 00:04:15,319
we are going to copy

31
00:04:15,319 --> 00:04:32,519
all this up here, for example, we are going to paste it in the login and here it is worth and now the two pages are

32
00:04:32,519 --> 00:04:43,519
exactly the same, it is worth if we come to the pp jsx and here I change the route and we put that instead

33
00:04:43,519 --> 00:04:53,360
that you put the login text on me, you are going to call the page login, it is worth

34
00:04:55,839 --> 00:05:03,899
this, it is worth it because this must call us to that page because it has not called us

35
00:05:03,899 --> 00:05:06,800
because we have not imported it, we are going to import it

36
00:05:06,800 --> 00:05:20,240
page and that's it, we're done, so now we see that on the login route

37
00:05:20,240 --> 00:05:25,759
the register page is coming out, okay, because we have copied and we have not modified anything,

38
00:05:25,759 --> 00:05:28,819
now we go with it, we go back to our code,

39
00:05:28,819 --> 00:05:40,000
we are and we are ok and we start on the login page to modify what we are not

40
00:05:40,000 --> 00:05:46,220
missing ok well let's go by parts

41
00:05:48,420 --> 00:05:57,660
the user for the hook form if we are going to need it ok the use out good because if we create the context

42
00:05:57,660 --> 00:06:04,920
we will also need it is worth that context of work that can come in handy when

43
00:06:04,920 --> 00:06:14,459
sharing information remember it and use effect remember that the use of efe we used it for

44
00:06:15,819 --> 00:06:25,740
good if there was no problem that would take us to the tasks to the tasks is worth in principle this

45
00:06:25,740 --> 00:06:33,540
to see that everything works for us well I am going to comment on it and then if we leave it active

46
00:06:33,540 --> 00:06:38,339
because it is its value once you are logged because you do not want to stay in the logged window but

47
00:06:38,339 --> 00:06:49,060
for now I am going to comment on the function of logged if we see it in the out context here the

48
00:06:49,060 --> 00:06:57,519
this function is still logged, it is calling the request register, which is the one of the

49
00:06:57,519 --> 00:07:08,920
pack, which is not the one that I have in javascript, it is the one that we call the register backend route

50
00:07:08,920 --> 00:07:15,759
and we pass the data to it, then this is not worth it to me, here I would have to create another function

51
00:07:15,759 --> 00:07:23,439
that it will call the login route then we are going to create it but we are going to put it sport

52
00:07:25,839 --> 00:07:30,060
because instead of registering the memory we are going to put the login request

53
00:07:33,310 --> 00:07:38,449
that it will have as an entry in the user arrow function

54
00:07:38,449 --> 00:07:50,769
constant networks because it returned us from the back in once we were logged the user and the

55
00:07:50,769 --> 00:07:57,750
idea and the top good different information ok so we are going to collect it with axios

56
00:07:59,250 --> 00:08:04,850
or the post method because we are sending information to do the login

57
00:08:04,850 --> 00:08:13,750
I am going to make the connection with the backend, it is worth accent, remember not as already simple accent

58
00:08:13,750 --> 00:08:22,250
dollar keys the api that the api remember that it is nothing more than this string so as not to have to

59
00:08:22,250 --> 00:08:29,709
be writing it is always valid and it is active and it is to the login route

60
00:08:33,570 --> 00:08:34,929
this is wrong

61
00:08:38,129 --> 00:08:46,049
ok and what data are we going to pass on what we are passing to the login request function ok

62
00:08:46,049 --> 00:08:55,990
and here I am going to put the return press is very similar to the function register request nothing more

63
00:08:55,990 --> 00:09:02,730
than the change the route the data remember that here in the recall register we were passing the

64
00:09:02,730 --> 00:09:10,889
user name the email and the password and however in login remember the only thing we passed would be in

65
00:09:10,889 --> 00:09:21,960
email and the password, okay, okay, well, I go back to my login page page and here

66
00:09:23,960 --> 00:09:36,980
I have logged in, okay, so what we were saying is that of course here we cannot call

67
00:09:36,980 --> 00:09:45,919
has logged in then we have to come now to listen to the use out page to the out context let's go

68
00:09:45,919 --> 00:09:52,700
there and here we have to make a function similar to this one but that does not call register the

69
00:09:52,700 --> 00:10:00,200
request that calls the login request ok then come on we are going to we are going to create with

70
00:10:00,200 --> 00:10:12,799
we are going to call it logging, for example, logging is the same as the asynchronous because in the end we are going to be

71
00:10:12,799 --> 00:10:18,960
working against mongo and we are going to be good because it may be with a certain ease that the

72
00:10:18,960 --> 00:10:23,120
database is down, that the communication is bad, I don't know anything, the network,

73
00:10:23,120 --> 00:10:26,519
anything is worth so always remember the asynchronous

74
00:10:29,159 --> 00:10:37,169
and use and use remember that we took it from the context

75
00:10:41,850 --> 00:10:42,909
in the time

76
00:10:47,250 --> 00:10:58,399
and now what we are going to call is what the request is worth as I call the login request

77
00:10:58,399 --> 00:11:05,759
because this will be that here I have it, okay, I already have it imported, then it is worth

78
00:11:07,580 --> 00:11:15,639
and it is worth here as we are playing with the context because we put it

79
00:11:18,779 --> 00:11:19,279
and

80
00:11:19,279 --> 00:11:34,879
is worth a bit is exactly the same as the login function what we change is the

81
00:11:34,879 --> 00:11:40,820
login the function of the app and to which we are calling ok here we put the cat

82
00:11:40,820 --> 00:11:53,570
error set error because in the end we are controlling them the same error point

83
00:11:56,789 --> 00:12:03,230
point data ready ok we already have our function login what happens to this function

84
00:12:03,230 --> 00:12:11,029
we will also have to export it remember that we are in the provider ok and the provider returned

85
00:12:11,029 --> 00:12:20,210
esos valores entonces aquí le vamos a poner pues lograrse vale entonces el provider ya lo tendríamos

86
00:12:20,210 --> 00:12:24,769
volvemos a nuestra página entonces en nuestra página en vez de logueado lo que queremos es

87
00:12:24,769 --> 00:12:32,409
que llame a lograrse lograrse y lograrse lo vamos a desde aquí

88
00:12:32,409 --> 00:12:43,409
ok in principle this is authentic and I do not need it because it appears disabled because we have

89
00:12:43,409 --> 00:12:48,090
commented on the entire part of the effect the errors are the ones that we are going to collect if there are

90
00:12:48,090 --> 00:12:53,230
errors so that it visualizes everything about the form that we do need

91
00:12:55,450 --> 00:13:01,409
ok well we keep looking ok and we get into the part ok remember that this is the

92
00:13:01,409 --> 00:13:10,210
which is the function that we are going to execute thanks to the hand the summit that

93
00:13:10,210 --> 00:13:20,769
provides us with it, it is worth remembering that we imported it, we took it with the cons with the register to put

94
00:13:20,769 --> 00:13:32,230
well the attributes of the different inputs hand the summit and the state form to

95
00:13:32,230 --> 00:13:38,529
take those errors that the user itself allowed us from ok then we have within what

96
00:13:38,529 --> 00:13:44,889
would be the form the month that this in principle I am not doing anything with it I am going to

97
00:13:44,889 --> 00:13:52,809
to contract ok and then nothing begins to modify what that form is

98
00:13:52,809 --> 00:13:55,529
then instead of registration because it puts login

99
00:13:58,870 --> 00:14:07,450
ok this would be for the different errors we have said that the username we do not need so

100
00:14:07,450 --> 00:14:15,750
that we delete this we have the email we have the password we have the button of the summit

101
00:14:15,750 --> 00:14:24,169
is worth the summit type that already links us with the summit to register here we are going to put it to be logged

102
00:14:24,169 --> 00:14:43,909
log in and well, in principle, we would already be okay, then we would have all this, we would already have the

103
00:14:43,909 --> 00:14:54,710
form, we would have the out context with the log in that we have then returned it, it is worth

104
00:14:54,710 --> 00:15:09,710
as another of the return variables within the provider, the out in which we have created the login request, the appjsx in which we have modified the route, the page itself and in principle, well, everything would already be there.

105
00:15:09,710 --> 00:15:17,710
Now I have the backend and the client part started, so let's try it.

106
00:15:17,710 --> 00:15:27,190
then we are going to take we are going to go to the page to see it well we are going to check we are yes

107
00:15:28,509 --> 00:15:37,710
ok I have mine as a user ok I don't have any more ok if I put here for example

108
00:15:37,710 --> 00:15:52,129
we are going to see these development tools for the console and we are going to put here, for example,

109
00:15:55,610 --> 00:15:56,769
the saints

110
00:16:00,250 --> 00:16:07,789
point of regé 1 2 3 tells me the password must have at least six characters because we have

111
00:16:07,789 --> 00:16:13,789
controlled the theme of the errors of zot ok then we are going to put 2 3 4 5 and 6 login

112
00:16:15,090 --> 00:16:26,509
ok I get an error bar request that is here we would already have a problem this does not exist if we see

113
00:16:26,509 --> 00:16:42,370
we are going to put if we see the part of the terminal we see that it is giving us the error 204 if we go down

114
00:16:45,070 --> 00:16:55,289
and the middleware out controller we see that the error 204 is sending it to us when

115
00:16:55,289 --> 00:17:02,450
we launch the query with the email and it does not exist that it does not actually exist here there is only

116
00:17:02,450 --> 00:17:14,490
mario.santos ok then we are going to we are going to put mario.santos and I am going to modify

117
00:17:14,490 --> 00:17:30,869
3 6 5 4 is worth the password it would be wrong I give it to log in and then we see that it returns us

118
00:17:42,299 --> 00:17:51,680
we are going to update it we are going to put it we are going to this is with the code we are going to the page and

119
00:17:51,680 --> 00:17:58,720
y así la veis bien vale mario puntos santos arroba

120
00:18:01,720 --> 00:18:09,079
punto madrid punto de regén 1 2 3 6 5 4

121
00:18:10,740 --> 00:18:21,440
vale lo de asia y este vale fijaros cómo

122
00:18:21,440 --> 00:18:39,619
let's go to the visual studio server now the error that has skipped me is the 401 is worth 401 that if I

123
00:18:39,619 --> 00:18:48,700
look here it is the one that sends us if the password does not see it compares it compares it and it is not the

124
00:18:48,700 --> 00:18:57,160
correct one, okay, this is fine, okay, and yes, if we get all the data right, we are going to put

125
00:18:57,160 --> 00:19:08,079
Mario Santos here 1 2 3 4 5 and 6, okay, what are the data of yours, play, okay, it tells me it includes a

126
00:19:08,079 --> 00:19:15,339
such one, we are going to check that this is not worth it, it puts it on us, it does everything the same as the register,

127
00:19:15,339 --> 00:19:20,160
which is what we want, then here we put mario santos arroba

128
00:19:23,059 --> 00:19:41,710
madrid.org ok I give it to log in and here we are going to get out let's go ok here it already tells me the 200 that is, it has done everything

129
00:19:41,710 --> 00:19:50,289
well here it already shows me the cookie in the front part, that is, it has created it for us

130
00:19:50,289 --> 00:20:00,250
and it has sent it to us well, what else, well, if we want, for example, in the part of the out context

131
00:20:02,930 --> 00:20:04,130
we are going to put

132
00:20:04,130 --> 00:20:19,369
we are going to put console.log res so that we can see what it is that is saving us, sorry,

133
00:20:19,369 --> 00:20:27,190
what is it that is returning the backend to us, okay, what else can we see if everything is fine,

134
00:20:27,190 --> 00:20:32,390
I think it is already playing, okay, then we are going to delete the console

135
00:20:34,130 --> 00:20:45,470
well here also this in principle here we would have in the hook the data that are the ones that he has sent us

136
00:20:45,470 --> 00:20:49,589
is worth it is the same that I have put the console we could see it from here here we see that we have

137
00:20:49,589 --> 00:20:56,690
the username the email is worth that it is working for us everything is working for us well it is worth

138
00:20:56,690 --> 00:21:03,289
perfect then we are going to try now also that it shows us everything in the terminal and

139
00:21:03,289 --> 00:21:12,569
if we see it mario puntos santos educa dot madrid dot rg

140
00:21:12,569 --> 00:21:19,049
1 2 3 4 5 and 6 log in is worth here we have the same data

141
00:21:19,049 --> 00:21:26,230
in data is worth the same the idea that is, it is not returning everything well if we are going to

142
00:21:26,230 --> 00:21:37,809
ends in 671 is worth then the idea here it is 671 has recognized it recognizes the document

143
00:21:39,049 --> 00:21:44,890
and it generates us the touch is not doing everything well in this way we would already have the part of the login

144
00:21:44,890 --> 00:21:53,450
and you are already seeing that well, it is practically the same as the part of the register of the register is worth

145
00:21:53,450 --> 00:22:01,309
Vale, y aquí dejo este vídeo y continuamos. Un saludo, hasta luego.