components: user and alert channels components

frontend/src/app.js

@@ -48,6 +48,10 b" angular.module('appenlight.components', ["
     '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', [

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

@@ -23,8 +23,9 b" angular.module('appenlight.components.settingsView', [])"
         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,20 +1,20 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">

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

@@ -17,8 +17,11 b''
 // # 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'];
 

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

@@ -1,19 +1,19 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>
@@ -29,7 +29,7 b''
             <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"
@@ -37,11 +37,11 b''
                             <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>
 
@@ -49,7 +49,7 b''
                             <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>
 

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

@@ -17,11 +17,15 b''
 // # 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};

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

@@ -1,6 +1,6 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>
@@ -11,20 +11,20 b''
 
             <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>
@@ -41,7 +41,7 b''
     </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>
@@ -71,7 +71,7 b''
                             <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>

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

@@ -17,12 +17,16 b''
 // # 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};
 
@@ -48,11 +52,13 b' function UserAuthTokensController($filter, userSelfPropertyResource, AeConfig) {'
                     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) {

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

@@ -1,40 +1,40 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">

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

@@ -17,13 +17,16 b''
 // # 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 = {};
@@ -37,7 +40,7 b' function UserPasswordController(userSelfPropertyResource) {'
             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);
             }

frontend/src/routes.js

@@ -162,8 +162,7 b" angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', fun"
 
     $stateProvider.state('user.profile.password', {
         url: '/password',
-        templateUrl: 'templates/user/profile_password.html',
-        controller: 'UserPasswordController as password'
+        component: 'userPasswordView'
     });
 
     $stateProvider.state('user.profile.identities', {
@@ -173,26 +172,23 b" angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', fun"
 
     $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', {

frontend/src/templates/user/breadcrumbs.html

@@ -4,7 +4,6 b''
     <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>