[US TRTL-486] REDESIGN- IDP Creation

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.html

@@ -4,14 +4,14 @@
 
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div class="content">
-    <h2 i18n="Create an IDP for the customer@@idpCreateTitle">Création d'un IDP pour "{{data?.customer?.name}}"</h2>
+    <div class="text large bold" i18n="Create an IDP for the customer@@idpCreateTitle">Création d'un IDP pour "{{data?.customer?.name}}"</div>
 
-    <div class="form-group">
-      <vitamui-common-slide-toggle formControlName="enabled" i18n="IDP Enabled@@idpCreateEnabledToggleLabel">IDP Actif</vitamui-common-slide-toggle>
+    <div>
+      <vitamui-common-slide-toggle class="col-4 p-0" formControlName="enabled" i18n="IDP Enabled@@idpCreateEnabledToggleLabel">IDP Actif</vitamui-common-slide-toggle>
     </div>
 
-    <div class="form-group-flex">
-      <vitamui-common-input
+    <div class="mt-4">
+      <vitamui-common-input class="col-4 p-0"
         formControlName="name"
         maxlength="100"
         required
@@ -25,8 +25,7 @@
     </div>
 
     <div>
-      <vitamui-common-input
-        class="field-keystore-password"
+      <vitamui-common-input class="col-4 p-0"
         formControlName="keystorePassword"
         type="password"
         required
@@ -40,37 +39,37 @@
       </vitamui-common-input>
     </div>
 
-    <div class="form-group vitamui-input-file">
+    <div class="col-5 p-0 mt-3 vitamui-input-file">
       <label for="keystore">
-          <span class="vitamui-input-file-label" i18n="Upload the CAS keystore file@@idpCreateKeystoreUploadLabel">Uploader le fichier keystore de CAS</span>
+          <span class="text link bold text-primary" i18n="Upload the CAS keystore file@@idpCreateKeystoreUploadLabel">Uploader le fichier keystore de CAS</span>
           <div class="vitamui-input-file-filename">{{keystore?.name}}</div>
       </label>
       <input id="keystore" type="file" accept=".jks" (change)="setKeystore($event.target.files)">
     </div>
 
-    <div class="form-group vitamui-input-file">
+    <div class="col-5 p-0 mt-4 vitamui-input-file">
       <label for="idpMetadata">
-        <span class="vitamui-input-file-label" i18n="Upload the IDP's metadata file@@idpCreateMetadataUploadLabel">Uploader le fichier metadata de l'IDP</span>
+        <span class="text link bold text-primary" i18n="Upload the IDP's metadata file@@idpCreateMetadataUploadLabel">Uploader le fichier metadata de l'IDP</span>
         <div class="vitamui-input-file-filename">{{idpMetadata?.name}}</div>
       </label>
       <input id="idpMetadata" type="file" accept=".xml" (change)="setIdpMetadata($event.target.files)">
     </div>
 
 
-    <div class="form-group-flex">
-      <vitamui-common-input
+    <div class="mt-4">
+      <vitamui-common-input class="col-5 p-0 "
         formControlName="mailAttribute"
         placeholder="Attribut mail" i18n-placeholder="Mail attribute@@idpCreateMailAttributePlaceholder"
       >
       </vitamui-common-input>
     </div>
 
-    <div class="form-group">
-      <label for="patterns" i18n="Patterns label@@idpCreatePatternsLabel">Patterns</label>
+    <div class="mt-2">
+      <div class="text medium bold mb-3" for="patterns" i18n="Patterns label@@idpCreatePatternsLabel">Patterns</div>
       <app-pattern formControlName="patterns" [options]="data?.domains"></app-pattern>
     </div>
 
-    <div class="actions">
+    <div class="actions mt-4">
       <button type="submit" class="btn primary" [disabled]="!isFormValid" i18n="Finish tenant creation button@@tenantCreateFinishButton">Terminer</button>
       <button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel tenant creation@@tenantCreateCancelButton">Annuler</button>
     </div>

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.scss

-.form-group {
-    padding-bottom: 30px;
-
-    label {
-        display: block;
-        margin-bottom: 7px;
-    }
-}
-
-.field-keystore-password {
-    width: 400px;
-}
-
-.form-group-flex {
-    display: flex;
-    align-items: flex-end;
-}
-
-.field-type {
-    margin-left: 30px;
-}
-
-:host ::ng-deep app-pattern .vitamui-mat-select {
-    max-width: 300px;
-}

ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.html

@@ -6,19 +6,19 @@
         {{ option.value }} <span *ngIf="option?.disabled" i18n="Already in use@@patternOptionAlreadyInUse">(déjà utilisé)</span>
       </mat-option>
     </mat-select>
-    
+
     <div class="select-arrow">
       <i class="material-icons">keyboard_arrow_up</i>
       <i class="material-icons">keyboard_arrow_down</i>
     </div>
   </mat-form-field>
 
-  <button  class="btn btn-circle secondary" [class.btn-small]="vitamuiMiniMode" (click)="add()" [disabled]="!controlValueValid()">
+  <button  class="btn primary btn-circle" [class.btn-small]="vitamuiMiniMode" (click)="add()" [disabled]="!controlValueValid()">
     <i class="vitamui-icon vitamui-icon-add"></i>
   </button>
 </div>
 
-<div class="vitamui-chip-list">
+<div class="mt-3 vitamui-chip-list">
   <div *ngFor="let pattern of patterns" class="vitamui-chip">
     <div class="vitamui-chip-content">{{pattern}}</div>
     <div class="vitamui-remove-chip" (click)="remove(pattern)">

ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.scss

@@ -2,9 +2,9 @@
     mat-form-field {
         width: 50%;
     }
-    
+
     .mat-form-field-wrapper {
-        width: 100%;
+        width: 83%;
     }
 
     .mat-form-field-flex {
@@ -14,4 +14,4 @@
     .mat-form-field-infix {
         padding: 0.5rem 0rem!important;
     }
-}
\ No newline at end of file
+}