T1250 create user page

Summary:
- create user page
- unused params in function signatures shouldnt trip the linter - see "A note about function arguments" at https://jslinterrors.com/unused-a

Test Plan: ...

Reviewers: seth, shadowhand

Reviewed By: shadowhand

Subscribers: rjmackay

Maniphest Tasks: T1250

Differential Revision: https://phabricator.ushahidi.com/D592

.jshintrc

@@ -8,7 +8,7 @@
 	"smarttabs": true,
 	"trailing": true,
 	"undef": true,
-	"unused": true,
+	"unused": "vars",
 	"browser" : true,
 	"node" : true,
 	"newcap": true,

app/locales/en.json

@@ -402,6 +402,13 @@
     "user_profile" : {
         "title" : "Edit profile"
     },
+    "user_create" :  {
+        "title" : "Create User",
+        "full_name": "Display Name",
+        "username": "Username",
+        "email": "Email Address",
+        "role": "Role",
+    },
     "footer" : {
         "copyright_info" : "Powered by Ushahidi. | © Copyright {{owner_name}}, 2013"
     },

app/post/controllers/post-create-controller.js

@@ -6,14 +6,18 @@ module.exports = [
     'PostEndpoint',
     'FormEndpoint',
     'FormAttributeEndpoint',
+    'Notify',
+    '_',
 function(
     $scope,
     $translate,
     $location,
     postEntity,
     PostEndpoint,
     FormEndpoint,
-    FormAttributeEndpoint
+    FormAttributeEndpoint,
+    Notify,
+    _
 ) {
     $translate('post.create_post').then(function(title){
         $scope.title = title;
@@ -50,14 +54,13 @@ function(
     $scope.savePost = function(post) {
         $scope.saving_post = true;
         var response = PostEndpoint.save(post, function () {
-            if (response.errors){
-                // Handle errors
-                console.log(response);
-            }
-
             if (response.id) {
                 $location.path('/posts/detail/' + response.id);
             }
+        }, function(errorResponse) { // errors
+            var errors = _.pluck(errorResponse.data && errorResponse.data.errors, 'message');
+            errors && Notify.showAlerts(errors);
+            $scope.saving_post = false;
         });
     };
 

app/user/controllers/user-create-controller.js

@@ -0,0 +1,55 @@
+module.exports = [
+    '$scope',
+    '$translate',
+    '$location',
+    'UserEndpoint',
+    'Notify',
+    '_',
+function(
+    $scope,
+    $translate,
+    $location,
+    UserEndpoint,
+    Notify,
+    _
+) {
+    $translate('user_create.title').then(function(title) {
+        $scope.title = title;
+    });
+
+    $scope.user = {};
+    $scope.saving_user = false;
+
+    $scope.goBack = function() {
+        $location.path('/users/');
+    };
+
+    $scope.saveUser = function(user) {
+        $scope.saving_user = true;
+        var response = UserEndpoint.save(user, function() {
+            if (response.id) {
+                $location.path('/users/' + response.id + '/profile');
+            }
+        }, function(errorResponse) { // error
+            var errors = _.pluck(errorResponse.data && errorResponse.data.errors, 'message');
+            errors && Notify.showAlerts(errors);
+            $scope.saving_user = false;
+        });
+    };
+
+    $scope.roles = [
+        // TODO: make this an endpoint
+        {
+            name: 'guest',
+            display_name: 'Guest',
+        },
+        {
+            name: 'user',
+            display_name: 'Member',
+        },
+        {
+            name: 'admin',
+            display_name: 'Admin',
+        }
+    ];
+}];

app/user/user-routes.js

@@ -4,8 +4,13 @@ module.exports = ['$routeProvider', function($routeProvider) {
             controller: require('./controllers/user-manager-controller.js'),
             templateUrl: 'templates/users/users.html'
         })
+        .when('/users/create', {
+            controller: require('./controllers/user-create-controller.js'),
+            templateUrl: 'templates/users/create.html'
+        })
         .when('/users/:id/profile', {
             controller: require('./controllers/user-profile-controller.js'),
             templateUrl: 'templates/users/profile.html'
-        });
+        })
+        ;
 }];

sass/pages/users/_create.scss

@@ -0,0 +1,13 @@
+.create-user-header {
+    @include header($blueGray);
+    padding: 20px;
+
+    @include media($small) {
+        padding: 30px;
+    }
+
+    .title {
+        color: $white;
+        // margin-bottom: 30px;
+    }
+}

sass/pages/users/_users.scss

@@ -62,7 +62,7 @@
                 margin-bottom: 0;
             }
 
-            &.add-user {
+            & a {
                 @include button($black);
                 color: $white;
             }

sass/style.scss

@@ -145,6 +145,7 @@
 //Users
 @import "pages/users/users";
 @import "pages/users/profile";
+@import "pages/users/create";
 // Sets
 @import "pages/sets/add-to-set";
 // Admin

server/www/templates/users/create.html

@@ -0,0 +1,30 @@
+<div class="container">
+
+    <div class="create-user-header">
+        <h4 class="title"><a ng-href="/users" title="Go Back" class="back-button">&laquo;</a> {{title}}</h4>
+    </div> <!-- end .manage-users-header -->
+
+    <div class="wrapper form-wrapper">
+        <form id="user_create" class="container">
+            <label translate>user.full_name</label>
+            <input id="full_name" type="text" placeholder="{{ 'user_create.full_name'|translate }}" required ng-minlength="3" ng-maxlength="150" ng-model="user.realname">
+
+            <label translate>user.username</label>
+            <input id="username" type="text" placeholder="{{ 'user_create.username'|translate }}" required ng-minlength="3" ng-maxlength="150" ng-model="user.username">
+
+            <label translate>user.email</label>
+            <input id="email" type="email" placeholder="{{ 'user_create.email'|translate }}" required ng-minlength="5" ng-maxlength="150" ng-model="user.email">
+
+            <label translate>user.password</label>
+            <input id="password" type="password" required ng-minlength="5" ng-maxlength="150" ng-model="user.password">
+
+            <label translate>user.role</label>
+            <select id="role" ng-model="user.role" ng-options="role.name as role.display_name for role in roles"></select>
+
+            <p class="submit-button">
+                <button ng-click="saveUser(user)" ng-disabled="form.$invalid || saving_user"><i class="fa fa-cog fa-spin ng-hide" ng-show="saving_user"></i> <span class="ng-scope" translate>user.create_user</span></button>
+            </p>
+        </form>
+    </div> <!-- end .wrapper -->
+
+</div> <!-- end .container -->

server/www/templates/users/users.html

@@ -29,7 +29,7 @@ <h5 class="title" translate translate-value-from="1" translate-value-to="3" tran
                     </select>
                 </li>
                 <li class="add-user">
-                    <i class="fa  fa-plus-circle"></i> <span translate>user.add_user</span>
+                    <a ng-href="/users/create"><i class="fa  fa-plus-circle"></i><span translate>user.add_user</a></span>
                 </li>
             </ul>
         </div> <!-- end .filter-tabs -->