FEAT #13671 TIME 1:30 admin user create installer

src/frontend/app/app.module.ts

@@ -122,6 +122,7 @@ import { PrerequisiteComponent } from './installer/prerequisite/prerequisite.com
 import { DatabaseComponent } from './installer/database/database.component';
 import { DocserversComponent } from './installer/docservers/docservers.component';
 import { CustomizationComponent } from './installer/customization/customization.component';
+import { UseradminComponent } from './installer/useradmin/useradmin.component';
 
 
 
@@ -232,7 +233,8 @@ import { CustomizationComponent } from './installer/customization/customization.
         PrerequisiteComponent,
         DatabaseComponent,
         DocserversComponent,
-        CustomizationComponent
+        CustomizationComponent,
+        UseradminComponent
     ],
     entryComponents: [
         InfoChangePasswordModalComponent,

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

@@ -101,12 +101,25 @@
             </div>
         </div>
     </mat-step>
-    <mat-step>
-        <ng-template matStepLabel>Utilisateur sytème</ng-template>
-        Bonjour
-        <div>
-            <button mat-button matStepperPrevious>Back</button>
-            <button mat-button matStepperNext>Next</button>
+    <mat-step [stepControl]="appUseradmin.getFormGroup()">
+        <ng-template matStepLabel>Utilisateur système</ng-template>
+        <div class="stepContainer">
+            <div class="stepContent">
+                <app-useradmin #appUseradmin></app-useradmin>
+            </div>
+            <div style="display: flex;padding: 10px;">
+                <div style="flex: 1;text-align: left;">
+                    <button mat-button matStepperPrevious style="font-size: 35px;">
+                        <i class="fa fa-arrow-circle-left"></i> précédent
+                    </button>
+                </div>
+                <div style="flex: 1;text-align: right;">
+                    <button (click)="endInstall();" mat-button style="font-size: 35px;"
+                        [disabled]="!appUseradmin.isValidStep()">
+                        suivant <i class="fa fa-arrow-circle-right"></i>
+                    </button>
+                </div>
+            </div>
         </div>
     </mat-step>
     <mat-step optional>

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

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { HeaderService } from '../../service/header.service';
 import { NotificationService } from '../notification.service';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import { PrerequisiteComponent } from './prerequisite/prerequisite.component';
+import { MatStepper } from '@angular/material/stepper';
 
 @Component({
     templateUrl: './installer.component.html',
@@ -15,7 +15,7 @@ import { PrerequisiteComponent } from './prerequisite/prerequisite.component';
 })
 export class InstallerComponent implements OnInit {
 
-    @ViewChild('appPrerequisite', { static: true }) appPrerequisite: PrerequisiteComponent;
+    @ViewChild('stepper', { static: true }) stepper: MatStepper;
 
     constructor(
         private http: HttpClient,
@@ -36,4 +36,8 @@ export class InstallerComponent implements OnInit {
         console.log(ev.selectedStep.content);
     }
 
+    endInstall() {
+        this.stepper.next();
+    }
+
 }

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

+<div class="stepContent">
+    <h2 class="stepContentTitle"><i class="fas fa-user"></i> Utilisateur système</h2>
+    <p>
+        Définissez un utilisateur système afin de vous connecter à l'application.
+    </p>
+    <form [formGroup]="stepFormGroup" style="display: contents;">
+        <mat-form-field appearance="outline" style="color: initial;">
+            <mat-label>Identifiant</mat-label>
+            <input matInput formControlName="login" style="color: moccasin;" disabled>
+        </mat-form-field>
+        <mat-form-field appearance="outline" style="color: initial;">
+            <mat-label>Mot de passe</mat-label>
+            <input matInput formControlName="password" style="color: moccasin;">
+        </mat-form-field>
+        <mat-form-field appearance="outline" style="color: initial;">
+            <mat-label>Email</mat-label>
+            <input matInput formControlName="email" style="color: moccasin;">
+        </mat-form-field>
+    </form>
+</div>

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

+.stepContent {
+    max-width: 850px;
+    margin: auto;
+
+    .stepContentTitle {
+        margin-bottom: 30px;
+        border-bottom: solid 1px;
+        padding: 0;
+    }
+    
+    .maarchLogoWhiteFull{
+        width: 300px;
+        height: 100px;
+    }
+    
+    .mat-divider {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    ::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;
+    }
+}
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { NotificationService } from '../../notification.service';
+
+@Component({
+  selector: 'app-useradmin',
+  templateUrl: './useradmin.component.html',
+  styleUrls: ['./useradmin.component.scss']
+})
+export class UseradminComponent implements OnInit {
+
+  stepFormGroup: FormGroup;
+
+  constructor(
+      private _formBuilder: FormBuilder,
+      private notify: NotificationService,
+  ) {
+      this.stepFormGroup = this._formBuilder.group({
+        login: ['superadmin', Validators.required],
+        password: ['', Validators.required],
+        email: ['dev@maarch.org', Validators.required],
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  isValidStep() {
+      return this.stepFormGroup === undefined ? false : this.stepFormGroup.valid;
+  }
+
+  getFormGroup() {
+      return this.stepFormGroup;
+  }
+
+  checkAvailability() {
+      this.stepFormGroup.controls['firstCtrl'].setValue('success');
+      this.notify.success('Le chemin est disponible');
+  }
+
+}