From 78b335b76d046cf59c4bc08a574b6cefbc9c2271 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Mon, 25 Nov 2019 15:41:28 -0100
Subject: [PATCH] mgr/dashboard: Add required symbol directly in the text
 element

This prevents the symbol from breaking from the last word of the label,
if the width gets too small.

This will also remove the need to add an extra span just to show the symbol.

Fixes: https://tracker.ceph.com/issues/40751

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../iscsi-target-form.component.html          |  32 +++---
 ...target-image-settings-modal.component.html |   8 +-
 .../bootstrap-create-modal.component.html     |  16 ++-
 .../bootstrap-import-modal.component.html     |  24 ++---
 .../edit-site-name-modal.component.html       |   8 +-
 .../pool-edit-peer-modal.component.html       |  16 ++-
 .../block/rbd-form/rbd-form.component.html    |  47 +++-----
 .../rbd-namespace-form.component.html         |  16 ++-
 .../rbd-snapshot-form.component.html          |   8 +-
 .../hosts/host-form/host-form.component.html  |   8 +-
 .../osd-recv-speed-modal.component.html       |  15 ++-
 .../silence-form/silence-form.component.html  |  39 +++----
 .../silence-matcher-modal.component.html      |  16 ++-
 .../ceph/nfs/nfs-form/nfs-form.component.html | 100 +++++++-----------
 .../erasure-code-profile-form.component.html  |  30 +++---
 .../pool/pool-form/pool-form.component.html   |  32 +++---
 .../rgw-bucket-form.component.html            |  24 ++---
 .../rgw-user-capability-modal.component.html  |  17 ++-
 .../rgw-user-form.component.html              |  74 +++++--------
 .../rgw-user-s3-key-modal.component.html      |  27 ++---
 .../rgw-user-subuser-modal.component.html     |  25 ++---
 .../auth/role-form/role-form.component.html   |   8 +-
 .../auth/user-form/user-form.component.html   |  11 +-
 .../user-password-form.component.html         |  20 ++--
 .../mgr/dashboard/frontend/src/styles.scss    |  15 +--
 25 files changed, 240 insertions(+), 396 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index 48753ae24317..899742549e66 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -11,11 +11,9 @@
       <div class="card-body">
         <!-- Target IQN -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="target_iqn">
-            <ng-container i18n>Target IQN</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="target_iqn"
+                 i18n>Target IQN</label>
           <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
@@ -64,11 +62,9 @@
 
         <!-- Portals -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="portals">
-            <ng-container i18n>Portals</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="portals"
+                 i18n>Portals</label>
           <div class="cd-col-form-input">
 
             <ng-container *ngFor="let portal of portals.value; let i = index">
@@ -355,11 +351,9 @@
               <div class="card-body">
                 <!-- Initiator: Name -->
                 <div class="form-group row">
-                  <label class="cd-col-form-label"
-                         for="client_iqn">
-                    <ng-container i18n>Client IQN</ng-container>
-                    <span class="required"></span>
-                  </label>
+                  <label class="cd-col-form-label required"
+                         for="client_iqn"
+                         i18n>Client IQN</label>
                   <div class="cd-col-form-input">
                     <input class="form-control"
                            type="text"
@@ -579,11 +573,9 @@
               <div class="card-body">
                 <!-- Group: group_id -->
                 <div class="form-group row">
-                  <label class="cd-col-form-label"
-                         for="group_id">
-                    <ng-container i18n>Name</ng-container>
-                    <span class="required"></span>
-                  </label>
+                  <label class="cd-col-form-label required"
+                         for="group_id"
+                         i18n>Name</label>
                   <div class="cd-col-form-input">
                     <input class="form-control"
                            type="text"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
index 8eec60a7db2a..c5582a6c5fd4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
@@ -20,11 +20,9 @@
           <!-- LUN -->
           <div class="form-group row">
             <div class="col-sm-12">
-              <label class="col-form-label"
-                     for="lun">
-                <ng-container i18n>lun</ng-container>
-                <span class="required"></span>
-              </label>
+              <label class="col-form-label required"
+                     for="lun"
+                     i18n>lun</label>
               <input type="number"
                      class="form-control"
                      id="lun"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
