1
00:00:03,000 --> 00:00:04,747
In this video we'll create

2
00:00:04,747 --> 00:00:07,434
the user interface for our Sign In page.

3
00:00:07,434 --> 00:00:09,181
And I'll go pretty quickly

4
00:00:09,181 --> 00:00:10,996
because it's a simple form.

5
00:00:10,996 --> 00:00:13,616
Although it will also be a good example

6
00:00:13,616 --> 00:00:15,431
of how to use Tailwind CSS.

7
00:00:16,265 --> 00:00:18,640
So let's start with a "form" element,

8
00:00:19,140 --> 00:00:21,447
where the user can enter their "Email".

9
00:00:22,240 --> 00:00:24,351
For that we need an "input" field,

10
00:00:24,351 --> 00:00:26,648
and I'm setting the "type" to "email"

11
00:00:26,648 --> 00:00:29,937
so the browser will automatically validate the email.

12
00:00:30,561 --> 00:00:32,540
Then we need another similar field

13
00:00:32,540 --> 00:00:33,646
for the "Password".

14
00:00:35,327 --> 00:00:38,395
In this case the input type will be "password",

15
00:00:38,395 --> 00:00:40,157
so the browser will obscure

16
00:00:40,157 --> 00:00:42,115
the value entered by the user.

17
00:00:42,745 --> 00:00:44,351
Let's see what we have so far.

18
00:00:44,851 --> 00:00:46,105
It's not easy to see

19
00:00:46,105 --> 00:00:47,797
where the input fields are.

20
00:00:48,359 --> 00:00:50,990
That's because Tailwind CSS by default

21
00:00:50,990 --> 00:00:54,105
doesn't set any styles on the input elements.

22
00:00:54,674 --> 00:00:57,622
But we can easily add some utility classes,

23
00:00:57,622 --> 00:00:58,719
like a "border".

24
00:00:59,287 --> 00:01:02,264
And we can see the border around the email input.

25
00:01:02,264 --> 00:01:04,876
Now we should do the same for the password,

26
00:01:05,436 --> 00:01:08,074
but rather than duplicating the same styles

27
00:01:08,074 --> 00:01:10,957
I'm going to create a shared component instead.

28
00:01:11,518 --> 00:01:13,841
Let's call it "Input", with a capital "I".

29
00:01:14,341 --> 00:01:16,264
And this will be a React function component,

30
00:01:17,007 --> 00:01:19,414
that will return an "input" element.

31
00:01:19,914 --> 00:01:22,071
We want to pass the "type" as a prop,

32
00:01:22,071 --> 00:01:24,402
so we can pass it to the native element.

33
00:01:25,747 --> 00:01:28,221
But here we can add some CSS classes,

34
00:01:28,221 --> 00:01:29,759
starting with "border".

35
00:01:30,325 --> 00:01:32,307
This way in our SignInPage

36
00:01:32,307 --> 00:01:35,433
we can replace the standard input element

37
00:01:35,433 --> 00:01:37,643
with our own Input component.

38
00:01:38,295 --> 00:01:40,661
And do the same for the password input,

39
00:01:40,661 --> 00:01:43,148
so we don't need to set any classes here.

40
00:01:43,708 --> 00:01:46,430
All the Inputs will use the same styles

41
00:01:46,430 --> 00:01:48,593
defined in the React component,

42
00:01:48,593 --> 00:01:52,292
and in fact we can see the border around both fields.

43
00:01:52,931 --> 00:01:54,837
Now let's add some more styling.

44
00:01:55,731 --> 00:01:57,476
If we type something in here,

45
00:01:57,476 --> 00:01:59,281
the text is a bit too crammed.

46
00:01:59,841 --> 00:02:01,404
Let's add some padding,

47
00:02:01,404 --> 00:02:03,986
maybe 3 horizontally and 1 vertically.

48
00:02:05,941 --> 00:02:08,191
That's better. I'm also going to set

49
00:02:08,191 --> 00:02:09,690
the border as "rounded",

