Feature #3748: Refactor user-creation

It is now a class. It also includes password confirmation

src/sunstone/public/app/tabs/groups-tab/form-panels/create.js

@@ -43,6 +43,8 @@ define(function(require) {
       }
     };
 
+    this.userCreation = new UserCreation(FORM_PANEL_ID);
+
     BaseFormPanel.call(this);
   }
 
@@ -64,29 +66,31 @@ define(function(require) {
   function _htmlWizard() {
     return TemplateWizardHTML({
       'formPanelId': this.formPanelId,
-      'userCreationHTML': UserCreation.html()
+      'userCreationHTML': this.userCreation.html()
     });
   }
 
   function _setup(context) {
-    UserCreation.setup( $("#admin_user_wrapper",context) );
+    var that = this;
+
+    this.userCreation.setup( $("#admin_user_wrapper",context) );
     Tips.setup(context);
 
     $('input#name', context).change(function(){
       var val = $(this).val();
 
-      $('#username',context).val(val + "-admin");
+      that.userCreation.setName(context, val + "-admin");
     });
 
     $('input#admin_user', context).change(function(){
       if ($(this).prop('checked')) {
-        UserCreation.enable( $("#admin_user_wrapper",context) );
+        that.userCreation.enable( $("#admin_user_wrapper",context) );
       } else {
-        UserCreation.disable( $("#admin_user_wrapper",context) );
+        that.userCreation.disable( $("#admin_user_wrapper",context) );
       }
     });
 
-    UserCreation.disable( $("#admin_user_wrapper",context) );
+    this.userCreation.disable( $("#admin_user_wrapper",context) );
 
     $.each($('[id^="group_res"]', context), function(){
       $(this).prop("checked", true);
@@ -116,7 +120,7 @@ define(function(require) {
     var user_json = null;
 
     if ( $('#admin_user', context).prop('checked') ){
-      user_json = UserCreation.retrieve($("#admin_user_wrapper",context));
+      user_json = this.userCreation.retrieve($("#admin_user_wrapper",context));
     }
 
     var group_json = {
@@ -126,7 +130,7 @@ define(function(require) {
     };
 
     if (user_json){
-      group_json["group"]["group_admin"] = user_json["user"];
+      group_json["group"]["group_admin"] = user_json;
     }
 
     var resources = "";

src/sunstone/public/app/tabs/users-tab/dialogs/auth-driver.js

@@ -24,6 +24,8 @@ define(function(require) {
   function Dialog() {
     this.dialogId = DIALOG_ID;
 
+    this.userCreation = new UserCreation(DIALOG_ID, {name: false, password: false});
+
     BaseDialog.call(this);
   }
 
@@ -43,14 +45,14 @@ define(function(require) {
   function _html() {
     return TemplateHTML({
       'dialogId': this.dialogId,
-      'userCreationHTML': UserCreation.html()
+      'userCreationHTML': this.userCreation.html()
     });
   }
 
   function _setup(context) {
     var that = this;
 
-    UserCreation.setup(context, {name: false, password: false});
+    this.userCreation.setup(context);
 
     context.off('invalid.fndtn.abide', '#' + DIALOG_ID + 'Form');
     context.off('valid.fndtn.abide', '#' + DIALOG_ID + 'Form');
@@ -64,7 +66,7 @@ define(function(require) {
       // Fix for valid event firing twice
       if (e.namespace != 'abide.fndtn') { return; }
 
-      var inputs = UserCreation.retrieve(context);
+      var inputs = that.userCreation.retrieve(context);
 
       var selElems = Sunstone.getDataTable(TAB_ID).elements();
 

src/sunstone/public/app/tabs/users-tab/dialogs/password.js

@@ -24,6 +24,8 @@ define(function(require) {
   function Dialog() {
     this.dialogId = DIALOG_ID;
 
+    this.userCreation = new UserCreation(DIALOG_ID, {name: false, auth_driver: false});
+
     BaseDialog.call(this);
   }
 
@@ -43,14 +45,14 @@ define(function(require) {
   function _html() {
     return TemplateHTML({
       'dialogId': this.dialogId,
-      'userCreationHTML': UserCreation.html()
+      'userCreationHTML': this.userCreation.html()
     });
   }
 
   function _setup(context) {
     var that = this;
 
-    UserCreation.setup(context, {name: false, auth_driver: false});
+    this.userCreation.setup(context);
 
     context.off('invalid.fndtn.abide', '#' + DIALOG_ID + 'Form');
     context.off('valid.fndtn.abide', '#' + DIALOG_ID + 'Form');
@@ -64,7 +66,7 @@ define(function(require) {
       // Fix for valid event firing twice
       if (e.namespace != 'abide.fndtn') { return; }
 
-      var inputs = UserCreation.retrieve(context);
+      var inputs = that.userCreation.retrieve(context);
 
       var selElems = Sunstone.getDataTable(TAB_ID).elements();
 

src/sunstone/public/app/tabs/users-tab/form-panels/create.js

@@ -37,6 +37,8 @@ define(function(require) {
       }
     };
 
+    this.userCreation = new UserCreation(FORM_PANEL_ID);
+
     BaseFormPanel.call(this);
   }
 
@@ -57,17 +59,17 @@ define(function(require) {
   function _htmlWizard() {
     return TemplateWizardHTML({
       'formPanelId': this.formPanelId,
-      'userCreationHTML': UserCreation.html()
+      'userCreationHTML': this.userCreation.html()
     });
   }
 
   function _setup(context) {
-    UserCreation.setup(context);
+    this.userCreation.setup(context);
   }
 
   function _submitWizard(context) {
     var user_json = {
-      "user" : UserCreation.retrieve(context)
+      "user" : this.userCreation.retrieve(context)
     };
 
     Sunstone.runAction("User.create",user_json);

src/sunstone/public/app/tabs/users-tab/utils/user-creation.js

@@ -2,61 +2,85 @@ define(function(require) {
 
   var TemplateHTML = require('hbs!./user-creation/html');
 
-  return {
-    'html': _html,
-    'setup': _setup,
-    'retrieve': _retrieve,
-    'disable': _disable,
-    'enable': _enable
-  };
-
-  function _html(){
-    return TemplateHTML();
-  }
-
   /**
-   * Setups the html
-   * @param  {object} context jquery selector
+   * @param {string} idPrefix
    * @param  {object} [options] Options to hide/show each field. Each field is
    *                            enabled by default.
    *                            - name: true, false
    *                            - password: true, false
    *                            - auth_driver: true, false
    */
-  function _setup(context, options){
+  function UserCreation(idPrefix, options) {
+    this.idPrefix = idPrefix;
 
-    var passwordEnabled = true;
+    this.options = options;
 
-    if (options != undefined){
-      if (options.name != undefined && options.name == false){
-        $('#username',context).removeAttr('required');
-        $('.name_row', context).hide();
-      }
-
-      if (options.password != undefined && options.password == false){
-        passwordEnabled = false;
-
-        $('#pass',context).removeAttr('required');
-        $('.password_row', context).hide();
-      }
-
-      if (options.auth_driver != undefined && options.auth_driver == false){
-        $('.auth_driver_row', context).hide();
-      }
+    if (this.options == undefined){
+      this.options = {};
     }
 
-    $('#driver', context).change(function(){
+    if (this.options.name == undefined){
+      this.options.name = true;
+    }
+
+    if (this.options.password == undefined){
+      this.options.password = true;
+    }
+
+    if (this.options.auth_driver == undefined){
+      this.options.auth_driver = true;
+    }
+  }
+
+  UserCreation.prototype.constructor = UserCreation;
+  UserCreation.prototype.html = _html;
+  UserCreation.prototype.setup = _setup;
+  UserCreation.prototype.retrieve = _retrieve;
+  UserCreation.prototype.enable = _enable;
+  UserCreation.prototype.disable = _disable;
+  UserCreation.prototype.setName = _setName;
+
+  return UserCreation;
+
+  function _html(){
+    return TemplateHTML({
+      'idPrefix': this.idPrefix
+    });
+  }
+
+  /**
+   * Setups the html
+   * @param  {object} context jquery selector
+   */
+  function _setup(context){
+    var that = this;
+
+    if (this.options.name == false){
+      $('#'+that.idPrefix+'_username',context).removeAttr('required');
+      $('.name_row', context).hide();
+    }
+
+    if (this.options.password == false){
+      $('#'+that.idPrefix+'_pass',context).removeAttr('required');
+      $('.password_row', context).hide();
+    }
+
+    if (this.options.auth_driver == false){
+      $('.auth_driver_row', context).hide();
+    }
+  
+    $('#'+that.idPrefix+'_driver', context).change(function(){
       if ($(this).val() == "ldap"){
-        $('#pass',context).removeAttr('required');
+        $('#'+that.idPrefix+'_pass',context).removeAttr('required');
         $('.password_row', context).hide();
-      } else if (passwordEnabled) {
-        $('#pass',context).attr('required', '');
+      } else if (that.options.password) {
+        $('#'+that.idPrefix+'_pass',context).attr('required', '');
         $('.password_row', context).show();
       }
     });
 
     $('input[name="custom_auth"]',context).parent().hide();
-    $('select#driver',context).change(function(){
+    $('select#'+that.idPrefix+'_driver',context).change(function(){
       if ($(this).val() == "custom"){
         $('input[name="custom_auth"]',context).parent().show();
         $('input[name="custom_auth"]',context).attr('required', '');
@@ -75,9 +99,11 @@ define(function(require) {
    *                                  - auth_driver
    */
   function _retrieve(context){
-    var user_name = $('#username',context).val();
-    var user_password = $('#pass',context).val();
-    var driver = $('#driver', context).val();
+    var that = this;
+
+    var user_name = $('#'+that.idPrefix+'_username',context).val();
+    var user_password = $('#'+that.idPrefix+'_pass',context).val();
+    var driver = $('#'+that.idPrefix+'_driver', context).val();
 
     if (driver == 'custom'){
       driver = $('input[name="custom_auth"]', context).val();
@@ -97,10 +123,13 @@ define(function(require) {
    * @param  {object} context jquery selector
    */
   function _disable(context){
-    $('#username',context).attr('disabled','disabled').removeAttr('required');
-    $('#pass',context).attr('disabled','disabled').removeAttr('required');
-    $('#driver',context).attr('disabled','disabled').removeAttr('required');
-    $('#custom_auth',context).attr('disabled','disabled').removeAttr('required');
+    var that = this;
+
+    $('#'+that.idPrefix+'_username',context).attr('disabled','disabled').removeAttr('required');
+    $('#'+that.idPrefix+'_pass',context).attr('disabled','disabled').removeAttr('required');
+    $('#'+that.idPrefix+'_confirm_password',context).attr('disabled','disabled').removeAttr('required');
+    $('#'+that.idPrefix+'_driver',context).attr('disabled','disabled').removeAttr('required');
+    $('#'+that.idPrefix+'_custom_auth',context).attr('disabled','disabled').removeAttr('required');
   }
 
   /**
@@ -108,11 +137,18 @@ define(function(require) {
    * @param  {object} context jquery selector
    */
   function _enable(context){
-    $('#username',context).removeAttr("disabled").attr('required', '');
-    $('#pass',context).removeAttr("disabled").attr('required', '');
-    $('#driver',context).removeAttr("disabled").attr('required', '');
-    $('#custom_auth',context).removeAttr("disabled");
+    var that = this;
 
-    $('select#driver',context).change();
+    $('#'+that.idPrefix+'_username',context).removeAttr("disabled").attr('required', '');
+    $('#'+that.idPrefix+'_pass',context).removeAttr("disabled").attr('required', '');
+    $('#'+that.idPrefix+'_confirm_password',context).removeAttr("disabled").attr('required', '');
+    $('#'+that.idPrefix+'_driver',context).removeAttr("disabled").attr('required', '');
+    $('#'+that.idPrefix+'_custom_auth',context).removeAttr("disabled");
+
+    $('select#'+that.idPrefix+'_driver',context).change();
+  }
+
+  function _setName(context, name){
+    $('#'+this.idPrefix+'_username',context).val(name);
   }
 });

src/sunstone/public/app/tabs/users-tab/utils/user-creation/html.hbs

@@ -1,19 +1,24 @@
 <div class="row name_row">
   <div class="large-12 columns">
     <label for="username">{{tr "Username"}}</label>
-    <input required type="text" name="username" id="username" />
+    <input required type="text" name="username" id="{{idPrefix}}_username" />
   </div>
 </div>
 <div class="row password_row">
   <div class="large-12 columns">
     <label for="pass">{{tr "Password"}}</label>
-    <input required type="password" name="pass" id="pass" />
+    <input required type="password" name="pass" id="{{idPrefix}}_pass" />
+  </div>
+  <div class="large-12 columns">
+    <label for="confirm_password">{{tr "Confirm Password"}}</label>
+    <input data-equalto="{{idPrefix}}_pass" type="password" name="confirm_password" id="{{idPrefix}}_confirm_password" />
+    <small class="error">{{tr "Passwords do not match"}}</small>
   </div>
 </div>
 <div class="row auth_driver_row">
   <div class="large-12 columns">
     <label for="driver">{{tr "Authentication"}}</label>
-    <select name="driver" id="driver">
+    <select name="driver" id="{{idPrefix}}_driver">
       <option value="core" selected="selected">{{tr "Core"}}</option>
       <option value="ssh">{{tr "SSH"}}</option>
       <option value="x509">{{tr "x509"}}</option>
@@ -22,7 +27,7 @@
       <option value="custom">{{tr "Custom"}}</option>
     </select>
     <div>
-      <input type="text" id="custom_auth" name="custom_auth" />
+      <input type="text" id="{{idPrefix}}_custom_auth" name="custom_auth" />
     </div>
   </div>
 </div>