Removed prepend-asterisk in favor of an injected span

awx/ui/client/legacy-styles/ansible-ui.less

@@ -342,14 +342,8 @@ textarea.allowresize {
   }
 }
 
-.prepend-asterisk:before {
+.foobar {
-  content: "\002A\00A0";
   color: @red;
-  margin-right: -5px;
-}
-
-.prepend-asterisk.user-password:before {
-   margin-right: 0;
 }
 
 .subtitle {

awx/ui/client/src/inventory-scripts/inventory-scripts.form.js

@@ -41,10 +41,7 @@ export default ['i18n', function(i18n) {
                 type: 'lookup',
                 list: 'OrganizationList',
                 basePath: 'organizations',
-                awRequiredWhen: {
+                required: true,
-                    reqExpression: "orgrequired",
-                    init: true
-                },
                 sourceModel: 'organization',
                 sourceField: 'name',
                 ngDisabled: '!(inventory_script_obj.summary_fields.user_capabilities.edit || canAdd)'

awx/ui/client/src/job-submission/job-submission-factories/prompt-for-passwords.factory.js

@@ -17,8 +17,11 @@ export default
                 field = form.fields[password];
                 fld = password;
                 scope[fld] = '';
-                html += "<div class=\"form-group prepend-asterisk\">\n";
+                html += "<div class=\"form-group\">\n";
-                html += "<label for=\"" + fld + "\">" + field.label + "</label>\n";
+                html += "<label for=\"" + fld + "\">";
+                html += '<span class="foobar">*</span>';
+                html += '<span>' + field.label + '</span>';
+                html += "</label>\n";
                 html += "<input type=\"password\" ";
                 html += "ng-model=\"" + fld + '" ';
                 html += 'name="' + fld + '" ';
@@ -37,8 +40,9 @@ export default
                     fld = field.associated;
                     field = form.fields[field.associated];
                     scope[fld] = '';
-                    html += "<div class=\"form-group prepend-asterisk\">\n";
+                    html += "<div class=\"form-group\">\n";
                     html += "<label for=\"" + fld + "\"> " + field.label + "</label>\n";
+                    html += '<span class="foobar">*</span>';
                     html += "<input type=\"password\" ";
                     html += "ng-model=\"" + fld + '" ';
                     html += 'name="' + fld + '" ';

awx/ui/client/src/job-submission/job-submission.partial.html

@@ -99,7 +99,8 @@
                         <div class="JobSubmission-instructions" translate>Launching this job requires the passwords listed below. Enter and confirm each password before continuing.</div>
                         <form name="forms.credentialpasswords" autocomplete="off" novalidate>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ssh_password_required">
-                                <label for="ssh_password" class="prepend-asterisk Form-inputLabelContainer">
+                                <label for="ssh_password" class="Form-inputLabelContainer">
+                                    <span class="foobar">*</span>
                                     <span class="Form-inputLabel" translate> Password</span>
                                 </label>
                                 <div class="input-group">
@@ -112,7 +113,8 @@
                                 <div class="error api-error" ng-bind="ssh_password_api_error"></div>
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ssh_key_unlock_required">
-                                <label for="ssh_key_unlock" class="prepend-asterisk Form-inputLabelContainer">
+                                <label for="ssh_key_unlock" class="Form-inputLabelContainer">
+                                    <span class="foobar">*</span>
                                     <span class="Form-inputLabel" translate> Private Key Passphrase</span>
                                 </label>
                                 <div class="input-group">
@@ -125,7 +127,8 @@
                                 <div class="error api-error" ng-bind="ssh_key_unlock_api_error"></div>
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="become_password_required">
-                                <label for="become_password" class="prepend-asterisk Form-inputLabelContainer">
+                                <label for="become_password" class="Form-inputLabelContainer">
+                                    <span class="foobar">*</span>
                                     <span class="Form-inputLabel" translate> Privilege Escalation Password</span>
                                 </label>
                                 <div class="input-group">
@@ -138,7 +141,8 @@
                                 <div class="error api-error" ng-bind="become_password_api_error"></div>
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="vault_password_required">
-                                <label for="vault_password" class="prepend-asterisk Form-inputLabelContainer">
+                                <label for="vault_password" class="Form-inputLabelContainer">
+                                    <span class="foobar">*</span>
                                     <span class="Form-inputLabel" translate> Vault Password</span>
                                 </label>
                                 <div class="input-group">
@@ -174,7 +178,8 @@
                         </div>
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_verbosity_on_launch">
-                        <label for="verbosity" class="prepend-asterisk Form-inputLabelContainer">
+                        <label for="verbosity" class="Form-inputLabelContainer">
+                            <span class="foobar">*</span>
                             <span class="Form-inputLabel" translate> Verbosity</span>
                         </label>
                         <div>
@@ -192,7 +197,8 @@
                         </div>
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_job_type_on_launch">
-                        <label for="job_type" class="prepend-asterisk Form-inputLabelContainer">
+                        <label for="job_type" class="Form-inputLabelContainer">
+                            <span class="foobar">*</span>
                             <span class="Form-inputLabel" translate> Job Type</span>
                         </label>
                         <div>
@@ -269,7 +275,8 @@
             <div ng-if="survey_enabled" ng-show="step === 'survey'" class="JobSubmission-form">
                 <form name="forms.survey" autocomplete="off" novalidate>
                     <div ng-repeat="question in survey_questions" id="taker_'+question.index+'" class="form-group Form-formGroup Form-formGroup--singleColumn">
-                        <label ng-attr-for="{{question.variable}}" class="Form-inputLabelContainer" ng-class="{'prepend-asterisk': question.required===true}">
+                        <label ng-attr-for="{{question.variable}}" class="Form-inputLabelContainer">
+                            <span ng-show="question.required===true" class="foobar">*</span>
                             <span class="label-text Form-inputLabel"> {{question.question_name}}</span>
                         </label>
 

awx/ui/client/src/license/license.partial.html

@@ -99,13 +99,18 @@
 				</div>
 
 				<form id="License-form" name="uploadlicense">
-					<div class="License-subTitleText prepend-asterisk"> <translate>License File</translate></div>
+					<div class="License-subTitleText">
+						<span class="foobar">*</span>
+						<translate>License File</translate>
+					</div>
 					<div class="input-group License-file--container">
 						<span class="btn btn-primary" ng-click="fakeClick()" ng-disabled="!user_is_superuser" translate>Browse</span>
                         <span class="License-fileName" ng-class="{'License-helperText' : fileName == 'No file selected.'}">{{fileName|translate}}</span>
 						<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
 					</div>
-					<div class="License-subTitleText prepend-asterisk"> <translate>End User License Agreement</translate>
+					<div class="License-subTitleText"> 
+						<span class="foobar">*</span>
+						<translate>End User License Agreement</translate>
 					</div>
 					<div id="eula_notice"
 						class="License-eulaNotice">{{ license.eula }}</div>

awx/ui/client/src/partials/survey-maker-modal.html

@@ -48,7 +48,8 @@
                             <dnd-nodrag>
                                 <div>
                                     <label class="SurveyMaker-previewLabel" for="question.variable">
-                                        <span class="label-text" ng-class="{'prepend-asterisk': question.required}"> {{question.question_name}}</span>
+                                        <span ng-show="question.required===true" class="foobar">*</span>
+                                        <span class="label-text"> {{question.question_name}}</span>
                                     </label>
                                 </div>
 

awx/ui/client/src/shared/directives.js

@@ -417,50 +417,54 @@ function(ConfigurationUtils, i18n, $rootScope) {
 // Make a field required conditionally using an expression. If the expression evaluates to true, the
 // field will be required. Otherwise, the required attribute will be removed.
 //
-.directive('awRequiredWhen', function() {
+.directive('awRequiredWhen', ['$timeout', function($timeout) {
     return {
         require: 'ngModel',
         compile: function(tElem) {
-            let label = $(tElem).closest('.form-group').find('label').first();
+            return {
-            $(label).addClass('prepend-asterisk');
+                pre: function preLink() {
-        },
+                    let label = $(tElem).closest('.form-group').find('label').first();
-        link: function(scope, elm, attrs, ctrl) {
+                    $(label).prepend('<span class="foobar">*</span>');
+                },
+                post: function postLink( scope, elm, attrs, ctrl ) {
+                    function updateRequired() {
+                        var isRequired = scope.$eval(attrs.awRequiredWhen);
 
-            function updateRequired() {
+                        var viewValue = elm.val(),
-                var isRequired = scope.$eval(attrs.awRequiredWhen);
+                            label, validity = true;
+                        label = $(elm).closest('.form-group').find('label').first();
 
-                var viewValue = elm.val(),
+                        if (isRequired && (elm.attr('required') === null || elm.attr('required') === undefined)) {
-                    label, validity = true;
+                            $(elm).attr('required', 'required');
-                label = $(elm).closest('.form-group').find('label').first();
+                            if(!$(label).find('span.foobar').length){
+                                $(label).prepend('<span class="foobar">*</span>');
+                            }
+                        } else if (!isRequired) {
+                            elm.removeAttr('required');
+                            if (!attrs.awrequiredAlwaysShowAsterisk) {
+                                $(label).find('span.foobar')[0].remove();
+                            }
+                        }
+                        if (isRequired && (viewValue === undefined || viewValue === null || viewValue === '')) {
+                            validity = false;
+                        }
+                        ctrl.$setValidity('required', validity);
+                    }
 
-                if (isRequired && (elm.attr('required') === null || elm.attr('required') === undefined)) {
+                    scope.$watchGroup([attrs.awRequiredWhen, $(elm).attr('name')], function() {
-                    $(elm).attr('required', 'required');
+                        // watch for the aw-required-when expression to change value
-                    $(label).removeClass('prepend-asterisk').addClass('prepend-asterisk');
+                        updateRequired();
-                } else if (!isRequired) {
+                    });
-                    elm.removeAttr('required');
+
-                    if (!attrs.awrequiredAlwaysShowAsterisk) {
+                    if (attrs.awrequiredInit !== undefined && attrs.awrequiredInit !== null) {
-                        $(label).removeClass('prepend-asterisk');
+                        // We already set a watcher on the attribute above so no need to call updateRequired() in here
+                        scope[attrs.awRequiredWhen] = attrs.awrequiredInit;
                     }
                 }
-                if (isRequired && (viewValue === undefined || viewValue === null || viewValue === '')) {
+            };
-                    validity = false;
-                }
-                ctrl.$setValidity('required', validity);
-            }
-
-            scope.$watchGroup([attrs.awRequiredWhen, $(elm).attr('name')], function() {
-                // watch for the aw-required-when expression to change value
-                updateRequired();
-            });
-
-            if (attrs.awrequiredInit !== undefined && attrs.awrequiredInit !== null) {
-                // We already set a watcher on the attribute above so no need to call updateRequired() in here
-                scope[attrs.awRequiredWhen] = attrs.awrequiredInit;
-            }
-
         }
     };
-})
+}])
 
 // awPlaceholder: Dynamic placeholder set to a scope variable you want watched.
 //                Value will be place in field placeholder attribute.

awx/ui/client/src/shared/form-generator.js

@@ -633,15 +633,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     if (field.label || field.labelBind) {
                         html += "<label class=\"";
                         html += (field.labelClass) ? field.labelClass : "";
-                        html += `${field.required ? ' prepend-asterisk ' : ''}`;
                         html += (horizontal) ? " " + getLabelWidth() : "Form-inputLabelContainer ";
                         html += (field.showParseTypeToggle) ? "Form-inputLabelContainer--codeMirror " : "";
                         html += "\" ";
                         html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
                         html += "for=\"" + fld + '">\n';
+
+                        html += `${field.required ? '<span class="foobar">*</span>' : ''}`;
+
                         html += (field.icon) ? Icon(field.icon) : "";
                         if (field.labelBind) {
-                            html += "\t\t<span ng-class=class=\"Form-inputLabel\" ng-bind=\"" + field.labelBind + "\" translate>\n\t\t</span>";
+                            html += "\t\t<span class=\"Form-inputLabel\" ng-bind=\"" + field.labelBind + "\" translate>\n\t\t</span>";
                         } else {
                             html += "\t\t<span class=\"Form-inputLabel\" translate>\n\t\t\t" + field.label + "\n\t\t</span>";
                         }
@@ -1349,7 +1351,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.placeholder) ? this.attr(field, 'placeholder') : "";
                         html += (options.mode === 'edit' && field.editRequired) ? "required " : "";
                         html += (field.readonly || field.showonly) ? "readonly " : "";
-                        if(field.awRequiredWhen) {
+                        if(field.awRequiredWhen) {console.log(field.awRequiredWhen);
                             html += field.awRequiredWhen.init ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" " : "";
                             html += field.awRequiredWhen.reqExpression ? "aw-required-when=\"" + field.awRequiredWhen.reqExpression + "\" " : "";
                             html += field.awRequiredWhen.alwaysShowAsterisk ? "data-awrequired-always-show-asterisk=true " : "";

awx/ui/client/src/templates/job_templates/job-template.form.js

@@ -94,10 +94,7 @@ function(NotificationsList, CompletedJobsList, i18n) {
                     basePath: 'projects',
                     sourceModel: 'project',
                     sourceField: 'name',
-                    awRequiredWhen: {
+                    required: true,
-                        reqExpression: "projectrequired",
-                        init: "true"
-                    },
                     column: 1,
                     awPopOver: "<p>" + i18n._("Select the project containing the playbook you want this job to execute.") + "</p>",
                     dataTitle: i18n._('Project'),
@@ -111,10 +108,7 @@ function(NotificationsList, CompletedJobsList, i18n) {
                     ngOptions: 'book for book in playbook_options track by book',
                     ngDisabled: "!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate) || disablePlaybookBecausePermissionDenied",
                     id: 'playbook-select',
-                    awRequiredWhen: {
+                    required: true,
-                        reqExpression: "playbookrequired",
-                        init: "true"
-                    },
                     column: 1,
                     awPopOver: "<p>" + i18n._("Select the playbook to be executed by this job.") + "</p>",
                     dataTitle: i18n._('Playbook'),

awx/ui/client/src/users/add/users-add.controller.js

@@ -17,7 +17,7 @@ export default ['$scope', '$rootScope', 'UserForm', 'GenerateForm', 'Rest',
     'Wait', 'CreateSelect2', '$state', '$location', 'i18n',
     function($scope, $rootScope, UserForm, GenerateForm, Rest, Alert,
     ProcessErrors, ReturnToCaller, GetBasePath, Wait, CreateSelect2,
-    $state, $location, i18n) {
+    $state, $location, i18n) {console.log($scope);
 
         var defaultUrl = GetBasePath('organizations'),
             form = UserForm;
@@ -28,6 +28,7 @@ export default ['$scope', '$rootScope', 'UserForm', 'GenerateForm', 'Rest',
             // apply form definition's default field values
             GenerateForm.applyDefaults(form, $scope);
 
+            $scope.isAddForm = true;
             $scope.ldap_user = false;
             $scope.not_ldap_user = !$scope.ldap_user;
             $scope.ldap_dn = null;

awx/ui/client/src/users/users.form.js

@@ -69,8 +69,10 @@ export default ['i18n', function(i18n) {
                     type: 'sensitive',
                     hasShowInputButton: true,
                     ngShow: 'ldap_user == false && socialAuthUser === false && external_account === null',
-                    ngRequired: "$state.match('add')",
+                    awRequiredWhen: {
-                    labelNGClass: "{'prepend-asterisk user-password' : $state.matches('add')}",
+                        reqExpression: "isAddForm",
+                        init: false
+                    },
                     ngChange: "clearPWConfirm('password_confirm')",
                     autocomplete: false,
                     ngDisabled: '!(user_obj.summary_fields.user_capabilities.edit || canAdd)'
@@ -80,8 +82,10 @@ export default ['i18n', function(i18n) {
                     type: 'sensitive',
                     hasShowInputButton: true,
                     ngShow: 'ldap_user == false && socialAuthUser === false && external_account === null',
-                    ngRequired: "$state.match('add')",
+                    awRequiredWhen: {
-                    labelNGClass: "{'prepend-asterisk user-password' : $state.matches('add')}",
+                        reqExpression: "isAddForm",
+                        init: false
+                    },
                     awPassMatch: true,
                     associated: 'password',
                     autocomplete: false,