Passwordless Authentication with Laravel
This episode is for members only

Sign up to access "Passwordless Authentication with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
02. Crafting the login page

Episodes

0%
Your progress
  • Total: 58m
  • Played: 0m
  • Remaining: 58m
Join or sign in to track your progress

Transcript

00:00
We're starting out here with a completely fresh Laravel application. I've just gone ahead and installed it.
00:05
And the only thing I've done is go ahead and switch over the database settings just here. And I've gone ahead and created a database here. We're not going to be using that in this part, but that's the only setup that we've done so far.
00:16
So because we're working with a bare bones Laravel installation, the first thing that we're going to do is go ahead and create a component for our main app layout. So let's go ahead and say make component. And we're going to call this app layout.
00:28
Now, of course, if you've already got a starter kit installed, or if you already have a structure to your application, feel free to skip ahead at this point. OK, so we've created app layout.
00:38
Let's go ahead and just revisit this. And for render, we're going to go ahead and choose a completely different location for this. We're going to go into the layouts directory, and we're going to use this app layout. So if we go over to our views section just here,
00:53
let's go ahead and create out a layouts folder and then app.blade.php. Inside of here, we're just going to create a basic document structure. Of course, this can be anything. And for the title of the app, let's go ahead and pull that from config.
01:06
So we'll say app name. OK, so now that we've done that, we can go ahead and just quickly scaffold out a login page and then inject any of the content into the body.
01:17
So if we head over to our views, let's create our folder in here called auth, and we'll create a login.blade.php file. So we'll just put login in there for now,
01:27
just so we can see that this is working. And why don't we go ahead and register the root for this to get this working? OK, so let's go and use a root view because we don't really need a controller for this.
01:38
And that's going to be for auth and login. If you're not familiar with root views, they basically allow you to define a root that directly hooks up to a view. In this case, as the second argument,
01:48
we're going to go ahead and pull in the login template that we've just created. And that just means that we don't need to create a controller and don't need to do all that extra work. So if we head over to the browser, let's go over to auth and login.
02:01
And at the moment, you just see the very plain login page just here. OK, so we're going to go ahead and update our component here, our main layout component. And in here, we just need to slot in the content that we want to show.
02:16
And then over in the login.blade.php file, what we can do is use this component. So we can say app and layout. And that should put that into that place.
02:28
So let's go ahead and have a look. And there we go. We've got the title of our app up here, and we'll have all of the markup that we need in there as well.
02:35
OK, so we're going to start to style stuff out starting from the body here. So again, if you already have everything set up here, feel free to skip this. But I'm going to go ahead and guide you through getting Tailwind installed and getting this working.
02:48
So we're going to head over to the framework guide section. And of course, hit Laravel here. We've already created our project, so we can go ahead and skip that. But we're going to go ahead and do an npm install
02:58
on Tailwind PostCSS and Autoprefixer. And then once we're done with that, we're going to go ahead and generate out a Tailwind config file, which we can use. So now that's done, let's go ahead and paste that in.
03:10
That will have created a Tailwind config file just here. We're not going to touch that really, but you can if you need to. OK, so for the template paths inside of here, we need to specify where we want to look for any Tailwind classes.
03:25
So actually, yeah, we do need to modify the Tailwind config. In our case, it's just going to be blade files. But of course, if you're pulling view into your application, you can change that around.
03:34
So we're going to head over to the config file here. And under the content section, we're just going to go ahead and paste in that line here. And that's now going to look for any blade files with Tailwind classes
03:43
and compile our CSS together nicely for us. OK, so now over in our app.css file, which does come with a fresh installation, we're just going to go ahead and paste in the base components and utilities from Tailwind.
03:56
And then we can just go ahead and run npm run dev and we should be good to go. So let's run this and just leave that running. And if we head over to the browser here and give this a refresh, sure enough, nothing has taken effect yet.
04:07
That is just because over in our main app layout, we just head over to app.blade.php. We just need to put in the Vite resources that we need to render the CSS. For this, we can just use the Vite directive
04:20
and then just pass in any of the files that we want to include. So our compiled will be in app.css here, resources.css, app.css or uncompiled. And that's going to read that for us and make sure that gets included. And you can see now we've got Tailwind installed.
04:34
The base styles have taken effect and now we can start to style stuff up. So we'll start with the body because we just want a really simple design here. Again, that we can skip if we want to. So let's just start to add some classes in here.
04:47
So let's add a background to this just to differ from the Vite containers that we're going to be using. And we'll go ahead and say font sand. We'll include a font in a minute just to make this look a little bit nicer.
04:58
And then let's go ahead and create a div wrapper for our slot and just add some base styling in here. So we're going to say min height screen. So this takes up the entire height of the screen and we can nicely center
05:10
those boxes that we saw in the introduction. And we're going to do this with Flexbox. So we're going to say item center and then justify center. And we're done.
05:19
So anything that we now put in here should be completely centered in the middle of the page, just like magic. OK, so we'll go ahead and skip the font for now, because it doesn't really matter too much.
05:28
We've got Tailwind installed and we can start to build out the login page here now that we've got a kind of base to this. So we'll head over to the login.blade.php file. And really the only thing we need in here is a form.
05:39
So let's base all of our styles and everything around this form. So for this, let's go ahead and just get rid of the action for now. We'll just create our class in here and let's set a max width of large and we'll set the width to full.
05:53
What that's going to do if we just give this a background of white, it's going to stretch this out if we just put some content in here and then it's going to stretch it out, but full width, but have a maximum width.
06:03
And that's going to give us a nice responsive container as well. So we'll keep the background of white. We'll give this some padding and we'll make this medium rounded. And let's go ahead and center all of the text inside of here.
06:15
We're also then going to set a space Y of six. So every container that we have within here. So if we have multiple containers within here, they'll all be spaced out vertically and it will look a little bit nicer.
06:29
So finally, let's not add small. Let's add a shadow small and we should be good. So that is what our container looks like. Let's get started now with the header here.
06:39
We'll just keep this really simple. So let's go ahead and just say log in. Kind of makes sense. And let's have a couple of styles onto this.
06:47
So we're going to go ahead and say font semi bold. Let's set the text to say 2XL a little bit bigger and we'll dial down the text with grey 600. And let's have a look.
06:56
There we go. And next is going to be our form fields. So we want an input in here and that's going to be a type of email or it can be a type of text.
07:07
It's really up to you. Of course, we're going to be validating this as well. The name of this we'll set to email and we'll set the ID to email. Just before this, we'll go ahead and create a label as well for the email address.
07:18
But we're actually going to hide this. We're going to set this to screen reader only. So it can be detected by screen readers and read out but not seen on the page. And if we just check this out for now, of course, it doesn't look great at the moment.
07:31
So let's just add a couple of styles in here to get this working. So let's say padding Y2. We'll set the padding on the X axis to 4. And let's set the background to slate 50.
07:42
So just like a really light grey colour. I will set the border to 2 in terms of its width. And we'll set a slate border on this 200. We'll set the rounded here to medium and we'll set the full width on this.
07:56
So it fills the entire container. And there we go. There is our login field. We'll go ahead and add a placeholder in here as well.
08:03
Just with an email address as an example. And there we go. Great. Okay.
08:08
So last but not least is, of course, the button to actually submit this. So let's go ahead and create a button here with a type of submit. And that's, of course, going to say maybe get magic link. That kind of makes sense.
08:21
And of course, we're going to style this up as well. So let's go ahead and add in a class in here. Set the background to slate, say 600. Set the text to white.
08:31
And let's just preview that. Looks a bit better. And padding on the x-axis could be 6, I guess. We could then set a height to this.
08:41
So it gives us a specific height. That's fine. And then we'll go ahead and set rounded to medium just to give it a bit of roundness. Brilliant.
08:50
And lastly, we'll go ahead and set the font to medium just so it stands out a little bit. I guess we could also set the width to full. I think that would look a little bit better. And there we go.
08:58
Perfect. OK, so nothing brilliant looking. But it's a lot better than just having an unstyled form on the page. Lastly, I'm just going to go ahead and set the email address here to required.
09:10
And we'll also set an auto focus on here. So when we land on this page, we get put immediately into here. And we can start to enter our email address. So that's pretty much all the design that we're going to be doing in here.
09:21
Because we're going to be copying and pasting this component over for when we register. And the rest of this is just going to be some nice Laravel code that we can write. So let's head over to the next episode and look at submitting the data in this form. But using a Laravel action.

Episode summary

In this episode, we're kicking things off by setting up the login page for our Laravel app from scratch. We start with a completely fresh Laravel installation, set up our database (though we won't actually use it just yet), and then focus on structuring the frontend.

First, we create a new layout component for our app, set up the directory structure in Blade, and wire up a simple login page view. We utilize Laravel's route views feature, which lets us quickly hook a route up to a Blade view without needing a dedicated controller – super handy for getting things rolling fast.

Next, we install Tailwind CSS and their dependencies, tweak the configuration, and make sure Laravel knows to compile all our Blade templates with Tailwind styles. Once that's working, you’ll see the base Tailwind styles kicking in, and we take a little time to style up our app layout and center the login form perfectly in the middle of the page using Flexbox and other utility classes.

Then it's onto building the login form itself. We add a nicely styled container, a header, the email input (with accessibility in mind), and a slick, full-width button. The form design is clean and simple, but looks way better than a bare-bones HTML form, thanks to some thoughtful Tailwind classes.

By the end of this episode, you’ll have a well-structured and nicely styled login page ready to roll, and set yourself up with reusable patterns for future pages. Next up: wiring up the form to handle submissions using a Laravel action!

Episode discussion

No comments, yet. Be the first!