All language subtitles for 087 Sign In Component.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish Download
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.