Original subtitles

okay then gang so now what I'd like to

okay then gang so now what I'd like to

okay then gang so now what I'd like to do is take this signing page because

do is take this signing page because

do is take this signing page because currently we can only press this button

currently we can only press this button

currently we can only press this button to sign in anonymously and turn it into

to sign in anonymously and turn it into

to sign in anonymously and turn it into a signing form where we can put in an

a signing form where we can put in an

a signing form where we can put in an email and a password and then signing

email and a password and then signing

email and a password and then signing with those credentials

with those credentials

with those credentials instead of anonymously so we're gonna

instead of anonymously so we're gonna

instead of anonymously so we're gonna reflect this page now and the first

reflect this page now and the first

reflect this page now and the first thing I'm going to do is get rid of

thing I'm going to do is get rid of

thing I'm going to do is get rid of everything inside this child property

everything inside this child property

everything inside this child property right here inside the container so we're

right here inside the container so we're

right here inside the container so we're going to keep this scaffold and the app

going to keep this scaffold and the app

going to keep this scaffold and the app bar and we're going to keep this padding

bar and we're going to keep this padding

bar and we're going to keep this padding but get rid of the raised button right

but get rid of the raised button right

but get rid of the raised button right here we don't want that anymore

here we don't want that anymore

here we don't want that anymore and instead in here we're going to

and instead in here we're going to

and instead in here we're going to create some kind of form so the first

create some kind of form so the first

create some kind of form so the first thing I'll do is a form widget and this

thing I'll do is a form widget and this

thing I'll do is a form widget and this form widget is going to allow us to do

form widget is going to allow us to do

form widget is going to allow us to do some form validation later on now inside

some form validation later on now inside

some form validation later on now inside this form widget we need a few different

this form widget we need a few different

this form widget we need a few different things so I'm going to create a column

things so I'm going to create a column

things so I'm going to create a column so the child will be a column and inside

so the child will be a column and inside

so the child will be a column and inside this column we're going to have a list

this column we're going to have a list

this column we're going to have a list basically of different form field

basically of different form field

basically of different form field widgets so let me now open up this

widgets so let me now open up this

widgets so let me now open up this column and say the children property

column and say the children property

column and say the children property should be a widget list and the first

should be a widget list and the first

should be a widget list and the first thing inside this list is gonna be a

thing inside this list is gonna be a

thing inside this list is gonna be a sized box and I'm only doing this to

sized box and I'm only doing this to

sized box and I'm only doing this to give myself a bit of breathing room so

give myself a bit of breathing room so

give myself a bit of breathing room so this is going to be height 20 like so

this is going to be height 20 like so

this is going to be height 20 like so okay so after that size box we want our

okay so after that size box we want our

okay so after that size box we want our first form field and this is going to be

first form field and this is going to be

first form field and this is going to be a text form field for the email so I'll

a text form field for the email so I'll

a text form field for the email so I'll say text form field and then inside this

say text form field and then inside this

say text form field and then inside this widget we need to specify what's going

widget we need to specify what's going

widget we need to specify what's going to happen when this farm field changes

to happen when this farm field changes

to happen when this farm field changes so we can do that by adding an unchanged

so we can do that by adding an unchanged

so we can do that by adding an unchanged property so let me enter down and say on

property so let me enter down and say on

property so let me enter down and say on changed and set that equal to a function

changed and set that equal to a function

changed and set that equal to a function which takes in the value and then inside

which takes in the value and then inside

which takes in the value and then inside that we'll do something later on okay so

that we'll do something later on okay so

that we'll do something later on okay so this value is going to represent

this value is going to represent

this value is going to represent whatever is in the form field at that

whatever is in the form field at that

whatever is in the form field at that point and unchanged means that every

point and unchanged means that every

point and unchanged means that every time a user typed something extra into

time a user typed something extra into

time a user typed something extra into the form field or presses a Delete key

the form field or presses a Delete key

the form field or presses a Delete key or a space or something like that

or a space or something like that

or a space or something like that every time the value changes this

every time the value changes this

every time the value changes this function is going to run and get us the

function is going to run and get us the

function is going to run and get us the value that are currently inside that

value that are currently inside that

value that are currently inside that farm field so after that we want our

farm field so after that we want our

farm field so after that we want our next farm field widget but

next farm field widget but

