Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:05,550
Now that we have our header, the next thing we're going to build is our Sinon page.
2
00:00:06,060 --> 00:00:13,440
Now, if we look at our finished application and we look at the Sinon page, we see that there is a
3
00:00:13,440 --> 00:00:20,190
sign up section and a sign in section there, quite similar with their own custom form input component
4
00:00:20,370 --> 00:00:22,440
and a custom button component.
5
00:00:23,450 --> 00:00:30,920
So before we attach any of the functionality to this component, let's take a look at what functionality
6
00:00:30,950 --> 00:00:39,530
we have available so we can actually sign in using an e-mail and password and that Sinon is going to
7
00:00:39,530 --> 00:00:43,680
be based off of the accounts that we're signing up using this form.
8
00:00:44,270 --> 00:00:51,440
So if a new user signs up using this form, we are able to sign in with that account.
9
00:00:52,160 --> 00:00:59,210
Alternatively, if this step is too extensive, then we can just sign in with Google.
10
00:00:59,690 --> 00:01:06,140
And by using signing with Google, we load any Gmail accounts that the user is currently logged into,
11
00:01:06,320 --> 00:01:13,880
or they can add another Gmail account and log in that way and authenticate into our application with
12
00:01:14,330 --> 00:01:15,810
very minimal effort.
13
00:01:16,400 --> 00:01:17,890
So let's begin.
14
00:01:18,140 --> 00:01:19,140
How do we build this?
15
00:01:20,120 --> 00:01:22,220
Well, first, let's just set up the page.
16
00:01:22,700 --> 00:01:28,760
So let's go back to our application and let's build a sign in and sign up page.
17
00:01:29,780 --> 00:01:35,630
So let's create our folder, sign in and sign.
18
00:01:38,530 --> 00:01:45,550
Let's copy that text, because we are going to have to write this twice to our component, such as sex.
19
00:01:46,700 --> 00:01:52,550
And then also styles SACE now.
20
00:01:53,670 --> 00:02:01,860
We just have to import in all of the usual things that we always have to, including our stylesheet.
21
00:02:03,550 --> 00:02:08,080
And then we are going to use a functional component here.
22
00:02:11,700 --> 00:02:18,300
And the reason we're going to use a functional component and not a stateful class component is because
23
00:02:18,300 --> 00:02:27,240
we're going to keep all of that on our sign in and sign up components, respectively, and then we will
24
00:02:27,240 --> 00:02:27,810
just.
25
00:02:29,090 --> 00:02:30,860
Right sign in front of.
26
00:02:33,390 --> 00:02:34,560
For default.
27
00:02:35,890 --> 00:02:36,880
As for our component.
28
00:02:37,970 --> 00:02:38,270
So.
29
00:02:39,340 --> 00:02:42,250
And now it into our abcess.
30
00:02:44,070 --> 00:02:48,030
Oh, these are leftovers that we don't need from our import.
31
00:02:49,630 --> 00:02:50,470
So let's.
32
00:02:52,570 --> 00:02:54,580
Pages and now.
33
00:02:55,910 --> 00:02:56,510
Let's.
34
00:02:57,410 --> 00:03:02,690
Duplicate this route for Sinon using our new component.
35
00:03:03,870 --> 00:03:05,720
Now, if we navigate to.
36
00:03:07,210 --> 00:03:07,660
In.
37
00:03:08,790 --> 00:03:09,580
We see our page.
38
00:03:10,290 --> 00:03:16,640
So now let's build our sign in component first before we build our sign up component.
39
00:03:18,420 --> 00:03:25,080
Now, the reason we're going to build our Cylon component first is because we're going to set up our
40
00:03:25,080 --> 00:03:32,910
fire based data base in the next section and that is what we're going to use in order to handle any
41
00:03:32,910 --> 00:03:35,910
of our authentication, as well as signing up users.
42
00:03:36,600 --> 00:03:44,160
So Sinon is easier to explain if we do it with Firebase first and I'll show you why.
43
00:03:45,090 --> 00:03:47,280
So let's first just make our files.
44
00:03:48,440 --> 00:03:50,880
Son and Styles that says.
45
00:03:52,830 --> 00:03:56,400
And for our Sinon, we are going to use.
46
00:03:59,100 --> 00:04:09,180
A class component because we have to store what the user's typing in, so let's do a class sign in a
47
00:04:10,200 --> 00:04:11,820
react component.
48
00:04:14,040 --> 00:04:18,900
And in our constructor, we are going to need.
49
00:04:20,440 --> 00:04:28,270
Access to state and our state, what we're going to store is an empty string for email and an empty
50
00:04:28,270 --> 00:04:29,560
string for a password.
51
00:04:30,810 --> 00:04:40,650
In our render, we are going to return a div that contains our entire Sinon component.
52
00:04:43,380 --> 00:04:47,040
And in it will be an H2 for the title.
53
00:04:48,250 --> 00:04:52,660
So here we're going to say I already have an account.
54
00:04:54,790 --> 00:05:03,010
And then let's use a span for our subtext where we will say sign in with your email and password.
55
00:05:07,610 --> 00:05:08,130
Awesome.
56
00:05:08,480 --> 00:05:12,770
Now, for actual form, we're going to use a native form element.
57
00:05:15,360 --> 00:05:21,930
And in it, so we have custom components here that we're not going to use yet, we're going to code
58
00:05:21,930 --> 00:05:22,800
those out later.
59
00:05:23,190 --> 00:05:33,090
But first, I'm just going to put in an input with a name of email and value of email.
60
00:05:34,090 --> 00:05:35,890
This state email.
61
00:05:38,050 --> 00:05:40,840
And then I'm going to set required to be true.
62
00:05:43,720 --> 00:05:49,540
And then we're going to add a label that says email and we're going to repeat this twice so that this
63
00:05:49,540 --> 00:05:50,710
one will say password.
64
00:05:52,060 --> 00:05:57,040
This one's type will be email as well, and this one's type.
65
00:05:58,020 --> 00:05:59,640
We'll be password.
66
00:06:02,920 --> 00:06:09,880
And then at the end, we will have a input with the type of submit.
67
00:06:13,380 --> 00:06:17,310
And here we will all set the value to be.
68
00:06:18,630 --> 00:06:23,760
Submit for let's export this as the default.
69
00:06:25,480 --> 00:06:28,310
So this is all just very basic setup for now, right?
70
00:06:28,330 --> 00:06:34,660
We don't actually have any of the bindings to the code, but what we're going to need to add is we are
71
00:06:34,660 --> 00:06:38,410
going to add on our form and on submit function.
72
00:06:39,420 --> 00:06:43,980
That calls our method handle submit.
73
00:06:45,320 --> 00:06:57,020
Which for now will simply prevent the default submit action from firing because we want full control.
74
00:06:58,030 --> 00:07:01,180
Over exactly what this summit is going to do.
75
00:07:01,780 --> 00:07:06,930
But for now, what we'll do is we will prevent it and then we will clear out our fields.
76
00:07:07,120 --> 00:07:10,870
So we'll set our email and our password back to an empty string.
77
00:07:12,380 --> 00:07:14,540
And that's what we will pass here.
78
00:07:16,530 --> 00:07:26,550
Handles it, and as for our actual imports, what we're going to do is we are going to set a on change
79
00:07:26,550 --> 00:07:35,070
value to point to are on Handal also our handle change.
80
00:07:36,460 --> 00:07:44,440
Function, which also, again, takes an event, except for this, we are going to pull both the value
81
00:07:44,440 --> 00:07:48,910
and the name off of our event target.
82
00:07:50,730 --> 00:07:55,710
The event target will end up being our input element itself, and we want the name value that we just
83
00:07:55,710 --> 00:07:58,770
set as well as the.
84
00:08:00,020 --> 00:08:06,260
Actual value on that target that they've just typed in and what we're going to do is we're going to
85
00:08:06,260 --> 00:08:10,280
dynamically set our state so that it.
86
00:08:11,430 --> 00:08:16,050
Sets that name, so it'll render whatever that value that comes in will be.
87
00:08:17,750 --> 00:08:23,450
If name is password, it will say password and the point to the value that they typed in and then the
88
00:08:23,450 --> 00:08:29,570
same will apply for email, if it's the email, then this event, Target's name will be email, and
89
00:08:29,570 --> 00:08:31,310
then that value will be what they're typing in there.
90
00:08:31,970 --> 00:08:34,640
So this way we can pass the same function.
91
00:08:35,950 --> 00:08:36,970
Inju.
92
00:08:37,890 --> 00:08:39,360
The same input.
93
00:08:41,290 --> 00:08:44,110
And this is awesome.
94
00:08:45,330 --> 00:08:51,000
Because we don't have the right separate functions that do pretty much the same thing by dynamically
95
00:08:51,330 --> 00:08:52,710
setting our property value.
96
00:08:54,140 --> 00:08:57,200
Now, let's impart this into our Sinon page.
97
00:08:58,910 --> 00:09:01,190
Sign in from.
98
00:09:02,850 --> 00:09:03,570
Opponents.
99
00:09:04,410 --> 00:09:09,370
Sign in and let's just render this out and take a look awesome.
100
00:09:09,540 --> 00:09:10,320
So there we go.
101
00:09:10,440 --> 00:09:11,420
There's our form.
102
00:09:11,550 --> 00:09:12,840
We had our submit form.
103
00:09:12,990 --> 00:09:16,080
It clears the field exactly what we're looking for.
104
00:09:16,950 --> 00:09:21,570
OK, now let's actually style this and attach the functionality.
9264
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.