This episode is for members only
Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.
Get started
Already a member? Sign in to continue
Playing
17. Styling and transitioning the toast
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
Okay so we've got all of the functionality that we need from our little Toast plugin that we've built,
00:04
now let's style this up so it looks a little bit better and then we're going to add a transition route from headless UI which we've already used to transition this down and back up again nicely. Okay so let's go ahead and get rid of this V on click because that's going to be a little bit different as we get to it and let's style this up, now I'm going to get rid of V active as well
00:25
and in here I'm just going to put this is a Toast message just so we can style this up. Okay so let's go and set this to a fixed position, we'll set this at the top of the page and we'll set this to a left of half and then we'll do a minus translate on this on the x-axis to half that's basically going to put this in the middle, so let's just add a quick background to this just
00:50
to check and there we go it's right in the center of the page, so the next thing to do is set a nicer background so let's set this to a blue 500 and we'll set slight opacity as well so we can see behind this and then we'll go ahead and add some padding on the x-axis to this, we will set some text color on this so let's set this to white and let's set a margin on the top of as well so it
01:14
sits away from the top, we'll also set a z-index on this but with tailwind we'll do this dynamically so we get a higher value the max in tailwind is 50 but by doing this we can just create our own value for our z-index, so finally let's just set the text to small, let's take a look at this and it doesn't look great so let's add some padding on the y-axis as well and let's set that to three,
01:40
okay I think that looks okay for now great, right so now that we've got this we want to go ahead and transition this so we can again bring in the transition root stuff that we saw a little bit earlier so we're going to pull that in from headless ui so transition root and we'll bring in a transition child as well and that's from headless ui and view, great so this whole thing
02:09
is going to be wrapped in a transition root so let's pull that in here and then we're going to have a transition child inside of here which will be responsible for the transition so the transition root remember we need to enable based on a boolean and we know what that is it's whether this is active or not so in here we can set this as a template because we just need this as a wrapper
02:35
and then we can set show to active so that will now display this if we have an active toast message so let's go ahead and sign in and just check that this appears and it does and obviously that's going to disappear when show gets set back to false based on our timeout and it just disappears now all we really need to do is within this transition child go ahead and set the
02:59
transitions on this so we're going to have an enter we're going to have an enter from we'll have a leave in here and we'll have a leave too so we're skipping the other ones because they're just going to be exactly the same thing so for enter we'll set the duration to 200 and we'll say ease in out so set a slightly different one we'll do the same for leave as well and enter
03:21
from we'll just do a translate on the y-axis to push this up full so this will just basically hide this above the top of the page and we'll set an opacity to zero and then when we enter two that will be the default stars that we have here so we don't really need to have an enter two because it will just inherit what we have here for leave we'll go ahead and say exactly
03:44
the same thing so let's do this in here and then when this leaves it will go from opacity 100 down to zero and it will push it back up the page so we could add the leave from and the end to two but we can leave these out okay let's just try this out so let's go ahead and sign out again sign back in and let's see what we've got there we go it pops down with opacity and then it should just
04:08
pop back up again and slightly fade out when it's done great so that is our template done and our transitions in there there are tons of ways to do transitions but i find adding in these transition elements from headless ui the easiest to do and that is pretty much it for our toast we can now use this pretty much anywhere in our app that we want to so when we update our profile
04:30
details later we can override the response within fortify pass that toast message down to inertia that will get picked up with our plugin our plugin will trigger and it will show our toast now just before we go i'm going to go over to our toast plugin here and i'm going to set this down to a more sensible value like a couple of seconds and there we go that's our toast feature completely built
40 episodes•5 hrs 21 mins•8 months ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.