This episode is for members only

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

Get started
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
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

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.
62 episodes6 hrs 54 mins

Overview

Ready to build a forum with Inertia and Laravel?

Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.

So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!