next farm field widget but before we do that let's do another sized

before we do that let's do another sized

before we do that let's do another sized box so we get some space between these

box so we get some space between these

box so we get some space between these different form fields and then we'll do

different form fields and then we'll do

different form fields and then we'll do another text form field because this is

another text form field because this is

another text form field because this is going to be for our password now and

going to be for our password now and

going to be for our password now and inside this one we want to do pretty

inside this one we want to do pretty

inside this one we want to do pretty much the same thing

much the same thing

much the same thing so we'll say on changed and that is

so we'll say on changed and that is

so we'll say on changed and that is going to be a function which takes in

going to be a function which takes in

going to be a function which takes in the value and we'll do something in here

the value and we'll do something in here

the value and we'll do something in here later on now inside this password field

later on now inside this password field

later on now inside this password field we also want to obscure the text so when

we also want to obscure the text so when

we also want to obscure the text so when we type into it over here we don't want

we type into it over here we don't want

we type into it over here we don't want to see what we're typing in case

to see what we're typing in case

to see what we're typing in case someone's over your shoulder trying to

someone's over your shoulder trying to

someone's over your shoulder trying to find out what your password is so what

find out what your password is so what

find out what your password is so what we're gonna do is add on another

we're gonna do is add on another

we're gonna do is add on another property to this called obscure text and

property to this called obscure text and

property to this called obscure text and set that to be true so if I save this

set that to be true so if I save this

set that to be true so if I save this now we should see so far we have two

now we should see so far we have two

now we should see so far we have two form fields and we can type something

form fields and we can type something

form fields and we can type something into this one and also we can type

into this one and also we can type

into this one and also we can type something into the next one but when we

something into the next one but when we

something into the next one but when we type in the next one

type in the next one

type in the next one it's obscured so you only see the last

it's obscured so you only see the last

it's obscured so you only see the last letter for a couple of seconds before it

letter for a couple of seconds before it

letter for a couple of seconds before it obscures and now someone trying to steal

obscures and now someone trying to steal

obscures and now someone trying to steal your password standing behind you

your password standing behind you

your password standing behind you can't do so anymore so there's two farm

can't do so anymore so there's two farm

can't do so anymore so there's two farm fields now we also need a button at the

fields now we also need a button at the

fields now we also need a button at the bottom so let me come down here and

bottom so let me come down here and

bottom so let me come down here and there were coming after this I'm gonna

there were coming after this I'm gonna

there were coming after this I'm gonna do another sized box and the height is

do another sized box and the height is

do another sized box and the height is gonna be 20 pixels again just to give us

gonna be 20 pixels again just to give us

gonna be 20 pixels again just to give us a bit more breathing room and then we're

a bit more breathing room and then we're

a bit more breathing room and then we're gonna do a raised button so raised

gonna do a raised button so raised

gonna do a raised button so raised button like so okay so inside this

button like so okay so inside this

button like so okay so inside this raised button first of all I'm going to

raised button first of all I'm going to

raised button first of all I'm going to specify a color now I want this to be a

specify a color now I want this to be a

specify a color now I want this to be a pink color so I'll say colors dot pink

pink color so I'll say colors dot pink

pink color so I'll say colors dot pink and then strength of 400 we also need a

and then strength of 400 we also need a

and then strength of 400 we also need a child property which is going to be the

child property which is going to be the

child property which is going to be the text that sits inside the button so

text that sits inside the button so

text that sits inside the button so we'll do a child property that will be

we'll do a child property that will be

we'll do a child property that will be text and then inside this text I want to

text and then inside this text I want to

text and then inside this text I want to first of all specify the text itself

first of all specify the text itself

first of all specify the text itself which is going to be signed in and then

which is going to be signed in and then

which is going to be signed in and then we also want to do a style property

we also want to do a style property

we also want to do a style property which will be text style and this is so

which will be text style and this is so

which will be text style and this is so we can change the color of the text

we can change the color of the text

we can change the color of the text because by default I think it's black

because by default I think it's black

because by default I think it's black and we want to be white so colors dot

and we want to be white so colors dot

and we want to be white so colors dot white okay now after the child property

white okay now after the child property

white okay now after the child property I also want

I also want

I also want on pressed property which is a function

on pressed property which is a function

on pressed property which is a function that's going to fire when this button is

that's going to fire when this button is

