FEAT #13671 TIME 0:30 css + lang docservers installer

src/frontend/app/installer/database/database.component.ts

@@ -33,7 +33,23 @@ export class DatabaseComponent implements OnInit {
         });
     }
 
-    ngOnInit(): void { }
+    ngOnInit(): void {
+        this.stepFormGroup.controls['dbHostCtrl'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
+        this.stepFormGroup.controls['dbLoginCtrl'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
+        this.stepFormGroup.controls['dbLoginCtrl'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
+        this.stepFormGroup.controls['dbPasswordCtrl'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
+        this.stepFormGroup.controls['dbNameCtrl'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
+    }
 
     isValidConnection() {
         return false;

src/frontend/app/installer/docservers/docservers.component.html

 <div class="stepContent">
-    <h2 class="stepContentTitle"><i class="fa fa-hdd"></i> Zone de stockage</h2>
-    <p>
-        N'importe quel système de stockage peut être utilisé, à partir du moment où celui-ci présente un « système de
-        fichiers » à accès direct. Ce peut être le cas d'un attachement direct ou indirect de type NFS sur une baie SAN,
-        NAS, ou pour les cas simples un ensemble de disques RAID.
-    </p>
-    <br />
-    <mat-form-field appearance="outline" style="color: initial;">
-        <mat-label>Chemin de la zone de stockage</mat-label>
-        <input matInput [(ngModel)]="docserversPath" style="color: moccasin;">
-    </mat-form-field>
-    <div style="text-align: center;">
-        <button mat-raised-button type="button" color="default" (click)="checkAvailability()">Vérifier la disponibilité</button>
+    <h2 class="stepContentTitle"><i class="fa fa-hdd"></i> {{lang.docserver}}</h2>
+    <div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
+        {{lang.stepDocserver_desc}}
     </div>
+    <form [formGroup]="stepFormGroup" style="width: 850px;margin: auto;">
+        <mat-form-field appearance="outline" style="color: initial;">
+            <mat-label>{{lang.docserverPath}}</mat-label>
+            <input matInput formControlName="docserversPath">
+        </mat-form-field>
+        <div style="text-align: center;">
+            <button mat-raised-button type="button" color="primary" (click)="checkAvailability()" [disabled]="!this.stepFormGroup.controls['docserversPath'].valid">{{lang.checkInformations}}</button>
+        </div>
+    </form>
 </div>
\ No newline at end of file

src/frontend/app/installer/docservers/docservers.component.scss

+@import '../../../css/vars.scss';
+
 .stepContent {
-    max-width: 850px;
+    // max-width: 850px;
     margin: auto;
     .stepContentTitle {
+        color: $primary;
         margin-bottom: 30px;
         border-bottom: solid 1px;
         padding: 0;
     }
-    
-    ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
-        /*change color of label*/
-        color: white !important;
-    }
-    
-    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-        color: white !important;
-        //background: white;
-    }
-    
-    ::ng-deep.mat-form-field-underline {
-        /*change color of underline*/
-        //background-color: white !important;
-    }
-    
-    ::ng-deep.mat-form-field-ripple {
-        /*change color of underline when focused*/
-        //background-color: white !important;
-    }
-
-    ::ng-deep.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-        color: white;
-    }
 }
 

src/frontend/app/installer/docservers/docservers.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NotificationService } from '../../notification.service';
+import { tap } from 'rxjs/internal/operators/tap';
+import { LANG } from '../../translate.component';
 
 @Component({
     selector: 'app-docservers',
@@ -8,18 +10,21 @@ import { NotificationService } from '../../notification.service';
     styleUrls: ['./docservers.component.scss']
 })
 export class DocserversComponent implements OnInit {
-
+    lang: any = LANG;
     stepFormGroup: FormGroup;
 
-    docserversPath: string = '/opt/maaarch/docservers/';
-
     constructor(
         private _formBuilder: FormBuilder,
         private notify: NotificationService,
     ) {
         this.stepFormGroup = this._formBuilder.group({
-            firstCtrl: ['', Validators.required],
+            docserversPath: ['/opt/maaarch/docservers/', Validators.required],
+            stateStep: ['', Validators.required],
         });
+
+        this.stepFormGroup.controls['docserversPath'].valueChanges.pipe(
+            tap(() => this.stepFormGroup.controls['stateStep'].setValue(''))
+        ).subscribe();
     }
 
     ngOnInit(): void {
@@ -36,8 +41,8 @@ export class DocserversComponent implements OnInit {
     }
 
     checkAvailability() {
-        this.stepFormGroup.controls['firstCtrl'].setValue('success');
-        this.notify.success('Le chemin est disponible');
+        this.stepFormGroup.controls['stateStep'].setValue('success');
+        this.notify.success(this.lang.rightInformations);
     }
 
 }

src/frontend/app/installer/installer.component.html

@@ -47,7 +47,7 @@
                         </div>
                     </mat-step>
                     <mat-step [stepControl]="appDocservers.getFormGroup()">
-                        <ng-template matStepLabel>Stockage</ng-template>
+                        <ng-template matStepLabel>{{lang.docserver}}</ng-template>
                         <div class="stepContainer">
                             <div class="stepContent">
                                 <app-docservers #appDocservers></app-docservers>

src/frontend/lang/lang-fr.ts

@@ -1771,4 +1771,7 @@ export const LANG_FR = {
     "checkInformations": "Vérifier les informations",
     "badInformations": "Les informations sont incorrectes",
     "rightInformations": "Les informations sont correctes",
+    "docserverPath": "Chemin de la zone de stockage",
+    "docserver": "Zone de stockage",
+    "stepDocserver_desc": "N'importe quel système de stockage peut être utilisé, à partir du moment où celui-ci présente un « système de fichiers » à accès direct. Ce peut être le cas d'un attachement direct ou indirect de type NFS sur une baie SAN, NAS, ou pour les cas simples un ensemble de disques RAID.",
 };
\ No newline at end of file