diff --git a/webadmin/src/index.html b/webadmin/src/index.html index c201998e1..2e64c76ba 100644 --- a/webadmin/src/index.html +++ b/webadmin/src/index.html @@ -202,6 +202,7 @@
  • Activity
  • Support
  • DNS & Certs
    • +
  • API access
  • Settings
  • Logout
    • diff --git a/webadmin/src/js/index.js b/webadmin/src/js/index.js index ee4c3aef1..75d234491 100644 --- a/webadmin/src/js/index.js +++ b/webadmin/src/js/index.js @@ -54,6 +54,9 @@ app.config(['$routeProvider', function ($routeProvider) { }).when('/support', { controller: 'SupportController', templateUrl: 'views/support.html' + }).when('/tokens', { + controller: 'TokensController', + templateUrl: 'views/tokens.html' }).otherwise({ redirectTo: '/'}); }]); diff --git a/webadmin/src/views/account.html b/webadmin/src/views/account.html index 39e825a8d..49dca80fd 100644 --- a/webadmin/src/views/account.html +++ b/webadmin/src/views/account.html @@ -99,88 +99,6 @@ - - - - - - - - -
    @@ -222,57 +140,5 @@
    -
    - -
    -
    -

    Application and API Access

    -
    -
    - -
    - - -
    -
    -
    -
    -

    - {{client.name}} on {{client.location}}{{ config.isCustomDomain ? '.' : '-' }}{{config.fqdn}} -

    -
    -
    -
    -
    -
    -
    - {{ client.activeTokens.length }} tokens are active for this application. - -
    - Advanced -
    -
    -
    -

    Credentials

    -

    Scope: {{ client.scope }}

    -

    RedirectURI: {{ client.redirectURI }}

    -

    Client ID: {{ client.id }}

    -

    Client Secret: {{ client.clientSecret }}

    - -
    - -

    Your Tokens

    -

    - {{ token.accessToken }} -

    -
    -
    -
    -
    -
    -
    -
    -
    -

    diff --git a/webadmin/src/views/account.js b/webadmin/src/views/account.js index 946357b33..805327502 100644 --- a/webadmin/src/views/account.js +++ b/webadmin/src/views/account.js @@ -1,12 +1,9 @@ 'use strict'; -angular.module('Application').controller('AccountController', ['$scope', '$location', 'Client', function ($scope, $location, Client) { +angular.module('Application').controller('AccountController', ['$scope', 'Client', function ($scope, Client) { $scope.user = Client.getUserInfo(); $scope.config = Client.getConfig(); - $scope.activeClients = []; - $scope.tokenInUse = null; - $scope.passwordchange = { busy: false, error: {}, @@ -156,128 +153,6 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat } }; - $scope.clientAdd = { - busy: false, - error: {}, - name: '', - scope: '', - redirectURI: '', - - show: function () { - $scope.clientAdd.busy = false; - - $scope.clientAdd.error = {}; - $scope.clientAdd.name = ''; - $scope.clientAdd.scope = '*'; - $scope.clientAdd.redirectURI = ''; - - $scope.clientAddForm.$setUntouched(); - $scope.clientAddForm.$setPristine(); - - $('#clientAddModal').modal('show'); - }, - - submit: function () { - $scope.clientAdd.busy = true; - $scope.clientAdd.error = {}; - - var CLIENT_REDIRECT_URI_FALLBACK = Client.apiOrigin; - - Client.createOAuthClient($scope.clientAdd.name, $scope.clientAdd.scope, $scope.clientAdd.redirectURI || CLIENT_REDIRECT_URI_FALLBACK, function (error) { - $scope.clientAdd.busy = false; - - if (error && error.statusCode === 400) { - if (error.message.indexOf('redirectURI must be a valid uri') === 0) { - $scope.clientAdd.error.redirectURI = error.message; - $scope.clientAddForm.redirectURI.$setPristine(); - $('#clientAddRedirectURI').focus(); - } else if (error.message.indexOf('Invalid scope') === 0) { - $scope.clientAdd.error.scope = error.message; - $scope.clientAddForm.scope.$setPristine(); - $('#clientAddScope').focus(); - } else { - console.error(error); - } - return; - } - if (error) return console.error('Unable to create API client.', error.statusCode, error.message); - - refresh(); - - $('#clientAddModal').modal('hide'); - }); - } - }; - - $scope.clientRemove = { - busy: false, - client: {}, - - show: function (client) { - $scope.clientRemove.busy = false; - $scope.clientRemove.client = client; - $('#clientRemoveModal').modal('show'); - }, - - submit: function () { - $scope.clientRemove.busy = true; - - Client.delOAuthClient($scope.clientRemove.client.id, function (error) { - if (error) console.error(error); - - $scope.clientRemove.busy = false; - $scope.clientRemove.client = {}; - - refresh(); - - $('#clientRemoveModal').modal('hide'); - }); - } - }; - - $scope.tokenAdd = { - busy: false, - token: {}, - - show: function (client) { - $scope.tokenAdd.busy = true; - $scope.tokenAdd.token = {}; - - var expiresAt = Date.now() + 100 * 365 * 24 * 60 * 60 * 1000; // ~100 years from now - - Client.createTokenByClientId(client.id, expiresAt, function (error, result) { - if (error) console.error(error); - - $scope.tokenAdd.busy = false; - $scope.tokenAdd.token = result; - - $('#tokenAddModal').modal('show'); - - refreshClientTokens(client); - }); - } - }; - - $scope.removeToken = function (client, token) { - Client.delToken(client.id, token.accessToken, function (error) { - if (error) console.error(error); - - refreshClientTokens(client); - }); - }; - - $scope.removeAccessTokens = function (client) { - client.busy = true; - - Client.delTokensByClientId(client.id, function (error) { - if (error) console.error(error); - - client.busy = false; - - refreshClientTokens(client); - }); - }; - $scope.showTutorial = function () { Client.setShowTutorial(true, function (error) { if (error) return console.error(error); @@ -285,30 +160,8 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat }); }; - function refreshClientTokens(client) { - Client.getTokensByClientId(client.id, function (error, result) { - if (error) console.error(error); - - client.activeTokens = result || []; - }); - } - - function refresh() { - $scope.tokenInUse = Client._token; - - Client.getOAuthClients(function (error, activeClients) { - if (error) return console.error(error); - - $scope.activeClients = activeClients; - - $scope.activeClients.forEach(refreshClientTokens); - }); - } - - Client.onReady(refresh); - // setup all the dialog focus handling - ['passwordChangeModal', 'emailChangeModal', 'displayNameChangeModal', 'clientAddModal'].forEach(function (id) { + ['passwordChangeModal', 'emailChangeModal', 'displayNameChangeModal'].forEach(function (id) { $('#' + id).on('shown.bs.modal', function () { $(this).find("[autofocus]:first").focus(); }); diff --git a/webadmin/src/views/tokens.html b/webadmin/src/views/tokens.html new file mode 100644 index 000000000..4cb7be188 --- /dev/null +++ b/webadmin/src/views/tokens.html @@ -0,0 +1,137 @@ + + + + + + + + + + +
    + +
    +
    +

    Application and API Access

    +
    +
    + +
    + + +
    +
    +
    +
    +

    + {{client.name}} on {{client.location}}{{ config.isCustomDomain ? '.' : '-' }}{{config.fqdn}} +

    +
    +
    +
    +
    +
    +
    + {{ client.activeTokens.length }} tokens are active for this application. + +
    + Advanced +
    +
    +
    +

    Credentials

    +

    Scope: {{ client.scope }}

    +

    RedirectURI: {{ client.redirectURI }}

    +

    Client ID: {{ client.id }}

    +

    Client Secret: {{ client.clientSecret }}

    + +
    + +

    Your Tokens

    +

    + {{ token.accessToken }} +

    +
    +
    +
    +
    +
    +
    +
    +
    + + +

    diff --git a/webadmin/src/views/tokens.js b/webadmin/src/views/tokens.js new file mode 100644 index 000000000..3d261fdb3 --- /dev/null +++ b/webadmin/src/views/tokens.js @@ -0,0 +1,160 @@ +'use strict'; + +angular.module('Application').controller('TokensController', ['$scope', 'Client', function ($scope, Client) { + $scope.user = Client.getUserInfo(); + $scope.config = Client.getConfig(); + + $scope.activeClients = []; + $scope.tokenInUse = null; + + $scope.clientAdd = { + busy: false, + error: {}, + name: '', + scope: '', + redirectURI: '', + + show: function () { + $scope.clientAdd.busy = false; + + $scope.clientAdd.error = {}; + $scope.clientAdd.name = ''; + $scope.clientAdd.scope = '*'; + $scope.clientAdd.redirectURI = ''; + + $scope.clientAddForm.$setUntouched(); + $scope.clientAddForm.$setPristine(); + + $('#clientAddModal').modal('show'); + }, + + submit: function () { + $scope.clientAdd.busy = true; + $scope.clientAdd.error = {}; + + var CLIENT_REDIRECT_URI_FALLBACK = Client.apiOrigin; + + Client.createOAuthClient($scope.clientAdd.name, $scope.clientAdd.scope, $scope.clientAdd.redirectURI || CLIENT_REDIRECT_URI_FALLBACK, function (error) { + $scope.clientAdd.busy = false; + + if (error && error.statusCode === 400) { + if (error.message.indexOf('redirectURI must be a valid uri') === 0) { + $scope.clientAdd.error.redirectURI = error.message; + $scope.clientAddForm.redirectURI.$setPristine(); + $('#clientAddRedirectURI').focus(); + } else if (error.message.indexOf('Invalid scope') === 0) { + $scope.clientAdd.error.scope = error.message; + $scope.clientAddForm.scope.$setPristine(); + $('#clientAddScope').focus(); + } else { + console.error(error); + } + return; + } + if (error) return console.error('Unable to create API client.', error.statusCode, error.message); + + refresh(); + + $('#clientAddModal').modal('hide'); + }); + } + }; + + $scope.clientRemove = { + busy: false, + client: {}, + + show: function (client) { + $scope.clientRemove.busy = false; + $scope.clientRemove.client = client; + $('#clientRemoveModal').modal('show'); + }, + + submit: function () { + $scope.clientRemove.busy = true; + + Client.delOAuthClient($scope.clientRemove.client.id, function (error) { + if (error) console.error(error); + + $scope.clientRemove.busy = false; + $scope.clientRemove.client = {}; + + refresh(); + + $('#clientRemoveModal').modal('hide'); + }); + } + }; + + $scope.tokenAdd = { + busy: false, + token: {}, + + show: function (client) { + $scope.tokenAdd.busy = true; + $scope.tokenAdd.token = {}; + + var expiresAt = Date.now() + 100 * 365 * 24 * 60 * 60 * 1000; // ~100 years from now + + Client.createTokenByClientId(client.id, expiresAt, function (error, result) { + if (error) console.error(error); + + $scope.tokenAdd.busy = false; + $scope.tokenAdd.token = result; + + $('#tokenAddModal').modal('show'); + + refreshClientTokens(client); + }); + } + }; + + $scope.removeToken = function (client, token) { + Client.delToken(client.id, token.accessToken, function (error) { + if (error) console.error(error); + + refreshClientTokens(client); + }); + }; + + $scope.removeAccessTokens = function (client) { + client.busy = true; + + Client.delTokensByClientId(client.id, function (error) { + if (error) console.error(error); + + client.busy = false; + + refreshClientTokens(client); + }); + }; + + function refreshClientTokens(client) { + Client.getTokensByClientId(client.id, function (error, result) { + if (error) console.error(error); + + client.activeTokens = result || []; + }); + } + + function refresh() { + $scope.tokenInUse = Client._token; + + Client.getOAuthClients(function (error, activeClients) { + if (error) return console.error(error); + + $scope.activeClients = activeClients; + + $scope.activeClients.forEach(refreshClientTokens); + }); + } + + Client.onReady(refresh); + + // setup all the dialog focus handling + ['clientAddModal'].forEach(function (id) { + $('#' + id).on('shown.bs.modal', function () { + $(this).find("[autofocus]:first").focus(); + }); + }); +}]);