00:02
All right, so I'm back with our web application
00:06
opened up to our organization settings page.
00:09
Let's go ahead and start by getting that card
00:10
added into this page itself.
00:12
So within our inertia directory,
00:15
we're going to want to go into our components
00:17
and right click it and add a new file in.
00:19
We'll call this our organization access tokens card.vue.
00:24
Let's get ourselves a setup script
00:27
with TypeScript added to the top, as well as a template.
00:32
We'll start by getting our card
00:34
directly added into our template.
00:35
So we'll add our card in here with a card header
00:39
and a card title with the title organization access tokens.
00:44
Let me go ahead and collapse the sidebar away,
00:48
give us a little bit more working room.
00:49
Underneath that title, we'll have a card description
00:53
of manage tokens your organization can use to access our API.
00:58
Underneath the header itself, we'll have our card content,
01:05
which for now, let's go ahead and just put our button in
01:08
to create the access token.
01:09
So we'll do flex justify end to put that to the right side
01:13
and a margin top of four, because inevitably,
01:15
we will be putting a table in here
01:17
to list our access tokens as well.
01:19
We'll add a button in with a type of button
01:23
and the text add access token.
01:26
Now, apologies, before we get too far,
01:28
I should note that we are using ShodCM view
01:31
as our view component library,
01:33
in addition to UnpluggedIn view components.
01:36
So ShodCM view installs all of their components locally
01:39
and they're housed within this components UI directory.
01:42
So here's where that card component is
01:43
and then all the card components that we're making use of.
01:46
And then UnpluggedIn view components
01:48
is going to automatically import these
01:50
as we use them within our template
01:52
so that we don't have to worry about managing
01:53
or dealing with imports throughout the series.
01:55
So that's why I'm not taking any of the time
01:57
to actually import these components
01:59
that UnpluggedIn view components
02:00
is going to do it automatically for me and you as well.
02:03
But I do have that set to only work
02:04
on components local to our project.
02:06
So if we reach for any components from our node modules,
02:09
we will need to import those.
02:10
Okay, so we should be able to give that a save then
02:13
and use this as our starting point.
02:15
Let's go get it added onto our page
02:17
that we can actually start seeing it take effect.
02:19
So we'll want to dive down into our pages directory
02:22
within Inertia and we have a settings folder
02:25
with our organization.view page inside of it.
02:28
Within here for our template,
02:30
we have a setting shell with our organization edit card,
02:33
our organization users card
02:34
and our organization user invites card.
02:37
Each one of those being a card on the page here.
02:39
So we just want to add to this
02:41
our organization access tokens card, just like so.
02:46
Now, currently we're not accepting any props into it.
02:49
We will eventually,
02:50
but we can give that a save as is for right now.
02:52
And now if we jump over into our browser,
02:54
we should be able to scroll down a little bit
02:56
and actually see this card come to play.
02:58
So we have our add access tokens button right there.
03:00
That's what we're going to be continuing on with next.
03:03
So let's jump back into our card.
03:05
When this button to add an access token is clicked,
03:08
we're gonna want to show our dialogue
03:10
to create the access token.
03:11
So we'll do is dialogue shown and set that to true.
03:16
Go ahead and break that down
03:16
so that everything stays on the page here.
03:18
Okay, within our script then we want to define that ref.
03:21
So we do const is dialogue shown equals ref
03:25
and set that to false.
03:27
Let's go ahead and import ref from view as well.
03:31
Underneath our card then we can add that dialogue
03:34
into our page.
03:35
That too is a ShotCM view component
03:37
and pass it the view model for the open flag,
03:40
our is dialogue shown flag from our ref.
03:44
Inside of this dialogue,
03:45
we can do our dialogue content with a dialogue header
03:50
and a dialogue title of add access token.
03:55
Underneath our headers where our form is going to go.
03:58
So we can add our form in
03:59
and let's leave the at submit handler off of it
04:02
for right now.
04:03
On our form, we'll want a form input
04:06
and we can self-close that
04:07
because we need to provide it some props.
04:08
First we'll want the label of name,
04:10
set the type to text,
04:12
add a class of flex one
04:14
so that it goes the full width of the dialogue.
04:16
Find the view model.
04:17
We'll set up a form here momentarily
04:20
with a name property on it.
04:22
Then we can set this field to be disabled
04:24
when this form is processing.
04:26
Now, remember the handler we're gonna end up
04:28
sending this form to is not going to respond
04:31
as an inertia request.
04:33
Rather we're going to send this with Axios
04:35
and get back a straight JSON response.
04:37
So we're actually not gonna use inertia
04:39
for either our form or whether or not it's processing.
04:42
We'll just use simple reps for those.
04:44
So let's scroll back up to our script and add those in.
04:47
So we'll do const form equals ref with an object,
04:51
set that to an empty string for name
04:54
and then permissions, which we can set to a new
04:57
and let's use a set for this,
04:58
adding the default value to read.
05:01
Now, after our name field,
05:02
we're going to have a checkbox list
05:04
for our permission options.
05:05
So let's add that here as well.
05:07
So permission options equals
05:09
and we can just use an object dot value
05:12
of our token actions.
05:14
And I'm not getting auto-complete here.
05:16
So I'm just gonna go ahead and reload my window.
05:18
There we go.
05:19
Visual Studio Code tends to have a problem
05:20
with brand new view components
05:22
where it doesn't pick up like TypeScript
05:25
or auto-complete style things.
05:27
So just reloading the window there tends to fix that.
05:29
So let's go and try reaching for our token actions again.
05:32
There we go, that's better.
05:34
And it is now also telling me
05:35
that that should be object values.
05:37
Okay, so to reload my window,
05:38
all I did was hold command shift and P
05:40
and then search for reload window
05:42
and selected the developer reload window option there
05:45
in case that is happening to you.
05:47
Then we also have that processing flag.
05:49
So we'll add that in as well.
05:51
So processing equals ref and just default that to false.
05:54
And we can move that up with our other Boolean there
05:56
so that they're side by side.
05:58
All right, next let's go ahead
05:59
and get our checkboxes added for our permissions.
06:02
So for this, we'll do a div with a class flex,
06:05
flex call gap one margin Y three,
06:08
and we'll add a ShotCM view label called permissions
06:12
and then a form input with a type of group.
06:17
This form input component is a custom wrapper
06:19
around ShotCM views input component.
06:21
So that's why the props are gonna look
06:23
a little bit different here from ShotCM views input.
06:26
And then inside of this, we can loop over using V4,
06:30
each option in our permission options,
06:34
set the key to the option itself
06:37
and then set the class to flex items center gap two.
06:42
Within this div, we'll put our actual checkbox.
06:44
So we'll do check box and self-close that.
06:48
Since we're using a set for the permissions array,
06:51
we'll go ahead and handle this a little bit differently.
06:53
So we'll do checked equals form permissions has
06:57
and check whether or not it has the option
06:59
that we're looping over.
06:59
And then when the checked is updated,
07:02
we'll see whether or not the checkbox was checked
07:06
and that'll be the event directly itself.
07:08
So this will be a Boolean true if it was checked,
07:10
false if it was not.
07:11
So when it has been checked,
07:13
we're gonna want to reach for our form permissions
07:16
and add the option.
07:18
And when it's not checked, we'll want to remove it.
07:20
So form permissions, delete option.
07:23
And then again, we can go ahead and disable this
07:26
when our form is processing.
07:28
Underneath the checkbox,
07:29
we can put a span class capitalize of the option itself.
07:34
Then underneath our form,
07:36
we can go ahead and round the dialog out
07:38
with a dialog footer that has a button of type submit.
07:43
We set this to disabled when our form is processing
07:47
and bind it to our form.
07:49
So we'll call this our access token dialog.
07:53
And when you specify form to a button,
07:55
it will bind that button to the ID of the attribute value.
08:00
So if we give access token dialog there a copy,
08:02
go up to our form and give our form
08:04
the ID of access token dialog.
08:07
Whenever we click or hit enter with this button,
08:10
it will treat it as an actual submission
08:12
for the form itself,
08:14
despite the button not actually being
08:15
within the form's contents.
08:17
Okay, let's do our loader then within the button.
08:20
And this component does come from Lucide View Next
08:23
and it's NPM package.
08:24
So we want to actually import this.
08:26
We do VIF processing and give it a class
08:29
of margin right to H4 width four and animate spin.
08:34
Then close that off and add in our actual text
08:37
of create access token.
08:39
All right, so if we give this card here a save,
08:41
come now over into our browser and click add access token.
08:46
We actually don't see anything happen
08:48
and that's 'cause I can't spell.
08:50
So I have dialog rather than dialog here.
08:53
So I'm just gonna do a quick search
08:54
for that dialog misspelling and correct that to dialog.
08:58
Replace all of those, give it a save.
09:01
Oh, all right, there we go.
09:02
Without doing anything, it showed up now.
09:04
So let's go ahead and refresh our browser
09:05
just to make sure that I have, you know,
09:06
the latest of everything there.
09:08
Let's try clicking add access token again.
09:10
There we go.
09:11
So now we see our access token dialog here.
09:14
What we wanna do next is actually rig this up now
09:16
to the route endpoint that we set up in the last lesson
09:20
to actually create our access token.
09:22
So let's close out of that.
09:24
And I'm gonna scroll that all the way down there.
09:25
And we'll want to handle this actual form submission.
09:29
So we'll add an @submit.prevent to it
09:33
and add a function called on submit to our script.
09:36
So we'll scroll on up to our script here
09:38
and add an async function on submit.
09:42
And within here, the very first thing
09:43
that we're gonna wanna do is switch our processing flag
09:46
to true to disable our form inputs
09:49
and buttons within that dialog.
09:51
Once we have that switched on,
09:53
we can send off our API request,
09:55
getting our data back and send it using await Axios.
10:00
Now, you know what?
10:00
I actually don't think we have Axios installed here.
10:04
Inertia does use it underneath the hood.
10:06
So let's go ahead and jump over into our terminal
10:09
and just do npm i axios really quick
10:12
to get that installed within our project
10:14
as a direct dependency.
10:15
All right, we jump back into our browser there.
10:17
And now let's try to, yep, there we go.
10:19
Import Axios and we can send off a post request
10:23
to our /settings/organization/access-tokens endpoint,
10:28
passing it as its payload,
10:32
the name from our form.value name,
10:36
and then the permissions as an array
10:39
from our form value permissions.
10:42
Once we have that response back,
10:43
we can go ahead and switch our processing flag back to false
10:47
as it's now done working.
10:49
Then within our browser,
10:50
let's go ahead and right click and inspect.
10:53
And let's jump into the network panel here
10:54
so that we can take a look at the direct network request
10:57
that's sent.
10:58
And let's try to add in an access token.
10:59
We'll just give this a name of test01.
11:02
And let's check all of the permissions
11:04
just to make sure that they're all going to work okay.
11:06
Let's create our access token.
11:08
And we see that sent off with our post request.
11:10
And let's check out and see what the response is.
11:12
So for our response,
11:13
we get back our access token property with its ID,
11:16
the token's type, the token's name,
11:18
the access token itself,
11:20
which is what we'll inevitably want to do display
11:22
to our users so that they can copy it to their clipboard
11:25
and make use of it with our API,
11:27
the token's abilities when it was created
11:29
and when it was last updated.
11:30
Furthermore, we should now be able to jump back
11:32
into TablePlus, jump into our API database
11:36
and take a look at our access tokens table
11:38
to see that we do indeed have this record within there
11:41
with the name of test01 and its abilities,
11:46
I misclicked, there we go.
11:47
Its ability is a recreate, update and delete.
11:50
The tokenable ID here specifies that the access token
11:54
is for our organization with an ID of one.
11:56
If we click on the little arrow icon there,
11:58
it will actually take us to that organization record,
12:01
verifying that that is the foreign key relationship
12:04
for that.
12:05
And then the type here is the purpose of the token,
12:08
which is an API token.
12:10
So awesome.
12:10
That's all working A-okay.
12:12
Let's go ahead and just entertain ourselves
12:14
and create another one.
12:15
We'll just read and create.
12:17
And we'll call this test02.
12:18
Send that off.
12:19
Let's take a look at the next request for that.
12:21
Get back an ID of two with a name of test02
12:24
and abilities of just read and create.
12:26
Awesome.
12:27
So that's working perfectly fine now.
12:29
The next step of this form flow is to,
12:32
rather than show the user the form after they've submitted,
12:34
to instead show the user the token directly
12:37
so that they can copy it to their clipboard.
12:38
But before we do that, let's get these tokens listing
12:41
within our organization access tokens card.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!