that's going to fire when this button is pressed now this is going to eventually

pressed now this is going to eventually

pressed now this is going to eventually be an asynchronous function because at

be an asynchronous function because at

be an asynchronous function because at the end of the day what we want to do at

the end of the day what we want to do at

the end of the day what we want to do at this point is go out and interact with

this point is go out and interact with

this point is go out and interact with firebase to log this person in or to

firebase to log this person in or to

firebase to log this person in or to sign them in and that takes some time

sign them in and that takes some time

sign them in and that takes some time it's an asynchronous task

it's an asynchronous task

it's an asynchronous task so I may as well label it as

so I may as well label it as

so I may as well label it as asynchronous now so now we pretty much

asynchronous now so now we pretty much

asynchronous now so now we pretty much have this all sorted so let me save this

have this all sorted so let me save this

have this all sorted so let me save this now and preview and now we can see we

now and preview and now we can see we

now and preview and now we can see we have these two form fields email and

have these two form fields email and

have these two form fields email and password and we have a sign-in button as

password and we have a sign-in button as

password and we have a sign-in button as well but at the minute this does nothing

well but at the minute this does nothing

well but at the minute this does nothing and also when we enter some information

and also when we enter some information

and also when we enter some information into these fields it does nothing either

into these fields it does nothing either

into these fields it does nothing either because we have nothing inside these

because we have nothing inside these

because we have nothing inside these unchanged functions right here and also

unchanged functions right here and also

unchanged functions right here and also nothing inside this on pressed function

nothing inside this on pressed function

nothing inside this on pressed function so first of all let's do these things

so first of all let's do these things

so first of all let's do these things what do we want to happen when a user

what do we want to happen when a user

what do we want to happen when a user starts typing in here well what we want

starts typing in here well what we want

starts typing in here well what we want to do is track what the user is typing

to do is track what the user is typing

to do is track what the user is typing into those fields and then maybe store

into those fields and then maybe store

into those fields and then maybe store the current value of those fields inside

the current value of those fields inside

the current value of those fields inside some kind of local state variable so

some kind of local state variable so

some kind of local state variable so what I'm going to do is create two

what I'm going to do is create two

what I'm going to do is create two pieces of state right here and these

pieces of state right here and these

pieces of state right here and these pieces of state are going to store these

pieces of state are going to store these

pieces of state are going to store these two fields or these two values that are

two fields or these two values that are

two fields or these two values that are in these fields so let's say text field

in these fields so let's say text field

in these fields so let's say text field state and then underneath we'll do a

state and then underneath we'll do a

state and then underneath we'll do a string for the email and set it to be an

string for the email and set it to be an

string for the email and set it to be an empty string to begin with and then also

empty string to begin with and then also

empty string to begin with and then also a string for the password and that is

a string for the password and that is

a string for the password and that is going to be an empty string to begin

going to be an empty string to begin

going to be an empty string to begin with as well so now when a user starts

with as well so now when a user starts

with as well so now when a user starts to type into this one the email we want

to type into this one the email we want

to type into this one the email we want to update the state's so that this email

to update the state's so that this email

to update the state's so that this email property is now equal to the value

property is now equal to the value

property is now equal to the value whatever is in the fall field at that

whatever is in the fall field at that

whatever is in the fall field at that moment in time so to do that we can use

moment in time so to do that we can use

moment in time so to do that we can use set state set state like so and this

set state set state like so and this

set state set state like so and this accepts a function and in that function

accepts a function and in that function

accepts a function and in that function all we want to do is say email is equal

all we want to do is say email is equal

all we want to do is say email is equal to value so we're taking the email state

to value so we're taking the email state

to value so we're taking the email state and we're setting it equal to whatever

and we're setting it equal to whatever

and we're setting it equal to whatever the value currently is inside that farm

the value currently is inside that farm

the value currently is inside that farm field that makes sense right

field that makes sense right

field that makes sense right now we want to do something similar for

now we want to do something similar for

now we want to do something similar for the password so let me copy this

the password so let me copy this

the password so let me copy this dude and paste it down here and this

dude and paste it down here and this

dude and paste it down here and this time we want to update the password a

time we want to update the password a

time we want to update the password a bit of state with whatever the value is

bit of state with whatever the value is

bit of state with whatever the value is so now we're tracking those two things

so now we're tracking those two things

