Not bad not bad once we can fetch our products from our own API.
Next let's switch gears and set up log in functionality and we're going to start by adding some content
in our logon page because currently the only thing we have there is sad little hiring one.
So I'm going to head over back to my project and we're going to start very slowly by just setting up
our imports as well as initial functionality.
So I'm gonna open up the sidebar and when it clear all the tabs first and then we're going to look for
our logon page again.
The only thing we have there is the hitting one I guess.
Let's start with our imports.
So eventually we're going to have some strappy functions strappy functions One is gonna be for logging
user and the other one for register.
Let's leave it blank for now because we haven't created.
Then we're gonna have some functionality to handle user and for that we're gonna have a user context
which currently we have the file.
But again we haven't set up even the initial scaffold.
So I'm just gonna leave with that blank.
But we are going to import use history because if we log in and if let's say everything was successful
then I would one navigate away from the page.
So that's where we're going to use the import.
And then we're looking for use history history.
And of course we already work with this book.
So from and react I wrote her down.
So that should do it with our imports.
Of course we're not done but at least our initial setup and now first I'm going to initialize the history.
So right within the I'm gonna start by react rather history so concert history is equal and then we're
gonna use our hook and essentially we're just gonna sign it to a variable then we're gonna have some
functions from the logging user.
So essentially we're gonna have our user context important here on top and then we're gonna set it up
like we normally do when we structure it.
But of course since we don't have anything in there we're just gonna say set up our user context like
so and now we're just gonna set up some input fields.
So if we're looking at our finished project we can see that within the logon page we're gonna have a
signing by default or we have an option of registering.
So if I click on toggle I can register user.
So initially of course we would need to register but by default I'm just gonna assume that the user
has already registered.
So we just need to sign in.
So in this case we're going to set up three input fields and that's the reason why we're going to use
you state.
Just to set up some state values.
So we're going to go back and we're gonna write maybe a comment to state values online as part of state
values we have email password user name and also a member.
Now why would need a member state value.
Because we're gonna be toggling.
So we're gonna be toggling between is the user remember that then if the user is member then we just
need to use the email and password if the user is not a member if we still need to register then of
course we're also gonna sign the user name and we're gonna do that by toggling here the state value
is member what's the reason why we're going to have four values.
So we're gonna start cost gonna e-mail and then the function that controls it so set the email.
And in this case we're going to use a react use state use state and then initial value is just gonna
be an empty string and then let's copy and paste that like I said four times online for the second one
is gonna be password so password input password input then of course also a function is gonna be named
a bit differently word then use that is gonna stay the same.
Initially an empty string and then we also have a user name No user name is gonna be a different because
we're still gonna have the same function so set user name but instead of the empty value we're just
gonna have some default value at the moment it's not gonna make sense and again I don't want to explain
something for half an hour if it's gonna be a little bit easier for me eventually just to show you why
we're setting this up as a default but just initially set it up not as an empty string but instead as
a default and then like I said we also have a member and I'm going to call this is number and set is
member of course that is the name of my function set is number and by default I'm just gonna say that
user is already a member that's the reason why by default when we refresh we can see that we have a
sighting.
So of course again we're gonna be toggling in our Jess ex where if the user is already a member then
we're going to show sign in if we toggle then we're gonna say he's member and also we're gonna show
the user name input then we're gonna have is empty values and we're going to use our is empty values
variable to toggle whether we need to show the text of please fill out all the fields or if let's say
we fill out all the fields let's say for email as well as the password then we're gonna have a submit
button.
So we're gonna have some variable here and that is not going to be a used state variable we're just
going to have a simple variable let's say let is empty and eventually it's going to depend on email
password and user name but just for the time being we're just gonna set this up as false.
Very very simply then we're gonna set up our function our toggle function and we're not actually gonna
set up any functionality again this is just gonna be a placeholder for our function so we're gonna create
a function and functionality we're gonna add a little bit later once we set up our JSF.
Now again why this function is important is this function is gonna be responsible for in fact toggling.
So once we click what is going to change in our component so let's set up our place holder so let's
say const then toggle member like so and then again there's no functionality there's just a empty function
and lastly there's also gonna be a handle submit function.
So obviously once we submit the form then we are either gonna try to log in we're all going to try to
register but both of them are gonna be a synchronous actions.
So that's the reason why our handles submit is going to be in fact asynchronous sort of outlook const
and all met like so and it's gonna be a synchronous function so we're going to go with async async and
then we're gonna be looking for the event because we would want to prevent a default.
And again for the time being functionality is just going to be blank.
And successfully we're done with our initial reports as well as our initial logic.