Merge pull request #463 from pwm-project/ui-bug-fixes

Fixed a couple of UI bugs:

client/package.json

@@ -24,6 +24,7 @@
         "@uirouter/angularjs": "1.0.15",
         "angular": "1.6.9",
         "angular-aria": "1.6.9",
+        "angular-sanitize": "1.6.9",
         "angular-translate": "2.17.0",
         "textangular": "1.5.16"
     },

client/src/modules/helpdesk/helpdesk-detail.component.html

@@ -166,7 +166,7 @@
                         <td ng-bind="'Field_Display' | translate"></td>
                         <td>
                             <ul>
-                                <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind="item"></li>
+                                <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind-html="item"></li>
                             </ul>
                         </td>
                     </tr>
@@ -193,4 +193,4 @@
             </ias-tab-pane>
         </div>
     </div>
-</div>
+</div>

client/src/modules/helpdesk/helpdesk-detail.component.scss

@@ -98,7 +98,7 @@
             padding: 3px 15px;
           }
 
-          ul {
+          > ul {
             list-style: none;
             margin: 0;
             padding: 0;

client/src/modules/helpdesk/helpdesk-search-table.component.html

@@ -79,7 +79,7 @@
         <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
             <ias-icon icon="configure_thick"></ias-icon>
         </ias-button>
-        <ias-menu name="menu1" ias-align="end end">
+        <ias-menu name="menu1" ias-align="end end" class="ias-styles-root">
             <div class="ias-input-container">
                 <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
                     <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>

client/src/modules/helpdesk/helpdesk.module.ts

@@ -48,6 +48,7 @@ const moduleName = 'help-desk';
 
 module(moduleName, [
     'ngAria',
+    'ngSanitize',
     uxModule
 ])
 

client/src/modules/helpdesk/main.ts

@@ -22,6 +22,7 @@
 
 import 'angular';
 import 'angular-translate';
+import 'angular-sanitize';
 import '@microfocus/ng-ias/dist/ng-ias';
 
 import { bootstrap, module } from 'angular';

client/src/modules/peoplesearch/peoplesearch-table.component.html

@@ -83,7 +83,7 @@
         <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
             <ias-icon icon="configure_thick"></ias-icon>
         </ias-button>
-        <ias-menu name="menu1" ias-align="end end">
+        <ias-menu name="menu1" ias-align="end end" class="ias-styles-root">
             <div class="ias-input-container">
                 <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
                     <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>

client/src/styles.scss

@@ -23,6 +23,28 @@
     }
   }
 
+  // The ias-menu is added at the root of the document.  This fixes when we have to add the ias-styles-root class
+  // to the ias-menu itself to get the IAS styles applied.
+  &.ias-menu {
+    background-color: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+
+    bottom: 0;
+    display: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    &.ias-open {
+      display: inline-block;
+    }
+  }
+
   // ux-ias normally applies the following to the body tag, but the way we are including ux-ias under .ias-styles-root
   // means we have to define it here.
   background-color: $body-bg-color;

webapp/src/main/webapp/WEB-INF/jsp/accountinformation.jsp

@@ -80,7 +80,7 @@
                             <td id="PasswordRequirements">
                                 <ul>
                                     <% for (final String rule : accountInformationBean.getPasswordRules()) { %>
-                                    <li><%=  StringUtil.escapeHtml(rule) %></li>
+                                    <li><%=  rule %></li>
                                     <% } %>
                                 </ul>
                             </td>

webapp/src/main/webapp/public/resources/style.css

@@ -560,6 +560,10 @@ html[dir="rtl"] #header-center-right {
     position: relative;
 }
 
+#header-title > .title-short {
+    display: none;
+}
+
 #header-right-logo {
     position: absolute;
 }