Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

03. Modifying registration for usernames

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

Because our forum relies heavily on usernames, we're going to modify the registration flow so we can include the username here, as well as the user's profile information page, and they'll be able to change their username if they need to. So before we do anything, the first thing is just to generate our a new migration to add the username to the users table.

00:23

So let's go ahead and do that first of all. And if we open up this add username to users table, we really simply just need a string in here. And of course, we're going to call that username. And really importantly, we want this to be unique, we don't want anyone else to have the same username. Of course, we'll be validating that as well. To drop this,

00:45

we're just going to drop the column. So drop that username, and we're done. So we can run php artisan migrate here. Because we already have a user in here, that's not quite going to work because it's not nullable. Let's get rid of that user and we'll re-register in just a sec. Okay, so now that we've done that, let's go over to the user model. We know that this needs to be

01:06

fillable. So let's add that to the fillable array. And the first thing that we're going to do is modify this registration flow. So let's check this out. With Breeze, under auth, we get the registration or registered user controller. And with this, this is going to render out a view here auth register. So that's, of course, within inertia. So under our views in inertia under auth,

01:32

let's head over to register. And let's switch this up, we won't worry about the form just yet, we'll just get this on the page, first of all. So these divs here contain a label and input and an error message. So I'm just going to paste this to the very top. And we're going to keep that as autofocus. We don't necessarily want autocomplete on that because the username

01:54

probably something completely different to what the browser is going to suggest. And we're going to get rid of autofocus on the name here, because that's now the second option. So up here, let's start to change this around. So this is now going to be username, the text value for the input label will be username, the ID will be username. And we'll hook this up to form username, although

02:18

we've not added that yet. And then down here, the error that we want to get back is going to be username. So if we head over, we've now got a username in there, just go ahead and add in some margin on the top here, can see that each of these have a margin on the top of four. And that should look good. Great. Okay, so the next step is to add this to the form up here. So let's add the username

02:43

in here with an empty string. And this will get sent through when it gets submitted just here with all of the other data for registering. Okay, so now we've done that we can head back over to the registered user controller. And we can modify how this gets stored. We also want to modify how this gets validated as well. So we'll do that here. And then the storage just here. So the username,

03:06

we can actually pretty much take from the email and just copy this up here, because it needs to be unique. So we can just keep that same role. So this is required, it does need to be a string, it doesn't need to be an email, and it needs to be unique to the users table, which we're doing with the unique rule and passing through the fully qualified namespace of the user.

03:26

So now we've got the validation role in, let's just go ahead and add in the username to the registration section, where this actually creates the user. And that should be it. So let's go ahead and just try and register. And I'll type my name in there, email, and password, and register. Great. Let's go over to the database, have a little look at this. And sure enough, my username has been

03:49

stored. So we know that's working really nicely. If we just log out real quick, head over to register, and try and register an account with the same username, filling in all this other data, which is client validated. You'll see that we get an error here, the username has already been taken like the email. Okay, so I'm going to go ahead and log in now instead. And let's go ahead and look

04:10

at modifying the profile page, which is a very, very similar process. So we might want the user to change their username, in which case we need to modify. If we go over to the profile controller, and we have a look here, we again are just passing through all of this data here to this edit page. So we'll need to hook that up. And then when we update this, this actually uses a form request

04:36

for the validation. So let's head over to the edit page, first of all. And let's just do pretty much the same as we did before. So we're going to go ahead and open this update profile information form, which is just a component separate to this. And you can see the form data in here. And we just want to go down to where we've got this, do pretty much the same thing.

05:01

And we'll just switch this over to username and just make sure for the name, we're not autofocusing that one. Great. Okay, so we'll just do pretty much the same thing as we did before. So switch the username over here. And same for this. And form.username this time. And autofocus. And again, we'll get rid of autocomplete.

05:24

And switch over the error. Great. Okay, so if we head over now, sure enough, we have the username in there that we can enter. Now, the first thing is we need to actually get back the username that the user currently has. Now, the user is extracted from the authuser props that are passed down. We saw that over in the handle inertia requests middleware. So we can just basically add another

05:48

item to the form and just reference that username. And we should now see our username in there. Great. So to go ahead and actually update this over in the profile controller, we have the data being filled within the user, which comes from only the validated data, which is fine. So we only really need to update this in one place. We'll head over to the profile update request,

06:11

which is under our form requests section. And let's come down here and just add this in. Once again, very similar to email. So we can just copy this rule across here. And we can go ahead and change that to username. We want this to be required and max 255. We can actually change this rule because 255 for a username is quite a lot. And again, it needs to be unique to the

06:34

user class, but ignoring the user that's currently updating this or have a clash. So I'm actually going to set the username maximum to 20. And we'll do that over in the registered user controller as well, where we added these rules. So let's change that over to green. Okay. So let's just try this out. Let's save this out normally. That looks like it works. Let's change the username over,

06:57

save it. And again, yeah, it looks like it worked. And of course, we'll have that validation rule in there. So we can't choose a username that's already in use. Okay. So now our entire flow from registering to updating our profile information, we now have a username, which is going to be displayed all over the forum.

Episode summary

In this episode, we tackle an important aspect of user management for our forum: usernames! Since our forum depends heavily on having unique usernames for each user, we work through updating the registration process so new users can pick a username when they sign up.

First, we update the database to include a new username field for users and make sure it's unique. We deal with some migration quirks, especially around existing data, and make sure everything's set up correctly.

Next, we dive into the registration form. We edit it so it asks for a username, ensure the input gets validated properly, and confirm that our database actually stores this new info. We even test the validation by trying to register two users with the same username, confirming it catches duplicates just like with emails.

To round things out, we add the option for existing users to change their username from their profile page, walking through pretty much the same steps as before. We limit usernames to a max of 20 characters (because no one needs a 255-char username!), handle validation so people can’t take someone else’s username, and test everything to make sure it works.

By the end of this episode, user registration and profile management both support unique usernames, streamlining how people are identified across the forum.

Episode discussion

No comments, yet. Be the first!