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>

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 48753ae24317c51a8ba00f0750c88af1700be7dd..899742549e663a62bda5ba6b22145621500a865d 100644 (file)
--- 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 8eec60a7db2af2c77eece73d2cdaf9cda3144275..c5582a6c5fd444cf0c1ee419f5e936a97cd811dc 100644 (file)
--- 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 9aab16390997f2339de115b7de27475d6a84ffd2..db5f824f87667a184be7fdccf7245efd291e5836 100644 (file)
--- 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 6bb4cba0db769ddb90914caf3bbe1b45d8c52145..680865459a157a3ec1e69541b0d761b8bed3bfb0 100644 (file)
--- 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 64ea83adb817038d2c0b91d2a66d307f11a1b646..bb41453c59be520e05ca9b9051286fd906428b23 100644 (file)
--- 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 4fd9985a96bd767c6d201e43ada47b588272606c..64403ac48cae632a60187367c278b8de59f72e4c 100644 (file)
--- 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 44a58ad494829e83d1eac3d5a53a48856766aabd..776e6ecb5038ce337d8df76b30cd6ad0f4ec1035 100644 (file)
--- 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 4f563ddf9bedd8d0adc3aa9bfc14ad2d85de5c7d..d75d6c6ab609751ba21abca68ed604f53c98e966 100644 (file)
--- 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 792f1a908adea03e2590d4e609063ed5975bb245..f96eb581bcf2037b98c3c0bc8171d720f7f880c0 100644 (file)
--- 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 5e4efe45961e5299318b603d6c8310e4ea057480..54aa0875c30ac71be6d7e9e8f55bf763b291edb4 100644 (file)
--- 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 978d1b95040575c76a009afaf0e34e32c925cb58..1444e88588bf2da2339e2e02db4de92a1ad68aff 100755 (executable)
--- 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 ec2ad0ff4e28caaae3c63c1df7eba43c7d0f0335..e1d0b2a3cb0ea94e4720ffd298ce8b5aa0705e50 100644 (file)
--- 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 df0c60dace01e47b353b8eb900c3eb5b165efc38..e2f7e9ec6b87f84843479dee0bc961b575345549 100644 (file)
--- 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 7566c6298074e13b829357244e6ffa495ec2a448..4ade6ddbc515d514d5600990df28aaa124191f6f 100644 (file)
--- 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 dd28a4bb2dc39422c265cdf05b8ef15e255faba1..52a83907baac4750d7b2499ec99fd23ab926a79f 100644 (file)
--- 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 9c52943e1038337130262668b88f3c84692a09f4..53602e691cb1b65b260f099d7f5d0fa5a26c2dff 100644 (file)
--- 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 375c3f37a6daac7806ae039f0bae230375488259..e16cbe4f6160484e9b0315a91c0e867a22dd2fa1 100644 (file)
--- 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 ab9db752de10a39cb956a9a4cd56741ff7c7a16e..4d1cb115e3da496512e18b147dbd97817648b139 100644 (file)
--- 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 1fad53ff7b8a0cb3c45d42ccb624f59bf9502cce..f15c7a20324e24453fcca5b13dc2f5c8c0c70668 100644 (file)
--- 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 981cf7ec32bdf50f239609e526d374927b7e90fc..782f7fe6f17ddb98f4159427e595af7157ad844a 100644 (file)
--- 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 17d76baa2e65a96944d65c6e15d5007793567de0..aa33bffd0870e54fe5ce728fe4d9b7188c8364a6 100644 (file)
--- 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 901bc6937c8e268833635175f70d737e2036e5e0..c059c3a5b26831840bbf09b5b53d8cfdc2c78476 100644 (file)
--- 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 30b128f0e0498913568b4a3a7b5c458a2fa9cb84..aac7cf4d09bc7098849d2b16bcb33ff41568ee1f 100644 (file)
--- 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 45b87b8beb64e9e03221f772d787abeaf7e440c9..00fbe1e391f6208c3c45faa888705378eb35b139 100644 (file)
--- 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 3c0fbf6a36f0c6941cc1d5ce7415a7bf78117c36..90c44e92f4c32f5f1f33b11d80fb2dc918e72bc9 100644 (file)
--- 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;