1
00:00:00,700 --> 00:00:05,530
Not bad not bad once we can fetch our products from our own API.

2
00:00:05,530 --> 00:00:11,800
Next let's switch gears and set up log in functionality and we're going to start by adding some content

3
00:00:11,860 --> 00:00:17,730
in our logon page because currently the only thing we have there is sad little hiring one.

4
00:00:17,740 --> 00:00:22,840
So I'm going to head over back to my project and we're going to start very slowly by just setting up

5
00:00:22,870 --> 00:00:26,290
our imports as well as initial functionality.

6
00:00:26,350 --> 00:00:31,780
So I'm gonna open up the sidebar and when it clear all the tabs first and then we're going to look for

7
00:00:31,780 --> 00:00:33,510
our logon page again.

8
00:00:33,580 --> 00:00:36,810
The only thing we have there is the hitting one I guess.

9
00:00:36,820 --> 00:00:38,560
Let's start with our imports.

10
00:00:38,620 --> 00:00:44,600
So eventually we're going to have some strappy functions strappy functions One is gonna be for logging

11
00:00:44,620 --> 00:00:46,600
user and the other one for register.

12
00:00:46,630 --> 00:00:49,720
Let's leave it blank for now because we haven't created.

13
00:00:49,720 --> 00:00:56,530
Then we're gonna have some functionality to handle user and for that we're gonna have a user context

14
00:00:56,800 --> 00:00:58,380
which currently we have the file.

15
00:00:58,600 --> 00:01:02,000
But again we haven't set up even the initial scaffold.

16
00:01:02,050 --> 00:01:03,540
So I'm just gonna leave with that blank.

17
00:01:03,550 --> 00:01:10,660
But we are going to import use history because if we log in and if let's say everything was successful

18
00:01:11,170 --> 00:01:14,200
then I would one navigate away from the page.

19
00:01:14,200 --> 00:01:16,490
So that's where we're going to use the import.

20
00:01:16,630 --> 00:01:20,160
And then we're looking for use history history.

21
00:01:20,200 --> 00:01:22,450
And of course we already work with this book.

22
00:01:22,480 --> 00:01:25,870
So from and react I wrote her down.

23
00:01:25,900 --> 00:01:28,040
So that should do it with our imports.

24
00:01:28,060 --> 00:01:34,630
Of course we're not done but at least our initial setup and now first I'm going to initialize the history.

25
00:01:34,840 --> 00:01:42,100
So right within the I'm gonna start by react rather history so concert history is equal and then we're

26
00:01:42,100 --> 00:01:48,600
gonna use our hook and essentially we're just gonna sign it to a variable then we're gonna have some

27
00:01:48,600 --> 00:01:51,240
functions from the logging user.

28
00:01:51,240 --> 00:01:56,910
So essentially we're gonna have our user context important here on top and then we're gonna set it up

29
00:01:57,030 --> 00:01:59,400
like we normally do when we structure it.

30
00:01:59,550 --> 00:02:08,100
But of course since we don't have anything in there we're just gonna say set up our user context like

31
00:02:08,100 --> 00:02:11,160
so and now we're just gonna set up some input fields.

32
00:02:11,310 --> 00:02:17,760
So if we're looking at our finished project we can see that within the logon page we're gonna have a

33
00:02:17,780 --> 00:02:21,710
signing by default or we have an option of registering.

34
00:02:21,720 --> 00:02:25,530
So if I click on toggle I can register user.

35
00:02:25,560 --> 00:02:30,930
So initially of course we would need to register but by default I'm just gonna assume that the user

36
00:02:30,930 --> 00:02:32,130
has already registered.

37
00:02:32,400 --> 00:02:33,890
So we just need to sign in.

38
00:02:33,900 --> 00:02:38,100
So in this case we're going to set up three input fields and that's the reason why we're going to use

39
00:02:38,330 --> 00:02:39,250
you state.

40
00:02:39,450 --> 00:02:41,430
Just to set up some state values.

41
00:02:41,430 --> 00:02:48,950
So we're going to go back and we're gonna write maybe a comment to state values online as part of state

42
00:02:48,960 --> 00:02:54,660
values we have email password user name and also a member.

43
00:02:54,660 --> 00:02:57,480
Now why would need a member state value.

44
00:02:57,480 --> 00:02:58,860
Because we're gonna be toggling.

45
00:02:58,860 --> 00:03:04,170
So we're gonna be toggling between is the user remember that then if the user is member then we just

46
00:03:04,170 --> 00:03:09,930
need to use the email and password if the user is not a member if we still need to register then of

