Merge pull request #267 from jaredevantabor/survey-fixes

Survey fixes

awx/ui/static/js/forms.js

@@ -28,7 +28,6 @@ import Permissions from "tower/forms/Permissions";
 import ProjectStatus from "tower/forms/ProjectStatus";
 import Projects from "tower/forms/Projects";
 import Source from "tower/forms/Source";
-import SurveyMaker from "tower/forms/SurveyMaker";
 import SurveyQuestion from "tower/forms/SurveyQuestion";
 import Teams from "tower/forms/Teams";
 import Users from "tower/forms/Users";
@@ -59,7 +58,6 @@ export
         ProjectStatus,
         Projects,
         Source,
-        SurveyMaker,
         SurveyQuestion,
         Teams,
         Users

awx/ui/static/js/forms/SurveyMaker.js

@@ -1,70 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
- 
- /**
- * @ngdoc function
- * @name forms.function:SurveyMaker
- * @description This form is for adding/editing a survey
-*/
-
-export default
-    angular.module('SurveyMakerFormDefinition', [])
-        .value('SurveyMakerForm', {
-
-            addTitle: 'Add Survey', //Title in add mode
-            editTitle: 'Edit Survey', //Title in edit mode
-            name: 'survey_maker', //entity or model name in singular form
-            // // well: true,
-            breadCrumbs: false,
-
-
-            fields: {
-                survey_name: {
-                    type: 'custom',
-                    control: '<div class="row">'+
-                        //     '<div class="col-sm-6">
-                        //         <div class="form-group">'+
-                        //             '<label for="survey_name"><span class="label-text prepend-asterisk">Survey Name</span></label>
-                        //                 <div>'+
-                        //                     '<input type="text" ng-model="survey_name" name="survey_name" id="survey_maker_survey_name" class="form-control ng-pristine ng-invalid ng-invalid-required" required="" capitalize>'+
-                        //                         '<div class="error ng-hide" id="survey_maker-survey_name-required-error" ng-show="survey_maker_form.survey_name.$dirty &amp;&amp; survey_maker_form.survey_name.$error.required">Please enter a survey name.</div>'+
-                        //                         '<div class="error api-error ng-binding" id="survey_maker-survey_name-api-error" ng-bind="survey_name_api_error"></div>'+
-                        // '</div></div></div>'+
-                        // '<div class="col-sm-6"><div class="form-group">'+
-                        // '<label for="survey_description"><span class="label-text">Survey Description</span></label><div>'+
-                        // '<input type="text" ng-model="survey_description" name="survey_description" id="survey_maker_survey_description" class="form-control ng-pristine ng-valid">'+
-                        // '<div class="error api-error ng-binding" id="survey_maker-survey_description-api-error" ng-bind="survey_description_api_error"></div>'+
-                        // '</div></div></div>'+
-                        '<div class="col-sm-12">'+
-                            '<label for="survey"><span class="label-text prepend-asterisk">Questions</span></label>'+
-                            '<div id="survey_maker_question_area"></div>'+
-                            '<div id="finalized_questions"></div>'+
-                            '<button style="display:none" type="button" class="btn btn-sm btn-primary" id="add_question_btn" ng-click="addNewQuestion()" aw-tool-tip="Create a new question" data-placement="top" data-original-title="" title="" disabled><i class="fa fa-plus fa-lg"></i>  Add Question</button>'+
-                            '<div id="new_question"></div>'+
-                        '</div>'+
-                    '</div>'//</div>'
-                    // label: 'Survey Name',
-                    // type: 'text',
-                    // addRequired: true,
-                    // editRequired: true,
-                    // capitalize: false,
-                    // // column: 1
-                },
-
-            },
-
-            // buttons: { //for now always generates <button> tags
-                // save: {
-                //     ngClick: 'formSave()', //$scope.function to call on click, optional
-                //     ngDisabled: true //Disable when $pristine or $invalid, optional
-                // }
-                // reset: {
-                //     ngClick: 'formReset()',
-                //     ngDisabled: true //Disabled when $pristine
-                // }
-            // }
-
-        });

