1
00:00:01,380 --> 00:00:02,820
Instructor: One of the last things we have to do inside

2
00:00:02,820 --> 00:00:06,210
of our application is implement the "Sign In" form.

3
00:00:06,210 --> 00:00:08,850
The "Sign In" form is gonna be nearly identical

4
00:00:08,850 --> 00:00:11,070
to the "Sign Up" form.

5
00:00:11,070 --> 00:00:11,903
So, in this section,

6
00:00:11,903 --> 00:00:14,190
we're gonna create a new component for "Sign In,"

7
00:00:14,190 --> 00:00:16,680
and we're going to largely reuse everything

8
00:00:16,680 --> 00:00:19,440
that we already put together for "Sign Up."

9
00:00:19,440 --> 00:00:21,450
So, to get started, I'll go back over

10
00:00:21,450 --> 00:00:24,120
to my "components, auth" directory

11
00:00:24,120 --> 00:00:28,983
and create a "Signin.js" file.

12
00:00:30,000 --> 00:00:31,830
Like I said, everything inside of here,

13
00:00:31,830 --> 00:00:34,560
nearly identical to signing up.

14
00:00:34,560 --> 00:00:36,990
So, I'm gonna take a little shortcut here.

15
00:00:36,990 --> 00:00:40,050
I'm gonna open up my "Signup" component,

16
00:00:40,050 --> 00:00:42,600
I'm gonna copy everything inside of here,

17
00:00:42,600 --> 00:00:45,843
and then I'll move it over to the "Signin.js" file.

18
00:00:46,980 --> 00:00:48,690
All that really has to change in here,

19
00:00:48,690 --> 00:00:51,870
is all the references of "Signup".

20
00:00:51,870 --> 00:00:54,750
So, inside of this "Signin.js" file,

21
00:00:54,750 --> 00:00:56,940
I'll find the class name.

22
00:00:56,940 --> 00:00:59,640
I'll change it to "Signup", excuse me,

23
00:00:59,640 --> 00:01:01,090
not "Signup", but "Signin".

24
00:01:01,090 --> 00:01:05,099
There we go, "Signin", inside of "onSubmit,"

25
00:01:05,099 --> 00:01:08,310
I'll make sure that I call the "signin" action creator

26
00:01:08,310 --> 00:01:10,060
that we'll create in just a moment.

27
00:01:12,240 --> 00:01:15,870
Inside of the form, I'll find the button down

28
00:01:15,870 --> 00:01:18,930
at the bottom, and rather than saying sign up,

29
00:01:18,930 --> 00:01:20,547
I'll change it to "Sign In!"

30
00:01:22,410 --> 00:01:24,690
And then finally, at the very bottom,

31
00:01:24,690 --> 00:01:27,450
I'll make sure that when I do my export statement,

32
00:01:27,450 --> 00:01:30,453
I change the form name to "signin"

33
00:01:31,620 --> 00:01:35,160
and the component name to "Signin" as well,

34
00:01:35,160 --> 00:01:36,460
and that's pretty much it.

35
00:01:38,400 --> 00:01:41,070
Now we can open up our root "index.js" file,

36
00:01:41,070 --> 00:01:44,280
and set up a route mapping for this thing as well.

37
00:01:44,280 --> 00:01:48,210
I'll first import the "Signin" component we just created.

38
00:01:48,210 --> 00:01:53,040
So components off sign in, and then I'll set up

39
00:01:53,040 --> 00:01:54,933
a new route mapping for this as well.

40
00:01:56,070 --> 00:01:59,853
So here's my route, we'll do a path of "signin"

41
00:02:00,960 --> 00:02:03,033
and a component of sign in.

42
00:02:05,010 --> 00:02:06,123
All right, not bad.

43
00:02:07,230 --> 00:02:08,550
Let's take a quick pause right here.

44
00:02:08,550 --> 00:02:09,990
We'll come back to the next section

45
00:02:09,990 --> 00:02:13,083
and we'll put together our sign in action creator.