3.2 Designing the Site Layout and Login View
Vue.js CLI apps have everything we need to get up and running quickly. But we want our own markup and CSS, so we'll spend some time getting that set up. We'll also write the Vue.js view for our login form.
1.Introduction2 lessons, 12:18
2.Getting Started2 lessons, 20:32
3.Users and Authentication5 lessons, 54:30
4.Managing Currencies5 lessons, 46:15
5.Managing Our Portfolio5 lessons, 50:13
6.Security1 lesson, 10:49
7.Conclusion1 lesson, 00:38
3.2 Designing the Site Layout and Login View
In the previous session, we created our admin user, so now we need the ability to log in that user. And that means we get to finally dive into the client part of our application. So first of all, what we have is a single page application. Whenever we use to Vue CLI to create our client, we told it to use vue router and part of that is you're creating a single page application. So, while we can navigate to what looks like different pages. What we actually have our two vue components. So what we see here is a vue component actually in this case, it's three vue components and the about page is actually two. Now, how do we look at that? Well first of all, we go to the client folder and then the source folder. This is where all of our source code is going to be. There is this App.vue and this is the main vue component. So you can think of this kind of like the layout page. And you can see that there is the nav at the top here, so the home and about, that's this up here, so that's the first component. The second component is being displayed inside of this router-view. So if we look at the views folder, we have two views. We have Home and we have About. So if we look at the About Vue, it's very simply. We just have a div that has some content and that's what we see here. However, on the home page, if we look at that Vue, we first of all have some HTML, but then there's this HelloWorld component. Well, that's being brought in as well. That's inside of this components folder, and it contains practically everything but this Vue logo. So the Vue logo is inside of the home view, and then all of the other content is inside of that HelloWorld component. So that is how this is initially broken up and we are going to be kind of doing the same thing, because we are going to create views for our different pages, like registration, login, the portfolio as well as managing the currencies. And we will just get into that whenever we need to. But for right now, want to start with main.js. This is our main file. And what I want to do is import bootstrap and then I also want to import the CSS. So that is dist/css and then bootstrap.min.css. And that's going to give us bootstrap so that we can easily use that inside of our components. And then we are going to go to App.vue. Because what I want to do here is pretty much replace everything as far as the markup is concerned with something that looks more like an application. I mean, having this is okay, but we need something that looks more like an application. So instead of typing this out, I'm going to paste this in because there's quite a bit there and it, of course, will be in the code download. So what we're going to is replace this div with an ID of nav with all of that. Now, there is some stuff that I have already set up for. For example, there is an isAuthenticated value that we're going to have to add to this component so that we can show or hide links, based upon whether or not the user is authenticated. The same is true if the user is an admin. So those are two things that we will add in. But as far as the markup is concerned, the next thing I want to do is wrap this router-view with a div element that has a class of container. And we will also give it an id, so that we can reference it if we need to, called page-content-container. And then we will just put the router-view inside of there. So all of our views then are going to be rendered inside of this, and really it's just so that we can add some CSS because we want some margin at the top. Because if we look at this, well that should have refreshed. Let's make sure that, it's still compiling, yeah. We're gonna have to wait for that to finish. It will automatically refresh the page, which is nice, but notice now that we need some margin at the top of our content. So, we are going to use none of these existing CSS. And instead, we are going to add in a rule using that page-content-container. And we will set the margin-top to something let try 60pixels and yeah, there we go. That's going to be just fine. Now, I have already have links up here. So we can see that the there is home link, which will take us to the this page. Eventually we would want to change this to be something representative of our application. For right now, we are going to leave it alone. The login is, of course going to go to a login view the same for register. But right now, we don't have that. So, what we want to do is two things, we want to add a view called logins. So let's go ahead and do that inside of our views folder, rather. Let's go ahead and give it a template. Let's have a div element that says this is the login page, and then we want to go to router.js because this is where we set up our route. You can see that there's one for home and then there is one for about, so we are going to add another for login and we basically just need to follow this same pattern. We need a path value, which is going to be /login, we can also give it a name so let's do that, we'll just call it login. And then we need to specify the component. Now, look at what was done for importing the about, it was done inline. So let's go ahead and do that same thing. And then we will just specify that view. So we're going to pull in login.view, and that should make that work. So whenever we go to the browser, there's an error here. So let's see, module bill failed, and this is also nice about Vue CLI. We get the error message just right here so that we can see it. And it's because I added a semicolon. So now, we have something else. Module not found, can't resolve view/Login, and it helps if you type the path correctly. And there we see that this is the login page. So we are on the right track as far as that is concerned. So inside of our login view, let's add a class here. Because if we look at the other views, what they did is they added a class for home and then the class for about. We're not going to do anything with it but I like that idea. So we will do the same thing here so that we will have a class of login, just in case if we ever wanted to do something with that class. And then we will just have our typical markup. So let's have an h3 element that says login, and then we will have a form that isn't going to have an action. But let's go ahead and handle the submit event, but let's prevent the default from occurring and we're going to have a method called login. So let's go ahead and add that so that I don't forget to do that later because I will forget, that is something that I will always do. And there is our login method, okay? So inside of our form, we essentially just want the email address, the password, and then a login button. So let's add a div with a class of form-group. And let's not have labels here, let's be kind of modern. And we will have just an input, in this case, let's set the type to email. We will specify a v-model. So we will just call that value email. And then we will have a placeholder value that is going to be email, or your email, let's do that. And then let's add the class, form-control, I should have done that with a short hand. So we have our email field, let's just copy and paste that for the password. Of course, there are a few things we need to change the type, it's going to be password, the v-model is going to be password, the placeholder is going to be password, and that should be all that we need there. Let's copy and paste that. And instead of using an input element, we're going to use a button element. So we'll have button, we'll give it a class of btn and btn-primary, and the text is going to be login. But let's also have a section to display any error messages, in the case of an invalid of login. So we will have another div with a class of form-group, let's also add the text-danger class, so that it displays as red. And then we will display an error message. Let's also add the v-show, and we will show this based upon if we have a value inside of error. So there's three things that we need to set as far as our data is concerned. So let's go ahead and add that. So the first was email, we will initialize that as an empty string. Then we will have password, which we will do the same thing. And then, well, we will just do that all the way around for email, password, and error. And that should be fine as far as that is concerned. Let's also add some interactivity with our button, because this should be disabled unless if we have both an email address and a password. So let's go ahead and add that capability. So we will set the disabled attributes based upon if we don't have an email or if we don't have a password. That will be fine. Ideally, we would actually have some validation to ensure that we have a valid email address. And we might want to do something with a password as well. But that is going to be okay. So if we go to the browser and everything looks okay. So if we just type something into the fields, we can see that the Login button is enabled. So then, we just want to do something whenever the login method executes. And we're going to hit our API. So it makes sense for us to have a utility for interacting with our API. And we will focus on that in the next lesson.