WPF Login Form Creation - A TimCo Retail Manager Video

welcome to another video in the timko retail manager course this course focuses on real-world application development right now we are working on building out our first section of work which is the basic register in this video we're going to set up our login form in WPF now if you're a patreon supporter the $5 per month level or higher make sure you head over to get the latest source code either way make sure you're subscribed to this channel so you can be following along okay let's get started now here I have opened the project we're working on and just for good form I don't know what I do is on video I forget to do it but if you guys sync and just do a fetch to make sure there's no commits out there we have not pulled down there's not because I'm working solo therefore I'm the only one making commits so now you know we have a latest version of our source code we can get to work let's start by setting the desktop UI project to this startup project and now in here we can start working on let's start our shell view and shell view model if we hit start on this right now just see what happens it should launch up our shell view which it does if we notice up in the upper left hand corner here it says shell view kind of small but we can see it and that indicates that this shell view model is what's getting kicked off and it's opening up the shell view which is at this point empty so really make some changes here we're going to add a login form and we're going to have to populate that with a couple controls for username or email address and password and a button to say submit now the first thing to do is figure out how this is going to interact with the shell view we've gotta figure out is the shell view gonna open up first or so the login form open up first and I think in this case and usually in most cases I want to open up a shell view first because a shell view is named shelve you for a reason typically how you use this is this is just a shell that then you can open up forms inside think of well in this case Visual Studio is a pretty decent example not the best it's a pretty decent example because the visual studio the outside stuff stays open all the time and then we open up windows inside of it and so we don't think about closing down the main window which is Visual Studio itself and then using something else you know next be that wouldn't make sense when there's main window closes all the visual studio closes down that's the same things gonna happen with our application whatever form we start with when that form closes the application closes now there are ways around this for example you could have a login form first and then when they successfully log in you can hide the form and then open up what would be your main form from there but we're not gonna do that instead what happen is we'll open up this main form and then we'll have it immediately go to the login form and that login for will be right inside of this shell view put like a child a parent-child relationship okay so that's something I set up which means that this shell view model needs to be set up to handle one or more views so the next question that comes up is are we gonna have multiple views on this same page at the same time and I think I want to keep it simple and say no I'm just gonna have one view and sweep whatever form I want to load so I'm going to leave it at one view and one view only and that means I can set my shell view model to inherit and let's use the caliber and micro so using Caliburn micro I'm going to inherit from conductor of type object and this is the simplest way of doing it you could be much more specific in which type of object you want to use but I'm gonna say I don't want to worry about it I was gonna say object so I put whatever object I want in there and I just know to put only view model classes in this conductor so that's just my personal you know ease of use kind of thing I could dial this right down to just certain types or even create an empty interface and say only those items but I'm gonna leave an object in and be fine with it okay so that's what's going to allow us to display one form on here somewhere but it doesn't have to up the entire form and in fact what I'm gonna do is come down here and let's let's flip this around if you have a little more screen real estate the APF has not yet have a great story for for the day for layouts I'm going to do is I'm going to cut the grid out control X instead I'm gonna add a doc panel and doc panel allows us to dock things in different positions inside of it so I create a menu and I am going to say doc panel dot doc I'm gonna dock it to the top what this will allow us to do is it will allow us to put a menu at the very top that says okay these are the things you know for example file under file you have exit and all the rest and one of them will be somewhere either than the main menu or under the menu somewhere will have login that way if you ever want to log out you could and we can also allow you to then log in again or something to that nature so we're just gonna let's just create one for now we'll say menu item and the the header is going to be file and actually we'll do it underscore and for the F which that underscore allows us then to use the Alt key and then hit F and open the file menu now right now let's do Mike's with a 100% since it's tiny and move over it's still very tiny the the file is very small if I were to change the font size up here we could change it for the entire form let's just say a 18 point font notice even with that huge font it doesn't change anything the the menu for whatever reason does not inherit from the window I'm not a big fan of it but no worries what we can do is say font size right in the menu and let's say 18 and notice that file got significantly larger okay so this is the start of our menu system and let's just add oh I don't know one more menu item and let's just say the header is on our score account and then in here we'll have a menu item for login slash logout so let's say that the menu item is going to have a name I didn't name the other ones because they have no reason to refer to them directly in code but if that's one I'll name it and I called this the login screen and we'll say the header for this is going to be login and we'll change that to be log out probably you know so if your log didn't say log out or if you're not logged out we'll say log in that's a possibility but it does want to play around of this and see this works otherwise we can do is create second menu item and just hide it by default they have the log out and then swap which one is visible that's another option to do as well but for now we won't give it any type of action so there's no code behind this for now so you can see over here the file me about and if we were a drop down you'll see the log in is right here as well underneath the account menu so that's a pretty simple menu instead of a doc panel now at the end of menu before the doc panel closes I'm going to paste my grid that I cut out originally and so this is where the rest of the stuff goes knows it's it's everything below our menu item if you'd see the dots here they're kind of small but it indicates these are the this the area for this grid and that's everything below our menu okay so now we have a start let's go ahead and build out our grid a little bit to layout our structure for our form there's not much structure to it essentially is just this spot right here which means that unless you want to add something else around it maybe one of those status bars the bottom chemical we have down here we could do that if you wanted to I think for now we'll just leave it at the rest of this form which means in here we can add is a content control and we'll give a name of active item and let's give a margin all around and let's just say that the margin is going to be let's start with five and that should be good so now in here and I didn't have to put this grid I could just dumped it right dump content control right inside of where the grids at but a great allows me a little bit more flexibility if later I want to come back and add something else in all right so it shouldn't have changed anything except for when we start this we should see we have a file menu but nothing underneath it which we do and then account menu with the login underneath it and that's it so we're getting a good start now what we need to do is actually create our control to put in here so let's create a new view model so class that's called this the login view model and I get public and let's go ahead and also create the login view control user control user control and we'll call this the login view in order to match up with the login view model so now let's work on this form now right now it's it's gray because it's actually transparent let's change that at least for now so the background is white we can take this off later I usually do it for design at least you can do it for run times well the only problem then is if you decide to change your color scheme may want to change your background to live of a gray or maybe a little bit of blue or something like that where it's subtle but actually makes a little bit of difference in her app well then you have to change on every single form whereas if you leave it leave this off the background is transparent and then you only change at your shell view and you can change it everywhere then so for design tile at lease or for development we will leave this at white they may change it later now the design height and width is set at 4:15 800 if you remember if you're back to the shell view the design height and or the height and the width is 450 and 800 so those actually match which means that will actually lose some some of our height because if this is 450 it includes the menu bar we don't have 450 to give to our login form but the EPF is very flexible and so we want to actually kind of take that into account when we build our form we don't want form to be pixel perfect it only one size we want it'll grow and shrink as necessary so I'm not gonna take the entire space up with my login form but I want to look good in a roughly this size now this is design height and design with because this control will fit to whatever you put it into so it's actually a little shorter like I said so we could actually just kind of simulate that with our height we have 25 a little bit smaller so for 25 and again this is just simulating so I have something now in this grid we actually want to set up our rows and columns so grid dots column definitions and then also grid outtro definitions so column definitions are the vertical slices we do we want a couple of those probably just two I think at least for now so let's do our column definition and we'll set it at you know I think I'm gonna set it and actually star and do four columns total so the columns have width so this is star and then whoops we'll do slash and close it out let me copy this and paste a few more times it's got a curse and right spot and now for these two I'm going to say Auto and what that's gonna do is it's going to allow me to Center my content so that it's gonna take up just whatever space it needs in the exact center we're talking about horizontally okay so the left-hand margin right hand margin if you were will be exactly the same width as each other and the content will be in between those two columns at whatever with it needs let's do the same thing or something similar I'm trying to be here I think actually we're not gonna do the same thing for height for height I think we'll do is we'll start at the top and work our way down and then have the rest be just that star spacing so let's do grid row definitions and we'll say row definition our first one the height is going to be Auto and then we'll copy that it'll need one for our you know our login form header whatever going to save for that we'll leave one for our row for the username and one for the password and the last one for the button and then the one after that is going to be star okay so that's our our row definitions now we can do is come down here and actually start parse this out so let's flip this over to our other layout and kind of shrink this off a little bit in fact we can shrink it down pretty good because of the fact we really want to work with just what's on this center line so inside here we'll do is we'll set up a text block and this is going to be our header and so we'll say that it is on grid row and it's in the first row so 0 and grid column if you can column 1 the second column and grid column span is to me it's on two columns actually it's on column 1 ones with this one and column 2 which is this one and the horizontal alignment it's going to be the center what that'll allow us to do is Center our text and we're gonna say that let's just say log in form now notice if you can see it it's really tiny ants wrap to the top let's change that so font size let's make this 48 that sounds good and for font family I'm gonna actually the properties it's just easier I find and let's go with something light yep that'll work and let's actually change that that font size then to be something a little bit bigger not six pixels 64 how about that there we go now he has a little bit larger just kind of jumps off the page at you this is a login form and now we can do is set our art to entries which would be or our text blocks so let's do this let's actually mark it off this is our username row and we'll say first of all text block and this is on grid Row one grid column one inside here we will say user name like so and that's awful small I'm going to change it up here at the user control level to say our font size it's going to be 18 to match we have on our shell view that still is a little small let's like to change this to 24 to see how it looks I think that's probably better so let's leave it at 24 and let's also put some padding underneath the login form so we're not right up against each other so the text block I'm going to say the margin is going to be 0 0 0 and the last one let's do let's do 20 and see what looks like I think that's probably good then I guess this has some space between login form and username and now we can't on the next line down here we'll say textbox that's really enter data and we got given a name of username and we'll say that our grid dot row is Row one and grid dot column is column two and let's start there for now that's going to put it right over here but it doesn't look very big let's look at that not very big so let's look at the gang to increase that so let's say minimum width let's give it a 100 and that seems a little better if you look at that like so it's a little bit bigger that's more in line what you want to see okay so that's our username row and now we can do is we can give some padding or some margin below each of these so let's do that not twenty out thing let's just do ten like so and let's do the same thing here or you say ten below this as well and now for the next row it's actually great back over here now we can say password row and down here you can say text block in fact you already do we're not copy and paste this thing only a row is Row two columns column one and this is password so now I can do is we can actually copy this text box as well and paste it down here and set the row to be to column is fine not text box though they also use a name let's need to change the password but we don't want text box because the fact that that will display the tanks right on the screen so how about password box instead and that should put stars in that box instead it'll make sure it does we intend it to do next let's create our login button login row let's call that and say button grid row equals 3 grid column equals 1 and grid column span equals 2 I want to Center this button right in the middle so the horizontal alignment equals Center let's actually put this the next reel and you didn't give it a name login button if they login command if you wanted to or I'll action or something like that but login button works at least for now and then inside here we'll just say log in and we should give it some margins too because this is tiny actually the padding sorry not password box padding let's give it a padding of let's look at 5 and 10 oops got those reversed how about 10 5 there we go let's actually make this more like 20 to give it a bigger feel here so now we have is a very simple login form username password click the login button we don't have clear form we don't have forgot password we just have login I think this is we're going to stop not in this video but as far as the zionists form because I think that this gives us really all we need at this point to do the bear functionality of what this form will do the form will probably grow over time and we could probably also style it as well in order to give us a better look maybe have an image on a login button and and things like that maybe even image the top for login form just to give it a little bit more life test form instead of a bear Stark form but to get something working I think this works I think that it's enough I do think that looking at these I'm thinking about making it a little bigger that's one of the kind of jumped out at me as may a little small let's try 150 that looks a little better notice how they it rearranged so it's still centered under login form love that love the fact that the button is still centered underneath the two so it really does look nice all right we can actually let's look at what it looks like at 20 instead of 10 I think it again visually breaks it up a little bit and says okay these two are together then you get a space in order to log in so I like that I think it's a good first pass at this form that allows us to get something in and working and then I can make it pretty if you want or bring our designer in to make it look nicer but for now I think it looks great so now we can do is let's actually load this form when the shell view starts so the first thing to do is create a constructor now in here we need to ask for our login form so we have this login view model we need to open at some point in fact we need to open it right away so let's ask for that so let's create a holder for it so login view model on our score a login VM and not assigning to it yet private and then here we'll say login view model login VM okay and they will say underscore login VM equals log in VM now this uses constructor injection so I'm just saying you know give me a view model I'm not going to do equals new VM anywhere if I could help it so I'm saying just give me a login view model and put in this parameter when you call the constructor I'll store it in a private variable I'm actually going to activate item any view mana activate is going to be the underscore login VM and I could say login VM as well either work because we're just passing around the address to that houses location we're not actually passing around a copy of the house so with this versus this the same thing under the behind the scenes just a activate item which is going to immediately activate that login on our shell view model so he's a constructor injection to pass in a new instance of login VM and then I'm activating it immediately after storing it so I can use it later if we run this hopefully all runs it does and immediately have a login form it's now I can put in my user name test it test calm and that's that is not long enough so we have to make adjustment there and that password is notice it's not even showing me it's just typing in those round indicators to indicate that a letters been tight but not which one and I can hit login which does nothing at this point but now we have a login form it opens right away when we load this application now if you're not familiar the magic that really happened there it's not magic what happened was we're doing dependency injection depends the injection once you start using it once you wire it up it's awesome because I didn't have to say equals new here I just said give me and it did and the reason it did is because in the into the bootstrapper we have this code of a simple container and then here under the configure we said okay we want to set up a couple things first of all I window manager and then I event aggregator but then also I did this code right here where I said give me all the types that are a class that ends the name ends with viewmodel well shell viewmodel that's one login view model that's another so those classes list them and then for each one register per request meaning give me a new instance every time I requested the type and the the name so it registered login view model is one of those so then when I request it over here it's at oh I don't - do you want a login view model instance and so it gave me that now the rest when it actually displayed the login view that's caliber and micro this caliber micro says when you load a login view and say activate what you're actually asking for is for me to show you the corresponding view so it says login view model login view model sorry so login view model has to have a login view that's the naming convention so view model lines up with view it says okay that's the viewers show and now what it's connected scenes is the login view model which by the way we have not yet connected so let's do that now so let's set this up as a screen which is using Caliburn micro so I did a controlled dot and hit enter now if you've not typed this correctly and you hit control dot you're not get the option to add the using statement you're just gonna get the option to create something new you don't want to do that okay so now let's create a couple properties one properties and we called username and the other password if I remember right let's just check real quick so our login form has a username which is username and the password is password and actually I cased those incorrectly capital u and capital P the reason why HP capital is because I'm actually gonna wire these up to properties so prop full hit tab twice I'll say this is a string and this is going to be underscore username which corresponds to username okay and that's our get for username but our set we're actually gonna need a change so let's hit enter a couple times here and get this formatted properly once we set a value we also want to do enough notify of property change and do this syntax which is to indicate that this property has changed its value so every time we change a username value its gonna fire off and say hey everybody we change the username value and then we're a prop full again tab twice string underscore password give the name password and do a similar type of thing we'll say okay let's go ahead and do the notify of property change for the password now then we let's pry it backing field up to underneath the username I did that poorly okay so now we have our private backing fields up here we have our public properties for username and password now I don't want to modify these directly just seeing them I always want to go through the modification process on the actual property because that's what fires off the notify of property change also if I had any mechanism in here to gate what comes in meaning not allow certain things for example maybe they don't want to allow an age to be less than zero you know that would be an indication there so I'd say EF age is greater than or equal or value is greater than equal to zero go ahead and apply it you can't do that on these private backing fields so when I make sure that I never actually use these directly and so I use the underscore syntax which was pretty common the underscore syntax says this is a private backing field meaning its sole purpose is to supply and hold the value for this property let me match the names up and just use a different case and the underscore in front so that's why do that type of format in order to better indicate what we're doing here now let's create some code for our button which our button is called what login button let's actually change the casing on that as well it's a login button so let's create a couple things here first of all a public cool and let's actually change it from login button to login that's better log e and I say action is doing that we can say can log in and we'll pass in our username and our password as again it's a convention base so it's saying I'm reliant on username which matches up with you to name and password which matches up with password but again the casing is four parameters which get the camel casing so can login I must say if username da length is greater than zero and password length is greater than let's say zero that's fine for now return true actually it's that the boolean here and set the output here equals true and return output okay so this is just saying as long as you have a username of length grid and zero and password length greater than zero it's valid now is that good enough probably not we probably want to do a check on this to make sure that it's the user name actually is an email address and so it has to have an @ symbol and a dots you know in there somewhere after the @ symbol or may even do a a more comprehensive email check which we can do with some built-in dotnet controls and then password maybe say the password happy a length of of six or eight or whatever our standard password length is but for now I think this works and I'm not already concerned with it so can log-in returns boolean that's going to enable or disable our login button public void login takes in a username and password again convention based this was kind of wire those two up for us behind the scenes Caliburn micro is and now from this we could do something interesting or we can just we could do a message I was gonna do just a console right language specialized does nothing okay but I'm gonna put a breakpoint here just to indicate that yes we logged in let's start this up and come over here and notice login is grayed out if I put test for username nothing happens if I type T it should update but it has not yet let's find out why let's put a breakpoint on the first line of our can login let's start again the Amelie hits it and of course use me as blank passwords blank that's expected but now if we hit T username the value is T if you notice down here and password course is blank which is fine so it continue let's hit T for password nothing happens so that's not notifying us of any change to our password let's find out why password is not being updated so password is our name and over here we have our name for a password box is password and it's spelled the same as no spelling errors there so it seems like it would work so I did a little bit of research and looked around and I've found this article on Stack Overflow if you have you stack or flee for it's an excellent tool for finding information now this is also a pretty decent definition of how to ask for help it's not perfect but it's pretty good so for example first of all the user actually has a name here Dave not just a number that's indicates you actually gave some sort of thought to your profile besides just saying give me help also there is clear definitions of what's going on what version of caliber and michael are using there's tags here and it's asking very clear question does caliber micro support password box so it's very clear what they're asking for and because of that you got not one but two different great answers in fact if we look here this answer you know it's the selected one the accepted one has two up votes whereas this one down here has nine there's a reason for that this one I believe came laid out slates June 4th of 2015 June 26th 2015 so this one came quite a bit later but notice here's a much more simplified example we like simple and essentially this is copy and paste with a little bit of modification so it says create this class password box helper and then in your bootstrapper run this code so I think we'll do that and try it out so I'm gonna copy first of all this code right here which we do have to make one modification to so this is called password box helper notice down here the comments comments are important we see that we have to add this particular extra line at the end so we'll do that in just a minute so copy this code it's called password box helper I'll move this off a screen and now you have to decide where you put these things let's actually create a folder called helpers and inside here we'll add a class called password box helper and they'll actually paste over everything here and create this layout and of course we've got some red squigglies but it should be we need to add some using statements and that's all it is it looks like the only thing it does is it's yelling ass a little bit because of our conventions which is okay it's just saying hey we can do this better I believe the convention is yeah that wants to collapse it right into an if statement which makes sense with a newer version of c-sharp it didn't make sense earlier that's okay also our if statements do not have curly braces I don't want to leave that alone I do huh change that because my convention is to have the clear aces I don't want to have mixed types so then we have this right here looks like reflections what is needed there I think we're good now let's do a build here just make sure that it all builds and it does which means we've got at least the the issues of this solved and now I need to look at that note a little more closely which as let's zoom in here there we go so as Cosmo 0 points out add the file lines the last line in the password change function and that is this right here okay so I'm going to copy this line all the way through this end here the copy is line and paste it at the end of password change so let's do that so let's copy this entire line well this does that make sure that the carrot does not go to the beginning every time you type which is kind of important all right so I'm going to move us back over here and in the password changed we need to add at the end here this line which is actually oh there you have it here so we can actually just delete that line out which that was shift leave away if you select a line with blank or not and you hold down shift and then hit delete it deletes the entire line it makes it look faster go through and delete lines so that's already there so it's going to move the last character in the password box cool so now we need to do is me to go to our bootstrapper and in the initialize we need to paste some code now let's copy it on the screen where you can't see it and paste in here and it should be that this works a control dot add the user statement for Windows controls and another one for where that helper is and we should be good to go let's just try it rather bat and see what happens first I'll make sure it builds and runs that's always helpful and it's still it's still spinning trial law our load so this might not be oh that's why they have a breakpoint there let's go ahead and run this ok so now if I type test I type T nothing happens so it didn't solve our problem wasn't magic let's tell a little debugging today I wonder if the issue is actually it's not coming through here but it is actually being updated so I'm going to do is start this up again and this time some values in username mood a path or box but first come over here and put a breakpoint in can log-in and just type something which doesn't register anything but then if I hit T at the end of test the password is empty the username has something in it but let's look at what password hasn't it and notice that password actually has the word test in it so it is registering that value is just not triggering the can log in message so we know that username you know the password it's just not triggering can login so now we a do is figure out what to do to trigger this can login so let's look first it's put our break point at the password notify property change and actually let's put our break point still at the can login hit continue and ran form backup and now I'm going to type let's type of a R in our password box it does go and notify have property change for password but it does not trigger the can login which is interesting okay so what if we did this I'm just guessing here at this point just try a debug on the fly without mistake on Google for everything but what if I have said can login here for notify property change and of course it says no can't do that because you've actually got username password string here so what if instead I said can login with username and password let's just see if that would work alright so there's no break points right now they're gonna interfere so test and test1 the can login or it didn't make a difference in our can login so if I put a breakpoint at output here come back to my thing and said our it does trigger it and the username is test in the password is test our and so it's gonna come down through here and say true if I continue it still doesn't change this forward to be able to be logged in let's work through a few more things and this is really what debugging looks like now you know we can always Google Stack Overflow you can always even ask a question on Stack Overflow but really what it comes down to is you're just passing the buck now I am NOT against asking questions on Stack Overflow but I am against asking questions on Stack Overflow first okay if you've not spent a couple of hours trying things not just confused trying things you know it's been at least a couple hours trying things you should not be asking questions of somebody else because you haven't put in the effort and really this is where the effort of this will pay off later when it comes to the next debugging challenge you come up against so we don't want to just say oh it can't be done let's look at other options for this I believe one of the options we have is instead of doing this actually that's just doing so and where I take this off we're gonna cut this out and do a get I believe we can do it like this and say let's just change us to be look at our property and this to look at our property and will trigger this just Leawood another property so can login do the same thing here let's try it out and see what happens and it says obvious reference not set to an instance of an object returns null so user name is null password is null therefore a length cannot be greater than zero why is that because we have not set the initial values for these two things to be anything other than no let's do that here let's start again this time starts up just fine and let's just say T est pas sort of T est let's find out why let's look at can login and we'll put a breakpoint at our boolean here and now let's just type something a password box nothing is happening if I type something username box something does happen now it's just I curiosity's sake look at what happens it is not enabled this let's put our breakpoint back again and type something else and now it's look at user name the length is greater than zero past where the length is zero which is interesting I wonder why because we had been saying that password just fine so let's put our break point back at password and make sure that it is in fact saying the value for password to something so let's hit continue and let's change the value of our password add T at the end and nothing is happening we set our value here notice it also makes us this box larger which is interesting so why is it no longer triggering this when before it was and the answer is I don't know let's look at our code so what has changed here when we changed this right there that would affect password in some small way but that's only that the view model is initially created that it sets the value after that it sets it here so we should be good there and then we also change this to this right here so let's actually comment this out entirely and let's course comment out where it's called and let's just see if we capture the password value change it so I type something in here still not capturing that password value change well I think they didn't put the breakpoint the right spot that would really help let's try it again still not capturing that password change now if we put the breakpoint on the username oops it actually captures the username value and now it's updated and the username is SD and we're good to go so it does recognize that in fact we type one more letter let's look at the password field and is empty so there's no value there yet so it's still not working correctly let's take the equals something off let's try it again so we'll type something our password and this time it works so so the value is it's kind of small but it's down here it says T so the issue was that we initially assigned a value that caused a problem probably with our customized password box helper so we can do instead is put our code back that we commented out and that's what we commented out instead of just deleting it and now we can do is just make sure that the length or the username and password are not null okay so I believe we could do this put a question mark I have a username so you would say it fail if it's not and yep networks so we type tes t t and now we have an enabled button okay so a lot of work to get through to get there and that was not contrived I didn't know I didn't know that the password box would cause that problem I know how to fix it and so I want to keep that on video because the fact that you really have to go through the iteration a couple of important things to learn out of that debugging experience first of all breakpoints are your friend in fact we haven't hit this one yet we need to make sure that was going work but the other thing is that what I said oh we broke something I didn't just give up on the code that I've gotten so far I just okay what broke it and I thought it was this code down here and changing this over to a property but it wasn't instead the issue was setting this equal to an empty string so my assumption was wrong and so I was essentially abandoning code that wasn't broken but because it broke and I put that code in I thought that was the problem instead as a minor little thing I changed as well so don't just abandon everything because something doesn't work you might have gotten 95% away towards a solution you just need that other 5% so that's an important note commenting things out and reap you know put them back in helps the undo helps if I have been doing more get commits then I would have been able to roll back with get that's another option you can also you know I said used to undo button and go back quite a bit as long as you haven't closed out that tab that's not our option but all in all what it came down to was just keep poking it now I'm not positive we're fully working yet I still need to put a breakpoint here and make sure that we're working so test and attach the passer as well let's just say networks two-way awake clearing out disables a login button let's type in Cori for the password hit login and it goes right to the login screen but notice the user made us test the password is blank but the password property is correct I don't need to pass in now these username password I can clear these out because I can just say I'll read the properties okay so if I type Tim and the first in the login name or username and cor in the last in the password name and I hit the login it goes to the login method and if I read the username it's Tim password is Cory so it is properly loading all the information the assumption for how I was gonna do it how to change but the end solution is one that I can definitely live with now I did use this question mark syntax which I wasn't sure was gonna work but does it's one of those things I'm still trying to wrap my brain around all the place I can use this but essentially this is a null check so I'm saying if username is not null look at the length property and then do this comparison but the question mark I had wasn't the question mark not intentional the question I had was okay but what if this is null well at that point what it's gonna do is say no it's null therefore that fails okay so the password initially was null actually so is a username and so this failed so it never said it to true it was only when they both were not null and the lengths were greater than zero that this passed okay so that was an easier way of doing that but and putting a separate if statement in here that wraps this entire thing it says if username equals no here it's not equal to null and password is not equal to null then run this inner if statement this just makes it makes short work of it and that was the design behind that that character is that we can use this to say if it's not null then check the property of it and you can even go you know Nessa three or four deep if you had three or four deep properties to make sure that each step along the way they're not null and if they are then it fails okay and inside if they meant that feather just means it does not pass the if okay so I think that's it we now have a working login form that gets us to the point we don't need this line anymore it gets us to the point where we at least have the login button firing when a user puts their username and password in the box okay so it we start up we start up with the login form that's the first thing you want to see and yet it's not the the actual shell view me it's not the first form we see therefore we can close this form and not close our application because technically the shell view is our application and that's where we have our menu and we have the ability to do other things once we're logged in okay so that's enough for this video that's that's we do we we still have to do which is to create that form and get wired up to start we have not wired up the login button itself to do anything yet that's the next video so next video is where he actually has not this wasn't fun but I love talking to api's and this is what we're gonna do we're gonna wire up this login button so that calls out to the API with the username and password and says is this valid if it is he'll come back with the credentials will store the credentials and let the shelve you know hey we're logged in as Tim Cory here's all the information you need to make future calls okay so we'll do all of that in our next video so stay tuned for that thanks for watching as always I am Tim quarry [Music] you [Music]

Channel: IAmTimCorey

Views: 49,989

Rating: 4.9332638 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, timco, timco retail manager, wpf, asp.net, .net core, asp.net mvc, autofac, c# solid, c# solid principles, dependency injection, tdd, unit testing, xunit, moq

Id: 7CkSJyZb6H0

Length: 64min 38sec (3878 seconds)

Published: Mon Feb 25 2019