50
00:02:10,252 --> 00:02:12,509
just so that it will look a little bit nicer.

51
00:02:13,152 --> 00:02:15,743
Ok. This will do for the input elements.

52
00:02:16,243 --> 00:02:18,827
Now, I'd like each field to be displayed

53
00:02:18,827 --> 00:02:19,990
on a separate row,

54
00:02:20,554 --> 00:02:22,561
and for that we'll need to style

55
00:02:22,561 --> 00:02:24,003
these "label" elements.

56
00:02:24,565 --> 00:02:26,232
Again, to make this reusable

57
00:02:26,232 --> 00:02:28,434
I'll create another custom component.

58
00:02:28,993 --> 00:02:30,698
Let's call this one "Field".

59
00:02:31,659 --> 00:02:33,632
Again it's a React function component.

60
00:02:34,132 --> 00:02:36,111
And here I'll paste the "label"

61
00:02:36,111 --> 00:02:37,580
I copied from the page.

62
00:02:38,143 --> 00:02:40,556
But to make it reusable we could pass

63
00:02:40,556 --> 00:02:41,990
the "label" as a prop.

64
00:02:42,555 --> 00:02:44,595
So this will be the "label" text

65
00:02:44,595 --> 00:02:46,826
that we display instead of "Email",

66
00:02:46,826 --> 00:02:48,610
and I wrapped it in a "span"

67
00:02:48,610 --> 00:02:50,586
in case we want to style it up.

68
00:02:51,277 --> 00:02:52,956
As for the Input element

69
00:02:52,956 --> 00:02:56,243
we'll want to pass that as the "children" prop,

70
00:02:56,243 --> 00:02:58,551
because we could have some fields

71
00:02:58,551 --> 00:03:00,999
where instead of an "input" element

72
00:03:00,999 --> 00:03:03,867
we want maybe a "textarea" or a "select".

73
00:03:04,646 --> 00:03:07,731
So we can pass whatever element we want

74
00:03:07,731 --> 00:03:09,313
inside the JSX tags.

75
00:03:09,893 --> 00:03:12,700
Now, let's use our new Field component here,

76
00:03:13,200 --> 00:03:14,765
setting the "label" text,

77
00:03:14,765 --> 00:03:16,581
that in this case is "Email".

78
00:03:17,144 --> 00:03:18,616
And of course closing the tag.

79
00:03:19,409 --> 00:03:21,966
Let's do the same thing for the password field.

80
00:03:23,210 --> 00:03:25,554
The "label" in this case is "Password",

81
00:03:25,554 --> 00:03:27,177
that we can move from here.

82
00:03:29,776 --> 00:03:30,781
And that's it.

83
00:03:30,781 --> 00:03:34,083
Now we can add styles to this Field component.

84
00:03:34,655 --> 00:03:37,287
Let's start by displaying it as "block",

85
00:03:37,287 --> 00:03:39,920
so each field will be on a separate row.

86
00:03:40,485 --> 00:03:43,030
In fact we could display the label text

87
00:03:43,030 --> 00:03:44,531
on its own row as well.

88
00:03:45,096 --> 00:03:48,328
And maybe add some more styles to this "span",

89
00:03:48,328 --> 00:03:49,873
like using small text,

90
00:03:50,443 --> 00:03:52,850
and some shade of "gray" as the colour.

91
00:03:56,276 --> 00:03:59,429
We could also do with some margin on the Y axis,

92
00:03:59,429 --> 00:04:01,859
to put some space between each field.

93
00:04:02,424 --> 00:04:04,330
I think this looks good enough now.

94
00:04:05,457 --> 00:04:08,958
I'll just make the input elements a bit wider,

95
00:04:08,958 --> 00:04:10,327
like maybe "w-80".

96
00:04:10,903 --> 00:04:13,435
This way if somebody has a long email

97
00:04:13,435 --> 00:04:15,214
it should fit more easily.

