1
00:00:00,550 --> 00:00:03,790
In unless section we finished some firebase set up.

2
00:00:03,810 --> 00:00:06,180
We're not going to come back to firebase for a little bit.

3
00:00:06,180 --> 00:00:10,740
Instead we're going to focus on putting together our sign in form with some really good styling for

4
00:00:10,740 --> 00:00:16,050
now and then we'll come back to firebase and actually wrap up the authentication piece.

5
00:00:16,110 --> 00:00:20,670
So one of the first considerations that we need to make for this sign of form is whether or not we should

6
00:00:20,670 --> 00:00:26,340
create a new component to house the form itself or whether or not we should just place the form directly

7
00:00:26,340 --> 00:00:27,600
inside this app components.

8
00:00:27,600 --> 00:00:34,570
I'm talking about like literally placing a text input tag directly inside this component.

9
00:00:34,650 --> 00:00:40,800
I mean to suggest that we create a separate component and here's why the sign form should only be visible

10
00:00:40,800 --> 00:00:44,590
for a portion of the time inside our app sometimes will show the form.

11
00:00:44,610 --> 00:00:44,910
Right.

12
00:00:44,910 --> 00:00:48,570
Like when the user first starts the app up but other times you won't.

13
00:00:48,570 --> 00:00:54,120
So when a user successfully signs in and it's going to be easier to hide it if we put the form into

14
00:00:54,120 --> 00:00:56,490
a separate component.

15
00:00:56,490 --> 00:01:02,250
So with that in mind I'm going to create a new file inside of my components directory not inside of

16
00:01:02,250 --> 00:01:06,410
common just inside of components called log in form

17
00:01:09,340 --> 00:01:10,480
so log in form.

18
00:01:10,480 --> 00:01:17,010
Its sole purpose is going to be to How's everything having to do with entering a email entering a password

19
00:01:17,170 --> 00:01:19,650
and then trying to sign the user in.

20
00:01:19,660 --> 00:01:23,630
So inside this file Let's get started with a little bit of boilerplate.

21
00:01:23,680 --> 00:01:28,600
I am going to make this a class based component for reasons that we'll talk about in just a little bit.

22
00:01:29,120 --> 00:01:40,930
What import react and component from react and then just view right now from re-act native then we'll

23
00:01:40,930 --> 00:01:44,230
create our component class of log and form

24
00:01:47,570 --> 00:01:54,990
you to make sure I've got components spelt correctly and add my render method from which will return

25
00:01:55,380 --> 00:01:57,930
a single view tag for right now.

26
00:01:58,330 --> 00:02:00,060
Then at the bottom we can export.

27
00:02:00,060 --> 00:02:03,340
Default log in form.

28
00:02:03,900 --> 00:02:06,210
OK so there's the boiler plate right now.

29
00:02:06,720 --> 00:02:11,430
I'm hoping that at some point in time getting this boy the play together is going to become second nature

30
00:02:11,430 --> 00:02:14,310
because it feels like we write it a lot.

31
00:02:14,360 --> 00:02:15,990
Yup that's absolutely correct.

32
00:02:15,990 --> 00:02:17,650
We definitely write this thing a lot.

33
00:02:17,670 --> 00:02:20,330
This boy that played out.

34
00:02:20,970 --> 00:02:25,340
All right as a quick reminder log in form Here's a diagram for it.

35
00:02:25,350 --> 00:02:28,010
We need to have that kind of a card.

36
00:02:28,050 --> 00:02:31,680
The card section component and definitely the button component as well.

37
00:02:31,890 --> 00:02:38,130
So I think of our next step will be to place our reusable components or at least import them and then

38
00:02:38,130 --> 00:02:43,990
kind of scaffold out what we want the blog in the form to look like we're going to need one card.

39
00:02:44,070 --> 00:02:49,770
And I think it's going to contain three card sections one for e-mail one for password and one for the

40
00:02:49,770 --> 00:02:50,830
log in button.

41
00:02:51,120 --> 00:02:53,290
So let's get started with that now.

42
00:02:54,030 --> 00:03:04,800
At the very top we'll import our button card and it card section from the common directory and notice

43
00:03:04,800 --> 00:03:06,920
that I'm sane in the current directory.

44
00:03:06,930 --> 00:03:13,060
Find the common folder because this law enforcement is already inside the components directory.

