import CRUDBase from '../CRUDBase.js'
import { session } from '../../service/Session.service.js' ;
class ClientResource extends CRUDBase {
constructor ( ) {
super ( )
this . endpoint = '/api/v1/oauth/clients'
this . required _fields = [ 'name' , 'redirect_url' , 'api_scopes' ]
this . permission _base = 'v1:oauth:clients'
this . item = 'OAuth2 Client'
this . plural = 'OAuth2 Clients'
this . listing _definition = {
display : `
OAuth2 clients are applications that support authentication over the OAuth2 protocol . This allows you to add a "Sign-In with XXX" button for $ { session . get ( 'app.name' ) } to the application in question . To do this , you need to create an OAuth2 client for that application , and provide the name , redirect URL , and API scopes .
< br > < br >
You must select the API scopes to grant this OAuth2 client . This defines what $ { session . get ( 'app.name' ) } endpoints the application is allowed to access . For most applications , granting the < code > v1 : api : users : get < / c o d e > a n d < c o d e > v 1 : a p i : g r o u p s : g e t < / c o d e > A P I s c o p e s s h o u l d b e s u f f i c i e n t .
< br > < br >
This method can also be used to access the API for other purposes . Hence , the expansive API scopes . $ { session . get ( 'app.name' ) } uses Flitter - Auth ' s built - in OAuth2 server under the hood , so you can find details on how to configure the OAuth2 clients < a href = "https://flitter.garrettmills.dev/tutorial-flitter-auth-oauth2-server.html" target = "_blank" > here . < / a >
` ,
columns : [
{
name : 'Client Name' ,
field : 'name' ,
} ,
{
name : '# of Scopes' ,
field : 'api_scopes' ,
renderer : ( api _scopes ) => api _scopes . length ,
} ,
{
name : 'Redirect URL' ,
field : 'redirect_url' ,
} ,
] ,
actions : [
{
type : 'resource' ,
position : 'main' ,
action : 'insert' ,
text : 'Create New' ,
color : 'success' ,
} ,
{
type : 'resource' ,
position : 'row' ,
action : 'update' ,
icon : 'fa fa-edit' ,
color : 'primary' ,
} ,
{
type : 'resource' ,
position : 'row' ,
action : 'delete' ,
icon : 'fa fa-times' ,
color : 'danger' ,
confirm : true ,
} ,
] ,
}
this . form _definition = {
fields : [
{
name : 'Client Name' ,
field : 'name' ,
placeholder : 'Awesome External App' ,
required : true ,
type : 'text' ,
} ,
{
name : 'Redirect URL' ,
field : 'redirect_url' ,
placeholder : 'https://awesome.app/oauth2/callback' ,
required : true ,
type : 'text' ,
} ,
{
name : 'API Scopes' ,
field : 'api_scopes' ,
type : 'select.dynamic.multiple' ,
options : {
resource : 'reflect/Scope' ,
display : 'scope' ,
value : 'scope' ,
} ,
required : true ,
} ,
{
name : 'Client ID' ,
field : 'uuid' ,
type : 'text' ,
readonly : true ,
hidden : [ 'insert' ] ,
} ,
{
name : 'Client Secret' ,
field : 'secret' ,
type : 'text' ,
readonly : true ,
hidden : [ 'insert' ] ,
} ,
] ,
}
}
}
const oauth _client = new ClientResource ( )
export { oauth _client }