98
00:04:15,782 --> 00:04:17,043
Ok. Let's move on.

99
00:04:17,043 --> 00:04:20,124
What we're still missing is a submit button.

100
00:04:20,694 --> 00:04:22,107
By this point we know that

101
00:04:22,107 --> 00:04:24,986
we want to create reusable components for everything.

102
00:04:25,540 --> 00:04:27,847
So let's create a "Button" component.

103
00:04:29,440 --> 00:04:32,631
And this will decorate a standard HTML button

104
00:04:32,631 --> 00:04:34,050
with our own styles.

105
00:04:34,620 --> 00:04:36,508
Let's take the "children" prop

106
00:04:36,508 --> 00:04:38,710
and display it inside the "button",

107
00:04:38,710 --> 00:04:40,912
so we can pass any content we like.

108
00:04:41,537 --> 00:04:42,637
In the SignInPage

109
00:04:42,637 --> 00:04:45,418
we can now import the new Button component,

110
00:04:47,170 --> 00:04:49,478
passing "Sign In" as the text.

111
00:04:49,978 --> 00:04:52,090
We could also set "type=submit",

112
00:04:52,090 --> 00:04:53,739
since it's inside a form.

113
00:04:53,739 --> 00:04:55,058
This will help later

114
00:04:55,058 --> 00:04:57,368
when we handle the form submission.

115
00:04:58,065 --> 00:04:59,421
But for that to work

116
00:04:59,421 --> 00:05:02,538
we'll need to accept the "type" prop from here

117
00:05:02,538 --> 00:05:05,249
and pass it down to the native "button".

118
00:05:05,884 --> 00:05:07,970
Ok. Now, let's add some styles,

119
00:05:07,970 --> 00:05:11,198
otherwise our button just looks like plain text.

120
00:05:11,765 --> 00:05:13,881
Let's add some background colour,

121
00:05:13,881 --> 00:05:16,125
and I'll use a dark shade of green,

122
00:05:16,125 --> 00:05:18,304
since our website is about plants.

123
00:05:18,932 --> 00:05:20,704
It could do with some padding.

124
00:05:22,632 --> 00:05:25,051
To be visible the text should be white,

125
00:05:25,051 --> 00:05:27,283
or maybe some light shade of "gray".

126
00:05:29,198 --> 00:05:32,006
Ok. It's starting to look like a proper button.

127
00:05:32,506 --> 00:05:33,970
Let's make it "rounded",

128
00:05:33,970 --> 00:05:35,922
that always makes it look nicer.

129
00:05:36,483 --> 00:05:37,825
And we're almost there,

130
00:05:37,825 --> 00:05:39,634
but when we move the mouse over

131
00:05:40,192 --> 00:05:42,086
it would be good to show that

132
00:05:42,086 --> 00:05:43,587
it's getting activated.

133
00:05:44,152 --> 00:05:45,937
So for the "hover" state

134
00:05:45,937 --> 00:05:47,945
let's set the background to

135
00:05:47,945 --> 00:05:50,474
a slightly lighter shade of green.

136
00:05:51,122 --> 00:05:51,810
Let's see.

137
00:05:51,810 --> 00:05:53,462
That works quite nicely.

138
00:05:54,030 --> 00:05:55,323
Ok. As a last touch

139
00:05:55,323 --> 00:05:57,568
let's add some margin at the top,

140
00:05:57,568 --> 00:05:59,132
otherwise the button is

141
00:05:59,132 --> 00:06:01,513
a bit too close to the input field.

142
00:06:02,217 --> 00:06:04,349
And let's stop here for this video.

143
00:06:04,349 --> 00:06:06,176
We could spend a lot more time

144
00:06:06,176 --> 00:06:07,394
tweaking the styles,

145
00:06:08,015 --> 00:06:11,583
but I think our SignInPage now looks decent enough,

146
00:06:11,583 --> 00:06:14,801
and we can move on to adding the functionality

147
00:06:14,801 --> 00:06:16,900
to actually perform the login.