Sign in Get started

This episode is for members only

Sign up to access "Laravel Teams" right now.

Already a member? Sign in to continue

Playing

10. Updating a team name

Episodes

0%

Your progress

Total: 4h 36m
Played: 0m
Remaining: 4h 36m

Join or sign in to track your progress

01. Introduction and demo

02. Setup with Pest

03. Building the user teams relations

04. Creating a personal team when registering

05. Leaving all teams when an account is deleted

06. Tracking the current team

07. Showing team details in the UI

08. Switching to another team

09. Authorising team switching

10. Updating a team name

11. Basic roles and permissions setup

12. Team roles and permissions middleware

13. Authorising current team updates

14. Testing team permissions through HTTP requests

15. Leaving a team

16. Displaying team members

17. Making team members look better

18. Removing a team member

19. Preventing self removal from a team

20. Storing invitations

21. Validating invitations

22. Authorising team invitation creation

23. Displaying invitations

24. Revoking invitations

25. Sending an invitation email

26. Accepting an invitation

27. Displaying a modal to change a member’s role

28. Updating a member’s role

29. More authorisation and checks for role changing

30. Fixing up the email sending test details

31. Fixing and validating email addresses for invites

32. Tidying up @can directive checks

33. Detaching roles when removing users

34. Adding an extra layer of protection to the team middleware

35. Getting related models through teams

36. Building a helper to access the current team

37. Getting all related models through all teams

38. Creating new teams

Transcript

00:00

So let's make a start on the edit page here where we can head over to our team settings. At the moment this link is over to the profile because we just copied the link over,

00:08

but that's not too much trouble to go ahead and just create out a route for this. So let's go and create out an edit route just here, and for now let's just go ahead and leave this empty and register the route. So let's just grab what we have here and paste it down.

00:24

This is just going to be a get route because it's just going to show us the edit page. So let's just do forward slash team and let's set this to the edit method that we have here, and we'll say team.edit. Okay, so we can head over to our navigation and hook this up properly now.

00:39

So let's head over and set this to team.edit, and this is always going to assume the current team that we are within. So let's click on team settings and there we go. Okay, so we know how to get the current team.

00:52

So if we head over to the team controller, in here what we can do is take the request in from Laravel, and we can just die dump on the current user's team just to make sure we have that available. So request user and current team,

01:11

and let's just make sure that we have that available in there, and yeah we do. Okay, so let's return a view from here, and this is going to be something like team.edit, and what do we want to pass down?

01:21

Well, we want to pass down the team that we're currently editing, which again we can just pull from the current team in here. Okay, let's make out a view for this. So phpArtisan make view and team, let's just see what we've called that, team.edit.

01:38

Yeah, we'll just keep it at team.edit, and now that we've done that we can pretty much copy over the profile page, because it's going to look very similar with each of these boxes. So we'll do that just to save a little bit of time.

01:52

So if we head over to profile and edit, let's grab this, and you can see that this just includes within each of these containers a bunch of partials, and we'll go with this same pattern. So let's go over to team and edit, paste this in, we'll change this over to team,

02:09

and then let's just get rid of these two here, because we can copy and paste these over, and this is going to be the team edit form with things like the name, or anything else that you've included.

02:20

Okay, there we go. So here's our team edit form. Again, what we can do is pretty much just copy over what's already here. So if we head under resources, views, and profile partials, and let's say update profile information form,

02:36

we could probably just take all of this, and create out our own partials directory in here. So let's create a partials directory, and let's create this out, edit team form, something like that,

02:48

.blade.php, and we'll paste this in. So a lot of this we're not going to need, so let's just change this over to team information, and we'll change this text over as well to update your team's information,

03:03

and then down here we've got a form in here for our verification, which we're not going to need, and we've got a form here that posts through to somewhere. So let's just tidy this up, get rid of what we don't need,

03:14

and we should be good. So we'll keep the name, because that's pretty much what we're dealing with here, in terms of just the team name.

03:20

We will keep the save button, we'll keep this session status, which shows a temporary saved icon, but let's call this team updated,

03:29

and I'll show you how we can flash that in just a bit. Okay, so let's just update this. So we've got username, which is not going to be the case,

03:38

it's going to be team name, and we've got errors, got dot name, that's absolutely fine. We can also focus this,

03:45

we don't necessarily need to auto-complete this, and again, you can change this up to do pretty much whatever you want. So if we go over to our team edit,

03:53

and we include this partial, let's go ahead and include team partials, edit team form, we should see that with the current team name.

04:04

Okay, great. So let's go through and save this, which at the moment is not going to work, and again, we'll look at authorizing this as well.

04:13

Okay, so to get started on this, let's go back over to our team controller, and let's create out an update method, which will take in our request,

04:24

and it will also take in the team that we are trying to update, so we can authorize that really easily. For now, let's just go ahead and return back,

04:33

and we'll hook this up in our web route. So we'll take this route here, and this is now going to be a patch request to the team that we are trying to update,

04:41

so we can pull that in with route model binding, and let's hook that up to the update method, and we'll call this team and update. So back over to our edit team form,

04:52

we can now update this to go through to team update, and we can pass that team in for route model binding. So that should now submit through properly and just redirect us back.

05:07

