components: user and alert channels components

frontend/src/app.js

@@ -1,206 +1,210 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
 'use strict';
 
 // Declare app level module which depends on filters, and services
 angular.module('appenlight.base', [
     'ngRoute',
     'ui.router',
     'ui.router.router',
     'underscore',
     'ui.bootstrap',
     'ngResource',
     'ngAnimate',
     'ngCookies',
     'smart-table',
     'angular-toArrayFilter',
     'mentio'
 ]);
 
 angular.module('appenlight.filters', []);
 angular.module('appenlight.templates', []);
 angular.module('appenlight.controllers', [
     'appenlight.base'
 ]);
 angular.module('appenlight.components', [
     'appenlight.components.channelstream',
     'appenlight.components.appenlightApp',
     'appenlight.components.appenlightHeader',
     'appenlight.components.indexDashboardView',
     'appenlight.components.logsBrowserView',
     'appenlight.components.eventBrowserView',
     'appenlight.components.userProfileView',
     'appenlight.components.userIdentitiesView',
+    'appenlight.components.userPasswordView',
+    'appenlight.components.userAuthTokensView',
+    'appenlight.components.userAlertChannelsListView',
+    'appenlight.components.userAlertChannelsEmailNewView',
     'appenlight.components.settingsView'
 ]);
 angular.module('appenlight.directives', [
     'appenlight.directives.c3chart',
     'appenlight.directives.confirmValidate',
     'appenlight.directives.focus',
     'appenlight.directives.formErrors',
     'appenlight.directives.humanFormat',
     'appenlight.directives.isoToRelativeTime',
     'appenlight.directives.permissionsForm',
     'appenlight.directives.smallReportGroupList',
     'appenlight.directives.smallReportList',
     'appenlight.directives.pluginConfig',
     'appenlight.directives.recursive',
     'appenlight.directives.reportAlertAction',
     'appenlight.directives.postProcessAction',
     'appenlight.directives.rule',
     'appenlight.directives.ruleReadOnly'
 ]);
 angular.module('appenlight.services', [
     'appenlight.services.chartResultParser',
     'appenlight.services.resources',
     'appenlight.services.stateHolder',
     'appenlight.services.typeAheadTagHelper',
     'appenlight.services.UUIDProvider'
 ]).value('version', '0.1');
 
 
 var pluginsToLoad = _.map(decodeEncodedJSON(window.AE.plugins),
     function(item){
         return item.config.angular_module
     });
 console.log(pluginsToLoad);
 angular.module('appenlight.plugins', pluginsToLoad);
 
 var app = angular.module('appenlight', [
     'appenlight.base',
     'appenlight.config',
     'appenlight.templates',
     'appenlight.filters',
     'appenlight.services',
     'appenlight.directives',
     'appenlight.controllers',
     'appenlight.components',
     'appenlight.plugins'
 ]);
 
 // needs manual execution because of plugin files
 function kickstartAE(initialUserData) {
     app.config(['$httpProvider', '$uibTooltipProvider', '$locationProvider', function ($httpProvider, $uibTooltipProvider, $locationProvider) {
         $locationProvider.html5Mode(true);
         $httpProvider.interceptors.push(['$q', '$rootScope', '$timeout', 'stateHolder', function ($q, $rootScope, $timeout, stateHolder) {
             return {
                 'response': function (response) {
                     var flashMessages = angular.fromJson(response.headers('x-flash-messages'));
                     if (flashMessages && flashMessages.length > 0) {
                         stateHolder.flashMessages.extend(flashMessages);
                     }
                     return response;
                 },
                 'responseError': function (rejection) {
                     if (rejection.status > 299 && rejection.status !== 422) {
                         stateHolder.flashMessages.extend([{
                             msg: 'Response status code: ' + rejection.status + ', "' + rejection.statusText + '", url: ' + rejection.config.url,
                             type: 'error'
                         }]);
                     }
                     if (rejection.status == 0) {
                         stateHolder.flashMessages.extend([{
                             msg: 'Response timeout',
                             type: 'error'
                         }]);
                     }
                     var flashMessages = angular.fromJson(rejection.headers('x-flash-messages'));
                     if (flashMessages && flashMessages.length > 0) {
                         stateHolder.flashMessages.extend(flashMessages);
                     }
 
                     return $q.reject(rejection);
                 }
             }
         }]);
 
         $uibTooltipProvider.options({appendToBody: true});
 
     }]);
 
 
     app.config(function ($provide) {
         $provide.decorator("$exceptionHandler", function ($delegate) {
             return function (exception, cause) {
                 $delegate(exception, cause);
                 if (typeof AppEnlight !== 'undefined') {
                     AppEnlight.grabError(exception);
                 }
             };
         });
     });
 
     app.run(['$rootScope', '$timeout', 'stateHolder', '$state', '$location', '$transitions', '$window', 'AeConfig',
         function ($rootScope, $timeout, stateHolder, $state, $location, $transitions, $window, AeConfig) {
             if (initialUserData){
                 stateHolder.AeUser.update(initialUserData);
             }
             $rootScope.$state = $state;
             $rootScope.stateHolder = stateHolder;
             $rootScope.flash = stateHolder.flashMessages.list;
             $rootScope.closeAlert = stateHolder.flashMessages.closeAlert;
             $rootScope.AeConfig = AeConfig;
 
             var transitionApp = function($transition$, $state) {
                 // redirect user to /register unless its one of open views
                 var isGuestState = [
                         'report.view_detail',
                         'report.view_group',
                         'dashboard.view'
                     ].indexOf($transition$.to().name) !== -1;
 
                 var path = $window.location.pathname;
                 // strip trailing slash
                 if (path.substr(path.length - 1) === '/') {
                     path = path.substr(0, path.length - 1);
                 }
                 var isOpenView = false;
                 var openViews = [
                     AeConfig.urls.otherRoutes.lostPassword,
                     AeConfig.urls.otherRoutes.lostPasswordGenerate
                 ];
                 console.log('$transitions.onBefore', path, $transition$.to().name, $state);
                 _.each(openViews, function (url) {
                     var url = '/' + url.split('/').slice(3).join('/');
                     if (url === path) {
                         isOpenView = true;
                     }
                 });
                 if (stateHolder.AeUser.id === null && !isGuestState && !isOpenView) {
                     if (window.location.toString().indexOf(AeConfig.urls.otherRoutes.register) === -1) {
                         console.log('redirect to register');
                         var newLocation = AeConfig.urls.otherRoutes.register + '?came_from=' + encodeURIComponent(window.location);
                         // fix infinite digest here
                         $rootScope.$on('$locationChangeStart',
                             function(event, toState, toParams, fromState, fromParams, options){
                                 event.preventDefault();
                                 $window.location = newLocation;
                             });
                         $window.location = newLocation;
                         return false;
                     }
                     return false;
                 }
                 return true;
             };
             $transitions.onBefore({}, transitionApp);
 
         }]);
 }