awx/ui/static/js/forms/SurveyQuestion.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
  /**
  * @ngdoc function
  * @name forms.function:Questions
@@ -36,27 +36,14 @@ export default
                 realName: 'question_description',
                 label: 'Description',
                 type: 'text',
-                // rows: 2,
                 addRequired: false,
                 editRequired: false,
                 column: 1
             },
-            // variable: {
-            //     label: 'Answer Variable Name',
-            //     type: 'text',
-            //     addRequired: true,
-            //     editRequired: true,
-            //     column: 1,
-            //     awPopOver: '<p>The suggested format for variable names are lowercase, underscore-separated descriptive nouns.</p>'+
-            //                 '<p>For example: <br>foo_bar<br>\n user_id<br>\n host_name<br>' ,
-            //     dataTitle: 'Answer Variable Name',
-            //     dataPlacement: 'right',
-            //     dataContainer: "body"
-            // },
             variable: {
                 ealName: 'variable',
                 type: 'custom',
-                control:'<label for="variable"><span class="label-text prepend-asterisk">Answer Variable Name</span>'+
+                control:'<label for="variable"><span class="label-text prepend-asterisk"> Answer Variable Name</span>'+
                     '<a id="awp-variable" href="" aw-pop-over="<p>The suggested format for variable names is lowercase and underscore-separated. Also note that this field cannot accept variable names with spaces.</p><p>For example: <br>foo_bar<br>'+
                     'user_id<br>host_name<br><div class=&quot;popover-footer&quot;><span class=&quot;key&quot;>esc</span> or click to close</div>" '+
                     'data-placement="right" data-container="body" data-title="Answer Variable Name" class="help-link" data-original-title="" title="" tabindex="-1"><i class="fa fa-question-circle"></i></a> </label>'+
@@ -274,12 +261,15 @@ export default
             default_password: {
                 realName: 'default_answer' ,
                 type: 'custom' ,
-                control: '<div class="form-group" >'+
+                control: '<div class="form-group">'+
-                    '<label for="default"><span class="label-text">Default Password</span></label>'+
+                    '<label for="default_password"><span class="label-text">Default Answer</span></label>'+
                     '<div>'+
-                    '<input type="password" ng-model="default_password" name="default_password" id="default_password" class="form-control" ng-hide="pwcheckbox">'+
+                    '<div class="input-group">'+
-                    '<input type="text" ng-model="default_password" name="default_password" id="default_password" class="form-control" ng-show="pwcheckbox">'+
+                    '<span class="input-group-btn">'+
-                    '<label style="font-weight:normal"><input type="checkbox" ng-model="pwcheckbox" name="pwcheckbox" id="survey_question_pwcheckbox" ng-checked="false"> <span>Show Password</span></label>'+
+                    '<button class="btn btn-default" id="default_password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#default_password&quot;)" data-original-title="" title="">ABC</button>'+
+                    '</span>'+
+                    '<input id="default_password" type="password" ng-model="default_password" name="default_password" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false">'+
+                    '</div>'+
                     '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
                     '<div class="error ng-hide" id=survey_question-default-password-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
                     '<div class="error api-error ng-binding" id="survey_question-default-password-api-error" ng-bind="default_api_error"></div>'+
@@ -305,7 +295,7 @@ export default
             },
             submit_question: {
                 ngClick: 'submitQuestion($event)',
-                ngDisabled: true, //'survey_question.$valid', //"!question_name || !variable || !type || ((type.type==='multiplechoice' || type.type === 'multiselect' ) && !choices)", //|| type.type===multiselect ',//'!question_name || !variable || !type' ,
+                ngDisabled: true,
                 'class': 'btn btn-sm btn-primary',
                 label: 'Add Question'
             }

awx/ui/static/js/helpers/JobSubmission.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 /**
 * @ngdoc function
 * @name helpers.function:JobSubmission
@@ -517,6 +517,20 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
           checked, min, max,
           survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ;
 
+          //for toggling the input on password inputs
+          scope.toggleInput = function(id) {
+              var buttonId = id + "_show_input_button",
+                  inputId = id,
+                  buttonInnerHTML = $(buttonId).html();
+              if (buttonInnerHTML.indexOf("ABC") > -1) {
+                  $(buttonId).html("<i class=\"fa fa-asterisk\"></i><i class=\"fa fa-asterisk\"></i><i class=\"fa fa-asterisk\"></i>");
+                  $(inputId).attr("type", "text");
+              } else {
+                  $(buttonId).html("ABC");
+                  $(inputId).attr("type", "password");
+              }
+          };
+
           function buildHtml(question, index){
             question.index = index;
             question.question_name = $filter('sanitize')(question.question_name);
@@ -526,8 +540,10 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
             requiredAsterisk = (question.required===true) ? "prepend-asterisk" : "";
             requiredClasses = (question.required===true) ? "ng-pristine ng-invalid-required ng-invalid" : "";
 
-            html+='<div id="taker_'+question.index+'" class="form-group '+requiredAsterisk+' ">';
+            html+='<div id="taker_'+question.index+'" class="form-group">';
-            html += '<label for="'+question.variable+'">'+question.question_name+'</label>\n';
+            html += '<label for="'+question.variable+'"><span class="label-text '+requiredAsterisk+'"> '+question.question_name+'</span></label>';
+
+            // html += '<label for="'+question.variable+'"> '+ question.question_name+'</label>\n';
 
             if(!Empty(question.question_description)){
               html += '<div class="survey_taker_description"><i>'+question.question_description+'</i></div>\n';
@@ -571,28 +587,20 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
             if(question.type === 'password' ){
               minlength = (!Empty(question.min)) ? Number(question.min) : "";
               maxlength =(!Empty(question.max)) ? Number(question.max) : "" ;
-              html+='<input type="password" id="'+question.variable+'_password" ng-model="'+question.variable+'" '+
+              html+= '<div class="input-group">'+
-              'name=" '+question.variable+' " ' +
+                '<span class="input-group-btn">'+
-              'ng-hide="'+question.variable+'_pwcheckbox" ' +
+                '<button class="btn btn-default" id="'+question.variable +'_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#'+question.variable+'&quot;)" data-original-title="" title="">ABC</button>'+
-              'ng-minlength="'+minlength+'" ng-maxlength="'+maxlength+'" '+
+                '</span>'+
-              'class="form-control" ng-required='+question.required+'>'+
+                '<input id="'+question.variable+'" type="password" ng-model="'+question.variable+'" name="'+question.variable+'" '+
-              '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
+                'ng-required="'+question.required+'"'+
-              'job_launch_form.'+question.variable+'.$error.required\">Please enter an answer.</div>'+
+                'ng-minlength="'+minlength+'" ng-maxlength="'+maxlength+'" '+
-              '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$error.minlength || ' +
+                'class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false">'+
-              'job_launch_form.'+question.variable+'.$error.maxlength\">Please enter an answer between {{'+minlength+'}} to {{'+maxlength+'}} characters long.</div>'+
+                '</div>'+
-              '<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>';
+                '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
-              html+='<input type="text" id="'+question.variable+'_text" ng-model="'+question.variable+'" '+
+                'job_launch_form.'+question.variable+'.$error.required\">Please enter an answer.</div>'+
-              'name=" '+question.variable+' " ' +
+                '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$error.minlength || ' +
-              'ng-show="'+question.variable+'_pwcheckbox"'+
+                'job_launch_form.'+question.variable+'.$error.maxlength\">Please enter an answer between {{'+minlength+'}} to {{'+maxlength+'}} characters long.</div>'+
-              'ng-minlength="'+minlength+'" ng-maxlength="'+maxlength+'" '+
+                '<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>';
-              'class="form-control" ng-required='+question.required+'>'+
-              '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
-              'job_launch_form.'+question.variable+'.$error.required\">Please enter an answer.</div>'+
-              '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$error.minlength || ' +
-              'job_launch_form.'+question.variable+'.$error.maxlength\">Please enter an answer between {{'+minlength+'}} to {{'+maxlength+'}} characters long.</div>'+
-              '<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>';
-              html+= '<label style="font-weight:normal"><input type="checkbox" ng-model="'+question.variable+'_pwcheckbox" name="pwcheckbox" id="'+question.variable+'_pwcheckbox" ng-checked="false"> <span>Show Password</span></label>';
-
             }
             if(question.type === 'multiplechoice'){
               choices = question.choices.split(/\n/);

awx/ui/static/js/helpers/Survey.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
     /**
  * @ngdoc function
  * @name helpers.function:Survey
@@ -285,7 +285,10 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
             }
 
             required = (question.required===true) ? "prepend-asterisk" : "";
-            html = '<div class="question_title col-xs-12 '+required+'"><b>'+question.question_name+'</b></div>\n';
+            html = '<div class="question_title col-xs-12">';
+            html += '<label for="'+question.variable+'"><span class="label-text '+required+'"> '+question.question_name+'</span></label>';
+            html += '</div>';
+
             if(!Empty(question.question_description)){
                 html += '<div class="col-xs-12 description"><i>'+question.question_description+'</i></div>\n';
             }
@@ -326,12 +329,16 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
 
             if(question.type === 'password'){
               defaultValue = (question.default) ? question.default : "";
-              defaultValue = $filter('defaultValue')(choices[i]);
+              defaultValue = $filter('sanitize')(defaultValue);
               defaultValue = scope.serialize(defaultValue);
               html+='<div class="row">'+
-                  '<div class="col-xs-8">'+
+                  ' <div class="col-xs-8 input_area input-group">'+
-                  '<input type="password" value="'+defaultValue+'"  class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" readonly>'+
+                  '<span class="input-group-btn">'+
-                  '</div></div>';
+                  '<button class="btn btn-default survey-maker-password" id="'+question.variable+'_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#'+question.variable+'&quot;)" data-original-title="" title="">ABC</button>'+
+                  '</span>'+
+                  '<input id="'+ question.variable +'" type="password" ng-model="default_password" name="'+ question.variable +'" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false" readonly>'+
+                  '</div>'+
+                  '</div>';
             }
 
             if(question.type === 'integer'){
@@ -925,7 +932,7 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
                     }
 
                     //set the data.default depending on which type
-                    if (scope.type.type === 'text') {
+                    if (scope.type.type === 'text' || scope.type.type === 'multiplechoice') {
                         data.default = scope.default;
                     } else if (scope.type.type === 'textarea') {
                         data.default = scope.default_textarea;
@@ -985,7 +992,7 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
             scope.resetForm = function(){
                 html = '<div class="row">'+
                         '<div class="col-sm-12">'+
-                        '<label for="survey"><span class="label-text prepend-asterisk">Questions</span></label>'+
+                        '<label for="survey"><span class="label-text prepend-asterisk"> Questions</span></label>'+
                         '<div id="survey_maker_question_area"></div>'+
                         '<div id="finalized_questions"></div>'+
                         '<button style="display:none" type="button" class="btn btn-sm btn-primary" id="add_question_btn" ng-click="addNewQuestion()" aw-tool-tip="Create a new question" data-placement="top" data-original-title="" title="" disabled><i class="fa fa-plus fa-lg"></i>  New Question</button>'+
@@ -1027,5 +1034,19 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
                 }
             };
 
+            //for toggling the input on password inputs
+            scope.toggleInput = function(id) {
+                var buttonId = id + "_show_input_button",
+                    inputId = id,
+                    buttonInnerHTML = $(buttonId).html();
+                if (buttonInnerHTML.indexOf("ABC") > -1) {
+                    $(buttonId).html("<i class=\"fa fa-asterisk\"></i><i class=\"fa fa-asterisk\"></i><i class=\"fa fa-asterisk\"></i>");
+                    $(inputId).attr("type", "text");
+                } else {
+                    $(buttonId).html("ABC");
+                    $(inputId).attr("type", "password");
+                }
+            };
+
         };
     }]);

awx/ui/static/less/survey-maker.less

@@ -37,10 +37,13 @@
     border-top: 1px dashed;
     border-color: rgb(204,204,204);
     border-radius: 4px;
-
     padding: 5px;
     position: relative;
 
+    .survey-maker-password{
+        margin-left: 30px;
+    }
+
     .final{
         margin-left: 15px;
         margin-top: 5px;
@@ -87,13 +90,3 @@
 .survey_taker_description{
     margin-bottom:10px
 }
-
-
-
-
-
-
-
-
-
-