Okay, let's go ahead and just fill this in really quickly. So we do need to validate, but let's just leave that until we build out our form request. So the most basic way we can do this is just team update,

05:19

and then from our request, we can grab in only the data that we need. So that's just going to be the name. So this should now update our team information.

05:30

If we hit save, there you go. You can see that that is now getting updated. Let's build out a really quick test for this. So let's head over to our team controller test,

05:39

and we'll just build out a really simple test for this. So it can update team, and let's go ahead and fill this in. So again, we're going to need a user who owns that team

05:49

who can actually update it, and we'll look at the authorization check in just a second. So let's say user factory and create. We want to act as that user,

05:59

and we want to send a patch request directly down to that route. So again, we can use our route helper here, team and update.

06:07

We need to pass the team in, which is just going to be the user's current team. So let's just take the user's current team in there and assume that they are updating that one,

06:16

and we want to send across a load of data. So let's pass across a new team name, and we'll assign it at the same time here so we can check this.

06:26

So let's say a new team name, and then down here, we want to assert that this redirects us back. So assert, redirect.

06:36

So we want to make sure we redirected back properly, and then we just want to expect to see either that that's in the database or that the current user's team has their details updated.

06:46

So we could just say user. Now, really importantly here, we're going to say fresh so we can get the fresh data out of the database,

06:52

and we're going to say current team and then name and expect that to be the new name that we've provided. Okay, let's go ahead and run our tests here. So we'll just run this under team controller test

07:05

and there we go. It can update team has passed nicely. So we know that that is now working. Let's go ahead and add some authorization to this,

07:14

but also bear in mind that later when we look at roles and permissions or very soon when we look at roles and permissions, we're also going to need to make sure

07:22

that the user who is within that team has permission to actually update the team details. So we can still make sure they belong to the team, which kind of makes sense,

07:32

but we can also check if they have permission a little bit later to see if they can update. Okay, so in here,

07:38

let's build out a form request for this. So let's go ahead and make out a request here and let's call this team update request. Kind of makes sense.

07:50

And we'll just switch this out like we did before. Okay, so over to our team policy, let's create out a new method in here specifically for updating a team.

08:03

Now, what are the conditions? The last thing that we're going to do is return true, but then we're going to make this defensive. So we're going to say,

08:09

well, if they don't belong to the current team or the team that we're trying to update, then just return false. So we already know how to do that.

08:17

We can just say teams contains team. And if they don't belong in that team, we'll return false. So now we can only update a team if we belong in there.

08:27

Let's update our form request to pull this in. So auth, or we could say this user can update. And remember with root model binding, we get that team in there.

08:41

So let's go ahead and run our test again. And that works. But now let's create out another test for a user who doesn't own that team.

08:49

So let's go over to our team controller test. And down here, let's make sure that they can't update this if they're not within this team.

08:56

So cannot update if not in team, or what if you wanted to say. So how do we do this? Well, we've already kind of done this before.

09:03

So we basically want to create out a user who remember will be given a personal team, but then we want to create another user and we want to try and update their team information.

09:16

And there's loads of different ways that you can do this. But basically we could just say acting as another user, let's try and update the user's team. So we can patch through to team update,

09:31

giving the user's current team. In fact, let's do this the other way around. So let's say acting as that user, let's try and update the other user's current team.

09:45

And let's pass some details down to this. So we're going to say something like a new team name. And what are we going to do? Well, we're going to assert that this is forbidden.

09:55

Now this also reminds me, we haven't validated the name that we want to pass down. So we'll do that in just a second. Let's just make sure this passes first.

10:04

Okay, let's run our test for that. And there we go, great. So we know that now this is going to be a forbidden if they do not belong to that team.

10:12

Okay, so over in our team update request, this is where we can just now very easily add in some validation rules for things like the name. So let's just say required and let's say max 255,

10:23

which is our database constraint. Now you can add a test for this validation if you want to. I'm not going to bother here. Let's just try this out in the UI and see if it works.

10:31

And yeah, we get a please fill in this field. So let's head over to our edit team form and just search for where this is required. Get rid of that temporarily

10:39

and just try and get rid of that. And there we go, it works. So you can add a test in there for validation if you want to. Let's leave that for now.

Episode summary

In this episode, we dive into creating the "Edit Team" functionality, giving users the ability to update their team's name. Here's how we tackle it step by step:

We start out by setting up the edit route and hooking up the navigation to point to our new team settings page. Then, in the controller, we pull in the current team for the user and return a view for editing. For the front end, we reuse some of the design from the profile edit page to keep things consistent and efficient, then swap out the necessary bits to make it team-specific.

Next, we wire up the actual form to update the team name, handling the PATCH request in the controller. We make sure this is all connected with route model binding so that updating the team details works as expected. To make sure everything's locked down, we implement authorization so only users in the team can make changes. We add this check via a policy and confirm it with a couple of tests—one for when a user is allowed to update, and another for when they're not.

Speaking of tests, we add simple ones to make sure everything is working as intended: the right users can update, unauthorized users can't, and the team name changes as expected in the database. Lastly, we tighten things up with validation, making sure the team name is actually provided and doesn't exceed the maximum length.

By the end of this video, you'll have a fully working "Edit Team Name" form, complete with view, controller logic, policy-based authorization, validation, and tests to cover the basics!

Episode discussion

No comments, yet. Be the first!