index 9aab16390997..db5f824f8766 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
@@ -17,11 +17,9 @@
         </p>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="siteName">
-            <span i18n>Site Name</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="siteName"
+                 i18n>Site Name</label>
           <input class="form-control"
                  type="text"
                  placeholder="Name..."
@@ -37,11 +35,9 @@
 
         <div class="form-group"
              formGroupName="pools">
-          <label class="col-form-label"
-                 for="pools">
-            <span i18n>Pools</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="pools"
+                 i18n>Pools</label>
           <div class="custom-control custom-checkbox"
                *ngFor="let pool of pools">
             <input type="checkbox"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
index 6bb4cba0db76..680865459a15 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
@@ -17,11 +17,9 @@
         </p>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="siteName">
-            <span i18n>Site Name</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="siteName"
+                 i18n>Site Name</label>
           <input class="form-control"
                  type="text"
                  placeholder="Name..."
@@ -51,11 +49,9 @@
 
         <div class="form-group"
              formGroupName="pools">
-          <label class="col-form-label"
-                 for="pools">
-            <span i18n>Pools</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="pools"
+                 i18n>Pools</label>
           <div class="custom-control custom-checkbox"
                *ngFor="let pool of pools">
             <input type="checkbox"
@@ -72,11 +68,9 @@
         </div>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="token">
-            <span i18n>Token</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="token"
+                 i18n>Token</label>
           <textarea class="form-control resize-vertical"
                     placeholder="Generated token..."
                     i18n-placeholder
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
index 64ea83adb817..bb41453c59be 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
@@ -15,11 +15,9 @@
         </p>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="siteName">
-            <span i18n>Site Name</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="siteName"
+                 i18n>Site Name</label>
           <input class="form-control"
                  type="text"
                  placeholder="Name..."
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
index 4fd9985a96bd..64403ac48cae 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
@@ -17,11 +17,9 @@
         </p>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="clusterName">
-            <span i18n>Cluster Name</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="clusterName"
+                 i18n>Cluster Name</label>
           <input class="form-control"
                  type="text"
                  placeholder="Name..."
@@ -39,11 +37,9 @@
         </div>
 
         <div class="form-group">
-          <label class="col-form-label"
-                 for="clientID">
-            <span i18n>CephX ID</span>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label required"
+                 for="clientID"
+                 i18n>CephX ID</label>
           <input class="form-control"
                  type="text"
                  placeholder="CephX ID..."
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index 44a58ad49482..776e6ecb5038 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -26,11 +26,9 @@
 
         <!-- Name -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="name">
-            <ng-container i18n>Name</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="name"
+                 i18n>Name</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
@@ -54,11 +52,9 @@
         <div class="form-group row"
              (change)="onPoolChange($event.target.value)">
           <label class="cd-col-form-label"
-                 for="pool">
-            Pool
-            <span class="required"
-                  *ngIf="mode !== 'editing'"></span>
-          </label>
+                 [ngClass]="{'required': mode !== 'editing'}"
+                 for="pool"
+                 i18n>Pool</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
@@ -153,9 +149,8 @@
              *ngIf="rbdForm.getValue('useDataPool')">
           <label class="cd-col-form-label"
                  for="dataPool">
-            <ng-container i18n>Data pool</ng-container>
-            <span class="required"
-                  *ngIf="mode !== 'editing'"></span>
+            <span [ngClass]="{'required': mode !== 'editing'}"
+                  i18n>Data pool</span>
             <cd-helper i18n-html
                        html="Dedicated pool that stores the object-data of the RBD.">
             </cd-helper>
@@ -194,11 +189,9 @@
 
         <!-- Size -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="size">
-            <ng-container i18n>Size</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="size"
+                 i18n>Size</label>
           <div class="cd-col-form-input">
             <input id="size"
                    name="size"
@@ -280,12 +273,9 @@
             <!-- stripingUnit -->
             <div class="form-group row">
               <label class="cd-col-form-label"
