Adding the Organization Invite User Interface

In This Lesson

We'll wrap up our invite send & accept flows by adding the UI needed to view pending organization invites as well as send new invites. We'll then walk through tests of each flow scenario to ensure all is working.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

All right, first we wanna jump back into our organization controller, the one for our settings section, and get a list of pending invites
that we have inside of our organization. Currently that would be none because we haven't sent any yet, but we'll also do that here in this lesson. So let's do node ace make action, put this inside of our organizations folder
called get organization pending invites, and we can clear that out. Jump back into our text editor and let's jump into that get pending invites action.
We want to take in our organization of type organization and grab that out of our params. Here we want to return organization.related,
reach through our invites relationship and query from there. And we specifically wanna check where the accepted at
and the canceled at are both null. Because remember back to the last lesson whenever we discussed that if they have a value, then that means that the invitation has been accepted
or has been canceled and then makes the invitation as a whole invalid. And then we can go ahead and order these by the created at date in a descending fashion.
So it goes most recently invited to oldest invited. Okay, we're good there. Jump back into our organization settings controller because we now need to add our invites in
as an async method, get our comma down there, const pending invites equals await get organization pending invites handle
and pass the organization in. Then we'll want to return organization invite ETO.fromArray and pass our pending invites in. We can give that a save.
And next let's go ahead and set up the card and then we'll work on our settings organization page. So let's scroll back down to our inertia directory, components, right click that, new file.
And we'll call this our organization user invites card.vue. Script setup lang of TS. And then we'll also add that template in there.
Within our script, we want some props. So we'll define props. And inside of here, we're gonna want those invites,
which will be an organization invite DTO array. And then we also want our applications roles, which will be a role DTO array there.
After our props, we're gonna want our invite form. So for this, we can use form from inertia view three. We'll take in an email, which will be an empty string by default.
And then the desired role, the invited user should be assigned should they accept. And for this, we can use our roles enum.
So we'll import that dot and default it to member. So since we're using our enum there, what that's gonna do is just give it a value of one by default, which one put in our database,
we'll map to our member role record. Then we also want a function to get the role name for display. So we'll take in a role ID of type number
and then return props roles, find the role where the role ID is equal to the role ID being passed in.
And then we just wanna grab the name off of that. As for our template now, as implied by our component name, we want this to be a card. So we'll get our card going here with a card header
and a card title of pending organization invitations and a card description of the following users
have been invited to your organization. And then underneath our card header, we will have our card content. The first thing that we'll have inside of here
is our table listing out our pending invitations. So we'll have a table header with a table row and a table head. And the first column is going to be the user's email
that we've invited. And then the second table column is gonna be the role that we want that user to have should they accept. And then we have our last table head,
which will eventually be our cancellation action. Underneath our table header, we will then have our table body and inside of the table body will be a table row. This table row is where we're gonna wanna loop over
each of our invitations. So we'll add a V4 invite in invites with a key of the invite ID. The first cell inside of our table row,
so table cell is gonna be the invite email. Second cell is going to be a call to our get role name and pass the invite role ID into that.
And then the third for right now, we're just gonna go ahead and leave blank. We'll fill that in later on. Underneath our looped table row, we also wanna put an additional table row in
that we display if we don't have any invites. So we'll do an inverse check against our invites length there. So if we don't have any invites,
we'll do a table cell that spans all three of our columns and we'll put a div with a class text center text slate 600,
no pending invites. Underneath our table, but still within our card content, we're gonna put kind of a card within a card here where we can actually send an invitation.
So to differentiate this a little bit, we'll do a div class, adding a four, make it rounded and give it a BG slates of 100 with a margin top of eight. Then we'll give it an H4 heading
with the class font bold invites new member. Underneath that, we'll do a little bit of a descriptive text with text slate 400,
text small margin bottom three that says invite a new member to your organization. And then underneath that is where our actual form will go.
On the form, let's go ahead and tack on a class, flex, flex, wrap items, end and a gap of four. And then we can also tack on our @submit,
prevent invite form.post and send that out to our settings, organization, invite. And we also want to reset the form
and preserve scroll on success. So let's go ahead and we can just add in a non-reactive object called invite form options
that on success follows the invite form reset method and also preserve grow, we can set to true. Then we just need to take this invite form options
and give it a copy and paste it down as the second argument on our post there. Inside of our form then, we'll have our form input and this one will be for our email.
So we'll give it a label of email, a type of email, a class of flex one so that consumes as much space as possible,
a view model of invite form email, our error of invite form errors email,
set it to disabled when our invite form is processing. And then we also want to make that required. All right, then after that, we have our role selection.
So we can use our form input as a select input here as well. It won't be self-closing as we'll need to put our select options inside,
but we can give it a label of role, a type of select, a view model of invite form role ID,
error of invite form errors role ID. And then we can set this as well to disabled when our invite form is processing.
As for the select options, so inside of our form input here, we'll do a select item loop over each role in our roles,
set the key to the roles ID and set the value to role.ID there as well. Inside of the select item for the display text, we can put the roles name there.
Then lastly, we're gonna have a button of type submit and set it to disabled when our invite form is processing. Inside of there, we can do our loader icon
from Lucidview next if our invite form is processing. Now we can also give it a class margin right to height four, width four and animate spin.
With the text of send invite. Last thing to do is to jump now back down into our settings organization page so that we can add this card in, but we also need to add our new prop in as well.
So it's gonna be called invites as our organization invite DTO array. And then we can add our card in
as organization user invites card, providing it our invites as a prop. So invites there and then roles as roles there as well.
And a member of ours, Gribble, gave me a note that in view 3.4, they actually added a shorthand syntax to where if the prop name and the variable name that you're passing in match.
So as all of ours do right here, you could do a simple shorthand where you just leave off the equals and it will derive that as user from user. So if you prefer that shorthand,
you also have that option available to you as well if you're using view 3.4. I'm gonna go ahead and leave everything consistent with the rest of our project here as is. But thank you again for that note there, Gribble.
And with that all set, we should be able to jump back into our browser now. I see an alert here already, at least one template or script. I think that's just, we need to refresh there. Nope, I must not have saved something.
All right, let's jump back into here. Looks like I saved this. Take a look at our recent files. Looks like I saved everything in here. Let's try, nope, sure enough, I didn't save this. Okay, let's save that then. That would definitely do it.
Jump back into our browser. Give that a refresh one more time. There we go. Okay, so we scroll back down now and now we see our pending organization invites section. We currently have no pending invitations,
but we now have a form down here as well where we can send out a new invite. Our form input for our role is currently missing our role options.
So let's go take a look at that while we're here. I see roles there, scroll back up. We've got it in the props. Let's go take a look at our page. Ah, role. Yep, that needs to be roles there.
Let's give that a save now. Jump back into our browser. Give that one more refresh. Sorry about that. Scroll back down. There we go. Now it defaults to member, but we also have admin there as an option.
Cool, so let's go ahead and give this a test. So we'll do test1@invite.com and we can leave that as member. Go ahead and send that invite. And there we go.
So now we have sent an invitation to test1@invite.com who currently does not exist in our organization. So they'll need to go through our registration flow. So since that invitation sent,
we should be able to jump back into MailTrap, which we're sending our SMTP test emails to. Jump into our inbox here. And there we go. There is our, you have been invited to join my second organization.
And it's sent to test1@invite.com. If we click on that, we see our email here. And we can see the full link right down here with our signature right there. So if we tamper with that in any way,
we should get an error. And then it's also an absolute URL with the origin of our server prefixed on our route. Now at present, we're already logged into our organization.
So if we were to click on this, we'll open it up in a brand new tab, but then it will give us the warning. Your email does not match the invitation because we're already logged in. And the user that we're logged in with
was not the user that we sent the invitation to. So that flow works okay. But what we do need to do is jump back into our application now
and log out in order to test all of this. So let's jump back now over into MailTrap. Give that one more click. And now we're sent to our registration page
because this user does not exist in our database yet. Now we have the invitation that we're working with that already knows what email it's meant for. So if the user tried to type in something that's not meant for the invitation there,
they're gonna end up getting an error, that same error that we just saw where the email does not match the invitation. So what we can do in that case is jump back through to our registration flow.
So if we jump back into our register controller here, in our show method, we can go ahead and grab our session.
Const inviteId equals session.getInvite_id. And then we can do an if inviteId,
const invite equals await organization, invite.find and pass the inviteId in. Now, if we can't find the invite by its ID,
what we wanna do is then clear that session out. So session.getInviteId, if not invite, wrap that in brackets there as well.
Otherwise, what we wanna do is share that with Inertia so that we have it readily available to work with inside of our page. So now we can jump back down into our register.view page,
do const props equals define props. And now we may or may not have this. We'll do invite optional of type organization invite.
And we also need to cast that to our DTO there. So let's jump back into our register controller there and share the invite as a new organization invite DTO. Invite just like so.
And now we can jump back into our register page. And there's a couple of different ways that you can do this, but ultimately what we're after is that they register with the same email that they've been invited with. So what we wanna do is on our form,
set this to props invite email or an empty string. And since email's optional, we need to add a question mark in there. And then down on our email input,
we can add in a disabled leg if we have an invitation. So if we're working with an invite, we'll just kind of pre-populate the email and disable that input altogether.
You could also just hide this field altogether as well. For our case, it's gonna be good to see what the email is here for debugging purposes. Okay, so let's jump back into our browser.
Now we should still have that invite ID on our session. And sure enough, whenever we refresh, there it is right there as a disabled field. So for this user, we just need to add in the full name. I'm just gonna put test1 there
and then something for the password. If we register, there we go. They have now been added as a registered user inside of our application. And they've also accepted the invitation into my second organization.
So if we jump back now into this user's organization settings, we see them as a full-fledged member of it with the role member as we've assigned. And they're now out of our pending invitations.
Now, despite this user being a member inside of this organization, currently they can still invite somebody even as an admin. That's gonna come in our authorization step in the next module.
So we will take care of that, don't worry. For now, what we wanna do is continue testing our flow. So let's get back to this page as our admin user. So let's go ahead and log back out.
And rather than logging back in as our test user one, let's first register a new user so that we can test the preexisting user flow here. So we'll do testinvite2.
I think we just call the last person test1, but that's all right, the name doesn't matter too much. And then we'll do test2@invite.com, something there for the password, register this user.
It can create them something for the organization. So now they're already a member of an organization. We can go ahead and log them out.
And now let's log back in as our test user one@test.com, something there for the password. Jump back over to our organization settings
and let's invite that test2@invite.com. And this time we can also test them as an admin as well to make sure that's working. Send this invite.
And now they have been invited as an administrator. And since they already exist inside of our database, we should be redirected when we log out and click that link inside of MailTrap
to the login page rather than the register page. So let's click join organization. And sure enough, here we are at the login page.
Do test2@invite.com, something there for the password. Hit enter. Okay, I spelled it wrong. Something there for the password, enter. There we go.
Our invitation has been successfully accepted and we're now inside of our second organization, which we've been invited to. Jump back over into our organization settings and we can see exactly that.
We are now a full-fledged member and our invite has been moved out of the pending state. The last flow that we need to check is for a user who's already authenticated.
So let's log out one more time, register one more time. Test invite three, test3@invite.com, something there for the password.
We create our organization. And now we need to log back out and log back in as our test user one@test.com, something for the password.
Jump back over into our organization settings, jump back down to our invitation section and invite test3@invite.com. Doesn't matter the role here, we've verified that they both work okay.
Send the invite, log out one more time, log in as test3@invite.com, something there for our password.
Okay, we're logged back in as this user. Now we can jump back over to MailTrap, click on our new email. We're already logged in as this user. So now whenever we join this organization,
we should be redirected right back to our courses index page. So let's click join organization. And sure enough, there we go. Invitation successfully accepted
and we're redirected back to our courses index page. And there is my second organization, which we can now freely switch to and jump back over to the organization settings
to see that we are a member of. Awesome, so all of the valid steps for our invitation system are working perfectly fine. Let's go test now the invalid steps.
So let's log back out here. We've already verified that the email match works whenever we first tested our system. So let's jump back over to MailTrap now.
The signed URLs themselves should still all be valid. So if we right click on this, copy the link, and let's jump back over, we can close out all these extra tabs that have opened up,
get a new tab going. And let's paste that in and go to it. Okay, we've got redirected to the login page, but that's because we don't actually check to see whether or not it's accepted or what have you until after the user's logged in.
So let's do test3@invite.com, something there for the password, log them in. And there we go, we see this invitation's no longer valid because it's been accepted or canceled.
Now, currently with the way that we have this set up, this is going to block our user from being able to log in or supposedly. So we are actually logged in. If we refresh there, there we are. But to our user, it's going to appear
like their login did not succeed. So what we wanna do instead is probably handle that a little bit more gracefully. So let's jump back into our accept organization invites,
scroll back up to here, and we can probably use our message system here to our advantage. So rather than throwing an unauthorized exception,
we can instead return, we can set the invite to null, we can set the message to something like what we had in our exception.
This invitation is no longer valid. And we can also add in a state of error onto there
and then jump back down here and do a state of success. Okay. And then we wanna jump into our web register action and update our flashes here.
So we'll switch the success to result.state. And then we still have our result message there to handle that appropriately.
Let's jump back now over into our web login to do the same. So switch this to result.state, and then we have our result message there already.
And lastly, into our organization's controller where we want to switch this one here as well to result.state. Okay. Give that a save. Jump back into our browser.
We shouldn't need to log out or anything. We should just be able to put the URL inside of here, hit enter. And we did not get our flash message down there whenever we did that.
So let's jump back into our organization controllers, accept invite method, and let's just console.log our result here just to make sure we're getting back what's expected.
So let's jump back into our browser one more time and try sending off that signed URL one more time as well. Jump back into our terminal. Where we have our server running. And sure enough, we get back our state of error
and our message of this invitation is no longer. Ah, we need this to be our errors bag. My bad. That's where I expected to plop that at. So let's jump back into that handle method.
Switch this from our error to our errors bag, which is where we're handling more of our exceptions. Give that a save. Jump back into our browser. And let's try this one last time.
So let's jump back into here. Give that a paste. Hit enter. There we go. An error occurred. This invitation is no longer valid. Awesome. So we're getting that warning okay.
The last thing that we want to check is to make sure that we also verify the signature appropriately. So this long bit right here being our signature,
this is being checked within our organization controllers, except invite. It's one of the first things that we're doing right here to make sure that that has not been tampered with in any way
and has also not expired, even though we're not setting an expiry on it. So inside of here, if we just go ahead and tamper with that URL slightly,
I just added a little bit of an extra string there to it. Hit enter. There we are. We see an error occurred. An invalid invitation URL was provided. So awesome.
It seems like our entire flow here is working perfectly fine now. Next, what we need to do is inside of our organization settings, add the ability to cancel a pending invitation.
So we'll do that next. First, let's jump back into our correct account. So testuser1@test.com. This is the administrator that we've been working with. There we go.
Organization settings.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.