Move all front-end public field definitions into constructors for iOS support

app/assets/app/auth/MFAChallenge.component.js

@@ -38,14 +38,18 @@ export default class MFAChallengePage extends Component {
     static get props() { return ['app_name'] }
     static get template() { return template }
 
-    loading = false
+    constructor() {
+        super()
 
-    verify_code = ''
-    verify_success = false
+        this.loading = false
 
-    error_message = ''
-    other_message = ''
-    t = {}
+        this.verify_code = ''
+        this.verify_success = false
+
+        this.error_message = ''
+        this.other_message = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/auth/MFADisable.component.js

@@ -28,12 +28,16 @@ export default class MFADisableComponent extends Component {
     static get template() { return template }
     static get props() { return [] }
 
-    app_name = ''
-    step = 0
-    loading = false
-    error_message = ''
-    other_message = ''
-    t = {}
+    constructor() {
+        super()
+
+        this.app_name = ''
+        this.step = 0
+        this.loading = false
+        this.error_message = ''
+        this.other_message = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.app_name = session.get('app.name')

app/assets/app/auth/MFARecovery.component.js

@@ -38,12 +38,16 @@ export default class MFARecoveryComponent extends Component {
     static get template() { return template }
     static get props() { return ['app_name'] }
 
-    verify_success = false
-    loading = false
-    recovery_code = ''
-    error_message = ''
-    other_message = ''
-    t = {}
+    constructor() {
+        super()
+
+        this.verify_success = false
+        this.loading = false
+        this.recovery_code = ''
+        this.error_message = ''
+        this.other_message = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/auth/MFASetup.component.js

@@ -61,19 +61,23 @@ export default class MFASetupPage extends Component {
     static get props() { return ['app_name'] }
     static get template() { return template }
 
-    loading = false
-    step = 0
+    constructor() {
+        super()
 
-    qr_data = ''
-    otpauth_url = ''
-    secret = ''
-    verify_code = ''
+        this.loading = false
+        this.step = 0
 
-    verify_success = false
+        this.qr_data = ''
+        this.otpauth_url = ''
+        this.secret = ''
+        this.verify_code = ''
 
-    error_message = ''
-    other_message = ''
-    t = {}
+        this.verify_success = false
+
+        this.error_message = ''
+        this.other_message = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/auth/Page.component.js

@@ -25,7 +25,11 @@ export default class AuthPage extends Component {
     static get props() { return ['app_name', 'message', 'actions'] }
     static get template() { return template }
 
-    loading = false
+    constructor() {
+        super()
+
+        this.loading = false
+    }
 
     async action_click(index) {
         this.loading = true

app/assets/app/auth/PasswordReset.component.js

@@ -78,23 +78,27 @@ export default class PasswordResetComponent extends Component {
     static get template() { return template }
     static get props() { return ['app_name'] }
 
-    step = 0
-    loading = false
-    has_mfa = false
+    constructor() {
+        super()
 
-    error_message = ''
-    other_message = ''
+        this.step = 0
+        this.loading = false
+        this.has_mfa = false
 
-    step_1_valid = false
-    step_1_calc_time = ''
-    step_1_problem = ''
+        this.error_message = ''
+        this.other_message = ''
 
-    step_2_valid = false
+        this.step_1_valid = false
+        this.step_1_calc_time = ''
+        this.step_1_problem = ''
 
-    password = ''
-    confirm_password = ''
-    t = {}
-    ready = false
+        this.step_2_valid = false
+
+        this.password = ''
+        this.confirm_password = ''
+        this.t = {}
+        this.ready = false
+    }
 
     async vue_on_create() {
         this.has_mfa = !!session.get('user.has_mfa')

app/assets/app/auth/login/Form.component.js

@@ -63,18 +63,21 @@ export default class AuthLoginForm extends Component {
     ] }
     static get template() { return template }
 
-    username = ''
-    password = ''
-    button_text = ''
-    step_two = false
-    btn_disabled = true
-    loading = false
-    error_message = ''
-    other_message = ''
-    allow_back = true
-    auth_user = false
+    constructor() {
+        super()
 
-    t = {}
+        this.username = ''
+        this.password = ''
+        this.button_text = ''
+        this.step_two = false
+        this.btn_disabled = true
+        this.loading = false
+        this.error_message = ''
+        this.other_message = ''
+        this.allow_back = true
+        this.auth_user = false
+        this.t = {}
+    }
 
     watch_username(new_username, old_username) {
         this.btn_disabled = !new_username

app/assets/app/auth/register/Form.component.js

@@ -98,19 +98,23 @@ export default class RegistrationFormComponent extends Component {
     static get template() { return template }
     static get props() { return ['app_name'] }
 
-    loading = false
-    step = 1
-    other_message = ''
-    error_message = ''
-    message = ''
-    btn_disabled = true
-    button_text = ''
+    constructor() {
+        super()
 
-    first_name = ''
-    last_name = ''
-    username = ''
-    email = ''
-    t = {}
+        this.loading = false
+        this.step = 1
+        this.other_message = ''
+        this.error_message = ''
+        this.message = ''
+        this.btn_disabled = true
+        this.button_text = ''
+
+        this.first_name = ''
+        this.last_name = ''
+        this.username = ''
+        this.email = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         // Batch-load translated phrases

app/assets/app/cobalt/Form.component.js

@@ -146,20 +146,24 @@ export default class FormComponent extends Component {
         return ['resource', 'form_id', 'initial_mode']
     }
 
-    definition = {}
-    data = {}
-    uuid = ''
-    title = ''
-    error_message = ''
-    other_message = ''
+    constructor() {
+        super()
 
-    access_msg = ''
-    can_access = false
+        this.definition = {}
+        this.data = {}
+        this.uuid = ''
+        this.title = ''
+        this.error_message = ''
+        this.other_message = ''
 
-    is_ready = false
-    mode = ''
-    id = ''
-    t = {}
+        this.access_msg = ''
+        this.can_access = false
+
+        this.is_ready = false
+        this.mode = ''
+        this.id = ''
+        this.t = {}
+    }
 
     reset() {
         this.definition = {}

app/assets/app/cobalt/Listing.component.js

@@ -65,13 +65,17 @@ export default class ListingComponent extends Component {
     static get template() { return template }
     static get props() { return ['resource'] }
 
-    definition = {}
-    data = []
-    resource_class = {}
+    constructor() {
+        super()
 
-    access_msg = ''
-    can_access = false
-    t = {}
+        this.definition = {}
+        this.data = []
+        this.resource_class = {}
+
+        this.access_msg = ''
+        this.can_access = false
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/dash/AppSetup.component.js

@@ -232,35 +232,39 @@ export default class AppSetupComponent extends Component {
     static get template() { return template }
     static get props() { return [] }
 
-    step = 0
-    btn_disabled = true
-    btn_back = false
-    btn_hidden = false
-    btn_listing = false
+    constructor() {
+        super()
 
-    name = ''
-    identifier = ''
-    type = '' // ldap | saml | oauth
-    oauth_redirect_uri = ''
+        this.step = 0
+        this.btn_disabled = true
+        this.btn_back = false
+        this.btn_hidden = false
+        this.btn_listing = false
 
-    saml_entity_id = ''
-    saml_acs_url = ''
-    saml_slo_url = ''
+        this.name = ''
+        this.identifier = ''
+        this.type = '' // ldap | saml | oauth
+        this.oauth_redirect_uri = ''
 
-    ldap_username = ''
-    ldap_password = ''
-    ldap_password_confirm = ''
-    ldap_config = {}
+        this.saml_entity_id = ''
+        this.saml_acs_url = ''
+        this.saml_slo_url = ''
 
-    error_message = ''
+        this.ldap_username = ''
+        this.ldap_password = ''
+        this.ldap_password_confirm = ''
+        this.ldap_config = {}
 
-    app = {}
-    oauth_client = {}
-    saml_provider = {}
-    ldap_client = {}
+        this.error_message = ''
 
-    app_name = ''
-    host = ''
+        this.app = {}
+        this.oauth_client = {}
+        this.saml_provider = {}
+        this.ldap_client = {}
+
+        this.app_name = ''
+        this.host = ''
+    }
 
     make_url(path) {
         return session.url(path)

app/assets/app/dash/NavBar.component.js

@@ -1,7 +1,6 @@
 import { Component } from '../../lib/vues6/vues6.js'
 import { event_bus } from '../service/EventBus.service.js'
 import { session } from '../service/Session.service.js'
-import { message_service } from '../service/Message.service.js'
 
 const template = `
 <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
@@ -53,10 +52,10 @@ export default class NavBarComponent extends Component {
     static get template() { return template }
     static get props() { return [] }
 
-    can = {}
-
     constructor() {
         super()
+
+        this.can = {}
         this.toggle_event = event_bus.event('sidebar.toggle')
         this.first_name = session.get('user.first_name')
         this.last_name = session.get('user.last_name')

app/assets/app/dash/SideBar.component.js

@@ -23,9 +23,14 @@ export default class SideBarComponent extends Component {
     static get props() { return ['app_name'] }
     static get template() { return template }
 
-    actions = []
+    constructor() {
+        super()
 
-    possible_actions = [
+        this.actions = []
+
+        this.isCollapsed = false
+
+        this.possible_actions = [
             {
                 text: 'Profile',
                 action: 'redirect',
@@ -87,8 +92,6 @@ export default class SideBarComponent extends Component {
             },
         ]
 
-    constructor() {
-        super()
         event_bus.event('sidebar.toggle').subscribe(() => {
             this.toggle()
         })
@@ -120,8 +123,6 @@ export default class SideBarComponent extends Component {
         this.actions = new_actions
     }
 
-    isCollapsed = false
-
     toggle() {
         this.isCollapsed = !this.isCollapsed
     }

app/assets/app/dash/message/MessageContainer.component.js

@@ -68,8 +68,12 @@ export default class MessageContainerComponent extends Component {
     static get template() { return template }
     static get props() { return [] }
 
-    messages = []
-    modals = []
+    constructor() {
+        super()
+
+        this.messages = []
+        this.modals = []
+    }
 
     vue_on_create() {
         this.alert_event = event_bus.event('message.alert')

app/assets/app/dash/profile/EditProfile.component.js

@@ -195,31 +195,35 @@ export default class EditProfileComponent extends Component {
     static get template() { return template }
     static get props() { return ['user_id'] }
 
-    profile_first = ''
-    profile_last = ''
-    profile_email = ''
-    profile_tagline = ''
-    last_reset = ''
-    mfa_enable_date = ''
+    constructor() {
+        super()
 
-    has_mfa_recovery = false
-    mfa_recovery_date = ''
-    mfa_recovery_codes = 0
+        this.profile_first = ''
+        this.profile_last = ''
+        this.profile_email = ''
+        this.profile_tagline = ''
+        this.last_reset = ''
+        this.mfa_enable_date = ''
 
-    form_message = 'No changes.'
+        this.has_mfa_recovery = false
+        this.mfa_recovery_date = ''
+        this.mfa_recovery_codes = 0
 
-    has_mfa = false
-    ready = false
+        this.form_message = 'No changes.'
 
-    notify_gateway_url = ''
-    notify_app_key = ''
-    notify_enabled = false
-    notify_created_on = ''
-    notify_loaded = false
+        this.has_mfa = false
+        this.ready = false
 
-    app_passwords = []
-    app_name = ''
-    t = {}
+        this.notify_gateway_url = ''
+        this.notify_app_key = ''
+        this.notify_enabled = false
+        this.notify_created_on = ''
+        this.notify_loaded = false
+
+        this.app_passwords = []
+        this.app_name = ''
+        this.t = {}
+    }
 
     on_key_up = ($event) => {}
 

app/assets/app/dash/profile/form/AppPassword.component.js

@@ -72,12 +72,16 @@ export default class AppPasswordFormComponent extends Component {
     static get template() { return template }
     static get props() { return [] }
 
-    name = ''
-    valid = false
-    uuid = ''
-    enable_form = true
-    display_password = ''
-    t = {}
+    constructor() {
+        super()
+
+        this.name = ''
+        this.valid = false
+        this.uuid = ''
+        this.enable_form = true
+        this.display_password = ''
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/dash/profile/form/ProfilePhotoUploader.component.js

@@ -29,8 +29,12 @@ export default class ProfilePhotoUploaderComponent extends Component {
     static get template() { return template }
     static get params() { return [] }
 
-    ready = false
-    t = {}
+    constructor() {
+        super()
+
+        this.ready = false
+        this.t = {}
+    }
 
     async vue_on_create() {
         this.t = await T(

app/assets/app/resource/App.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from './CRUDBase.js'
 import { session } from '../service/Session.service.js'
 
 class AppResource extends CRUDBase {
-    endpoint = '/api/v1/applications'
-    required_fields = ['name', 'identifier']
-    permission_base = 'v1:applications'
+    constructor() {
+        super()
 
-    item = 'Application'
-    plural = 'Applications'
+        this.endpoint = '/api/v1/applications'
+        this.required_fields = ['name', 'identifier']
+        this.permission_base = 'v1:applications'
 
-    listing_definition = {
+        this.item = 'Application'
+        this.plural = 'Applications'
+
+        this.listing_definition = {
             display: `
         An application is anything that can authenticate users against ${session.get('app.name')}. Applications can have any number of associated LDAP clients, SAML service providers, and OAuth2 clients.
         `,
@@ -60,7 +63,7 @@ class AppResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Name',
@@ -123,6 +126,7 @@ class AppResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const app = new AppResource()

app/assets/app/resource/CRUDBase.js

@@ -2,15 +2,17 @@ import APIParseError from './APIParseError.js'
 import { session } from '../service/Session.service.js'
 
 export default class CRUDBase {
-    endpoint = '/api/v1'
-    required_fields = []
-    permission_base = ''
+    constructor() {
+        this.endpoint = '/api/v1'
+        this.required_fields = []
+        this.permission_base = ''
 
-    listing_definition = {}
-    form_definition = {}
+        this.listing_definition = {}
+        this.form_definition = {}
 
-    item = ''
-    plural = ''
+        this.item = ''
+        this.plural = ''
+    }
 
     async can(action) {
         return session.check_permissions(`${this.permission_base}:${action}`)

app/assets/app/resource/Setting.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from './CRUDBase.js'
 import { session } from '../service/Session.service.js'
 
 class SettingResource extends CRUDBase {
-    endpoint = '/api/v1/settings'
-    required_fields = ['key', 'value']
-    permission_base = 'v1:settings'
+    constructor() {
+        super()
 
-    item = 'Setting'
-    plural = 'Settings'
+        this.endpoint = '/api/v1/settings'
+        this.required_fields = ['key', 'value']
+        this.permission_base = 'v1:settings'
 
-    listing_definition = {
+        this.item = 'Setting'
+        this.plural = 'Settings'
+
+        this.listing_definition = {
             display: `
         <p>These are advanced settings that allow you to tweak the way ${session.get('app.name')} behaves. Tweak them at your own risk.</p>
         `,
@@ -35,7 +38,7 @@ class SettingResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Setting Key',
@@ -50,6 +53,7 @@ class SettingResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const setting = new SettingResource()

app/assets/app/resource/auth/Group.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class GroupResource extends CRUDBase {
-    endpoint = '/api/v1/auth/groups'
-    required_fields = ['name']
-    permission_base = 'v1:auth:groups'
+    constructor() {
+        super()
 
-    item = 'Group'
-    plural = 'Groups'
+        this.endpoint = '/api/v1/auth/groups'
+        this.required_fields = ['name']
+        this.permission_base = 'v1:auth:groups'
 
-    listing_definition = {
+        this.item = 'Group'
+        this.plural = 'Groups'
+
+        this.listing_definition = {
             display: `
             In ${session.get('app.name')}, groups are simply a tool for organizing users and assigning permissions and access in bulk. After creating and assigning users to a group, you can manage permissions for that group, and its policies will be applied to all users in that group.
             `,
@@ -50,7 +53,7 @@ class GroupResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Name',
@@ -71,6 +74,7 @@ class GroupResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const auth_group = new GroupResource()

app/assets/app/resource/auth/Role.resource.js

@@ -1,12 +1,17 @@
 import CRUDBase from '../CRUDBase.js'
 
 class RoleResource extends CRUDBase {
-    endpoint = '/api/v1/auth/roles'
-    required_fields = ['role', 'permissions']
-    permission_base = 'v1:auth:roles'
 
-    item = 'Role'
-    plural = 'Roles'
+    constructor() {
+        super()
+
+        this.endpoint = '/api/v1/auth/roles'
+        this.required_fields = ['role', 'permissions']
+        this.permission_base = 'v1:auth:roles'
+
+        this.item = 'Role'
+        this.plural = 'Roles'
+    }
 }
 
 const auth_role = new RoleResource()

app/assets/app/resource/auth/Trap.resource.js

@@ -1,12 +1,16 @@
 import CRUDBase from '../CRUDBase.js'
 
 class TrapResource extends CRUDBase {
-    endpoint = '/api/v1/auth/traps'
-    required_fields = ['name', 'trap', 'redirect_to']
-    permission_base = 'v1:auth:traps'
+    constructor() {
+        super()
 
-    item = 'Trap'
-    plural = 'Traps'
+        this.endpoint = '/api/v1/auth/traps'
+        this.required_fields = ['name', 'trap', 'redirect_to']
+        this.permission_base = 'v1:auth:traps'
+
+        this.item = 'Trap'
+        this.plural = 'Traps'
+    }
 }
 
 const auth_trap = new TrapResource()

app/assets/app/resource/auth/User.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class UserResource extends CRUDBase {
-    endpoint = '/api/v1/auth/users'
-    required_fields = ['uid', 'first_name', 'last_name', 'email']
-    permission_base = 'v1:auth:users'
+    constructor() {
+        super()
 
-    item = 'User'
-    plural = 'Users'
+        this.endpoint = '/api/v1/auth/users'
+        this.required_fields = ['uid', 'first_name', 'last_name', 'email']
+        this.permission_base = 'v1:auth:users'
 
-    listing_definition = {
+        this.item = 'User'
+        this.plural = 'Users'
+
+        this.listing_definition = {
             display: `
         Users can be assigned permissions and, if granted, can manage their ${session.get('app.name')} accounts from the Profile page, as well as login to the external applications they've been given access to.
         `,
@@ -57,7 +60,7 @@ class UserResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'First Name',
@@ -111,6 +114,7 @@ class UserResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const auth_user = new UserResource()

app/assets/app/resource/iam/Policy.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class PolicyResource extends CRUDBase {
-    endpoint = '/api/v1/iam/policy'
-    required_fields = ['entity_id', 'entity_type', 'target_id', 'target_type', 'access_type']
-    permission_base = 'v1:iam:policy'
+    constructor() {
+        super()
 
-    item = 'IAM Policy'
-    plural = 'IAM Policies'
+        this.endpoint = '/api/v1/iam/policy'
+        this.required_fields = ['entity_id', 'entity_type', 'target_id', 'target_type', 'access_type']
+        this.permission_base = 'v1:iam:policy'
 
-    listing_definition = {
+        this.item = 'IAM Policy'
+        this.plural = 'IAM Policies'
+
+        this.listing_definition = {
             display: `
         Identity & Access Management (IAM) policies give you fine grained control over which ${session.get('app.name')} users and groups are allowed to access which applications.
         <br><br>
@@ -65,7 +68,7 @@ class PolicyResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Subject Type',
@@ -73,8 +76,8 @@ class PolicyResource extends CRUDBase {
                     required: true,
                     type: 'select',
                     options: [
-                    { display: 'User', value: 'user' },
-                    { display: 'Group', value: 'group' },
+                        {display: 'User', value: 'user'},
+                        {display: 'Group', value: 'group'},
                     ],
                 },
                 {
@@ -107,8 +110,8 @@ class PolicyResource extends CRUDBase {
                     required: true,
                     type: 'select',
                     options: [
-                    { display: '...is granted access to...', value: 'allow' },
-                    { display: '...is denied access to...', value: 'deny' },
+                        {display: '...is granted access to...', value: 'allow'},
+                        {display: '...is denied access to...', value: 'deny'},
                     ],
                 },
                 {
@@ -117,8 +120,8 @@ class PolicyResource extends CRUDBase {
                     required: true,
                     type: 'select',
                     options: [
-                    { display: 'Application', value: 'application' },
-                    { display: 'API Scope', value: 'api_scope' },
+                        {display: 'Application', value: 'application'},
+                        {display: 'API Scope', value: 'api_scope'},
                     ],
                 },
                 {
@@ -155,6 +158,7 @@ class PolicyResource extends CRUDBase {
                 },
             },*/
         }
+    }
 }
 
 const iam_policy = new PolicyResource()

app/assets/app/resource/ldap/Client.resource.js

@@ -2,19 +2,18 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class ClientResource extends CRUDBase {
-    endpoint = '/api/v1/ldap/clients'
-    required_fields = ['name', 'uid', 'password']
-    permission_base = 'v1:ldap:clients'
+    constructor() {
+        super()
 
-    item = 'LDAP Client'
-    plural = 'LDAP Clients'
+        this.endpoint = '/api/v1/ldap/clients'
+        this.required_fields = ['name', 'uid', 'password']
+        this.permission_base = 'v1:ldap:clients'
 
-    async server_config() {
-        const results = await axios.get('/api/v1/ldap/config')
-        if ( results && results.data && results.data.data ) return results.data.data
-    }
+        this.item = 'LDAP Client'
+        this.plural = 'LDAP Clients'
 
-    listing_definition = {
+
+        this.listing_definition = {
             display: `
         LDAP Clients are special user accounts that external applications can use to bind to ${session.get('app.name')}'s built-in LDAP server to allow these applications to authenticate users.
         <br><br>
@@ -56,7 +55,7 @@ class ClientResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Provider Name',
@@ -80,6 +79,12 @@ class ClientResource extends CRUDBase {
                 },
             ],
         }
+    }
+
+    async server_config() {
+        const results = await axios.get('/api/v1/ldap/config')
+        if (results && results.data && results.data.data) return results.data.data
+    }
 }
 
 const ldap_client = new ClientResource()

app/assets/app/resource/ldap/Group.resource.js

@@ -1,14 +1,17 @@
 import CRUDBase from '../CRUDBase.js'
 
 class GroupResource extends CRUDBase {
-    endpoint = '/api/v1/ldap/groups'
-    required_fields = ['name', 'role']
-    permission_base = 'v1:ldap:groups'
+    constructor() {
+        super()
 
-    item = 'LDAP Group'
-    plural = 'LDAP Groups'
+        this.endpoint = '/api/v1/ldap/groups'
+        this.required_fields = ['name', 'role']
+        this.permission_base = 'v1:ldap:groups'
 
-    listing_definition = {
+        this.item = 'LDAP Group'
+        this.plural = 'LDAP Groups'
+
+        this.listing_definition = {
             columns: [
                 {
                     name: 'Group Name',
@@ -50,7 +53,7 @@ class GroupResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             // back_action: {
             //    text: 'Back',
             //    action: 'back',
@@ -93,6 +96,7 @@ class GroupResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const ldap_group = new GroupResource()

app/assets/app/resource/oauth/Client.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js';
 
 class ClientResource extends CRUDBase {
-    endpoint = '/api/v1/oauth/clients'
-    required_fields = ['name', 'redirect_url', 'api_scopes']
-    permission_base = 'v1:oauth:clients'
+    constructor() {
+        super()
 
-    item = 'OAuth2 Client'
-    plural = 'OAuth2 Clients'
+        this.endpoint = '/api/v1/oauth/clients'
+        this.required_fields = ['name', 'redirect_url', 'api_scopes']
+        this.permission_base = 'v1:oauth:clients'
 
-    listing_definition = {
+        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>
@@ -58,7 +61,7 @@ class ClientResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Client Name',
@@ -101,6 +104,7 @@ class ClientResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const oauth_client = new ClientResource()

app/assets/app/resource/openid/Client.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class ClientResource extends CRUDBase {
-    endpoint = '/openid/clients'
-    required_fields = ['client_name', 'grant_types', 'redirect_uri']
-    permission_base = 'v1:openid:clients'
+    constructor() {
+        super()
 
-    item = 'OpenID Connect Client'
-    plural = 'OpenID Connect Clients'
+        this.endpoint = '/openid/clients'
+        this.required_fields = ['client_name', 'grant_types', 'redirect_uri']
+        this.permission_base = 'v1:openid:clients'
 
-    listing_definition = {
+        this.item = 'OpenID Connect Client'
+        this.plural = 'OpenID Connect Clients'
+
+        this.listing_definition = {
             display: `
             OpenID Connect clients are applications that support authentication over the OpenID Connect 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, the application need only comply with the OpenID standards.
         `,
@@ -49,7 +52,7 @@ class ClientResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Client Name',
@@ -70,8 +73,8 @@ class ClientResource extends CRUDBase {
                     field: 'grant_types',
                     type: 'select.multiple',
                     options: [
-                    { display: 'Refresh Token', value: 'refresh_token' },
-                    { display: 'Authorization Code', value: 'authorization_code' },
+                        {display: 'Refresh Token', value: 'refresh_token'},
+                        {display: 'Authorization Code', value: 'authorization_code'},
                     ],
                     required: true,
                 },
@@ -91,6 +94,7 @@ class ClientResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const openid_client = new ClientResource()

app/assets/app/resource/reflect/Scope.resource.js

@@ -1,12 +1,16 @@
 import CRUDBase from '../CRUDBase.js'
 
 class ScopeResource extends CRUDBase {
-    endpoint = '/api/v1/reflect/scopes'
-    required_fields = ['scope']
-    permission_base = 'v1:reflect:scopes'
+    constructor() {
+        super()
 
-    item = 'API Scope'
-    plural = 'API Scopes'
+        this.endpoint = '/api/v1/reflect/scopes'
+        this.required_fields = ['scope']
+        this.permission_base = 'v1:reflect:scopes'
+
+        this.item = 'API Scope'
+        this.plural = 'API Scopes'
+    }
 }
 
 const reflect_scope = new ScopeResource()

app/assets/app/resource/reflect/Token.resource.js

@@ -1,14 +1,16 @@
 import CRUDBase from '../CRUDBase.js'
 
 class TokenResource extends CRUDBase {
-    endpoint = '/api/v1/reflect/tokens'
-    required_fields = ['client_id']
-    permission_base = 'v1:reflect:tokens'
+    constructor() {
+        super()
+        this.endpoint = '/api/v1/reflect/tokens'
+        this.required_fields = ['client_id']
+        this.permission_base = 'v1:reflect:tokens'
 
-    item = 'API Token'
-    plural = 'API Tokens'
+        this.item = 'API Token'
+        this.plural = 'API Tokens'
 
-    listing_definition = {
+        this.listing_definition = {
             display: `
         This allows you to create bearer tokens manually to allow for easier testing of the API. Notably, this is meant as a measure for testing and development, not for long term use.
         <br><br>
@@ -54,7 +56,7 @@ class TokenResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Client',
@@ -83,6 +85,7 @@ class TokenResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const reflect_token = new TokenResource()

app/assets/app/resource/saml/Provider.resource.js

@@ -2,14 +2,17 @@ import CRUDBase from '../CRUDBase.js'
 import { session } from '../../service/Session.service.js'
 
 class ProviderResource extends CRUDBase {
-    endpoint = '/api/v1/saml/providers'
-    required_fields = ['name', 'acs_url', 'entity_id']
-    permission_base = 'v1:saml:providers'
+    constructor() {
+        super()
 
-    item = 'SAML Service Provider'
-    plural = 'SAML Service Providers'
+        this.endpoint = '/api/v1/saml/providers'
+        this.required_fields = ['name', 'acs_url', 'entity_id']
+        this.permission_base = 'v1:saml:providers'
 
-    listing_definition = {
+        this.item = 'SAML Service Provider'
+        this.plural = 'SAML Service Providers'
+
+        this.listing_definition = {
             display: `SAML Service Providers are applications that support external authentication to a SAML Identity Provider. In this case, ${session.get('app.name')} is the identity provider, so these external applications can authenticate against it.
         <br><br>
         To do this, you need to know the SAML service provider's entity ID, assertion consumer service URL, and single-logout URL (if supported).`,
@@ -58,7 +61,7 @@ class ProviderResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Provider Name',
@@ -89,6 +92,7 @@ class ProviderResource extends CRUDBase {
                 },
             ],
         }
+    }
 }
 
 const saml_provider = new ProviderResource()

app/assets/app/resource/system/Announcement.resource.js

@@ -1,14 +1,17 @@
 import CRUDBase from '../CRUDBase.js'
 
 class AnnouncementResource extends CRUDBase {
-    endpoint = '/api/v1/system/announcements'
-    required_fields = ['user_ids', 'group_ids', 'title', 'message', 'type']
-    permission_base = 'v1:system:announcements'
+    constructor() {
+        super()
 
-    item = 'System Announcement'
-    plural = 'System Announcements'
+        this.endpoint = '/api/v1/system/announcements'
+        this.required_fields = ['user_ids', 'group_ids', 'title', 'message', 'type']
+        this.permission_base = 'v1:system:announcements'
 
-    listing_definition = {
+        this.item = 'System Announcement'
+        this.plural = 'System Announcements'
+
+        this.listing_definition = {
             display: `
         System announcements are administrative messages that you want all or some of your users to see. These messages can be delivered via e-mail, as a message after login, or as a system banner announcement.
         `,
@@ -42,7 +45,7 @@ class AnnouncementResource extends CRUDBase {
             ],
         }
 
-    form_definition = {
+        this.form_definition = {
             fields: [
                 {
                     name: 'Title',
@@ -79,9 +82,9 @@ class AnnouncementResource extends CRUDBase {
                     field: 'type',
                     type: 'select',
                     options: [
-                    { display: 'Login Intercept', value: 'login' },
-                    { display: 'E-Mail', value: 'email' },
-                    { display: 'System Banner', value: 'banner' },
+                        {display: 'Login Intercept', value: 'login'},
+                        {display: 'E-Mail', value: 'email'},
+                        {display: 'System Banner', value: 'banner'},
                     ],
                 },
             ],
@@ -92,6 +95,7 @@ class AnnouncementResource extends CRUDBase {
                 },
             }
         }
+    }
 }
 
 const system_announcement = new AnnouncementResource()

app/assets/app/service/EventBus.service.js

@@ -1,9 +1,9 @@
 class Event {
-    firings = []
-    subscriptions = []
 
     constructor(name) {
         this.name = name
+        this.firings = []
+        this.subscriptions = []
     }
 
     subscribe(handler) {
@@ -22,7 +22,9 @@ class Event {
 }
 
 class EventBusService {
-    _events = {}
+    constructor() {
+        this._events = {}
+    }
 
     event(name) {
         if ( !this._events[name] ) {

app/assets/app/service/Message.service.js

@@ -2,7 +2,9 @@ import { event_bus } from './EventBus.service.js'
 import { auth_api } from './AuthApi.service.js'
 
 class MessageService {
-    listener_interval = 25000
+    constructor() {
+        this.listener_interval = 25000
+    }
 
     alert({type, message, timeout = 0, on_dismiss = () => {} }) {
         event_bus.event('message.alert').fire({ type, message, timeout, on_dismiss })

app/assets/app/service/Session.service.js

@@ -1,5 +1,7 @@
 class Session {
-    data = {}
+    constructor() {
+        this.data = {}
+    }
 
     init(data) {
         this.data = data

app/assets/app/service/Translate.service.js

@@ -1,5 +1,7 @@
 class TranslateService {
-    _cache = {}
+    constructor() {
+        this._cache = {}
+    }
 
     check_cache(...keys) {
         const obj = {}

app/assets/app/service/Utility.service.js

@@ -1,5 +1,7 @@
 class UtilityService {
-    _debounce_timeouts = {}
+    constructor() {
+        this._debounce_timeouts = {}
+    }
 
     uuid() {
         return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>