Laravel API Development & Vue JS SPA [COURSE]

Laravel API Development & Vue JS SPA – e05 – Login View 2

[Music] [Applause] [Music] [Applause]

[Music] welcome to level API development with view Jas single page application from scratch the following episode is going to be an

excerpt from the full course now available on udemy if you are interested in developing robust laravel api's with a front-end built on view and tailed when CSS then this is the course for you

we go into great detail talking about things like authentication testing tailwind CSS view j/s levo PHP unit and so much more so I hope you'll join me for the full course go ahead and click

on the link in the description to get sent to the udemy page where you can purchase the full course I hope you enjoy this episode so we're making great progress with our login view so in this

episode let's go ahead and handle this email address and password input fields starting with the fact that it says login right here but if we reference back to our preview there is no

reference of that also our label is e – mail all in capitals and right now we have email address a little verbose I feel like everybody knows that an email is an address so no need to have that

address it will clean up your views just a little bit so let's go back to phpstorm and let's start by removing that login and here it is it's a card header right now of login we don't need

that as a matter of fact all we really want to do is have this form we no longer need to have any of the bootstrap classes so why don't we actually grab this entire form I'm going to cut it out

and then let's delete all of these divs here and let's paste that form back in so this form is now on its own without it being wrapped in although those extra dips okay so this won't change much here

except the fact that we got rid of that login and right away we see that this section right here is basically touching our credentials section so let's add the same padding that we added underneath

the logo so back to phpstorm again you can add padding to the bottom of our h2 but I think it makes more sense to add the padding to the elements that is actually being affected so

add the same padding we used padding top of eight above here as you remember right here so let's use the same padding for the actual form that way we keep it consistent back to Chrome there we go

we got a little bit more breathing room now now this email address as I mentioned before it is using a language file but for us we can get rid of that and let's just hard code in email same

thing for password down here it's using a language file again let's just use password instead okay so this right here is a label and then it's got form group row which of course another bootstrap

class we can get rid of that we can get rid of all of these classes here because we no longer need them we're no longer using bootstrap so the label itself it's going to be for email which matches the

ID and so far so good now for our preview check this out look at the color and of course it's uppercase so let's take care of that now so uppercase it's actually a class which

would turn this into uppercase and let's try text blue 500 a little bit darker than the other hue of blue that we used and there we go but it's still a little large let's make it a little smaller

let's use text X s so it's a little bit smaller and less bold the font there we go okay so that's looking much closer to our preview right here but now we notice that this input actually wraps the

actual label and right now if we take a look at our project our label is outside of our input so why don't we make this label be absolute so that it actually sits inside of our input tag that's how

we get this style of input right here this entire lighter blue section that you see is the input itself and then it's got of course the inner part which is just a label so

let's go ahead and take care of that now now to do that we need to make the entire section relative so that we can make the label absolutely some basic CSS stuff so the entire wrapper let's make

that relative and then this label we're gonna make this absolute and let's check out what that does so now we see that that's sitting inside our label but of course if we start to

type in here disaster so we need to add sufficient padding inside our input so that we can actually bump that up just a little bit so to do that in our actual input we can get rid of all of these

classes here and let's add the same padding top of eight that we've been using as a base and if we go back now that's working correctly but of course this input if we check out the preview

is supposed to be taking up the entire space that it has so let's change the width of it and to do that all we need to do is just give it a width of four refresh and sure enough but again we run

into an issue where this has no padding around it whatsoever and if we check out the preview we have plenty of padding and we have rounded corners so let's take care of those now by doing round it

and let's add a padding all the way around of three let's see what that looks like okay so that's starting to take shape but now we've left our label without any

padding so our label will also need a padding so let's go ahead and find our label here and then add a padding left of three refresh okay that's looking much better but now this is basically

bumped all the way to the top so we're gonna have to move it down a little bit so let's try also adding a padding top of two and let's see there we go so this is looking great it's actually looking a

lot like the preview already with the exception of of course the fact that it's white instead of this color so let's change the background color of our input now back here in our input let's

go ahead and give it a background of blue 800 let's try that one refresh and there we go so that's looking much much closer to what it's supposed to be pretty cool right now

this of course has a placeholder of your at email com so let's add that now we'll add a placeholder of your at email com and now we have that in there it doesn't look exactly the same so of course with

tail when we can actually affect that as well so let's try a text gray of 100 how about that let's add that to our input field text gray 100 and let's see what that looks

like there we go I should give us a nice muted color and then when we type in you can nicely see our form but now the next thing you'll notice of course is our outline that's going all the way around

now of course there's a lot of work that goes into applications that need to stay compliant with screen readers and stuff like that and they do require this focus point because as we tap through this

site of course we're gonna want to give the user some sort of feedback that that element is selected but this outline is kind of ugly so let's go ahead and customize it the first thing we'll do is

we'll go ahead and do an outline of none essentially removing it but then we can use a focus let's change the background color instead let's lighten it up a little bit let's do blue 700 so our base

background is 800 and then when we focus on it of course it's gonna turn into 700 let's see what that looks like so now it's focused now it's not so when we focus on it it will give the user some

feedback that it is selected but of course is not the typical ugly outline that you would get out of the box so that I think feels a little bit better for this design so this is looking great

give me a couple of minutes and I'm going to implement the exact same thing with our password field I'll be right back and we're back so all I've done is

simply just copy the classes that we had for the label and the classes that we had for the input however this of course is bumping into each other so we are gonna have to add

an extra class to the password field to give it a little bit of breathing room let's go ahead and shift the entire block down let's try a padding top of two to begin with let's see what that

gives us so that's a little bit let's see what that looks like I think we've got a little bit more padding down here so let's go to maybe three c3 and there we go so now we have our two fields and

you can type into them but they look much much nicer all right how about this remember me section here let's check out the preview it looks like it needs just a text of white so let's handle that now

let's find it and here's the label we can get rid of all of these classes here and do text of white see what that looks like there we go that's looking much better but of course we do need a little

bit of breathing room the same way that we had here before so let's go ahead and delete these classes here and do a padding top of – same exact padding okay so that's looking much better and then

finally we have this login and forgot your password so wrap it up for this lesson and in the next lesson let's handle the bottom section of our login view

In part 2 of 3, we design the email and password input field.

Buy the full course at https://www.udemy.com/laravel-api-development-vue-js-spa-from-scratch/

In this episode, we cover:

Designing input fields and positioning the label

Adding bottom padding vs adding top padding

Input placeholder

Removing the outline and replacing it with a background change

About the course
Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

What you’ll learn
– RESTful API Development with Laravel
– Vue JS Single Page Application Methodology
– Front-End Design Using Tailwind CSS
– Implementing Search Functionality Using Laravel Scout
– Build a Complete SPA from Scratch