frontend/src/components/views/settings-view/settings-view.js

@@ -1,30 +1,31 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
 angular.module('appenlight.components.settingsView', [])
     .component('settingsView', {
         templateUrl: 'components/views/settings-view/settings-view.html',
         controller: SettingsViewController
     });
 
-SettingsViewController.$inject = [];
+SettingsViewController.$inject = ['$state'];
 
-function SettingsViewController() {
+function SettingsViewController($state) {
+    this.$state = $state;
     console.info('SettingsViewController');
 }

frontend/src/components/views/user-alert-channel-email-new-view/user-alert-channel-email-new-view.html

@@ -1,30 +1,30 b''
-<ng-include src="'templates/loader.html'" ng-if="email.loading.email"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.email"></ng-include>
 
-<div ng-show="!email.loading.email">
+<div ng-show="!$ctrl.loading.email">
 
     <div class="panel panel-default">
         <div class="panel-heading" ng-include="'templates/user/breadcrumbs.html'"></div>
         <div class="panel-body">
             <p>Adding email alert channel - after you authorize your email in the system we can send alerts directly to this mailbox.</p>
-            <form class="form-horizontal" name="email.channelForm" ng-submit="email.createChannel()">
+            <form class="form-horizontal" name="$ctrl.channelForm" ng-submit="$ctrl.createChannel()">
                 <div class="form-group" id="row-email">
-                    <data-form-errors errors="email.channelForm.ae_validation.email"></data-form-errors>
+                    <data-form-errors errors="$ctrl.channelForm.ae_validation.email"></data-form-errors>
                     <label id="label-email" class="control-label col-sm-4 col-lg-3">
                         Email Address
                         <span class="required">*</span>
                     </label>
                     <div class="col-sm-8 col-lg-9">
-                        <input class="form-control" type="text" ng-model="email.form.email">
+                        <input class="form-control" type="text" ng-model="$ctrl.form.email">
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="submit" class="control-label col-sm-4 col-lg-3">
                     </label>
                     <div class="col-sm-8 col-lg-9">
                         <input class="form-control btn btn-primary" name="submit" type="submit" value="Add email channel">
                     </div>
                 </div>
             </form>
         </div>
     </div>
 </div>

frontend/src/components/views/user-alert-channel-email-new-view/user-alert-channel-email-new-view.js

@@ -1,46 +1,49 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('AlertChannelsEmailController', AlertChannelsEmailController)
+angular.module('appenlight.components.userAlertChannelsEmailNewView', [])
+    .component('userAlertChannelsEmailNewView', {
+        templateUrl: 'components/views/user-alert-channel-email-new-view/user-alert-channel-email-new-view.html',
+        controller: AlertChannelsEmailController
+    });
 
 AlertChannelsEmailController.$inject = ['$state','userSelfPropertyResource'];
 
 function AlertChannelsEmailController($state, userSelfPropertyResource) {
     console.debug('AlertChannelsEmailController');
     var vm = this;
     vm.loading = {email: false};
     vm.form = {};
 
     vm.createChannel = function () {
         vm.loading.email = true;
         console.log('createChannel');
         userSelfPropertyResource.save({key: 'alert_channels'}, vm.form, function () {
             //vm.loading.email = false;
             //setServerValidation(vm.channelForm);
             //vm.form = {};
             $state.go('user.alert_channels.list');
         }, function (response) {
             if (response.status == 422) {
                 setServerValidation(vm.channelForm, response.data);
             }
             vm.loading.email = false;
         });
     }
 }

frontend/src/components/views/user-alert-channels-list-view/user-alert-channels-list-view.html

@@ -1,63 +1,63 b''
-<ng-include src="'templates/loader.html'" ng-if="channels.loading.channels || channels.loading.applications"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.channels || $ctrl.loading.applications"></ng-include>
 
-<div ng-if="!channels.loading.channels && !channels.loading.applications && !channels.loading.actions">
+<div ng-if="!$ctrl.loading.channels && !$ctrl.loading.applications && !$ctrl.loading.actions">
 
     <div class="panel panel-default">
         <div class="panel-heading" ng-include="'templates/user/breadcrumbs.html'"></div>
         <div class="panel-body">
             <h1>Report alert rules</h1>
             <p>
-                <a class="btn btn-info" ng-click="channels.addAction()"><span class="fa fa-plus-circle"></span> Add top-level rule</a>
+                <a class="btn btn-info" ng-click="$ctrl.addAction()"><span class="fa fa-plus-circle"></span> Add top-level rule</a>
             </p>
 
-            <report-alert-action action="action" rule-definitions="channels.ruleDefinitions"
-                                 possible-channels="channels.alertChannels"
-                                 actions="channels.alertActions" applications="channels.applications"
-                                 ng-repeat="action in channels.alertActions | filter: {type:'report'}"></report-alert-action>
+            <report-alert-action action="action" rule-definitions="$ctrl.ruleDefinitions"
+                                 possible-channels="$ctrl.alertChannels"
+                                 actions="$ctrl.alertActions" applications="$ctrl.applications"
+                                 ng-repeat="action in $ctrl.alertActions | filter: {type:'report'}"></report-alert-action>
 
         </div>
     </div>
 
     <div class="panel panel-default">
         <div class="panel-body">
             <h1>Alert channels</h1>
 
             <p>Here you can configure your <em>alert channels</em>.</p>
 
             <p>An alert channel serves as means of delivery of notifications about important events that happen in your applications.</p>
 
             <div class="alert alert-success">You can add more integrations that support different alert channels via application management panel.</div>
 
             <table class="table table-striped">
-                <tr ng-repeat="channel in channels.alertChannels" class="animate-repeat">
+                <tr ng-repeat="channel in $ctrl.alertChannels" class="animate-repeat">
                     <td><strong>{{ channel.channel_visible_value }}</strong></td>
                     <td class="text-right">
                         <span class="btn btn-default" data-uib-tooltip="Channel is {{ channel.channel_validated? '' :'NOT' }} validated" tooltip-append-to-body="true"
                               ng-class="{dim:!channel.channel_validated}">
                             <span class="fa" ng-class="{'fa-check-circle':channel.channel_validated,  'fa-times-circle':!channel.channel_validated}"></span>
                         </span>
                         <a class="btn btn-default" data-uib-tooltip="Press to turn {{ channel.send_alerts ? 'OFF' : 'ON' }} alerting on this chanel"
-                           ng-click="channels.updateChannel(channel,'send_alerts')" ng-class="{dim:!channel.send_alerts}" tooltip-append-to-body="true">
+                           ng-click="$ctrl.updateChannel(channel,'send_alerts')" ng-class="{dim:!channel.send_alerts}" tooltip-append-to-body="true">
                             <span class="fa fa-rss"></span> Alerts
                         </a>
                         <a class="btn btn-default" data-uib-tooltip="Press to turn {{ channel.daily_digest ? 'OFF' : 'ON' }} daily digests on this channel"
-                           ng-click="channels.updateChannel(channel,'daily_digest')" ng-class="{dim:!channel.daily_digest}" tooltip-append-to-body="true">
+                           ng-click="$ctrl.updateChannel(channel,'daily_digest')" ng-class="{dim:!channel.daily_digest}" tooltip-append-to-body="true">
                             <span class="fa fa-envelope"></span> Daily digests
                         </a>
 
                         <span class="dropdown" data-uib-dropdown on-toggle="toggled(open)">
                             <a class="btn btn-default" data-uib-dropdown-toggle><span class="fa fa-trash-o"></span> Remove</a>
                           <ul class="dropdown-menu">
                               <li><a>No</a></li>
-                              <li><a ng-click="channels.removeChannel(channel)">Yes</a></li>
+                              <li><a ng-click="$ctrl.removeChannel(channel)">Yes</a></li>
                           </ul>
                         </span>
 
                     </td>
                 </tr>
             </table>
 
         </div>
     </div>
 
 </div>

frontend/src/components/views/user-alert-channels-list-view/user-alert-channels-list-view.js

@@ -1,130 +1,134 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers').controller('AlertChannelsController', AlertChannelsController);
+angular.module('appenlight.components.userAlertChannelsListView', [])
+    .component('userAlertChannelsListView', {
+        templateUrl: 'components/views/user-alert-channels-list-view/user-alert-channels-list-view.html',
+        controller: userAlertChannelsListViewController
+    });
 
-AlertChannelsController.$inject = ['userSelfPropertyResource', 'applicationsNoIdResource'];
+userAlertChannelsListViewController.$inject = ['userSelfPropertyResource', 'applicationsNoIdResource'];
 
-function AlertChannelsController(userSelfPropertyResource, applicationsNoIdResource) {
+function userAlertChannelsListViewController(userSelfPropertyResource, applicationsNoIdResource) {
     console.debug('AlertChannelsController');
     var vm = this;
     vm.loading = {channels: true, applications: true, actions:true};
 
     vm.alertChannels = userSelfPropertyResource.query({key: 'alert_channels'},
         function (data) {
             vm.loading.channels = false;
         });
 
     vm.alertActions = userSelfPropertyResource.query({key: 'alert_actions'},
         function (data) {
             vm.loading.actions = false;
         });
 
     vm.applications = applicationsNoIdResource.query({permission: 'view'},
         function (data) {
             vm.loading.applications = false;
         });
 
     var allOps = {
         'eq': 'Equal',
         'ne': 'Not equal',
         'ge': 'Greater or equal',
         'gt': 'Greater than',
         'le': 'Lesser or equal',
         'lt': 'Lesser than',
         'startswith': 'Starts with',
         'endswith': 'Ends with',
         'contains': 'Contains'
     };
 
     var fieldOps = {};
     fieldOps['http_status'] = ['eq', 'ne', 'ge', 'le'];
     fieldOps['group:priority'] = ['eq', 'ne', 'ge', 'le'];
     fieldOps['duration'] = ['ge', 'le'];
     fieldOps['url_domain'] = ['eq', 'ne', 'startswith', 'endswith',
         'contains'];
     fieldOps['url_path'] = ['eq', 'ne', 'startswith', 'endswith',
         'contains'];
     fieldOps['error'] = ['eq', 'ne', 'startswith', 'endswith',
         'contains'];
     fieldOps['tags:server_name'] = ['eq', 'ne', 'startswith', 'endswith',
         'contains'];
     fieldOps['group:occurences'] = ['eq', 'ne', 'ge', 'le'];
 
     var possibleFields = {
         '__AND__': 'All met (composite rule)',
         '__OR__': 'One met (composite rule)',
         '__NOT__': 'Not met (composite rule)',
         'http_status': 'HTTP Status',
         'duration': 'Request duration',
         'group:priority': 'Group -> Priority',
         'url_domain': 'Domain',
         'url_path': 'URL Path',
         'error': 'Error',
         'tags:server_name': 'Tag -> Server name',
         'group:occurences': 'Group -> Occurences'
     };
 
     vm.ruleDefinitions = {
         fieldOps: fieldOps,
         allOps: allOps,
         possibleFields: possibleFields
     };
 
     vm.addAction = function (channel) {
         console.log('test');
         userSelfPropertyResource.save({key: 'alert_channels_rules'}, {}, function (data) {
             vm.alertActions.push(data);
         }, function (response) {
             if (response.status == 422) {
                 console.log('scope', response);
             }
         });
     };
 
     vm.updateChannel = function (channel, subKey) {
         var params = {
             key: 'alert_channels',
             channel_name: channel['channel_name'],
             channel_value: channel['channel_value']
         };
         var toUpdate = {};
         if (['daily_digest', 'send_alerts'].indexOf(subKey) !== -1) {
             toUpdate[subKey] = !channel[subKey];
         }
         userSelfPropertyResource.update(params, toUpdate, function (data) {
             _.extend(channel, data);
         });
     };
 
     vm.removeChannel = function (channel) {
         console.log(channel);
         userSelfPropertyResource.delete({
             key: 'alert_channels',
             channel_name: channel.channel_name,
             channel_value: channel.channel_value
         }, function () {
             vm.alertChannels = _.filter(vm.alertChannels, function(item){
                 return item != channel;
             });
         });
 
     }
 
 }

frontend/src/components/views/user-auth-tokens-view/user-auth-tokens-view.html

@@ -1,83 +1,83 b''
-<ng-include src="'templates/loader.html'" ng-if="auth_tokens.loading.tokens"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.tokens"></ng-include>
 
-<div ng-show="!auth_tokens.loading.tokens">
+<div ng-show="!$ctrl.loading.tokens">
 
     <div class="panel panel-default">
         <div class="panel-heading" ng-include="'templates/user/breadcrumbs.html'"></div>
 
         <div class="panel-body">
 
             <div class="alert alert-success">You can use those tokens to authenticate yourself when performing various API calls</div>
 
             <hr/>
 
-            <form method="post" class="form-inline" name="auth_tokens.TokenForm" ng-submit="auth_tokens.addToken()" novalidate>
-                <data-form-errors errors="auth_tokens.TokenForm.ae_validation.description"></data-form-errors>
-                <data-form-errors errors="auth_tokens.TokenForm.ae_validation.expires"></data-form-errors>
+            <form method="post" class="form-inline" name="$ctrl.TokenForm" ng-submit="$ctrl.addToken()" novalidate>
+                <data-form-errors errors="$ctrl.TokenForm.ae_validation.description"></data-form-errors>
+                <data-form-errors errors="$ctrl.TokenForm.ae_validation.expires"></data-form-errors>
                 <div class="form-group">
                     <label>
                         Description
                     </label>
-                    <input class="form-control" name="description" placeholder="Token description" type="text" ng-model="auth_tokens.form.description">
+                    <input class="form-control" name="description" placeholder="Token description" type="text" ng-model="$ctrl.form.description">
                 </div>
                 <div class="form-group">
                     <label>
                         Expires
                     </label>
-                    <select class="form-control" ng-model="auth_tokens.form.expires" ng-options="i.key as i.label for i in auth_tokens.expireOptions | objectToOrderedArray:'minutes'">
+                    <select class="form-control" ng-model="$ctrl.form.expires" ng-options="i.key as i.label for i in $ctrl.expireOptions | objectToOrderedArray:'minutes'">
                         <option value="">Never</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label class="control-label col-sm-4 col-lg-3">
                     </label>
                     <input class="form-control btn btn-primary" name="submit" type="submit" value="Create Token">
                 </div>
             </form>
 
         </div>
 
 
     </div>
 
     <div class="panel panel-default">
-        <table st-table="displayedCollection" st-safe-src="auth_tokens.tokens" class="table table-striped">
+        <table st-table="displayedCollection" st-safe-src="$ctrl.tokens" class="table table-striped">
             <caption>Your current tokens</caption>
             <thead>
             <tr>
                 <th st-sort="description"><a>Description</a></th>
                 <th class="created"><a>Created</a></th>
                 <th class="expires"><a>Expires</a></th>
                 <th class="options"></th>
             </tr>
             <tr>
                 <th><input st-search="description" placeholder="search for description" class="form-control" type="search" st-delay="1"/></th>
                 <th></th>
                 <th></th>
                 <th></th>
             </tr>
             </thead>
             <tbody>
 
             <tr ng-repeat="token in displayedCollection">
                 <td><p>{{token.description}}</p>
                     <pre ng-init="token.limit = 8"  ng-mouseover="token.limit = 99" ng-mouseleave="token.limit = 8">{{token.token| limitTo:token.limit}}...</pre>
                 </td>
                 <td><span data-uib-tooltip="{{token.creation_date}}">{{token.creation_date | isoToRelativeTime}}</span></td>
                 <td><span ng-if="token.expires" data-uib-tooltip="{{token.expires}}">{{token.expires | isoToRelativeTime}}</span>
                     <span ng-if="!token.expires">Never</span></td>
                 <td>
                         <span class="dropdown" data-uib-dropdown on-toggle="toggled(open)">
                             <a class="btn btn-danger" data-uib-dropdown-toggle><span class="fa fa-trash-o"></span></a>
                           <ul class="dropdown-menu">
                               <li><a>No</a></li>
-                              <li><a ng-click="auth_tokens.removeToken(token)">Yes</a></li>
+                              <li><a ng-click="$ctrl.removeToken(token)">Yes</a></li>
                           </ul>
                         </span>
                 </td>
             </tr>
             </tbody>
         </table>
     </div>
 
 </div>

frontend/src/components/views/user-auth-tokens-view/user-auth-tokens-view.js

@@ -1,63 +1,69 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers').controller('UserAuthTokensController', UserAuthTokensController);
+angular.module('appenlight.components.userAuthTokensView', [])
+    .component('userAuthTokensView', {
+        templateUrl: 'components/views/user-auth-tokens-view/user-auth-tokens-view.html',
+        controller: userAuthTokensViewController
+    });
 
-UserAuthTokensController.$inject = ['$filter', 'userSelfPropertyResource', 'AeConfig'];
+userAuthTokensViewController.$inject = ['userSelfPropertyResource', 'AeConfig'];
 
-function UserAuthTokensController($filter, userSelfPropertyResource, AeConfig) {
-    console.debug('UserAuthTokensController');
+function userAuthTokensViewController(userSelfPropertyResource, AeConfig) {
+    console.debug('userAuthTokensViewController');
     var vm = this;
     vm.loading = {tokens: true};
 
     vm.expireOptions = AeConfig.timeOptions;
 
     vm.tokens = userSelfPropertyResource.query({key: 'auth_tokens'},
         function (data) {
             vm.loading.tokens = false;
         });
 
     vm.addToken = function () {
         vm.loading.tokens = true;
         userSelfPropertyResource.save({key: 'auth_tokens'},
             vm.form,
             function (data) {
                 vm.loading.tokens = false;
                 setServerValidation(vm.TokenForm);
                 vm.form = {};
                 vm.tokens.push(data);
             }, function (response) {
                 vm.loading.tokens = false;
                 if (response.status == 422) {
                     setServerValidation(vm.TokenForm, response.data);
                 }
             })
-    }
+    };
 
     vm.removeToken = function (token) {
-        userSelfPropertyResource.delete({key: 'auth_tokens',
-            token:token.token},
+        userSelfPropertyResource.delete({
+                key: 'auth_tokens',
+                token: token.token
+            },
             function () {
                 var index = vm.tokens.indexOf(token);
                 if (index !== -1) {
                     vm.tokens.splice(index, 1);
                 }
             })
     }
 }

frontend/src/components/views/user-password-view/user-password-view.html

@@ -1,50 +1,50 b''
-<ng-include src="'templates/loader.html'" ng-if="password.loading.password"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.password"></ng-include>
 
-<div ng-show="!password.loading.password">
+<div ng-show="!$ctrl.loading.password">
 
     <div class="panel panel-default">
         <div class="panel-heading" ng-include="'templates/user/breadcrumbs.html'"></div>
         <div class="panel-body">
 
-            <form class="form-horizontal" name="password.passwordForm" ng-submit="password.updatePassword()">
+            <form class="form-horizontal" name="$ctrl.passwordForm" ng-submit="$ctrl.updatePassword()">
                 <div class="form-group" id="row-old_password">
-                    <data-form-errors errors="password.passwordForm.ae_validation.old_password"></data-form-errors>
+                    <data-form-errors errors="$ctrl.passwordForm.ae_validation.old_password"></data-form-errors>
                     <label for="old_password" id="label-old_password" class="control-label col-sm-4 col-lg-3">
                         Old Password
                         <span class="required">*</span>
                     </label>
                     <div class="col-sm-8 col-lg-9">
-                        <input class="form-control" id="old_password" name="old_password" type="password" ng-model="password.form.old_password">
+                        <input class="form-control" id="old_password" name="old_password" type="password" ng-model="$ctrl.form.old_password">
                     </div>
                 </div>
                 <div class="form-group" id="row-new_password">
-                    <data-form-errors errors="password.passwordForm.ae_validation.new_password"></data-form-errors>
+                    <data-form-errors errors="$ctrl.passwordForm.ae_validation.new_password"></data-form-errors>
                     <label for="new_password" id="label-new_password" class="control-label col-sm-4 col-lg-3">
                         New Password
                         <span class="required">*</span>
                     </label>
                     <div class="col-sm-8 col-lg-9">
-                        <input class="form-control" id="new_password" name="new_password" type="password" ng-model="password.form.new_password">
+                        <input class="form-control" id="new_password" name="new_password" type="password" ng-model="$ctrl.form.new_password">
                     </div>
                 </div>
                 <div class="form-group" id="row-new_password_confirm">
-                    <data-form-errors errors="password.passwordForm.ae_validation.new_password_confirm"></data-form-errors>
+                    <data-form-errors errors="$ctrl.passwordForm.ae_validation.new_password_confirm"></data-form-errors>
                     <label for="new_password_confirm" id="label-new_password_confirm" class="control-label col-sm-4 col-lg-3">
                         Confirm Password
                         <span class="required">*</span>
                     </label>
                     <div class="col-sm-8 col-lg-9">
-                        <input class="form-control" id="new_password_confirm" name="new_password_confirm" type="password" ng-model="password.form.new_password_confirm">
+                        <input class="form-control" id="new_password_confirm" name="new_password_confirm" type="password" ng-model="$ctrl.form.new_password_confirm">
                     </div>
                 </div>
                 <div class="form-group" id="row-submit">
                     <label for="submit" id="label-submit" class="control-label col-sm-4 col-lg-3"></label>
                     <div class="col-sm-8 col-lg-9">
                         <input class="form-control SubmitField btn btn-primary" id="submit" name="submit" type="submit" value="Change Password">
                     </div>
                 </div>
             </form>
 
         </div>
     </div>
 </div>

frontend/src/components/views/user-password-view/user-password-view.js

@@ -1,47 +1,50 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('UserPasswordController', UserPasswordController)
+angular.module('appenlight.components.userPasswordView', [])
+    .component('userPasswordView', {
+        templateUrl: 'components/views/user-password-view/user-password-view.html',
+        controller: UserPasswordViewController
+    });
 
-UserPasswordController.$inject = ['userSelfPropertyResource'];
+UserPasswordViewController.$inject = ['userSelfPropertyResource'];
 
-function UserPasswordController(userSelfPropertyResource) {
-    console.debug('UserPasswordController');
+function UserPasswordViewController(userSelfPropertyResource) {
+    console.debug('UserPasswordViewController');
     var vm = this;
     vm.loading = {password: false};
     vm.form = {};
 
     vm.updatePassword = function () {
         vm.loading.password = true;
         console.log('updatePassword');
         userSelfPropertyResource.update({key: 'password'}, vm.form, function () {
             vm.loading.password = false;
             vm.form = {};
             setServerValidation(vm.passwordForm);
         }, function (response) {
             if (response.status == 422) {
-                console.log('vm',vm);
+                console.log('vm', vm);
                 setServerValidation(vm.passwordForm, response.data);
                 console.log(response.data);
             }
             vm.loading.password = false;
         });
     }
 }

frontend/src/routes.js

@@ -1,244 +1,240 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
 angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
 
     $urlRouterProvider.otherwise('/ui');
 
     $stateProvider.state('logs', {
         url: '/ui/logs?resource',
         component: 'logsBrowserView'
     });
 
     $stateProvider.state('front_dashboard', {
         url: '/ui',
         component: 'indexDashboardView'
     });
     
     $stateProvider.state('report', {
         abstract: true,
         url: '/ui/report',
         templateUrl: 'templates/reports/parent_view.html'
     });
 
     $stateProvider.state('report.list', {
         url: '?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
         templateUrl: 'templates/reports/list.html',
         controller: 'ReportsListController as reports_list'
     });
 
     $stateProvider.state('report.list_slow', {
         url: '/list_slow?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
         templateUrl: 'templates/reports/list_slow.html',
         controller: 'ReportsListSlowController as reports_list'
     });
 
     $stateProvider.state('report.view_detail', {
         url: '/:groupId/:reportId',
         templateUrl: 'templates/reports/view.html',
         controller: 'ReportsViewController as report'
     });
     $stateProvider.state('report.view_group', {
         url: '/:groupId',
         templateUrl: 'templates/reports/view.html',
         controller: 'ReportsViewController as report'
     });
     $stateProvider.state('events', {
         url: '/ui/events',
         component: 'eventBrowserView'
     });
     $stateProvider.state('admin', {
         url: '/ui/admin',
         templateUrl: 'templates/admin/parent_view.html'
     });
     $stateProvider.state('admin.user', {
         abstract: true,
         url: '/user',
         templateUrl: 'templates/admin/users/parent_view.html'
     });
     $stateProvider.state('admin.user.list', {
         url: '/list',
         templateUrl: 'templates/admin/users/users_list.html',
         controller: 'AdminUsersController as users'
     });
     $stateProvider.state('admin.user.create', {
         url: '/create',
         templateUrl: 'templates/admin/users/users_create.html',
         controller: 'AdminUsersCreateController as user'
     });
     $stateProvider.state('admin.user.update', {
         url: '/{userId}/update',
         templateUrl: 'templates/admin/users/users_create.html',
         controller: 'AdminUsersCreateController as user'
     });
 
 
     $stateProvider.state('admin.group', {
         abstract: true,
         url: '/group',
         templateUrl: 'templates/admin/groups/parent_view.html'
     });
     $stateProvider.state('admin.group.list', {
         url: '/list',
         templateUrl: 'templates/admin/groups/groups_list.html',
         controller: 'AdminGroupsController as groups'
     });
     $stateProvider.state('admin.group.create', {
         url: '/create',
         templateUrl: 'templates/admin/groups/groups_create.html',
         controller: 'AdminGroupsCreateController as group'
     });
     $stateProvider.state('admin.group.update', {
         url: '/{groupId}/update',
         templateUrl: 'templates/admin/groups/groups_create.html',
         controller: 'AdminGroupsCreateController as group'
     });
 
     $stateProvider.state('admin.application', {
         abstract: true,
         url: '/application',
         templateUrl: 'templates/admin/users/parent_view.html'
     });
 
     $stateProvider.state('admin.application.list', {
         url: '/list',
         templateUrl: 'templates/admin/applications/applications_list.html',
         controller: 'AdminApplicationsListController as applications'
     });
 
     $stateProvider.state('admin.partitions', {
         url: '/partitions',
         templateUrl: 'templates/admin/partitions.html',
         controller: 'AdminPartitionsController as partitions'
     });
     $stateProvider.state('admin.system', {
         url: '/system',
         templateUrl: 'templates/admin/system.html',
         controller: 'AdminSystemController as system'
     });
 
     $stateProvider.state('admin.configs', {
         abstract: true,
         url: '/configs',
         templateUrl: 'templates/admin/configs/parent_view.html'
     });
 
     $stateProvider.state('admin.configs.list', {
         url: '/list',
         templateUrl: 'templates/admin/configs/edit.html',
         controller: 'ConfigsListController as configs'
     });
 
     $stateProvider.state('user', {
         url: '/ui/user',
         component: 'settingsView'
     });
 
     $stateProvider.state('user.profile', {
         abstract: true,
         template: '<ui-view></ui-view>'
     });
     $stateProvider.state('user.profile.edit', {
         url: '/profile',
         component: 'userProfileView'
     });
 
 
     $stateProvider.state('user.profile.password', {
         url: '/password',
-        templateUrl: 'templates/user/profile_password.html',
-        controller: 'UserPasswordController as password'
+        component: 'userPasswordView'
     });
 
     $stateProvider.state('user.profile.identities', {
         url: '/identities',
         component: 'userIdentitiesView'
     });
 
     $stateProvider.state('user.profile.auth_tokens', {
         url: '/auth_tokens',
-        templateUrl: 'templates/user/auth_tokens.html',
-        controller: 'UserAuthTokensController as auth_tokens'
+        component: 'userAuthTokensView'
     });
 
     $stateProvider.state('user.alert_channels', {
         abstract: true,
         url: '/alert_channels',
-        templateUrl: 'templates/user/alert_channels.html'
+        template: '<ui-view></ui-view>'
     });
 
     $stateProvider.state('user.alert_channels.list', {
         url: '/list',
-        templateUrl: 'templates/user/alert_channels_list.html',
-        controller: 'AlertChannelsController as channels'
+        component: 'userAlertChannelsListView'
     });
 
     $stateProvider.state('user.alert_channels.email', {
         url: '/email',
-        templateUrl: 'templates/user/alert_channels_email.html',
-        controller: 'AlertChannelsEmailController as email'
+        component: 'userAlertChannelsEmailNewView'
     });
 
     $stateProvider.state('applications', {
         abstract: true,
         url: '/ui/applications',
         templateUrl: 'templates/applications/parent_view.html'
     });
 
     $stateProvider.state('applications.list', {
         url: '/list',
         templateUrl: 'templates/applications/list.html',
         controller: 'ApplicationsListController as applications'
     });
     $stateProvider.state('applications.update', {
         url: '/{resourceId}/update',
         templateUrl: 'templates/applications/applications_update.html',
         controller: 'ApplicationsUpdateController as application'
     });
 
     $stateProvider.state('applications.integrations', {
         url: '/{resourceId}/integrations',
         templateUrl: 'templates/applications/integrations.html',
         controller: 'IntegrationsListController as integrations',
         data: {
             resource: null
         }
     });
 
     $stateProvider.state('applications.purge_logs', {
         url: '/purge_logs',
         templateUrl: 'templates/applications/applications_purge_logs.html',
         controller: 'ApplicationsPurgeLogsController as applications_purge'
     });
 
     $stateProvider.state('applications.integrations.edit', {
         url: '/{integration}',
         templateUrl: function ($stateParams) {
             return 'templates/applications/integrations/' + $stateParams.integration + '.html'
         },
         controller: 'IntegrationController as integration'
     });
 
     $stateProvider.state('tests', {
         url: '/ui/tests',
         templateUrl: 'templates/user/alert_channels_test.html',
         controller: 'AlertChannelsTestController as test_action'
     });
 
 }]);

frontend/src/templates/user/breadcrumbs.html

@@ -1,12 +1,11 b''
 <ol class="breadcrumb" ng-show="$state.includes('user.profile')">
     <li>Settings</li>
     <li ng-show="$state.includes('user.profile.edit')" ng-class="{bold:$state.is('user.profile.edit')}">User Profile</li>
     <li ng-show="$state.includes('user.profile.password')" ng-class="{bold:$state.is('user.profile.password')}">Password</li>
     <li ng-show="$state.includes('user.profile.identities')" ng-class="{bold:$state.is('user.profile.identities')}">Identities</li>
 </ol>
-
 <ol class="breadcrumb" ng-show="$state.includes('user.alert_channels')">
 <li>Notifications</li>
 <li ng-show="$state.includes('user.alert_channels.list')" ng-class="{bold:$state.is('user.alert_channels.list')}">Alert Channels</li>
 <li ng-show="$state.includes('user.alert_channels.email')" ng-class="{bold:$state.is('user.alert_channels.email')}">Create email channel</li>
 </ol>