Copy activation link feature in Admin tool [COR-503]

bower.json

@@ -24,19 +24,20 @@
     "angular-jwt": "~0.0.9",
     "angular-footable": "~1.0.3",
     "appirio-tech-ng-auth": "3.x.x",
-    "appirio-tech-ng-api-services": "0.x.x"
+    "appirio-tech-ng-api-services": "0.x.x",
+    "angular-clipboard": "~1.2.1"
   },
   "overrides": {
     "bootstrap": {
       "main": [
         "less/bootstrap.less",
+        "dist/css/bootstrap.css",
         "dist/js/bootstrap.js",
         "dist/fonts/glyphicons-halflings-regular.eot",
         "dist/fonts/glyphicons-halflings-regular.svg",
         "dist/fonts/glyphicons-halflings-regular.ttf",
         "dist/fonts/glyphicons-halflings-regular.woff",
-        "dist/fonts/glyphicons-halflings-regular.woff2",
-        "css/bootstrap.css"
+        "dist/fonts/glyphicons-halflings-regular.woff2"
       ]
     },
     "footable": {

src/app/app.js

@@ -14,7 +14,8 @@ angular.module('supportAdminApp', [
               'app.constants',
               'appirio-tech-ng-api-services',
               'appirio-tech-ng-auth',
-              'ui.footable'])
+              'ui.footable',
+              'angular-clipboard'])
   // In the run phase of your Angular application
   .run(function($rootScope, $location, AuthService, $state, UserV3Service) {
     // Listen to '$locationChangeSuccess', not '$stateChangeStart'

src/app/login/login.controller.js

@@ -32,12 +32,12 @@ angular.module('supportAdminApp')
           $userService.findById(token.userId).then(
             function(currentUser) {
               $rootScope.currentUser = currentUser;
-              $state.go('index.main');
+              $state.go('index.users');
             },
             function(err) {
               $log.error('Failed to get user data.');
               $log.error(err);
-              $state.go('index.main');
+              $state.go('index.users');
             }
           );
         };

src/app/users/constants.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var module = angular.module('supportAdminApp');
+
+module.constant('users.Constants', {
+
+  MSG_CLIPBORD_TOOLTIP: "Copy to clipboard",
+
+  MSG_CLIPBOARD_COPIED: "Copied",
+
+  DICT_USER_STATUS: {
+    'A': 'Active',
+    'U': 'Unverified',
+    '4': 'Deactivated(User request)',
+    '5': 'Deactivated(Duplicate account)',
+    '6': 'Deactivated(Cheating account)'
+  }
+});

src/app/users/user.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var module = angular.module('supportAdminApp');
+
+module.factory('User', ['$log', 'users.Constants', 'API_URL',
+  function($log, $const, API_URL) {
+
+    var User = function() {};
+
+
+    User.prototype.statusDesc = function() {
+      return $const.DICT_USER_STATUS[this.status];
+    };
+
+    User.prototype.createdAtLabel = function() {
+      return this.formatDate(this.createdAt);
+    };
+
+    User.prototype.modifiedAtLabel = function() {
+      return this.formatDate(this.modifiedAt);
+    };
+
+    User.prototype.formatDate = function(isoDateText) {
+      return isoDateText && isoDateText.replace("T"," ").replace(".000Z","");
+    };
+
+    /**
+    * create an activation link from an activation code.
+    */
+    User.prototype.getActivationLink = function() {
+      if(!this.credential || !this.credential.activationCode)
+        return '';
+      return API_URL + '/pub/activation.html?code=' + this.credential.activationCode + '&retUrl=https%3A%2F%2Fwww.topcoder.com%2Fskill-picker%2F';
+    };
+
+    return User;
+  }
+]);
+
+

src/app/users/users.controller.js

@@ -3,8 +3,8 @@
 var module = angular.module('supportAdminApp');
 
 module.controller('users.UserSearchController', [
-  '$log', '$scope', '$rootScope', '$timeout', '$state', '$modal', 'AuthService','UserService', 'Alert',
-    function ($log, $scope, $rootScope, $timeout, $state, $modal, $authService, $userService, $alert) {
+  '$log', '$scope', '$rootScope', '$timeout', '$state', '$modal', 'AuthService', 'UserService', 'Alert', 'users.Constants', 'API_URL',
+    function ($log, $scope, $rootScope, $timeout, $state, $modal, $authService, $userService, $alert, $const, API_URL) {
 
       // footable
       angular.element(document).ready(function () {
@@ -72,31 +72,31 @@ module.controller('users.UserSearchController', [
             $scope.formSearch.setLoading(false);
             $timeout(function(){
               $('.footable').trigger('footable_redraw');
-              }, 100);
+            }, 100);
           },
           function(error) {
             $alert.error(error.error, $scope);
             $scope.formSearch.setLoading(false);
           }
         );
       };
-
+      
       // list
       $scope.users = [];
 
-      $scope.format = function(isoDateText) {
-        return isoDateText && isoDateText.replace("T"," ").replace(".000Z","");
-      };
+      // tooltip for activation link copy
+      $scope.tooltip = {
+        message : $const.MSG_CLIPBORD_TOOLTIP,
 
-      var statusLabels = {
-        'A': 'Active',
-        'U': 'Unverified',
-        '4': 'Deactivated(User request)',
-        '5': 'Deactivated(Duplicate account)',
-        '6': 'Deactivated(Cheating account)'
-      };
-      $scope.statusLabel = function(status) {
-        return statusLabels[status] || 'Unknown';
+        success : function() {
+          this.message = $const.MSG_CLIPBOARD_COPIED;
+        },
+        fail : function(err) {
+          $log.debug(err);
+        },
+        reset : function() {
+          $timeout(function(){ $scope.tooltip.message = $const.MSG_CLIPBORD_TOOLTIP; }, 250);
+        }
       };
 
       $scope.activate = function(index) {
@@ -123,9 +123,6 @@ module.controller('users.UserSearchController', [
       };
 
       $scope.openDeactivateDialog = function(index) {
-        var user = $scope.users[index];
-
-        //if(window.confirm('Are you sure you want to deactivate user \'' + user.handle + '\'?')) {
         var modalInstance = $modal.open({
           size: 'sm',
           templateUrl: 'app/users/status-update-dialog.html',
@@ -234,8 +231,8 @@ module.controller('users.UserEditDialogController', [
 ]);
 
 module.controller('users.StatusUpdateDialogController', [
-  '$scope', '$rootScope', '$timeout', '$state', '$modalInstance', 'AuthService', 'UserService', 'Alert', 'user',
-    function ($scope, $rootScope, $timeout, $state, $modalInstance, $authService, $userService, $alert, user) {
+  '$scope', '$rootScope', '$timeout', '$state', '$modalInstance', 'AuthService', 'UserService', 'users.Constants', 'Alert', 'user',
+    function ($scope, $rootScope, $timeout, $state, $modalInstance, $authService, $userService, $const, $alert, user) {
 
       $scope.form = {
         status  : user.status,

src/app/users/users.html

@@ -9,7 +9,7 @@
 <script src="../bower_components/footable/js/footable.paginate.js"></script>
 <script src="../bower_components/footable/js/footable.sort.js"></script>
 -->
-
+    
 <div class="row wrapper border-bottom white-bg page-heading">
   <div class="col-lg-10">
     <h2>Members</h2>
@@ -88,10 +88,23 @@ <h2>Members</h2>
                   <td>{{user.handle}}</td>
                   <td>{{user.email}}</td>
                   <td>{{user.firstName}} {{user.lastName}}</td>
-                  <td>{{statusLabel(user.status)}}</td>
-                  <td>{{format(user.createdAt)}}</td>
-                  <td>{{format(user.modifiedAt)}}</td>
-                  <td>{{user.credential.activationCode}}</td>
+                  <td>{{user.statusDesc()}}</td>
+                  <td>{{user.createdAtLabel()}}</td>
+                  <td>{{user.modifiedAtLabel()}}</td>
+                  <td>
+                    {{user.credential.activationCode}}
+                    <div class="input-group" style="width: 400px;">
+                      <input type="text" value="{{user.getActivationLink()}}" class="form-control" readonly="readonly">
+
+                      <span class="input-group-btn" data-tooltip="{{tooltip.message}}" placement="right" title="Copy to clipboard">
+                        <button clipboard text="user.getActivationLink()" type="button" class="btn btn-default"
+                              on-copied="tooltip.success()" on-error="tooltip.fail(err)" ng-mouseleave="tooltip.reset()">
+                          <i class="fa fa-clipboard text-primary"></i>
+                        </button>
+                      </span>
+                      </span>
+                    </div>
+                  </td>
                   <td data-value="{{user.active}}">
                     <a href="#" ng-show="user.active"><i class="fa fa-check text-navy"></i></a>
                   </td>