-                     for="stripingUnit">
-                <span i18n>Stripe unit</span>
-                <span class="required"
-                      *ngIf="rbdForm.getValue('stripingCount')">
-                </span>
-              </label>
+                     [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
+                     for="stripingUnit"
+                     i18n>Stripe unit</label>
               <div class="cd-col-form-input">
                 <select id="stripingUnit"
                         name="stripingUnit"
@@ -308,12 +298,9 @@
             <!-- Stripe Count -->
             <div class="form-group row">
               <label class="cd-col-form-label"
-                     for="stripingCount">
-                <span i18n>Stripe count</span>
-                <span class="required"
-                      *ngIf="rbdForm.getValue('stripingUnit')">
-                </span>
-              </label>
+                     [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
+                     for="stripingCount"
+                     i18n>Stripe count</label>
               <div class="cd-col-form-input">
                 <input id="stripingCount"
                        name="stripingCount"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
index 4f563ddf9bed..d75d6c6ab609 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
@@ -16,11 +16,9 @@
 
     <!-- Pool -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="pool">
-        Pool
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="pool"
+             i18n>Pool</label>
       <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
@@ -54,11 +52,9 @@
 
     <!-- Name -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="namespace">
-        <ng-container i18n>Name</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="namespace"
+             i18n>Name</label>
       <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
index 792f1a908ade..f96eb581bcf2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -16,11 +16,9 @@
 
     <!-- Name -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="snapshotName">
-        <ng-container i18n>Name</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="snapshotName"
+             i18n>Name</label>
       <div class="cd-col-form-input">
         <input class="form-control"
                type="text"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
index 5e4efe45961e..54aa0875c30a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
@@ -15,11 +15,9 @@
 
         <!-- Hostname -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="hostname">
-            <ng-container i18n>Hostname</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="hostname"
+                 i18n>Hostname</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
index 978d1b950405..1444e88588bf 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
@@ -9,11 +9,9 @@
       <div class="modal-body">
         <!-- Priority -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-6"
-                 for="priority">
-            <ng-container i18n>Priority</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="col-form-label col-sm-6 required"
+                 for="priority"
+                 i18n>Priority</label>
           <div class="col-sm-6">
             <select class="form-control custom-select"
                     formControlName="priority"
@@ -51,10 +49,11 @@
         <div class="form-group row"
              *ngFor="let attr of priorityAttrs | keyvalue">
           <label class="col-form-label col-sm-6"
-                 [for]="attr.key">{{ attr.value.text }}
+                 [for]="attr.key">
+            <span [ngClass]="{'required': osdRecvSpeedForm.getValue('customizePriority')}">
+              {{ attr.value.text }}
+            </span>
             <cd-helper *ngIf="attr.value.desc">{{ attr.value.desc }}</cd-helper>
-            <span class="required"
-                  *ngIf="osdRecvSpeedForm.getValue('customizePriority')"></span>
           </label>
           <div class="col-sm-6">
             <input class="form-control"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index ec2ad0ff4e28..e1d0b2a3cb0e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -73,11 +73,9 @@
       <!-- Creator -->
       <div class="card-body">
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="created-by">
-            <ng-container i18n>Creator</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="created-by"
+                 i18n>Creator</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    formControlName="createdBy"
@@ -92,11 +90,9 @@
 
         <!-- Comment -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="comment">
-            <ng-container i18n>Comment</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="comment"
+                 i18n>Comment</label>
           <div class="cd-col-form-input">
             <textarea class="form-control"
                       formControlName="comment"
@@ -114,9 +110,9 @@
         <div class="form-group row">
           <label class="cd-col-form-label"
                  for="starts-at">
-            <ng-container i18n>Start time</ng-container>
+            <span class="required"
+                  i18n>Start time</span>
             <cd-helper i18n>If the start time lies in the past the creation time will be used</cd-helper>
-            <span class="required"></span>
           </label>
           <div class="cd-col-form-input">
             <input [bsConfig]="bsConfig"
@@ -133,11 +129,9 @@
 
         <!-- Duration -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="duration">
-            <ng-container i18n>Duration</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="duration"
+                 i18n>Duration</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    formControlName="duration"
@@ -152,11 +146,9 @@
 
         <!-- End time -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="ends-at">
-            <ng-container i18n>End time</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="ends-at"
+                 i18n>End time</label>
           <div class="cd-col-form-input">
             <input [bsConfig]="bsConfig"
                    bsDatepicker
@@ -172,7 +164,8 @@
 
         <!-- Matchers -->
         <fieldset>
-          <legend i18n>Matchers<span class="required">*</span></legend>
+          <legend class="required"
+                  i18n>Matchers</legend>
 
           <div class="cd-col-form-offset">
             <h5 *ngIf="matchers.length === 0"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
index df0c60dace01..e2f7e9ec6b87 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
@@ -16,11 +16,9 @@
   <div class="modal-body">
     <!-- Name -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="name">
-        <ng-container i18n>Name</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="name"
+             i18n>Name</label>
       <div class="cd-col-form-input">
         <select class="form-control"
                 id="name"
@@ -41,11 +39,9 @@
 
     <!-- Value -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="value">
-        <ng-container i18n>Value</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="value"
+             i18n>Value</label>
       <div class="cd-col-form-input">
         <input id="value"
                class="form-control"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
index 7566c6298074..4ade6ddbc515 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
@@ -11,11 +11,9 @@
         <!-- cluster_id -->
         <div class="form-group row"
              *ngIf="!isDefaultCluster">
-          <label class="cd-col-form-label"
-                 for="cluster_id">
-            <ng-container i18n>Cluster</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="cluster_id"
+                 i18n>Cluster</label>
           <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     formControlName="cluster_id"
@@ -83,11 +81,9 @@
         <div formGroupName="fsal">
           <!-- Name -->
           <div class="form-group row">
-            <label class="cd-col-form-label"
-                   for="name">
-              <ng-container i18n>Storage Backend</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="name"
+                   i18n>Storage Backend</label>
             <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="name"
@@ -115,11 +111,9 @@
           <!-- RGW user -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'RGW'">
-            <label class="cd-col-form-label"
-                   for="rgw_user_id">
-              <ng-container i18n>Object Gateway User</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="rgw_user_id"
+                   i18n>Object Gateway User</label>
             <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="rgw_user_id"
@@ -147,11 +141,9 @@
           <!-- CephFS user_id -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'CEPH'">
-            <label class="cd-col-form-label"
-                   for="user_id">
-              <ng-container i18n>CephFS User ID</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="user_id"
+                   i18n>CephFS User ID</label>
             <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="user_id"
@@ -178,11 +170,9 @@
           <!-- CephFS fs_name -->
           <div class="form-group row"
                *ngIf="nfsForm.getValue('name') === 'CEPH'">
-            <label class="cd-col-form-label"
-                   for="fs_name">
-              <ng-container i18n>CephFS Name</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="fs_name"
+                   i18n>CephFS Name</label>
             <div class="cd-col-form-input">
               <select class="form-control custom-select"
                       formControlName="fs_name"
@@ -212,11 +202,9 @@
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'CEPH'">
           <label class="cd-col-form-label"
-                 for="security_label">
-            <ng-container i18n>Security Label</ng-container>
-            <span class="required"
-                  *ngIf="nfsForm.getValue('security_label')"></span>
-          </label>
+                 [ngClass]="{'required': nfsForm.getValue('security_label')}"
+                 for="security_label"
+                 i18n>Security Label</label>
 
           <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
@@ -248,11 +236,9 @@
         <!-- Path -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'CEPH'">
-          <label class="cd-col-form-label"
-                 for="path">
-            <ng-container i18n>CephFS Path</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="path"
+                 i18n>CephFS Path</label>
           <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
@@ -278,11 +264,9 @@
         <!-- Bucket -->
         <div class="form-group row"
              *ngIf="nfsForm.getValue('name') === 'RGW'">
-          <label class="cd-col-form-label"
-                 for="path">
-            <ng-container i18n>Path</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="path"
+                 i18n>Path</label>
           <div class="cd-col-form-input">
             <input type="text"
                    class="form-control"
@@ -309,11 +293,9 @@
 
         <!-- NFS Protocol -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="protocols">
-            <ng-container i18n>NFS Protocol</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="protocols"
+                 i18n>NFS Protocol</label>
           <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
@@ -368,8 +350,8 @@
              *ngIf="nfsForm.getValue('protocolNfsv4')">
           <label class="cd-col-form-label"
                  for="pseudo">
-            <ng-container i18n>Pseudo</ng-container>
-            <span class="required"></span>
+            <span class="required"
+                  i18n>Pseudo</span>
             <cd-helper>
               <p i18n>The position that this <strong>NFS v4</strong> export occupies
                 in the <strong>Pseudo FS</strong> (it must be unique).</p>
@@ -393,11 +375,9 @@
 
         <!-- Access Type -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="access_type">
-            <ng-container i18n>Access Type</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="access_type"
+                 i18n>Access Type</label>
           <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     formControlName="access_type"
@@ -435,11 +415,9 @@
 
         <!-- Squash -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="squash">
-            <ng-container i18n>Squash</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="squash"
+                 i18n>Squash</label>
           <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     name="squash"
@@ -466,11 +444,9 @@
 
         <!-- Transport Protocol -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="transports">
-            <ng-container i18n>Transport Protocol</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="transports"
+                 i18n>Transport Protocol</label>
           <div class="cd-col-form-input">
             <div class="custom-control custom-checkbox">
               <input type="checkbox"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
index dd28a4bb2dc3..52a83907baac 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
@@ -15,11 +15,9 @@
       novalidate>
   <div class="modal-body">
     <div class="form-group row">
-      <label for="name"
-             class="cd-col-form-label">
-        <ng-container i18n>Name</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label"
+             for="name"
+             i18n>Name</label>
       <div class="cd-col-form-input">
         <input type="text"
                id="name"
@@ -43,8 +41,8 @@
     <div class="form-group row">
       <label for="plugin"
              class="cd-col-form-label">
-        <ng-container i18n>Plugin</ng-container>
-        <span class="required"></span>
+        <span class="required"
+              i18n>Plugin</span>
         <cd-helper [html]="tooltips.plugins[plugin].description">
         </cd-helper>
       </label>
@@ -70,9 +68,8 @@
     <div class="form-group row">
       <label for="k"
              class="cd-col-form-label">
-        <ng-container i18n>Data chunks (k)</ng-container>
-        <span class="required"
-              *ngIf="requiredControls.includes('k')"></span>
+        <span [ngClass]="{'required': requiredControls.includes('k')}"
+              i18n>Data chunks (k)</span>
         <cd-helper [html]="tooltips.k">
         </cd-helper>
       </label>
@@ -96,9 +93,8 @@
     <div class="form-group row">
       <label for="m"
              class="cd-col-form-label">
-        <ng-container i18n>Coding chunks (m)</ng-container>
-        <span class="required"
-              *ngIf="requiredControls.includes('m')"></span>
+        <span [ngClass]="{'required': requiredControls.includes('m')}"
+              i18n>Coding chunks (m)</span>
         <cd-helper [html]="tooltips.m">
         </cd-helper>
       </label>
@@ -141,10 +137,10 @@
 
     <div class="form-group row"
          *ngIf="plugin === PLUGIN.LRC">
-      <label for="l"
-             class="cd-col-form-label">
-        <ng-container i18n>Locality (l)</ng-container>
-        <span class="required"></span>
+      <label class="cd-col-form-label"
+             for="l">
+        <span class="required"
+              i18n>Locality (l)</span>
         <cd-helper [html]="tooltips.plugins.lrc.l">
         </cd-helper>
       </label>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 9c52943e1038..53602e691cb1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -14,11 +14,9 @@
       <div class="card-body">
         <!-- Name -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="name">
-            <ng-container i18n>Name</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="name"
+                 i18n>Name</label>
           <div class="cd-col-form-input">
             <input id="name"
                    name="name"
@@ -46,11 +44,9 @@
 
         <!-- Pool type selection -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="poolType">
-            <ng-container i18n>Pool type</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="poolType"
+                 i18n>Pool type</label>
           <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     id="poolType"
@@ -91,11 +87,9 @@
           <!-- Pg number -->
           <div class="form-group row"
                *ngIf="form.getValue('pgAutoscaleMode') !== 'on'">
-            <label class="cd-col-form-label"
-                   for="pgNum">
-              <ng-container i18n>Placement groups</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="pgNum"
+                   i18n>Placement groups</label>
             <div class="cd-col-form-input">
               <input class="form-control"
                      id="pgNum"
@@ -130,11 +124,9 @@
           <!-- Replica Size -->
           <div class="form-group row"
                *ngIf="form.getValue('poolType') === 'replicated'">
-            <label class="cd-col-form-label"
-                   for="size">
-              <ng-container i18n>Replicated size</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="size"
+                   i18n>Replicated size</label>
             <div class="cd-col-form-input">
               <input class="form-control"
                      id="size"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index 375c3f37a6da..e16cbe4f6160 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -31,11 +31,9 @@
         <!-- Name -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="bid">
-            <ng-container i18n>Name</ng-container>
-            <span class="required"
-                  *ngIf="!editing"></span>
-          </label>
+                 [ngClass]="{required: !editing}"
+                 for="bid"
+                 i18n>Name</label>
           <div class="cd-col-form-input">
             <input id="bid"
                    name="bid"
@@ -60,11 +58,9 @@
 
         <!-- Owner -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="owner">
-            <ng-container i18n>Owner</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="owner"
+                 i18n>Owner</label>
           <div class="cd-col-form-input">
             <select id="owner"
                     name="owner"
@@ -89,11 +85,9 @@
         <!-- Placement target -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="placement-target">
-            <ng-container i18n>Placement target</ng-container>
-            <span class="required"
-                  *ngIf="!editing"></span>
-          </label>
+                 [ngClass]="{required: !editing}"
+                 for="placement-target"
+                 i18n>Placement target</label>
           <div class="cd-col-form-input">
             <ng-template #placementTargetSelect>
               <select id="placement-target"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
index ab9db752de10..4d1cb115e3da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
@@ -17,12 +17,9 @@
     <!-- Type -->
     <div class="form-group row">
       <label class="cd-col-form-label"
-             for="type">
-        <ng-container i18n>Type</ng-container>
-        <span class="required"
-              *ngIf="!editing">
-        </span>
-      </label>
+             [ngClass]="{'required': !editing}"
+             for="type"
+             i18n>Type</label>
       <div class="cd-col-form-input">
         <input id="type"
                class="form-control"
@@ -49,11 +46,9 @@
 
     <!-- Permission -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="perm">
-        <ng-container i18n>Permission</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="perm"
+             i18n>Permission</label>
       <div class="cd-col-form-input">
         <select id="perm"
                 class="form-control custom-select"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 1fad53ff7b8a..f15c7a20324e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -18,12 +18,9 @@
         <!-- Username -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="uid">
-            <ng-container i18n>Username</ng-container>
-            <span class="required"
-                  *ngIf="!editing">
-            </span>
-          </label>
+                 [ngClass]="{'required': !editing}"
+                 for="uid"
+                 i18n>Username</label>
           <div class="cd-col-form-input">
             <input id="uid"
                    class="form-control"
@@ -43,12 +40,9 @@
         <!-- Full name -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="display_name">
-            <ng-container i18n>Full name</ng-container>
-            <span class="required"
-                  *ngIf="!editing">
-            </span>
-          </label>
+                 [ngClass]="{'required': !editing}"
+                 for="display_name"
+                 i18n>Full name</label>
           <div class="cd-col-form-input">
             <input id="display_name"
                    class="form-control"
@@ -81,11 +75,9 @@
 
         <!-- Max. buckets -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="max_buckets">
-            <ng-container i18n>Max. buckets</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="max_buckets"
+                 i18n>Max. buckets</label>
           <div class="cd-col-form-input">
             <input id="max_buckets"
                    class="form-control"
@@ -137,11 +129,9 @@
           <!-- Access key -->
           <div class="form-group row"
                *ngIf="!editing && !userForm.getValue('generate_key')">
-            <label class="cd-col-form-label"
-                   for="access_key">
-              <ng-container i18n>Access key</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="access_key"
+                   i18n>Access key</label>
             <div class="cd-col-form-input">
               <div class="input-group">
                 <input id="access_key"
@@ -168,11 +158,9 @@
           <!-- Secret key -->
           <div class="form-group row"
                *ngIf="!editing && !userForm.getValue('generate_key')">
-            <label class="cd-col-form-label"
-                   for="secret_key">
-              <ng-container i18n>Secret key</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="secret_key"
+                   i18n>Secret key</label>
             <div class="cd-col-form-input">
               <div class="input-group">
                 <input id="secret_key"
@@ -464,11 +452,9 @@
           <!-- Maximum size -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_size_unlimited')">
-            <label class="cd-col-form-label"
-                   for="user_quota_max_size">
-              <ng-container i18n>Max. size</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="user_quota_max_size"
+                   i18n>Max. size</label>
             <div class="cd-col-form-input">
               <input id="user_quota_max_size"
                      class="form-control"
@@ -503,11 +489,9 @@
           <!-- Maximum objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_objects_unlimited')">
-            <label class="cd-col-form-label"
-                   for="user_quota_max_objects">
-              <ng-container i18n>Max. objects</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="user_quota_max_objects"
+                   i18n>Max. objects</label>
             <div class="cd-col-form-input">
               <input id="user_quota_max_objects"
                      class="form-control"
@@ -561,11 +545,9 @@
           <!-- Maximum size -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_size_unlimited')">
-            <label class="cd-col-form-label"
-                   for="bucket_quota_max_size">
-              <ng-container i18n>Max. size</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="bucket_quota_max_size"
+                   i18n>Max. size</label>
             <div class="cd-col-form-input">
               <input id="bucket_quota_max_size"
                      class="form-control"
@@ -600,11 +582,9 @@
           <!-- Maximum objects -->
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_objects_unlimited')">
-            <label class="cd-col-form-label"
-                   for="bucket_quota_max_objects">
-              <ng-container i18n>Max. objects</ng-container>
-              <span class="required"></span>
-            </label>
+            <label class="cd-col-form-label required"
+                   for="bucket_quota_max_objects"
+                   i18n>Max. objects</label>
             <div class="cd-col-form-input">
               <input id="bucket_quota_max_objects"
                      class="form-control"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
index 981cf7ec32bd..782f7fe6f17d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
@@ -17,12 +17,9 @@
     <!-- Username -->
     <div class="form-group row">
       <label class="cd-col-form-label"
-             for="user">
-        <ng-container i18n>Username</ng-container>
-        <span class="required"
-              *ngIf="!viewing">
-        </span>
-      </label>
+             [ngClass]="{'required': !viewing}"
+             for="user"
+             i18n>Username</label>
       <div class="cd-col-form-input">
         <input id="user"
                class="form-control"
@@ -67,12 +64,9 @@
     <div class="form-group row"
          *ngIf="!formGroup.getValue('generate_key')">
       <label class="cd-col-form-label"
-             for="access_key">
-        <ng-container i18n>Access key</ng-container>
-        <span class="required"
-              *ngIf="!viewing">
-        </span>
-      </label>
+             [ngClass]="{'required': !viewing}"
+             for="access_key"
+             i18n>Access key</label>
       <div class="cd-col-form-input">
         <div class="input-group">
           <input id="access_key"
@@ -101,12 +95,9 @@
     <div class="form-group row"
          *ngIf="!formGroup.getValue('generate_key')">
       <label class="cd-col-form-label"
-             for="secret_key">
-        <ng-container i18n>Secret key</ng-container>
-        <span class="required"
-              *ngIf="!viewing">
-        </span>
-      </label>
+             [ngClass]="{'required': !viewing}"
+             for="secret_key"
+             i18n>Secret key</label>
       <div class="cd-col-form-input">
         <div class="input-group">
           <input id="secret_key"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
index 17d76baa2e65..aa33bffd0870 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
@@ -30,12 +30,9 @@
     <!-- Subuser -->
     <div class="form-group row">
       <label class="cd-col-form-label"
-             for="subuid">
-        <ng-container i18n>Subuser</ng-container>
-        <span class="required"
-              *ngIf="!editing">
-        </span>
-      </label>
+             [ngClass]="{'required': !editing}"
+             for="subuid"
+             i18n>Subuser</label>
       <div class="cd-col-form-input">
         <input id="subuid"
                class="form-control"
@@ -54,11 +51,9 @@
 
     <!-- Permission -->
     <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="perm">
-        <ng-container i18n>Permission</ng-container>
-        <span class="required"></span>
-      </label>
+      <label class="cd-col-form-label required"
+             for="perm"
+             i18n>Permission</label>
       <div class="cd-col-form-input">
         <select id="perm"
                 class="form-control custom-select"
@@ -102,11 +97,9 @@
       <!-- Secret key -->
       <div class="form-group row"
            *ngIf="!editing && !formGroup.getValue('generate_secret')">
-        <label class="cd-col-form-label"
-               for="secret_key">
-          <ng-container i18n>Secret key</ng-container>
-          <span class="required"></span>
-        </label>
+        <label class="cd-col-form-label required"
+               for="secret_key"
+               i18n>Secret key</label>
         <div class="cd-col-form-input">
           <div class="input-group">
             <input id="secret_key"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
index 901bc6937c8e..c059c3a5b268 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
@@ -11,11 +11,9 @@
         <!-- Name -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="name">
-            <ng-container i18n>Name</ng-container>
-            <span class="required"
-                  *ngIf="mode !== roleFormMode.editing"></span>
-          </label>
+                 [ngClass]="{'required': mode !== roleFormMode.editing}"
+                 for="name"
+                 i18n>Name</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
index 30b128f0e049..aac7cf4d09bc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
@@ -15,11 +15,9 @@
         <!-- Username -->
         <div class="form-group row">
           <label class="cd-col-form-label"
-                 for="username">
-            <ng-container i18n>Username</ng-container>
-            <span class="required"
-                  *ngIf="mode !== userFormMode.editing"></span>
-          </label>
+                 [ngClass]="{'required': mode !== userFormMode.editing}"
+                 for="username"
+                 i18n>Username</label>
           <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
@@ -107,6 +105,7 @@
         <div class="form-group row"
              *ngIf="!authStorageService.isSSO()">
           <label class="cd-col-form-label"
+                 [ngClass]="{'required': pwdExpirationSettings.pwdExpirationSpan > 0}"
                  for="pwdExpirationDate">
             <ng-container i18n>Password expiration date</ng-container>
             <cd-helper class="text-pre"
@@ -123,8 +122,6 @@
                 in order to let passwords expire periodically.
               </p>
             </cd-helper>
-            <span class="required"
-                  *ngIf="pwdExpirationSettings.pwdExpirationSpan > 0"></span>
           </label>
           <div class="cd-col-form-input">
             <div class="input-group">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
index 45b87b8beb64..00fbe1e391f6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
@@ -9,11 +9,9 @@
       <div class="card-body">
         <!-- Old password -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="oldpassword">
-            <ng-container i18n>Old password</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="oldpassword"
+                 i18n>Old password</label>
           <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
@@ -42,11 +40,11 @@
         <div class="form-group row">
           <label class="cd-col-form-label"
                  for="newpassword">
-            <ng-container i18n>New password</ng-container>
+            <span class="required"
+                  i18n>New password</span>
             <cd-helper class="text-pre"
                        html="{{ passwordPolicyHelpText }}">
             </cd-helper>
-            <span class="required"></span>
           </label>
           <div class="cd-col-form-input">
             <div class="input-group">
@@ -84,11 +82,9 @@
 
         <!-- Confirm new password -->
         <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="confirmnewpassword">
-            <ng-container i18n>Confirm new password</ng-container>
-            <span class="required"></span>
-          </label>
+          <label class="cd-col-form-label required"
+                 for="confirmnewpassword"
+                 i18n>Confirm new password</label>
           <div class="cd-col-form-input">
             <div class="input-group">
               <input class="form-control"
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 3c0fbf6a36f0..90c44e92f4c3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -279,19 +279,14 @@ a {
 .noscript p {
   color: $color-noscript-text;
 }
-.required {
-  color: $color-required-text;
-}
 /* Forms */
-.form-group > .col-form-label > span.required,
-.form-group > .col-sm-12 > .col-form-label > span.required {
-  @extend .fa;
-  @extend .fa-asterisk;
-  @extend .required;
-  font-size: 6px;
+.required::after {
+  color: $color-required-text;
+  content: '*';
+  font-size: 14px;
   padding-left: 4px;
-  vertical-align: text-top;
 }
+
 .form-control {
   display: table-cell;
 
-- 
2.47.3