45
00:03:13,080 --> 00:03:18,750
Notice all this is a lot nicer import statement than if we had three separate import statements all

46
00:03:18,750 --> 00:03:20,040
coming from the common folders.

47
00:03:20,040 --> 00:03:27,450
So again I really like this kind of pattern here is kind of approach Nabel and just kind of a little

48
00:03:27,450 --> 00:03:32,590
bit of scaffolding of what you know with the different cards and cards section area should be.

49
00:03:32,940 --> 00:03:38,390
So then take out the view tag right now and replace it with a card tag.

50
00:03:38,620 --> 00:03:44,580
So that's going to give us that kind of nice looking wrapper as a nice shadow on it has some margin

51
00:03:44,580 --> 00:03:46,200
on the left and right hand sides.

52
00:03:46,200 --> 00:03:53,760
Just something that looks nice and inside of here we'll make our three separate card sections so card

53
00:03:53,760 --> 00:03:54,750
section one.

54
00:03:54,930 --> 00:04:00,960
And right now I just can use self-closing tags because I don't have anything to put inside the first

55
00:04:00,960 --> 00:04:02,750
two just yet.

56
00:04:03,570 --> 00:04:08,940
And then for the last one this is going to be the card section that's going to How's that button.

57
00:04:08,940 --> 00:04:15,690
And we could probably create that button right now because we already know what text it's going to require

58
00:04:16,010 --> 00:04:19,410
So I just going to put in Lagann like so.

59
00:04:20,160 --> 00:04:27,150
So we've got card three card sections in the last card section has a button tag inside it.

60
00:04:27,180 --> 00:04:30,830
Finally we need to make sure this component actually gets shown inside of our app.

61
00:04:30,990 --> 00:04:33,440
So again flip back to our app component.

62
00:04:34,200 --> 00:04:36,140
Import this form and show it.

63
00:04:36,330 --> 00:04:48,360
So if the top will imports loggin form from components log in form like so and then we're going to show

64
00:04:48,360 --> 00:04:50,180
it inside of our application.

65
00:04:50,250 --> 00:04:53,170
So I've got my view tag I've got my header tag.

66
00:04:53,370 --> 00:04:54,860
I probably don't need the text anymore.

67
00:04:54,870 --> 00:04:57,190
It was really just there to get us started.

68
00:04:57,360 --> 00:05:03,850
So we're going to take out the text tag and replace it with an instance of the logon form like so.

69
00:05:04,740 --> 00:05:05,330
All right.

70
00:05:05,350 --> 00:05:09,600
Now of course as I mentioned earlier we probably don't want to show the logon form 100 percent of the

71
00:05:09,600 --> 00:05:14,670
time but we will just use this shortcut for now and we'll come back later and figure out how we're going

72
00:05:14,670 --> 00:05:17,560
to toggle whether or not the log in form is visible.

73
00:05:18,040 --> 00:05:19,810
OK time see if everything worked out.

74
00:05:19,950 --> 00:05:24,530
I'm going to flip back to the simulator refresh and see how we're doing.

75
00:05:28,820 --> 00:05:35,450
First time we import stuff always takes a while for it transpired especially since my laptop is not

76
00:05:35,450 --> 00:05:36,610
the newest one in the world.

77
00:05:36,650 --> 00:05:39,340
So it's kind of a I'm never giving up.

78
00:05:39,350 --> 00:05:43,770
I'm just going to let the thing go while it is running though I do need to do a little bit of clean

79
00:05:43,770 --> 00:05:44,060
up.

80
00:05:44,060 --> 00:05:46,890
I've still got the unused text tagged which we just deleted.

81
00:05:47,220 --> 00:05:50,550
So I'm going to take that out just for good housekeeping.

82
00:05:51,200 --> 00:05:52,070
And there we go.

83
00:05:52,070 --> 00:05:52,390
All right.

84
00:05:52,430 --> 00:05:53,410
So much better.

85
00:05:53,600 --> 00:05:56,690
I've got one card section to section.

86
00:05:56,690 --> 00:06:01,850
And the third one here and the third one presently just houses the log in button which if we press doesn't

87
00:06:01,850 --> 00:06:03,200
do anything just yet.

88
00:06:03,590 --> 00:06:08,330
So let's continue the next section and figure out exactly what we're going to place inside of these

89
00:06:08,340 --> 00:06:09,840
card sections.