47
00:03:09,930 --> 00:03:14,790
course we're also gonna sign the user name and we're gonna do that by toggling here the state value

48
00:03:15,060 --> 00:03:18,240
is member what's the reason why we're going to have four values.

49
00:03:18,240 --> 00:03:23,990
So we're gonna start cost gonna e-mail and then the function that controls it so set the email.

50
00:03:24,060 --> 00:03:32,270
And in this case we're going to use a react use state use state and then initial value is just gonna

51
00:03:32,280 --> 00:03:38,910
be an empty string and then let's copy and paste that like I said four times online for the second one

52
00:03:38,940 --> 00:03:46,880
is gonna be password so password input password input then of course also a function is gonna be named

53
00:03:46,880 --> 00:03:52,080
a bit differently word then use that is gonna stay the same.

54
00:03:52,080 --> 00:03:59,040
Initially an empty string and then we also have a user name No user name is gonna be a different because

55
00:03:59,460 --> 00:04:05,910
we're still gonna have the same function so set user name but instead of the empty value we're just

56
00:04:05,910 --> 00:04:11,010
gonna have some default value at the moment it's not gonna make sense and again I don't want to explain

57
00:04:11,010 --> 00:04:15,990
something for half an hour if it's gonna be a little bit easier for me eventually just to show you why

58
00:04:15,990 --> 00:04:22,170
we're setting this up as a default but just initially set it up not as an empty string but instead as

59
00:04:22,170 --> 00:04:29,880
a default and then like I said we also have a member and I'm going to call this is number and set is

60
00:04:29,880 --> 00:04:37,230
member of course that is the name of my function set is number and by default I'm just gonna say that

61
00:04:37,350 --> 00:04:43,890
user is already a member that's the reason why by default when we refresh we can see that we have a

62
00:04:43,890 --> 00:04:44,660
sighting.

63
00:04:44,730 --> 00:04:50,130
So of course again we're gonna be toggling in our Jess ex where if the user is already a member then

64
00:04:50,130 --> 00:04:55,920
we're going to show sign in if we toggle then we're gonna say he's member and also we're gonna show

65
00:04:55,920 --> 00:05:03,090
the user name input then we're gonna have is empty values and we're going to use our is empty values

66
00:05:03,090 --> 00:05:10,050
variable to toggle whether we need to show the text of please fill out all the fields or if let's say

67
00:05:10,050 --> 00:05:15,600
we fill out all the fields let's say for email as well as the password then we're gonna have a submit

68
00:05:15,600 --> 00:05:16,170
button.

69
00:05:16,350 --> 00:05:21,880
So we're gonna have some variable here and that is not going to be a used state variable we're just

70
00:05:21,900 --> 00:05:29,340
going to have a simple variable let's say let is empty and eventually it's going to depend on email

71
00:05:29,340 --> 00:05:33,900
password and user name but just for the time being we're just gonna set this up as false.

72
00:05:34,020 --> 00:05:40,390
Very very simply then we're gonna set up our function our toggle function and we're not actually gonna

73
00:05:40,410 --> 00:05:46,020
set up any functionality again this is just gonna be a placeholder for our function so we're gonna create

74
00:05:46,020 --> 00:05:51,650
a function and functionality we're gonna add a little bit later once we set up our JSF.

75
00:05:52,050 --> 00:05:57,630
Now again why this function is important is this function is gonna be responsible for in fact toggling.

76
00:05:57,630 --> 00:06:04,380
So once we click what is going to change in our component so let's set up our place holder so let's

77
00:06:04,380 --> 00:06:13,830
say const then toggle member like so and then again there's no functionality there's just a empty function

78
00:06:14,280 --> 00:06:17,290
and lastly there's also gonna be a handle submit function.

79
00:06:17,400 --> 00:06:23,310
So obviously once we submit the form then we are either gonna try to log in we're all going to try to

80
00:06:23,310 --> 00:06:26,760
register but both of them are gonna be a synchronous actions.

81
00:06:27,030 --> 00:06:32,210
So that's the reason why our handles submit is going to be in fact asynchronous sort of outlook const

82
00:06:32,700 --> 00:06:41,520
and all met like so and it's gonna be a synchronous function so we're going to go with async async and

83
00:06:41,520 --> 00:06:46,020
then we're gonna be looking for the event because we would want to prevent a default.

84
00:06:46,060 --> 00:06:49,590
And again for the time being functionality is just going to be blank.

85
00:06:50,120 --> 00:06:56,080
And successfully we're done with our initial reports as well as our initial logic.