so now we're tracking those two things so now what we could do at the end when

so now what we could do at the end when

so now what we could do at the end when we press this button is print out the

we press this button is print out the

we press this button is print out the state the password and the email so

state the password and the email so

state the password and the email so let's do that

let's do that

let's do that let's say print and first of all the

let's say print and first of all the

let's say print and first of all the email so we're referencing the email

email so we're referencing the email

email so we're referencing the email state right here and then secondly we

state right here and then secondly we

state right here and then secondly we want to print out the password as well

want to print out the password as well

want to print out the password as well so let's do that print password like so

so let's do that print password like so

so let's do that print password like so and save so now I'm going to open up

and save so now I'm going to open up

and save so now I'm going to open up this debug console and I'm going to

this debug console and I'm going to

this debug console and I'm going to delete these things in fact I'm going to

delete these things in fact I'm going to

delete these things in fact I'm going to just refresh over here so we can start

just refresh over here so we can start

just refresh over here so we can start from scratch and now if I type in an

from scratch and now if I type in an

from scratch and now if I type in an email like Mario the net oops that's not

email like Mario the net oops that's not

email like Mario the net oops that's not the at symbol that's the net ninja code

the at symbol that's the net ninja code

the at symbol that's the net ninja code at UK and then down here we'll just say

at UK and then down here we'll just say

at UK and then down here we'll just say test one two three four if we sign in

test one two three four if we sign in

test one two three four if we sign in now we should see those values logged

now we should see those values logged

now we should see those values logged down here in the console so now we're

down here in the console so now we're

down here in the console so now we're able to keep track of these values and

able to keep track of these values and

able to keep track of these values and in the future instead of just printing

in the future instead of just printing

in the future instead of just printing them here and what we'll do is take

them here and what we'll do is take

them here and what we'll do is take those values and interact with firebase

those values and interact with firebase

those values and interact with firebase to sign that user up with their email

to sign that user up with their email

to sign that user up with their email and their password that makes sense

and their password that makes sense

and their password that makes sense right

right

right cool so now we have the sign in form we

cool so now we have the sign in form we

cool so now we have the sign in form we need to also do something very similar

need to also do something very similar

need to also do something very similar for the register form so let us first of

for the register form so let us first of

for the register form so let us first of all create that file over here inside

all create that file over here inside

all create that file over here inside the authenticate folder so a new file

the authenticate folder so a new file

the authenticate folder so a new file and we'll call it register dot dot and

and we'll call it register dot dot and

and we'll call it register dot dot and inside that file first of all we want to

inside that file first of all we want to

inside that file first of all we want to import material so material like so and

import material so material like so and

import material so material like so and then we want to create a stateful widget

then we want to create a stateful widget

then we want to create a stateful widget so SD ful tab and we'll call this

so SD ful tab and we'll call this

so SD ful tab and we'll call this register and then down here we want to

register and then down here we want to

register and then down here we want to return some kind of template again now

return some kind of template again now

return some kind of template again now I'm not going to write all of this out

I'm not going to write all of this out

I'm not going to write all of this out again instead what I'm going to do is

again instead what I'm going to do is

again instead what I'm going to do is just grab all of the return statement

just grab all of the return statement

just grab all of the return statement here the scaffold and copy it and I'm

here the scaffold and copy it and I'm

here the scaffold and copy it and I'm going to paste it right here instead of

going to paste it right here instead of

going to paste it right here instead of this container so paste that in

this container so paste that in

this container so paste that in and you'll notice at the minute we do

and you'll notice at the minute we do

and you'll notice at the minute we do get a few errors because this doesn't

get a few errors because this doesn't

get a few errors because this doesn't exist in this widget the email states

exist in this widget the email states

exist in this widget the email states and the password doesn't and down here

and the password doesn't and down here

and the password doesn't and down here as well but we'll address those errors

as well but we'll address those errors

as well but we'll address those errors in a second first of all I want to say

in a second first of all I want to say

in a second first of all I want to say here register or rather we'll say sign

here register or rather we'll say sign

here register or rather we'll say sign up not register sign up to blue group

up not register sign up to blue group

up not register sign up to blue group and then down here on the button instead

and then down here on the button instead

and then down here on the button instead of saying sign in wherever the butt of

of saying sign in wherever the butt of

of saying sign in wherever the butt of it there it is

