- 1 yıl önce
Kategori
📚
ÖğrenmeDöküm
00:00Alright guys, welcome back. So let us look at our login page. Now our login page is going
00:05to take a bit more. But that's only because there's a little more activity that needs
00:12to happen, right. So I'm going to firstly create the view model, I just I'm just going
00:20to call it login view model, right. So view models, add new class, and we'll call it login
00:27view model. And this view model, of course, needs to be public, partial, and will inherit
00:36from our base view model. Alright, before we move any further, let us go ahead and set
00:42up the binding with the page. So let's jump over to our login page. And we will set up
00:49that binding between the login view model and the loading page, login page itself. Alright,
00:59now we have two parts to all the modifications needed, we need to modify the XAML. And we
01:05need to modify the view model to, you know, handle what happens from the user interface
01:12from XAML. So let us start off with the XAML. So for the top section, where we do all our
01:20inclusions, and so on, of course, we know that we have to include the binding to the
01:25view model. So we go ahead and do that, we need to specify maybe the data type. So I'm
01:32going to do that x data type is equal to the view model dot login view model, I'm going
01:37to disable any form of nav bar, because we don't want to see the nav bar visible from
01:46the login page, right? Remember that we could set up a nav bar, we looked at that earlier
01:51in the in the course where you set up your nav bar, and you have whether you have the
01:57tabs, or you have the pills on the side, we don't want either one of those to be displayed
02:02when you're on the login page, right? So at this point, we disable that. And then the
02:08title here, I'm just going to say login. Nice and simple. For the layout itself, I am going
02:16to add some spacing. And I kind of did this before. So I'm working off knowledge of what
02:24I wanted my page to look like. Do remember that I'm not the design expert. So if you
02:31have different ideas for your login page, then by all means, go ahead and execute them
02:36and experiment. But for this activity, I'm going to have a spacing of 25 in this vertical
02:42stack layout, padding of 30 and center align everything that goes in. Alright, then I'm
02:51going to have a vertical stack. So I'll remove this label. I'm going to have another vertical
02:57stack layout in there. And I'm going to have a spacing of five. And then this one is going to
03:03say welcome. And it's going to just prompt you to log into your account. Alright, so you can hit
03:08pause and replicate that. I'm setting the font size to be 28. For the welcome message, the text
03:15color to be gray, and the horizontal text alignment to be center. And then the label right underneath
03:21just has different text, different font size, but everything else remains the same. Alright.
03:28So that is just like a little notice. Hey, you know, welcome login. At this point, you could
03:33put on an image on the page if you wanted to display a logo and such. But once again,
03:40I'll defer to you to do what you feel is the best for your desired layout. Now I have two
03:48other layouts that I'm adding here underneath that vertical stack layout. And that will be
03:53the stack layout where the orientation is horizontal. And I have an entry that I have
04:00named username, I put a placeholder that says enter username, and I'm binding it to the username
04:07property that will be in our view model. So I haven't gotten to the view model yet, right. So
04:13go ahead and set up that binding. And we do the same thing for the password. And then for this
04:20one, we have the attribute is password is equal to true. And we set up that password binding as
04:26well. And then at the end of all of this, as with any form, we need a button. So we have a button
04:32here. I'm just going to break the line so we can see it all more easily. So here our button simply
04:39says sign in, I'm giving it a width of 100, a little corner radius, and I'm center aligning
04:45it, and it will bind to the command login command. So here's everything you can hit pause and
04:53replicate if you want to. And of course, feel free to get creative and do anything differently
05:01from how I have done it. So I'm not going to go into the preview just yet. Let us jump over to
05:06our view model and then start writing some code. And then we can preview and see if our loading
05:12page one redirected us to our login page, as we would have told it to do from the previous lesson.
05:20And if it does what this login page looks like. So let's jump over to our login view model,
05:26which hasn't gotten any code just yet. So our login view model, I'm going to have two
05:32observable properties, one called username and one called password, right? And I think that
05:40the reason for them should be obvious, they're obviously going to bind to what we would have
05:47outlined in our login page, username and password, right? So we have those two observable properties,
05:56we also need to have, I'm going to say an async task called login. And this login task is going
06:04to be our command. So you have to use relay command. So remember that the library went
06:12through some breaking changes, so it's no longer I command, it is no relay command.
06:18All right. And then we can start doing our coding according to the input coming in. So
06:26quite simply, based on how we've written the code before, okay, look at that Visual Studio knows
06:32what's on my mind, we want to check if the string is null or whitespace for the username or for the
06:38password, then what do we want to do? Then what I'll say is, print shell response, right? So
06:49await shell dot current display alert. And I'm just going to say invalid username or password
06:54invalid username or password. And of course, this alert, this first one is the title. So I could
07:01just say invalid credentials or invalid attempt, right? And I will just say invalid username or
07:09password and allow them to click OK. And then I'll empty out the password field, right? Of course,
07:15you can gauge that kind of experience that you want your users to have. But I'll just empty out
07:22the password field, leave the username. If it was empty anyway, then that's fine. Now, if we get
07:30beyond that, and I would want to say else, what do we want to do otherwise, then I will want to
07:38create an API call, actually. So I would want to call the API to attempt a login.
07:50All right. And then when we get the response, what we're going to do is, if let's just say
07:58var API, var login successful. All right, putting placeholder code for now, because once again,
08:08we're adding the building blocks, right? So var login successful is true. For instance, right?
08:14Now, what do we want to do if the login was successful? If the login was successful,
08:22then I would want to probably display a welcome message, maybe, right, just for testing purposes.
08:34More importantly, though, I would probably want to build a menu on the fly. And this could be based
08:43on the user role. So when I say that, what I mean is, once you log in, you should be able to go into
08:52the app, and you would see your options within the app, right? We can have support for roles,
08:59whether you're a regular user, an admin user, a supervisor, etc. But then you might have an
09:05app where based on the role you are playing in in the whole system, you should be able to see
09:10certain options in the app or not, right? Are you an admin versus a student, for instance, right?
09:17In this case, with the car management, it's very simple. But it could be that you need to see the
09:23main page, I need to see other things. But if you are a regular user, then you probably only need to
09:29see one or two menu items. I'm just giving you guys the ideas. But we will walk through the code
09:34as to how we would segment it regardless, right? So I would build the menu on the fly based on the
09:41user role, because once the login is successful, we would be able to determine the role and everything
09:47about the user from the token response, right? I could even take the username and display it
09:55somewhere on the menu, all of those types of things. And then once we can determine that the
10:03menu has been built, then we can navigate,
10:09navigate to the apps main page, right, which in our case is just our main page, right, for our
10:16simple app. But once again, the simple app is laying foundations for more complicated apps in the future.
10:23Now, at this point, we can always say if the login wasn't successful, what should we do again. So
10:29what I'm going to do is create a quick method here that just says void display login error.
10:39And in void display login error, we're just going to do this. So everything that we would do here,
10:45we just do inside of void login display error. So I'll just call this method instead,
10:50an asynchronous task, because we have to await the shell, right? So this should be
10:55a sync task, a sync task display login error. So if the login wasn't successful,
11:01then we display login error once again, by this point, we would have already navigated away.
11:07Anyway. And once again, that is just an overview of what we're going to be doing. But I don't want
11:15to get into too much of the meat and potatoes until we actually see the token, get the token,
11:21analyze the token, see what's possible with the token. And then that can inform even more of what
11:27we do with the code. But in a nutshell, that is how we can proceed to set up our login page. So
11:33let us test, let us see what happens when we try to go to the loading page. First off, I'm going to
11:39set a quick breakpoint here. And let's see. Alright, so our app is about to run, notice it's
11:47hitting the breakpoint, but we're seeing this purple screen. So I just want to make the note
11:52that the splash screen is different from the loading page that we have created. Right now,
11:58the default splash screen is that purple screen that says .NET, and then it loads, it goes to the
12:04page that was defined as a landing page in the app.xaml. So what's happening is that this is a
12:10splash screen, and then it's navigating to our loading page, which of course has the binding
12:15to the loading page view model, which first checks the user login details. So when I step
12:24through, and then it tries to retrieve the token, notice token is null. So you're seeing loading
12:31page temporarily, because yeah, I didn't change anything on the XAML. But token is empty. So what
12:37should happen? It should now go to login page, which then will come over here. And oh, I think
12:47I was going a bit too slowly for its liking. So I'm just going to click continue. And I'm going
12:54to click wait on the app. So I just click continue and debug so that it would move over and follow
13:00the natural flow. So that's what would happen. The loading page is just doing that quick check.
13:04It should be so quick that you probably don't even see that message or the XAML page, but then
13:09you could always customize that to make sure that it looks like it flows, right? But once that
13:17happened, it moved to the login page. Now you're probably wondering, okay, why does a login page
13:22look like this? At what point did I put in an image? So let me just jump back over to login page.
13:27What I did here, remember that I added all of this spacing, so all of that spacing
13:32and padding created a big gap at the top. And I did not fill that gap with the image when I
13:38was showing you earlier. So what happens is that I just put in an image tag and I set the source to
13:43be a source on a website that I use for generally free photos. So I'm giving the website credit
13:51right now. But pixabay.com has great photos. And I'm just linking directly to it, of course,
13:59through its URL, right? So instead of downloading and adding to the project, just for a quick win,
14:05I did that. And that's why that image is being displayed there, right? So now it looks a little
14:10more, you know, friendly. So this is our login page. That's our welcome login to account,
14:18enter username, and enter password. And because we said his password is true, you'll notice that
14:26it's putting dots instead. And then when we click sign in, what should happen, or let me just click
14:33sign in, then you'll see invalid attempt invalid username or password, right? So of course, nothing
14:39is set up, and then it blanks out the password. And then we can try again, we cannot move any further
14:44until we figure this part out. So So far, the login flow on the upside looks like it's making
14:51sense, we just need to kind of tie it all together. And I'll get the token and the API
14:56communication up and running. And then we can go ahead and see what else is needed for our login
15:04activity. So when we come back, we're going to jump back over to the API and finish up some of
15:09the work we have over there, we need to put in probably a few default roles, and at least two
15:16default users. So we can see, you know, any difference between role A and role B, or user A
15:21and user B. And we'll continue with that and go ahead and start working on setting up the JSON
15:29web tokens or JWT data that needs to come over. So stay tuned.
İlk yorumu siz yapın