From 07d3e8321788eeeff4a927beb4114f7ea0b7c7b1 Mon Sep 17 00:00:00 2001
From: Delphine <delphine.coursier@teamdlab.com>
Date: Tue, 10 Nov 2020 15:57:39 +0100
Subject: [PATCH] [US TRTL-344] Add new panel general & customer display
[US TRTL-344] Rework create customer dialog design
---
.../common-progress-bar.component.scss | 36 +-
.../vitamui-input.component.scss | 2 +-
ui/ui-frontend-common/src/sass/_chip.scss | 9 -
ui/ui-frontend-common/src/sass/_form.scss | 3 +-
.../src/sass/_sidepanel.scss | 15 +-
.../src/sass/material/_preview-tab.scss | 16 +-
.../customer-create.component.html | 351 +++++++++---------
.../customer-create.component.scss | 122 +-----
.../customer-create.component.ts | 2 +-
.../customer-preview.component.html | 2 +-
.../graphic-identity-form.component.html | 8 +-
.../graphic-identity-form.component.scss | 4 +
.../graphic-identity.component.html | 4 +-
.../information-tab.component.html | 6 +-
.../sso-tab/sso-tab.component.html | 78 ++--
.../sso-tab/sso-tab.component.scss | 86 +----
.../domains-input.component.html | 12 +-
.../domains-input.component.scss | 5 +
.../domains-input/domains-input.module.ts | 3 -
19 files changed, 296 insertions(+), 468 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/common-progress-bar/common-progress-bar.component.scss b/ui/ui-frontend-common/src/app/modules/components/common-progress-bar/common-progress-bar.component.scss
index def845638..b19db9df2 100644
--- a/ui/ui-frontend-common/src/app/modules/components/common-progress-bar/common-progress-bar.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/common-progress-bar/common-progress-bar.component.scss
@@ -1,25 +1,27 @@
.transition {
transition: width 250ms ease;
- }
+}
+
.tooltip-custom{
display: inline-flex;
- padding: 8px;
- background-color: var(--vitamui-secondary-900);
- color: var(--vitamui-secondary-900-font);
- border-radius: 5px;
- position: relative;
- margin-bottom: 14px;
- margin-left: -18px;
- margin-right: -37px;
+ padding: 5px 8px;
+ background-color: var(--vitamui-secondary-900);
+ color: var(--vitamui-secondary-900-font);
+ border-radius: 5px;
+ position: relative;
+ margin-bottom: 6px;
+ font-size: 12px;
+ margin-left: -14px;
+ margin-right: -37px;
&:before {
- content: "";
- position: absolute;
- bottom: -10px;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 10px 10px 0 10px;
- border-color: var(--vitamui-secondary-900) transparent transparent transparent;
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5px 5px 0;
+ border-color: var(--vitamui-secondary-900) transparent transparent transparent;
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
index 796c4af35..43038638d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
@@ -74,7 +74,7 @@ $anim-timing: 150ms ease-out;
}
.vitamui-input-errors {
- min-height: 30px;
+ min-height: 23px;
}
input {
diff --git a/ui/ui-frontend-common/src/sass/_chip.scss b/ui/ui-frontend-common/src/sass/_chip.scss
index b659023c1..bb6d7e616 100644
--- a/ui/ui-frontend-common/src/sass/_chip.scss
+++ b/ui/ui-frontend-common/src/sass/_chip.scss
@@ -31,15 +31,6 @@
font-size: 14px;
}
}
-
- &.active {
- color: var(--vitamui-secondary);
- border-color: var(--vitamui-secondary);
-
- .vitamui-remove-chip {
- border-color: var(--vitamui-secondary);
- }
- }
}
}
diff --git a/ui/ui-frontend-common/src/sass/_form.scss b/ui/ui-frontend-common/src/sass/_form.scss
index e68f9ae58..a246ec20d 100644
--- a/ui/ui-frontend-common/src/sass/_form.scss
+++ b/ui/ui-frontend-common/src/sass/_form.scss
@@ -2,7 +2,7 @@
display: inline-block;
min-height: 50px;
width: 100%;
- padding: 7px;
+ padding: 5px;
vertical-align: top;
margin-bottom: 20px;
@@ -24,6 +24,7 @@
font-weight: 400;
color: $red;
font-family: 'Roboto';
+ min-height: 22px;
}
input[type=text].vitamui-input,
diff --git a/ui/ui-frontend-common/src/sass/_sidepanel.scss b/ui/ui-frontend-common/src/sass/_sidepanel.scss
index 266c43000..a62f59cbd 100644
--- a/ui/ui-frontend-common/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend-common/src/sass/_sidepanel.scss
@@ -5,7 +5,7 @@
}
.vitamui-sidepanel-header {
- padding: 30px 40px 0px 40px;
+ padding: 10px;
height: 200px;
background-color: var(--vitamui-secondary);
@@ -14,7 +14,7 @@
background: none;
border: none;
padding: 0;
- color: $white;
+ color: white;
}
.btn-close {
@@ -23,7 +23,7 @@
padding: 0;
float: right;
opacity: 0.5;
- color: $white;
+ color: white;
text-decoration: none;
i {
@@ -38,10 +38,11 @@
align-items: center;
margin-top: 30px;
margin-bottom: 20px;
+ padding: 0 30px;
i {
- color: $white;
- margin-right: 10px;
+ color: white;
+ margin-right: 20px;
font-size: 38px;
}
@@ -59,7 +60,7 @@
}
h2 {
- color: $white;
+ color: white;
font-size: 24px;
line-height: 24px;
font-weight: 700;
@@ -98,7 +99,7 @@
.vitamui-sidepanel-body {
font-size: 15px;
- color: $charcoal-grey-two;
+ color: var(--vitamui-grey-900);
position: absolute;
bottom: 0;
right: 0;
diff --git a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
index 00cffc750..bdcfd56ce 100644
--- a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
+++ b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
@@ -11,18 +11,16 @@
opacity: 1;
min-width: auto;
height: 37px;
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: var(--vitamui-secondary-900);
margin: 0 1px;
padding: 0 14px;
font-size: 14px;
- font-weight: normal;
- color: $white;
- text-transform: uppercase;
+ font-weight: 500;
+ color: white;
transition: background-color 200ms ease-out, color 200ms ease-out;
&:hover {
- color: var(--vitamui-secondary);
- background-color: rgba(255, 255, 255, 0.8);
+ background-color:var(--vitamui-secondary-700);
}
&:first-child {
@@ -34,14 +32,14 @@
}
&:not(.mat-tab-disabled):focus {
- background-color: rgba(255, 255, 255, 0.56);
+ background-color: var(--vitamui-grey-300);
}
&.mat-tab-label-active,
&.mat-tab-label-active:not(.mat-tab-disabled):focus {
background-color: $white;
font-weight: bold;
- color: #5e5d5d;
+ color: var(--vitamui-grey-800);
}
}
@@ -50,7 +48,7 @@
}
.mat-tab-body-content {
- padding: 30px 85px 30px 40px;
+ padding: 30px 55px 30px 40px;
overflow: visible;
}
}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
index 089770aeb..5dbb8786c 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
@@ -1,101 +1,77 @@
<div class="header">
- <vitamui-common-progress-bar [index]= "stepIndex" [count]="stepCount"></vitamui-common-progress-bar>
+ <vitamui-common-progress-bar [index]="stepIndex" [count]="stepCount"></vitamui-common-progress-bar>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()" id="formCreateCustomer" class="content">
<vitamui-common-stepper (selectionChange)="stepIndex=$event.selectedIndex">
-
<cdk-step>
- <h2 i18n="Create customer title@@customerCreateTitle1">Création d'un client</h2>
- <div>
- <vitamui-common-input class="field-code" formControlName="code" required placeholder="Code client"
- i18n-placeholder="Customer code input placeholder + format@@customerCreateCustomerCodeInputPlaceholder">
- <ng-container *ngIf="form.get('code')?.touched">
- <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.required"
- i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
- <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.pattern"
- i18n="Wrong format (4 digits minimum) error hint@@formError6DigitsField">Format incorrect (4 chiffres
- minimum)</vitamui-common-input-error>
- <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.uniqueCode"
- i18n="Code exists error hint@@formErrorCodeExists">Code déjà existant</vitamui-common-input-error>
- </ng-container>
- </vitamui-common-input>
- </div>
+ <h2 i18n="Create customer title@@customerCreateTitle1" class="col-12">Création d'un client</h2>
+
+ <vitamui-common-input class="col-6" formControlName="code" required placeholder="Code client (4 chiffres)"
+ i18n-placeholder="Customer code@@customerCreateCustomerCodeInputPlaceholder">
+
+ <ng-container *ngIf="form.get('code')?.touched">
+ <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.required"
+ i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
+ <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.pattern"
+ i18n="Wrong format (4 digits minimum) error hint@@formError6DigitsField">Format incorrect (4 chiffres
+ minimum)</vitamui-common-input-error>
+ <vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.uniqueCode"
+ i18n="Code exists error hint@@formErrorCodeExists">Code déjà existant</vitamui-common-input-error>
+ </ng-container>
+ </vitamui-common-input>
+
+ <div class="d-flex">
+ <vitamui-common-input class="col-6" formControlName="name" maxlength="100" required placeholder="Client"
+ i18n-placeholder="Customer name input placeholder@@customerCreateNameInputPlaceholder">
+ <vitamui-common-input-error *ngIf="form.get('name')?.touched && !!form.get('name')?.errors?.required"
+ i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
+ </vitamui-common-input>
+ <vitamui-common-input class="col-6" formControlName="companyName" maxlength="250" required
+ placeholder="Raison sociale"
+ i18n-placeholder="Customer company name input placeholder@@customerCreateCompanyNameInputPlaceholder">
+ <vitamui-common-input-error
+ *ngIf="form.get('companyName')?.touched && !!form.get('companyName')?.errors?.required"
+ i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
+ </vitamui-common-input>
+ </div>
+
+ <ng-container formGroupName="address">
+ <vitamui-common-input class="col-12" formControlName="street" maxlength="250" required
+ placeholder="N° et nom de rue"
+ i18n-placeholder="Customer street input placeholder@@customerCreateStreetInputPlaceholder">
+ <vitamui-common-input-error
+ *ngIf="form.get('address.street')?.touched && !!form.get('address.street')?.errors?.required"
+ i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
+ </vitamui-common-input>
<div class="d-flex">
- <vitamui-common-input class="field-name" formControlName="name" maxlength="100" required placeholder="Client"
- i18n-placeholder="Customer name input placeholder@@customerCreateNameInputPlaceholder">
- <vitamui-common-input-error *ngIf="form.get('name')?.touched && !!form.get('name')?.errors?.required"
+ <vitamui-common-input class="col-4" formControlName="zipCode" maxlength="10" required
+ placeholder="Code postal"
+ i18n-placeholder="Customer zip code input placeholder@@customerCreateZipCodeInputPlaceholder">
+ <vitamui-common-input-error
+ *ngIf="form.get('address.zipCode')?.touched && !!form.get('address.zipCode')?.errors?.required"
i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
</vitamui-common-input>
- <vitamui-common-input class="field-company-name" formControlName="companyName" maxlength="250" required
- placeholder="Raison sociale"
- i18n-placeholder="Customer company name input placeholder@@customerCreateCompanyNameInputPlaceholder">
+
+ <vitamui-common-input class="col-4" formControlName="city" maxlength="100" required placeholder="Ville"
+ i18n-placeholder="Customer city input placeholder@@customerCreateCityInputPlaceholder">
<vitamui-common-input-error
- *ngIf="form.get('companyName')?.touched && !!form.get('companyName')?.errors?.required"
+ *ngIf="form.get('address.city')?.touched && !!form.get('address.city')?.errors?.required"
i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
</vitamui-common-input>
- </div>
-
- <ng-container formGroupName="address">
- <div>
- <vitamui-common-input class="field-street" formControlName="street" maxlength="250" required
- placeholder="N° et nom de rue"
- i18n-placeholder="Customer street input placeholder@@customerCreateStreetInputPlaceholder">
- <vitamui-common-input-error
- *ngIf="form.get('address.street')?.touched && !!form.get('address.street')?.errors?.required"
- i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
- </vitamui-common-input>
- </div>
- <div class="d-flex">
- <vitamui-common-input class="field-zip-code" formControlName="zipCode" maxlength="10" required
- placeholder="Code postal"
- i18n-placeholder="Customer zip code input placeholder@@customerCreateZipCodeInputPlaceholder">
- <vitamui-common-input-error
- *ngIf="form.get('address.zipCode')?.touched && !!form.get('address.zipCode')?.errors?.required"
- i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
- </vitamui-common-input>
- <vitamui-common-input class="field-city" formControlName="city" maxlength="100" required placeholder="Ville"
- i18n-placeholder="Customer city input placeholder@@customerCreateCityInputPlaceholder">
- <vitamui-common-input-error
- *ngIf="form.get('address.city')?.touched && !!form.get('address.city')?.errors?.required"
- i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
- </vitamui-common-input>
- <mat-form-field class="field-country vitamui-mat-select">
- <mat-select formControlName="country" required placeholder="Pays"
- i18n-placeholder="Customer country select placeholder@@customerCreateCountrySelectPlaceholder"
- panelClass="vitamui-mat-select">
- <!-- TODO Fetch those values from a referential -->
- <mat-option value="FR">France</mat-option>
- <mat-option value="GB">Royaume Uni</mat-option>
- <mat-option value="DE">Allemagne</mat-option>
- <mat-option value="DK">Danemark</mat-option>
- <mat-option value="ES">Espagne</mat-option>
- <mat-option value="IT">Italie</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>
- </div>
- </ng-container>
-
- <vitamui-common-input class="field-street" formControlName="internalCode" maxlength="20"
- placeholder="Code interne" i18n-placeholder="Internal code@@customerInternalCodePlaceholder">
- </vitamui-common-input>
-
- <div class="d-flex">
- <label for="language" class="inline-label label-language"
- i18n="Interface language (by default for the user)@@customerCreateLanguageInputLabel">
- Langue de l'interface <span class="required-marker">*</span><br>
- <small>(par défault pour l'utilisateur)</small>
- </label>
- <mat-form-field class="field-language vitamui-mat-select">
- <mat-select formControlName="language" required panelClass="vitamui-mat-select">
- <mat-option value="ENGLISH" i18n="@@languageEnglish">Anglais</mat-option>
- <mat-option value="FRENCH" i18n="@@languageFrench">Français</mat-option>
+ <mat-form-field class="col-4" class="vitamui-mat-select">
+ <mat-select formControlName="country" required placeholder="Pays"
+ i18n-placeholder="Customer country select placeholder@@customerCreateCountrySelectPlaceholder"
+ panelClass="vitamui-mat-select">
+ <!-- TODO Fetch those values from a referential -->
+ <mat-option value="FR">France</mat-option>
+ <mat-option value="GB">Royaume Uni</mat-option>
+ <mat-option value="DE">Allemagne</mat-option>
+ <mat-option value="DK">Danemark</mat-option>
+ <mat-option value="ES">Espagne</mat-option>
+ <mat-option value="IT">Italie</mat-option>
</mat-select>
<div class="select-arrow">
<i class="material-icons">keyboard_arrow_up</i>
@@ -103,82 +79,105 @@
</div>
</mat-form-field>
</div>
+ </ng-container>
+
+ <vitamui-common-input class="col-12" formControlName="internalCode" maxlength="20" placeholder="Code interne"
+ i18n-placeholder="Internal code@@customerInternalCodePlaceholder">
+ </vitamui-common-input>
+
+ <div class="col-12 d-flex align-items-center">
+ <label for="language" class="mr-4 mb-0"
+ i18n="Interface language (by default for the user)@@customerCreateLanguageInputLabel">
+ <div>Langue de l'interface <span class="required-marker">*</span></div>
+ <div><small>(par défault pour l'utilisateur)</small></div>
+ </label>
+
+ <mat-form-field class="vitamui-mat-select">
+ <mat-select formControlName="language" required panelClass="vitamui-mat-select">
+ <mat-option value="ENGLISH" i18n="@@languageEnglish">Anglais</mat-option>
+ <mat-option value="FRENCH" i18n="@@languageFrench">Français</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>
+ </div>
- <div class="actions">
- <button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()"
- i18n="Next step button label@@customerCreateNextButton">Suivant</button>
- <ng-container *ngTemplateOutlet="cancel"></ng-container>
- </div>
+ <div class="d-flex mt-4">
+ <button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()"
+ i18n="Next step button label@@customerCreateNextButton">Suivant</button>
+ <ng-container *ngTemplateOutlet="cancel"></ng-container>
+ </div>
</cdk-step>
<cdk-step>
- <h2 i18n="Customer access title@@customerCreateTitle2">Accès client</h2>
-
- <div class="d-flex">
- <label for="passwordRevocationDelay" class="inline-label label-password-revocation-delay"
- i18n="Duration until password revocation (since the last change)@@customerCreatePasswordRevocationInputLabel">
- Durée de révocation du mot de passe<br>
- <small>(depuis le dernier changement)</small>
- </label>
- <mat-form-field class="field-password-revocation-delay vitamui-mat-select">
- <mat-select formControlName="passwordRevocationDelay" placeholder="Durée de révocation des mots de passe"
- i18n-placeholder="Customer password revocation delay select placeholder@@customerCreatePasswordRevocationDelaySelectPlaceholder"
- panelClass="vitamui-mat-select">
- <mat-option [value]="6" i18n="6 months@@customerCreatePasswordRevocationDelayOption6Months">6 mois
- </mat-option>
- <mat-option [value]="9" i18n="9 months@@customerCreatePasswordRevocationDelayOption9Months">9 mois
- </mat-option>
- <mat-option [value]="12" i18n="12 months@@customerCreatePasswordRevocationDelayOption12Months">12 mois
- </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>
- </div>
+ <h2 class="col-12" i18n="Customer access title@@customerCreateTitle2">Accès client</h2>
+
+ <div class="col-12 d-flex align-items-center">
+ <label for="passwordRevocationDelay"
+ i18n="Duration until password revocation (since the last change)@@customerCreatePasswordRevocationInputLabel">
+ <div class="font-weight-bold">Durée de révocation du mot de passe</div>
+ <div class="font-weight-bold"><small>(depuis le dernier changement)</small></div>
+ </label>
+
+ <mat-form-field class="vitamui-mat-select ml-5">
+ <mat-select formControlName="passwordRevocationDelay" placeholder="Durée de révocation des mots de passe"
+ i18n-placeholder="Customer password revocation delay select placeholder@@customerCreatePasswordRevocationDelaySelectPlaceholder"
+ panelClass="vitamui-mat-select">
+ <mat-option [value]="6" i18n="6 months@@customerCreatePasswordRevocationDelayOption6Months">6 mois
+ </mat-option>
+ <mat-option [value]="9" i18n="9 months@@customerCreatePasswordRevocationDelayOption9Months">9 mois
+ </mat-option>
+ <mat-option [value]="12" i18n="12 months@@customerCreatePasswordRevocationDelayOption12Months">12 mois
+ </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>
+ </div>
- <div class="form-group">
- <label for="otp" i18n="OTP label@@customerCreateOTPInputLabel">
- Validation en deux étapes <span class="required-marker">*</span>
- </label>
- <mat-button-toggle-group formControlName="otp" #group="matButtonToggleGroup"
- class="vitamui-button-toggle-group">
- <mat-button-toggle value="DISABLED" i18n="OTP deactivate button@@customerCreateOTPDeactivatedButton">Non
- </mat-button-toggle>
- <mat-button-toggle value="OPTIONAL" i18n="OTP optional button@@customerCreateOTPOptionalButton">Optionnelle
- </mat-button-toggle>
- <mat-button-toggle value="MANDATORY" i18n="OTP mandatory button@@customerCreateOTPMandatoryButton">
- Obligatoire</mat-button-toggle>
- </mat-button-toggle-group>
- </div>
+ <div class="col-12 mt-3">
+ <label for="otp" i18n="OTP label@@customerCreateOTPInputLabel" class="font-weight-bold">
+ Validation en deux étapes <span class="required-marker">*</span>
+ </label>
+ <mat-button-toggle-group formControlName="otp" #group="matButtonToggleGroup"
+ class="vitamui-button-toggle-group">
+ <mat-button-toggle value="DISABLED" i18n="OTP deactivate button@@customerCreateOTPDeactivatedButton">Non
+ </mat-button-toggle>
+ <mat-button-toggle value="OPTIONAL" i18n="OTP optional button@@customerCreateOTPOptionalButton">Optionnelle
+ </mat-button-toggle>
+ <mat-button-toggle value="MANDATORY" i18n="OTP mandatory button@@customerCreateOTPMandatoryButton">
+ Obligatoire</mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
- <div class="form-group field-domains">
- <label for="emailDomains" i18n="Email domain input label@@customerCreateEmailDomainInputLabel">
- Restriction de domaine e-mail<br>
- <small>(cliquer sur l'étiquette pour définir le domaine par défaut)</small>
- </label>
- <app-domains-input formControlName="emailDomains" placeholder="domaine.xyz"
- i18n-placeholder="Email domain input placeholder@@customerCreateEmailDomainInputPlaceholder"
- [selected]="form.get('defaultEmailDomain').value"
- (selectedChange)="form.get('defaultEmailDomain').setValue($event)"></app-domains-input>
- </div>
+ <div class="col-12 mt-4 mb-3">
+ <label for="emailDomains" i18n="Email domain input label@@customerCreateEmailDomainInputLabel">
+ <div class="font-weight-bold">Restriction de domaine e-mail</div>
+ <div class="font-weight-bold"><small>(cliquer sur l'étiquette pour définir le domaine par défaut)</small></div>
+ </label>
+ <app-domains-input formControlName="emailDomains" placeholder="domaine.xyz"
+ i18n-placeholder="Email domain input placeholder@@customerCreateEmailDomainInputPlaceholder"
+ [selected]="form.get('defaultEmailDomain').value"
+ (selectedChange)="form.get('defaultEmailDomain').setValue($event)"></app-domains-input>
+ </div>
- <div class="actions">
- <button type="button" class="btn primary" cdkStepperNext [disabled]="secondStepInvalid()"
- i18n="@@customerCreateNextButton">Suivant</button>
- <ng-container *ngTemplateOutlet="cancel"></ng-container>
- </div>
- <ng-container *ngTemplateOutlet="back"></ng-container>
+ <div class="d-flex mt-4">
+ <button type="button" class="btn primary" cdkStepperNext [disabled]="secondStepInvalid()"
+ i18n="@@customerCreateNextButton">Suivant</button>
+ <ng-container *ngTemplateOutlet="cancel"></ng-container>
+ </div>
+ <ng-container *ngTemplateOutlet="back"></ng-container>
</cdk-step>
<cdk-step>
<div *ngIf="stepIndex===2" id="toOverride" class="mt-4">
- <app-graphic-identity
- (formToSend)="customerForm = $event.form; logos = $event.logos">
- </app-graphic-identity>
+ <app-graphic-identity (formToSend)="customerForm = $event.form; logos = $event.logos"></app-graphic-identity>
- <div class="actions">
+ <div class="d-flex mt-4">
<button type="button" class="btn primary" cdkStepperNext [disabled]="!thirdStepValid()" i18n="Create owner button@@customerCreateCreateOwnerButton">
Suivant
</button>
@@ -190,41 +189,31 @@
</cdk-step>
<cdk-step>
- <h2 i18n="Create evidence owner title@@customerCreateTitle3">Création d'un propriétaire pour "{{ customerInfo?.name }}"
- </h2>
- <div class="form-group">
- <app-owner-form [formControl]="form.get(['owners', 0])" [customerInfo]="customerInfo"></app-owner-form>
- <p class="hint" i18n="the evidence tenant is automatically created with the owner@@customerCreateHint">
- Ce propriétaire détiendra les éléments de preuve du client.
- </p>
- </div>
+ <h2 class="col-12" i18n="Create evidence owner title@@customerCreateTitle3">Création d'un propriétaire pour "{{ customerInfo?.name }}"</h2>
+ <div class="col-12">
+ <app-owner-form [formControl]="form.get(['owners', 0])" [customerInfo]="customerInfo"></app-owner-form>
+ <p class="col-12 mt-0" i18n="the evidence tenant is automatically created with the owner@@customerCreateHint">Le
+ coffre des éléments de preuve est créé automatiquement avec son propriétaire</p>
+ </div>
- <button type="button" class="btn primary" i18n="Finish customer creation button@@customerCreateFinishButton"
- cdkStepperNext [disabled]="form.get(['owners', 0]).pending || form.get(['owners', 0]).invalid">Créer un coffre</button>
- <button type="button" class="btn cancel" (click)="onCancel()"
- i18n="Cancel customer creation@@customerCreateCancelButton">Annuler</button>
- <button type="button" class="back" cdkStepperPrevious>
- <i class="material-icons">arrow_back</i>
- <ng-container i18n="Previous step button label@@customerCreateBackButton">Retour</ng-container>
- </button>
+ <div class="d-flex mt-4">
+ <button type="submit" class="btn primary" i18n="Finish customer creation button@@customerCreateFinishButton"
+ [disabled]="lastStepIsInvalid()">Terminer</button>
+ <ng-container *ngTemplateOutlet="cancel"></ng-container>
+ </div>
+ <ng-container *ngTemplateOutlet="back"></ng-container>
</cdk-step>
- <cdk-step>
- <div class="content">
- <h2 i18n="Create tenant for the owner@@tenantCreateTitle">Création du coffre pour "{{ getOwnerName() }}"</h2>
- <vitamui-common-input formControlName="tenantName" required placeholder="Nom du coffre" i18n-placeholder="Name of the tenant@@tenantCreateNamePlaceholder">
- <vitamui-common-input-error *ngIf="form?.get('tenantName')?.touched && form?.get('tenantName')?.hasError('required')" i18n="Existing name error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
- <vitamui-common-input-error *ngIf="form?.get('tenantName')?.touched && form?.get('tenantName')?.hasError('uniqueName')" i18n="Existing name error hint@@formErrorExistingName">Nom déjà existant</vitamui-common-input-error>
- </vitamui-common-input>
-
- <div class="actions">
- <button type="submit" class="btn primary" [disabled]="form.pending || form.invalid" i18n="Finish owner creation button@@ownerCreateFinishButton">Terminer</button>
- <button type="button" class="btn cancel" (click)="onCancel()" i18n="Cancel owner creation@@ownerCreateCancelButton">Annuler</button>
- </div>
- <button type="button" class="back" cdkStepperPrevious>
- <i class="material-icons">arrow_back</i> <ng-container i18n="Previous step button label@@customerCreateBackButton">Retour</ng-container>
- </button>
- </div>
- </cdk-step>
+ <ng-template #cancel>
+ <button type="button" class="btn link ml-3" (click)="onCancel()"
+ i18n="Cancel customer creation@@customerCreateCancelButton">Annuler</button>
+ </ng-template>
+
+ <ng-template #back>
+ <button type="button" class="btn link mt-1 ml-1" cdkStepperPrevious>
+ <i class="vitamui-icon vitamui-icon-chevron-left"></i>
+ <span i18n="Previous step button label@@customerCreateBackButton">Retour</span>
+ </button>
+ </ng-template>
</vitamui-common-stepper>
</form>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.scss
index 21d2c357b..aba1af4ef 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.scss
@@ -1,37 +1,17 @@
-@import '~ui-frontend-common/sass/variables/colors';
-
-$field-spacing: 15px;
-
.header {
- padding: 30px 60px 0 60px;
+ padding: 20px 50px 0;
}
.content {
- padding: 0px 60px 30px 60px;
+ padding: 0px 40px 30px 40px;
}
h2 {
- font-size: 26px;
- line-height: 46px;
- margin-top: 23px;
- margin-bottom: 37px;
-}
-
-.actions {
- margin-top: 20px;
- display: flex;
-}
-
-.actions > button:not(:last-child) {
- margin-right: 20px;
-}
-
-.form-group {
- padding-bottom: 30px;
+ margin-bottom: 30px;
}
label {
- color: $charcoal-grey;
+ color: var(--vitamui-grey-800);
font-size: 15px;
line-height: normal;
margin-bottom: 10px;
@@ -42,97 +22,15 @@ label {
}
small {
- color: #a5a5a5;
+ color: var(--vitamui-grey-300);
font-size: inherit;
}
}
-.underline {
- text-decoration: underline;
- cursor: pointer;
-}
-
-.input-file {
- display: none;
-}
-
-.inline-label {
- padding-top: 5px;
-}
-
-// STEP 1
-.field-code {
- width: 300px + $field-spacing / 2;
-}
-
-.field-name {
- width: 300px + $field-spacing / 2;
- margin-right: $field-spacing;
-}
-
-.field-company-name {
- width: 300px + $field-spacing / 2;
-}
-
-.field-street {
- width: 615px + $field-spacing;
+.vitamui-mat-select {
+ width: 240px;
}
-.field-zip-code {
- width: 160px;
- margin-right: $field-spacing;
-}
-
-.field-city {
- width: 260px;
- margin-right: $field-spacing;
-}
-
-.field-country {
- width: 180px;
- margin-right: $field-spacing;
-}
-
-.label-language {
- width: 215px;
-}
-
-.field-language {
- width: 180px;
-}
-
-// STEP 2
-.label-password-revocation-delay {
- width: 255px;
- margin-right: 40px;
-}
-
-.field-password-revocation-delay {
- width: 180px;
-}
-
-.field-domains {
- max-width: 460px;
-}
-
-button > small {
- display: block;
- font-size: 12px;
- font-weight: 400;
-}
-
-.hint {
- color: #a5a5a5;
- font-size: 15px;
-}
-
-.error-message {
- color: $red;
- font-size: 14px;
- margin-bottom: 30px;
-}
-
-.selected {
- background-color: var(--vitamui-secondary);
- color: $white;
-}
+.font-weight-bold {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
index fcf51ce13..008cab306 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
@@ -69,7 +69,7 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
name: null,
companyName: null,
};
- public stepIndex = 0;
+ public stepIndex = 1;
public stepCount = 5;
// tslint:disable-next-line: variable-name
private _customerForm: FormGroup;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
index a21e74bb5..b43f63c84 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
@@ -21,7 +21,7 @@
<app-sso-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-sso-tab>
</mat-tab>
- <mat-tab label="Identité graphique" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
+ <mat-tab label="ID. graphique" i18n-label="Visual identity tab@@customerPreviewTabVisualIdentity">
<app-graphic-identity-tab [customer]="customer" [readOnly]="isPopup || customer?.readonly"></app-graphic-identity-tab>
</mat-tab>
<mat-tab label="Historique" i18n-label="History tab@@customerPreviewTabHistory">
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
index a68367e29..075453233 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
@@ -13,7 +13,7 @@
<h2 i18n="graphicIdentityUpdate@@labelTitleLogos">Gestion des titres et logos</h2>
<vitamui-common-input
- class="pb-4"
+ class="pb-2"
[disabled]="disabled"
formControlName="portalTitle"
i18n-placeholder="graphicIdentityUpdate@@titlePortal"
@@ -32,7 +32,7 @@
</div>
<div class="d-flex">
- <div class="mb-4 mr-4">
+ <div class="mb-3 mr-4">
<label>Logo header</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
@@ -46,7 +46,7 @@
[messContent]="'Déposez votre logo'"
[messPj]="'Joindre un logo'"></vitamui-common-drag-drop-file>
</div>
- <div class="mb-4">
+ <div class="mb-3">
<label>Logo footer</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
@@ -62,7 +62,7 @@
</div>
</div>
<div class="d-flex">
- <div class="mb-4">
+ <div class="mb-3">
<label>Logo portal</label>
<vitamui-common-drag-drop-file
class="color-background"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
index 2a92a381e..8b73e9410 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
@@ -1,6 +1,10 @@
@import '~ui-frontend-common/sass/variables/colors';
:host {
+ h2 {
+ margin-top: 0;
+ }
+
label {
font-size: 13px;
color: $greyish-two;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
index a3f86450e..9bdc04102 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
@@ -1,7 +1,7 @@
<vitamui-common-slide-toggle
[formControl]="displayCustomGraphicIdentity"
- i18n="Custom visual identity@@customerCreateVisualIdentityToggleLabel"
-></vitamui-common-slide-toggle>Identité graphique personnalisée
+ i18n="Custom visual identity@@customerCreateVisualIdentityToggleLabel">
+</vitamui-common-slide-toggle>Identité graphique personnalisée
<app-graphic-identity-form
*ngIf="!displayCustomGraphicIdentity.value && defaultForm"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.html
index 5e61f8b54..bdda9af98 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.html
@@ -66,7 +66,7 @@
</div>
<div class="row">
- <div class="col-5 form-control">
+ <div class="col-6 form-control">
<vitamui-common-editable-input
formControlName="zipCode"
maxlength="10"
@@ -77,7 +77,7 @@
<vitamui-common-field-error errorKey="required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-field-error>
</vitamui-common-editable-input>
</div>
- <div class="col-7 form-control">
+ <div class="col-6 form-control">
<vitamui-common-editable-input
formControlName="city"
maxlength="100"
@@ -91,7 +91,7 @@
</div>
<div class="row">
- <div class="col-6 form-control">
+ <div class="col-12 form-control">
<vitamui-common-editable-select
formControlName="country"
label="Pays" i18n-label="Customer country@@customerPreviewLabelCountry"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
index 293caea13..d7fc86a6a 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
@@ -1,52 +1,41 @@
<div class="vitamui-panel" [class.active]="!selectedIdentityProvider">
<div class="vitamui-panel-content" *ngIf="!selectedIdentityProvider">
- <div>
- <button *ngIf="!readOnly" class="btn secondary" (click)="openCreateIDPDialog()" [disabled]="!domainsAvailable">
- <div
- [matTooltipDisabled]="domainsAvailable"
- matTooltip="Plus de domaines disponibles"
- i18n-matTooltip="No more available domains@@idpNoMoreAvailableDomains"
- matTooltipClass="vitamui-tooltip"
- i18n="Create IDP@@idpCreateButton"
- >
- <i class="material-icons">lock_outline</i> Créer un IDP
+ <button *ngIf="!readOnly" class="btn secondary" (click)="openCreateIDPDialog()" [disabled]="!domainsAvailable">
+ <div [matTooltipDisabled]="domainsAvailable" matTooltip="Plus de domaines disponibles"
+ i18n-matTooltip="No more available domains@@idpNoMoreAvailableDomains" matTooltipClass="vitamui-tooltip"
+ i18n="Create IDP@@idpCreateButton"> Créer un IDP
+ </div>
+ </button>
+
+ <div class="provider-list d-flex align-items-center mb-2" *ngFor="let provider of providers">
+ <div class="provider-item-content d-flex py-3 px-1" (click)="selectIdentityProvider(provider)">
+ <div class="col-3">
+ <label i18n="IDP Name@@idpListLabelName">Nom IDP</label>
+ <div>{{provider?.name}}</div>
</div>
- </button>
-
- <ul class="provider-list">
- <li *ngFor="let provider of providers">
- <div class="provider-item-content" (click)="selectIdentityProvider(provider)">
-
- <div class="provider-item-column provider-item-name">
- <label i18n="IDP Name@@idpListLabelName">Nom IDP</label>
- <span>{{provider?.name}}</span>
- </div>
-
- <div class="provider-item-column provider-item-type">
- <label i18n="Type@@idpListLabelType">Type</label>
- <span *ngIf="provider?.internal" i18n="Internal@@idpTypeInternal">Interne</span>
- <span *ngIf="!provider?.internal" i18n="External@@idpTypeExternal">Externe</span>
- </div>
- <div class="provider-item-column">
- <label i18n="Patterns@@idpListLabelPatterns">Patterns</label>
- <span *ngFor="let pattern of provider?.patterns">{{pattern}}</span>
- </div>
-
- <div class="provider-item-centered">
- <div *ngIf="provider?.enabled" class="provider-status active" i18n="Active@@idpStatusActive">Actif</div>
- <div *ngIf="!provider?.enabled" class="provider-status" i18n="Inactive@@idpStatusInactive">Inactif</div>
- </div>
+ <div class="col-2">
+ <label i18n="Type@@idpListLabelType">Type</label>
+ <div *ngIf="provider?.internal" i18n="Internal@@idpTypeInternal">Interne</div>
+ <div *ngIf="!provider?.internal" i18n="External@@idpTypeExternal">Externe</div>
+ </div>
- </div>
+ <div class="col-5">
+ <label i18n="Patterns@@idpListLabelPatterns">Patterns</label>
+ <div *ngFor="let pattern of provider?.patterns">{{pattern}}</div>
+ </div>
- <a class="provider-item-link" [href]="!provider?.internal ? provider?.idpMetadataUrl : '#'" target="_blank" [class.disabled]="provider?.internal" >
- <i class="material-icons">file_download</i>
- <span i18n="Metadata CAS@@idpListMetadataDownloadLink">Metadata CAS</span>
- </a>
+ <div class="col-2 d-flex align-items-center">
+ <div *ngIf="provider?.enabled" class="provider-status active" i18n="Active@@idpStatusActive">Actif</div>
+ <div *ngIf="!provider?.enabled" class="provider-status" i18n="Inactive@@idpStatusInactive">Inactif</div>
+ </div>
+ </div>
- </li>
- </ul>
+ <a class="provider-item-link" [href]="!provider?.internal ? provider?.idpMetadataUrl : '#'" target="_blank"
+ [class.disabled]="provider?.internal">
+ <i class="material-icons">file_download</i>
+ <span i18n="Metadata CAS@@idpListMetadataDownloadLink" class="p-0">Metadata CAS</span>
+ </a>
</div>
</div>
</div>
@@ -58,7 +47,8 @@
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
<ng-container i18n="Back button label@@idpBackButton">Retourner à la liste des IDP</ng-container>
</button>
- <app-identity-provider-details [identityProvider]="selectedIdentityProvider" [domains]="domains" [readOnly]="readOnly || selectedIdentityProvider.readonly"></app-identity-provider-details>
+ <app-identity-provider-details [identityProvider]="selectedIdentityProvider" [domains]="domains"
+ [readOnly]="readOnly || selectedIdentityProvider.readonly"></app-identity-provider-details>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.scss
index 2a9308690..8771039f3 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.scss
@@ -1,11 +1,9 @@
@import '~ui-frontend-common/sass/variables/colors';
:host {
- display: block;
- position: relative;
- overflow: hidden;
- // Trick to cancel out the padding of the parent element
- margin: -30px -105px 0 -40px;
+ .vitamui-panel-content {
+ padding: 0!important;
+ }
}
button.back {
@@ -13,24 +11,8 @@ button.back {
}
.vitamui-panel {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- position: absolute;
- display: block;
- overflow: hidden;
-
- &.active {
- position: relative;
- overflow-x: hidden;
- overflow-y: auto;
- z-index: 1;
- flex-grow: 1;
- }
-
.vitamui-panel-content {
- padding: 30px 105px 0 40px;
+ padding: 30px 60px 0 40px;
overflow: visible;
height: 100%;
width: 100%;
@@ -42,49 +24,25 @@ button.btn {
margin-bottom: 20px;
}
-ul.provider-list {
-
- margin: 0;
- padding: 0;
- list-style: none;
- max-width: 465px;
-
- > li {
- display: flex;
- align-items: center;
- }
-
- > li:not(:last-child) {
- margin-bottom: 15px;
- }
+.provider-list {
+ width: 100%;
+ font-size: 14px;
.provider-item-content {
- border-radius: 3px;
- background-color: #f8f8f8;
- flex-grow: 1;
- display: flex;
- justify-content: space-between;
- padding: 12px 20px;
+ border-radius: 5px;
+ background-color: var(--vitamui-grey-100);
+ color: var(--vitamui-grey-900);
min-height: 60px;
+ width: 90%;
cursor: pointer;
- label {
+ div {
font-weight: 500;
}
- .provider-item-column {
- display: flex;
- flex-direction: column;
- }
-
- .provider-item-name {
- min-width: 90px;
- }
-
- .provider-item-type {
- min-width: 60px;
+ label {
+ font-weight: normal;
}
-
}
.provider-item-centered {
@@ -96,14 +54,11 @@ ul.provider-list {
flex-direction: column;
align-items: center;
justify-content: center;
- width: 54px;
height: 60px;
border-radius: 3px;
- background-color: $white;
border: solid 1px var(--vitamui-secondary);
margin-left: 10px;
color: var(--vitamui-secondary);
- font-weight: normal;
font-size: 9px;
text-align: center;
text-decoration: none;
@@ -112,18 +67,17 @@ ul.provider-list {
opacity: 0.4;
pointer-events: none;
}
-
}
.provider-status {
- font-weight: bold;
font-size: 13px;
- color: $greyish-two;
- justify-self: center;
+ font-weight: bold;
+ color: var(--vitamui-grey-600);
+ width: 100%;
+ text-align: right;
&.active {
- color: #74c41c;
+ color: $green;
}
}
-
-}
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.html b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.html
index e2614e331..e8c5c3dc2 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.html
@@ -1,10 +1,8 @@
-<div class="domain-input-control d-flex justify-content-between">
+<div class="domain-input-control d-flex justify-content-between align-items-center">
<div class="domain-input-wrapper d-flex align-items-center">
- <mat-form-field>
- <mat-label>{{placeholder}}</mat-label>
- <input matInput type="text" size="10" [formControl]="control" [attr.placeholder]="placeholder" (blur)="onTouched()" (keydown.enter)="add()">
- </mat-form-field>
- <mat-spinner *ngIf="control.pending" [diameter]="spinnerDiameter"></mat-spinner>
+ <span class="mr-2">@</span>
+ <input class="vitamui-input" [style.width.px]="300" type="text" size="10" [formControl]="control" [attr.placeholder]="placeholder" (blur)="onTouched()" (keydown.enter)="add()">
+ <mat-spinner *ngIf="control.pending" class="ml-2" [diameter]="spinnerDiameter"></mat-spinner>
</div>
<div class="actions">
@@ -20,7 +18,7 @@
<div *ngIf="!domainExists && control?.hasError('uniqueDomain')" i18n="Domain used by another customer@@domainInputErrorUniqueDomain">Domaine utilisé par un autre client</div>
</div>
-<div class="vitamui-chip-list">
+<div class="vitamui-chip-list ml-4">
<div *ngFor="let domain of domains" class="vitamui-chip" (click)="setSelected(domain)" [class.active]="domain===selected">
<div class="vitamui-chip-content">{{domain}}</div>
<div class="vitamui-remove-chip" (click)="remove(domain)">
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.scss b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.scss
index e69de29bb..2a6ced9b0 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.component.scss
@@ -0,0 +1,5 @@
+span {
+ font-size: 24px;
+ color: var(--vitamui-grey-400);
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.module.ts b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.module.ts
index a3fbef5b2..b662cd958 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.module.ts
+++ b/ui/ui-frontend/projects/identity/src/app/shared/domains-input/domains-input.module.ts
@@ -37,7 +37,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { DomainsInputComponent } from './domains-input.component';
@@ -47,8 +46,6 @@ import { DomainsInputComponent } from './domains-input.component';
CommonModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
- MatFormFieldModule,
- MatInputModule
],
declarations: [DomainsInputComponent],
exports: [DomainsInputComponent]
--
GitLab