it there it is

it there it is will say register like so and then we

will say register like so and then we

will say register like so and then we have to create this state so let me go

have to create this state so let me go

have to create this state so let me go back to sign-in where we have that state

back to sign-in where we have that state

back to sign-in where we have that state at the top and grab it and paste it over

at the top and grab it and paste it over

at the top and grab it and paste it over here so inside the state object paste

here so inside the state object paste

here so inside the state object paste that in also gonna grab this thing

that in also gonna grab this thing

that in also gonna grab this thing because we don't need it just yet the

because we don't need it just yet the

because we don't need it just yet the auth service but we will be using it in

auth service but we will be using it in

auth service but we will be using it in the future in both of these widgets so

the future in both of these widgets so

the future in both of these widgets so I'm going to copy that and I'm going to

I'm going to copy that and I'm going to

I'm going to copy that and I'm going to paste that in here as well so we can use

paste that in here as well so we can use

paste that in here as well so we can use in future tutorials now obviously we've

in future tutorials now obviously we've

in future tutorials now obviously we've not imported that so let's import that

not imported that so let's import that

not imported that so let's import that first of all so import and then we need

first of all so import and then we need

first of all so import and then we need to go into the services folder and we

to go into the services folder and we

to go into the services folder and we also need the auth file inside that

also need the auth file inside that

also need the auth file inside that that's the auth service and then I think

that's the auth service and then I think

that's the auth service and then I think that is just about it so if I was to

that is just about it so if I was to

that is just about it so if I was to save this now then I should yeah there's

save this now then I should yeah there's

save this now then I should yeah there's no more errors I should be able to go to

no more errors I should be able to go to

no more errors I should be able to go to the authenticate widget and instead of

the authenticate widget and instead of

the authenticate widget and instead of returning the sign-in I'm gonna return

returning the sign-in I'm gonna return

returning the sign-in I'm gonna return the register widget like so obviously we

the register widget like so obviously we

the register widget like so obviously we need to import that so let me come down

need to import that so let me come down

need to import that so let me come down here and say import and it's going to be

here and say import and it's going to be

here and say import and it's going to be inside screens and we want to go inside

inside screens and we want to go inside

inside screens and we want to go inside authenticate and then register so let me

authenticate and then register so let me

authenticate and then register so let me save that and now we should see the

save that and now we should see the

save that and now we should see the register screen sign up to brew crew and

register screen sign up to brew crew and

register screen sign up to brew crew and this should work exactly the same way

this should work exactly the same way

this should work exactly the same way I'm just going to enter in any old

I'm just going to enter in any old

I'm just going to enter in any old rubbish and register but let me open up

rubbish and register but let me open up

rubbish and register but let me open up the debug console first of all so we can

the debug console first of all so we can

the debug console first of all so we can see this register and now we see those

see this register and now we see those

see this register and now we see those values down in the console so this is

values down in the console so this is

values down in the console so this is all working so far we have a couple of

all working so far we have a couple of

all working so far we have a couple of different forms now one for signing in

different forms now one for signing in

different forms now one for signing in and want for registering and we just

and want for registering and we just

and want for registering and we just need to now hook this up with firebase

need to now hook this up with firebase

need to now hook this up with firebase but before we do that I want to do a

but before we do that I want to do a

but before we do that I want to do a couple more things first

couple more things first

couple more things first and the first thing I want to do is

and the first thing I want to do is

and the first thing I want to do is allow the user to be able to switch

allow the user to be able to switch

allow the user to be able to switch between the register screen and also the

between the register screen and also the

between the register screen and also the sign-in screen because if they have an

sign-in screen because if they have an

sign-in screen because if they have an account they don't want to re-register

account they don't want to re-register

account they don't want to re-register they want to sign in and if they don't

they want to sign in and if they don't

they want to sign in and if they don't have an account and they're on the

have an account and they're on the

have an account and they're on the sign-in page they want a way to get to

sign-in page they want a way to get to

sign-in page they want a way to get to the register page instead so we need

the register page instead so we need

the register page instead so we need some kind of link and I'm going to place

some kind of link and I'm going to place

some kind of link and I'm going to place it up here in the app bar so we'll

it up here in the app bar so we'll

it up here in the app bar so we'll tackle that switching between these two

tackle that switching between these two

tackle that switching between these two views in the next video