diff --git a/src/frontend/app/installer/database/database.component.html b/src/frontend/app/installer/database/database.component.html
index f77fa26efc99aefa1cadca075d7c6f9be04e3e57..c7dbac20cb0891dcac84171830f3d0cd42499139 100644
--- a/src/frontend/app/installer/database/database.component.html
+++ b/src/frontend/app/installer/database/database.component.html
@@ -18,7 +18,10 @@
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{lang.password}}</mat-label>
- <input matInput formControlName="dbPasswordCtrl" required>
+ <input [type]="hide ? 'password' : 'text'" matInput formControlName="dbPasswordCtrl" required>
+ <button mat-icon-button matSuffix color="primary" (click)="hide = !hide">
+ <mat-icon class="fa {{hide ? 'fa-eye-slash' : 'fa-eye'}}"></mat-icon>
+ </button>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{lang.dbName}}</mat-label>
diff --git a/src/frontend/app/installer/database/database.component.ts b/src/frontend/app/installer/database/database.component.ts
index d849f1f236ef9fac68dc73f6f179c82d20213603..0eec37c4da2628d35b993fe6e30d0439504cd4d7 100644
--- a/src/frontend/app/installer/database/database.component.ts
+++ b/src/frontend/app/installer/database/database.component.ts
@@ -15,6 +15,7 @@ import { LANG } from '../../translate.component';
export class DatabaseComponent implements OnInit {
lang: any = LANG;
stepFormGroup: FormGroup;
+ hide: boolean = true;
connectionState: boolean = false;
diff --git a/src/frontend/app/installer/installer.component.html b/src/frontend/app/installer/installer.component.html
index 73797fb69b184ca4ab4015eaf72965e9d1ec5552..d144878cebac73aa23a6361938749fcfb9ffcc2e 100644
--- a/src/frontend/app/installer/installer.component.html
+++ b/src/frontend/app/installer/installer.component.html
@@ -75,7 +75,7 @@
</div>
</mat-step>
<mat-step [stepControl]="appUseradmin.getFormGroup()">
- <ng-template matStepLabel>Utilisateur système</ng-template>
+ <ng-template matStepLabel>{{lang.userAdmin}}</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-useradmin #appUseradmin></app-useradmin>
diff --git a/src/frontend/app/installer/installer.component.ts b/src/frontend/app/installer/installer.component.ts
index 60102ed1400745e097128408578e48454d80ee95..8b9ba01c291a3f41510bf1a570727b46a370bfda 100644
--- a/src/frontend/app/installer/installer.component.ts
+++ b/src/frontend/app/installer/installer.component.ts
@@ -50,7 +50,7 @@ export class InstallerComponent implements OnInit, AfterViewInit {
}
initStep(ev: any) {
- console.log(ev.selectedStep.content);
+ // console.log(ev.selectedStep.content);
}
endInstall() {
diff --git a/src/frontend/app/installer/prerequisite/prerequisite.component.ts b/src/frontend/app/installer/prerequisite/prerequisite.component.ts
index cc18a62197f54e09eca66649c1e50d5922f84b7d..c4a48ef8fc65f1d371faa0680b86b14a77844b2e 100644
--- a/src/frontend/app/installer/prerequisite/prerequisite.component.ts
+++ b/src/frontend/app/installer/prerequisite/prerequisite.component.ts
@@ -100,11 +100,7 @@ export class PrerequisiteComponent implements OnInit {
{
label: 'displayErrors',
required: true
- },
- {
- label: 'shortOpenTag',
- required: true
- },
+ }
],
};
diff --git a/src/frontend/app/installer/useradmin/useradmin.component.html b/src/frontend/app/installer/useradmin/useradmin.component.html
index a6c04ef664c14852619d4213692c2d3381c956f7..c018b3c5d4be39a9de53ecd37161c8b0e095f0ab 100644
--- a/src/frontend/app/installer/useradmin/useradmin.component.html
+++ b/src/frontend/app/installer/useradmin/useradmin.component.html
@@ -1,20 +1,37 @@
<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>
+ <h2 class="stepContentTitle"><i class="fas fa-user"></i> {{lang.userAdmin}}</h2>
+ <div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
+ {{lang.stepUserAdmin_desc}}
+ </div>
+ <form [formGroup]="stepFormGroup" style="width: 850px;margin: auto;">
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.id}}</mat-label>
+ <input matInput formControlName="login">
</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 appearance="outline">
+ <mat-label>{{lang.password}}</mat-label>
+ <input [type]="hide ? 'password' : 'text'" matInput formControlName="password">
+ <button mat-icon-button matSuffix color="primary" (click)="hide = !hide">
+ <mat-icon class="fa {{hide ? 'fa-eye-slash' : 'fa-eye'}}"></mat-icon>
+ </button>
+ <mat-error>{{lang.passwordNotMatch}}</mat-error>
</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 appearance="outline">
+ <mat-label>{{lang.retypeNewPassword}}</mat-label>
+ <input [type]="hide ? 'password' : 'text'" matInput formControlName="passwordConfirm">
+ <button mat-icon-button matSuffix color="primary" (click)="hide = !hide">
+ <mat-icon class="fa {{hide ? 'fa-eye-slash' : 'fa-eye'}}"></mat-icon>
+ </button>
+ <mat-error>{{lang.passwordNotMatch}}</mat-error>
</mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.mail}}</mat-label>
+ <input matInput formControlName="email">
+ </mat-form-field>
+ <div style="text-align:center;">
+ <button mat-raised-button type="button" color="primary" (click)="launchInstall()" *ngIf="stepFormGroup.valid" style="font-size: 35px;padding: 20px;">
+ <i class=" far fa-hdd"></i> {{lang.launchInstall}}
+ </button>
+ </div>
</form>
</div>
diff --git a/src/frontend/app/installer/useradmin/useradmin.component.scss b/src/frontend/app/installer/useradmin/useradmin.component.scss
index 0e4cceee1c3301d4fed1e926e1e7a2a63c3016c3..4cf71299132b816740f7a27d4adb73baa56e1620 100644
--- a/src/frontend/app/installer/useradmin/useradmin.component.scss
+++ b/src/frontend/app/installer/useradmin/useradmin.component.scss
@@ -1,44 +1,13 @@
+@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;
}
-
- .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
diff --git a/src/frontend/app/installer/useradmin/useradmin.component.ts b/src/frontend/app/installer/useradmin/useradmin.component.ts
index cbf5ee8820895c7bd781bb4d93aba35d39208a63..ff67cdfdda94a4a6532ffb744920255f3725503e 100644
--- a/src/frontend/app/installer/useradmin/useradmin.component.ts
+++ b/src/frontend/app/installer/useradmin/useradmin.component.ts
@@ -1,41 +1,70 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NotificationService } from '../../notification.service';
+import { LANG } from '../../translate.component';
+import { tap } from 'rxjs/internal/operators/tap';
@Component({
- selector: 'app-useradmin',
- templateUrl: './useradmin.component.html',
- styleUrls: ['./useradmin.component.scss']
+ selector: 'app-useradmin',
+ templateUrl: './useradmin.component.html',
+ styleUrls: ['./useradmin.component.scss']
})
export class UseradminComponent implements OnInit {
+ lang: any = LANG;
+ stepFormGroup: FormGroup;
- stepFormGroup: FormGroup;
+ hide: boolean = true;
- 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],
- });
- }
+ constructor(
+ private _formBuilder: FormBuilder,
+ private notify: NotificationService,
+ ) {
+ this.stepFormGroup = this._formBuilder.group({
+ login: [{ value: 'superadmin', disabled: true }, Validators.required],
+ password: ['', Validators.required],
+ passwordConfirm: ['', Validators.required],
+ email: ['dev@maarch.org', Validators.required],
+ });
- ngOnInit(): void {
- }
- isValidStep() {
- return this.stepFormGroup === undefined ? false : this.stepFormGroup.valid;
- }
+ }
- getFormGroup() {
- return this.stepFormGroup;
- }
+ ngOnInit(): void {
+ this.stepFormGroup.controls['password'].valueChanges.pipe(
+ tap((data) => {
+ if (data !== this.stepFormGroup.controls['passwordConfirm'].value) {
+ this.stepFormGroup.controls['password'].setErrors({ 'incorrect': true });
+ this.stepFormGroup.controls['passwordConfirm'].setErrors({ 'incorrect': true });
+ this.stepFormGroup.controls['passwordConfirm'].markAsTouched();
+ } else {
+ this.stepFormGroup.controls['password'].setErrors(null);
+ this.stepFormGroup.controls['passwordConfirm'].setErrors(null);
+ }
+ })
+ ).subscribe();
+ this.stepFormGroup.controls['passwordConfirm'].valueChanges.pipe(
+ tap((data) => {
+ if (data !== this.stepFormGroup.controls['password'].value) {
+ this.stepFormGroup.controls['password'].setErrors({ 'incorrect': true });
+ this.stepFormGroup.controls['password'].markAsTouched();
+ this.stepFormGroup.controls['passwordConfirm'].setErrors({ 'incorrect': true });
+ } else {
+ this.stepFormGroup.controls['password'].setErrors(null);
+ this.stepFormGroup.controls['passwordConfirm'].setErrors(null);
+ }
+ })
+ ).subscribe();
+ }
- checkAvailability() {
- this.stepFormGroup.controls['firstCtrl'].setValue('success');
- this.notify.success('Le chemin est disponible');
- }
+ isValidStep() {
+ return this.stepFormGroup === undefined ? false : this.stepFormGroup.valid;
+ }
+ getFormGroup() {
+ return this.stepFormGroup;
+ }
+
+ launchInstall() {
+
+ }
}
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index e1f5f208cb4006d27f7a0e9e5494b1be235db7fb..90a5976be495dfd13d871f5e6635ac3fe1b57896 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1780,4 +1780,8 @@ export const LANG_FR = {
"chooseLoginBg": "Choisissez le fond d'écran de l'écran de connexion",
"customization": "Personnalisation",
"stepCustomization_desc": "Maarch Courrier vous permet de personnaliser votre application afin de l'intégrer parfaitement à votre environnement de travail.",
+ "userAdmin": "Utilisateur système",
+ "stepUserAdmin_desc": "Définissez un utilisateur système afin de vous connecter à l'application.",
+ "launchInstall": "Lancer l'installation",
+
};
\ No newline at end of file