41 - Add App Loading Page
Transcript
00:00Alright guys, so let us jump back over to our .NET MAUI app and what we're going to
00:05do is add two new pages. One called a loading page and one called a login page.
00:12Alright, so let us go ahead and add new item. We'll jump down to the .NET MAUI
00:23section and what we want is a new content page based on XAML. Alright, so
00:30I'm going to call this one loading page and go ahead and add that and then we're
00:39going to repeat those steps and the next one is going to be login page. So new
00:45page is login page. Now the purpose of the loading page is to be an
00:52intermediary when the person opens the app who want to put them on that page
00:56and then try and figure out are they logged in, do they have enough
01:01information for us to see them as an authenticated user to proceed into the
01:06app or do they need to go and log in. So think about any mobile app and that
01:11little delay when the app is coming up and then it knows okay show you the
01:15login screen if it feels that you need to log in again or just proceed to show
01:20you what is in the app. So with all of that said, what I'm going to do in the
01:25app shell is change the content template from main page to loading page and I'm
01:31also going to change that fly out behavior to enabled because some of,
01:38sorry, to fly out because some of the things that we're going to do will
01:42require that to be set as such right. Another thing that I'm going to do is in
01:48the route registration because we're going to be routing to different pages
01:55I'm actually going to add login page as one of the potential routes and of
02:06course we use the name of meaning go to login page and we use type of and we're
02:12also going to be using the main page because we're going to know to route or
02:18route to main page after a login or if the person has valid credentials already
02:25right. So we're just adding those routes because we know we're going to need them
02:29throughout our activities here in the app. So login page or loading page rather
02:37let me start off with the loading page. So I'm going to create a new view model
02:42for the loading page and this view model of course will model what we've
02:52been doing so far so we'll inherit from the base view model and it will be a
02:56partial because we're retaining that whole MVVM pattern. So this loading
03:03page view model its sole purpose will be to determine should I allow you to
03:10proceed or should I send you to the login page. So let us give it a
03:16constructor and this constructor is simply going to call a method that I'm
03:21going to call check user login details or yeah we can just call it that maybe a
03:26mouthful but I think it's clear enough and I'll just generate that method below
03:31now check user login details what we want to do is retrieve token from
03:42internal storage so and and as I as we build this out I'm going to be filling
03:47in those blanks so once we would have logged in and got the token we need to
03:51store that token somewhere so that we can use this token every other time you
03:56try to do something with the API so every phone has internal storage and
04:02we'll be looking at using this one this type called secure storage which is
04:06where we'll put the token and of course we'll need to retrieve it for the during
04:11the runtime of the app or clear it out when it's expired and do other things
04:16right so when we get the token and I'm just going to say var token here is
04:22equal to and I'll just go ahead and write the code as it will look so we'll
04:28await a call to secured storage where we'll be getting the item with the key
04:36token so that's what I mean by return retrieve sorry from internal storage so
04:41we'll go to secured storage get the a sink don't get a sink and get whatever
04:47value is associated with that key then we can check if this token is present so
04:56I can say if token I don't want to say if it is not it's more like if it is
05:01null or white space so I just want to make sure that string dot is null or
05:06empty is false so if it is null or empty so if it is null or empty then I
05:16will send you to the login page right so here I can just say I wait shell dot
05:24current dot go to a sink go to a sink I'm sorry let me get my spelling right
05:35there we go and we'll be sending you and I'll interpolate this string I will be
05:43sending you to name of because we want to keep everything as strongly typed as
05:49possible login page right so that's why we registered that route earlier so we
05:54want to send you to that route if the token is empty so if I try to when the
06:00app is loading if I attempt to get the token and there is no token then that
06:06means you need to log in all right but then there might be a token but it might
06:11be expired so below that I can now say
06:18evaluate token and decide if valid so what I can do and I'm trying to kind of
06:31keep it light because I don't want to do too much without a context so let us
06:36just leave it here for now all right so we're going to load check if the person
06:42is logged in by checking for the token if there is no token then we go to the
06:46login page and then later on when we flesh out what that whole token thing
06:50means then we can figure out what other routes we need to take one tiny refactor
06:57before I move forward is I'm going to introduce two methods here one that says
07:01go to login page one that says go to main page that way we might have
07:06multiple points where we do this navigation so I can just call the method
07:10instead of trying to type out that code every single time right so that will be
07:19a nice way to get that done now of course after doing all of that we need
07:24to set up the binding between our loading page and our view model so well
07:30we need to register the view model as well so let us just do all of that while
07:35we're here so registering the view model it's going to be one loading page really
07:40so I'm just going to add that loading page as a singleton and while I'm here
07:47I might as well just add login page as well and then for the view model we're
07:54going to have the loading page view model as a singleton and while I'm here
08:00even though it doesn't yet exist I'm just going to put in that login page
08:04view model so as soon as we create it and this error should disappear right
08:10and in our loading page page code behind there we go I'm going to add the loading
08:20page view model all right there we go so now I go ahead and include that now our
08:28loading page is set up so when we come back we're going to set up what the
08:32login page should look like so we're going to adjust the design of course and
08:36we're going to set up its view model and the code behind accordingly