In unless section we finished some firebase set up.
We're not going to come back to firebase for a little bit.
Instead we're going to focus on putting together our sign in form with some really good styling for
now and then we'll come back to firebase and actually wrap up the authentication piece.
So one of the first considerations that we need to make for this sign of form is whether or not we should
create a new component to house the form itself or whether or not we should just place the form directly
inside this app components.
I'm talking about like literally placing a text input tag directly inside this component.
I mean to suggest that we create a separate component and here's why the sign form should only be visible
for a portion of the time inside our app sometimes will show the form.
Right.
Like when the user first starts the app up but other times you won't.
So when a user successfully signs in and it's going to be easier to hide it if we put the form into
a separate component.
So with that in mind I'm going to create a new file inside of my components directory not inside of
common just inside of components called log in form
so log in form.
Its sole purpose is going to be to How's everything having to do with entering a email entering a password
and then trying to sign the user in.
So inside this file Let's get started with a little bit of boilerplate.
I am going to make this a class based component for reasons that we'll talk about in just a little bit.
What import react and component from react and then just view right now from re-act native then we'll
create our component class of log and form
you to make sure I've got components spelt correctly and add my render method from which will return
a single view tag for right now.
Then at the bottom we can export.
Default log in form.
OK so there's the boiler plate right now.
I'm hoping that at some point in time getting this boy the play together is going to become second nature
because it feels like we write it a lot.
Yup that's absolutely correct.
We definitely write this thing a lot.
This boy that played out.
All right as a quick reminder log in form Here's a diagram for it.
We need to have that kind of a card.
The card section component and definitely the button component as well.
So I think of our next step will be to place our reusable components or at least import them and then
kind of scaffold out what we want the blog in the form to look like we're going to need one card.
And I think it's going to contain three card sections one for e-mail one for password and one for the
log in button.
So let's get started with that now.
At the very top we'll import our button card and it card section from the common directory and notice
that I'm sane in the current directory.
Find the common folder because this law enforcement is already inside the components directory.
Notice all this is a lot nicer import statement than if we had three separate import statements all
coming from the common folders.
So again I really like this kind of pattern here is kind of approach Nabel and just kind of a little
bit of scaffolding of what you know with the different cards and cards section area should be.
So then take out the view tag right now and replace it with a card tag.
So that's going to give us that kind of nice looking wrapper as a nice shadow on it has some margin
on the left and right hand sides.
Just something that looks nice and inside of here we'll make our three separate card sections so card
section one.
And right now I just can use self-closing tags because I don't have anything to put inside the first
two just yet.
And then for the last one this is going to be the card section that's going to How's that button.
And we could probably create that button right now because we already know what text it's going to require
So I just going to put in Lagann like so.
So we've got card three card sections in the last card section has a button tag inside it.
Finally we need to make sure this component actually gets shown inside of our app.
So again flip back to our app component.
Import this form and show it.
So if the top will imports loggin form from components log in form like so and then we're going to show
it inside of our application.
So I've got my view tag I've got my header tag.
I probably don't need the text anymore.
It was really just there to get us started.
So we're going to take out the text tag and replace it with an instance of the logon form like so.
All right.
Now of course as I mentioned earlier we probably don't want to show the logon form 100 percent of the
time but we will just use this shortcut for now and we'll come back later and figure out how we're going
to toggle whether or not the log in form is visible.
OK time see if everything worked out.
I'm going to flip back to the simulator refresh and see how we're doing.
First time we import stuff always takes a while for it transpired especially since my laptop is not
the newest one in the world.
So it's kind of a I'm never giving up.
I'm just going to let the thing go while it is running though I do need to do a little bit of clean
up.
I've still got the unused text tagged which we just deleted.
So I'm going to take that out just for good housekeeping.
And there we go.
All right.
So much better.
I've got one card section to section.
And the third one here and the third one presently just houses the log in button which if we press doesn't
do anything just yet.
So let's continue the next section and figure out exactly what we're going to place inside of these
card sections.