page de paramètres du module GSM

package-lock.json

@@ -22,6 +22,7 @@
         "@fortawesome/angular-fontawesome": "^0.10.2",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "angular-code-input": "^1.6.0",
         "font-awesome": "^4.7.0",
         "jquery": "^3.6.1",
         "material-icons": "^1.12.0",
@@ -3455,6 +3456,18 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-code-input": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/angular-code-input/-/angular-code-input-1.6.0.tgz",
+      "integrity": "sha512-EAsHf2z7T2rze39zCWopJehuANbylX6Em9It75DvNrWiRVKbhLH8LmLXfofJ3ajdQ1DAAEnswB5HiAxAZAgiOA==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=7.2.0",
+        "@angular/core": ">=7.2.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -14756,6 +14769,14 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular-code-input": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/angular-code-input/-/angular-code-input-1.6.0.tgz",
+      "integrity": "sha512-EAsHf2z7T2rze39zCWopJehuANbylX6Em9It75DvNrWiRVKbhLH8LmLXfofJ3ajdQ1DAAEnswB5HiAxAZAgiOA==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "angular-code-input": "^1.6.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.6.1",
     "material-icons": "^1.12.0",

src/app/app.module.ts

@@ -26,7 +26,9 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { ToastrModule } from 'ngx-toastr';
+import { CodeInputModule } from 'angular-code-input';
 
 import { HttpXsrfInterceptorService } from './interceptors/http-xsrf-interceptor/http-xsrf-interceptor.service';
 import { AppRoutingModule } from './app-routing.module';
@@ -80,10 +82,12 @@ import { HoursComponent } from './components/home/workspace/hours/hours.componen
 		MatProgressSpinnerModule,
 		MatProgressBarModule,
 		MatStepperModule,
+		MatSlideToggleModule,
 		FlexLayoutModule,
 		RouterModule,
 		FontAwesomeModule,
-		ToastrModule.forRoot()
+		ToastrModule.forRoot(),
+		CodeInputModule
 	],
 	providers: [
 		{ provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptorService, multi: true }

src/app/components/home/workspace/parametres/parametres.component.css

@@ -0,0 +1,48 @@
+.container {
+	/* display: flex; */
+	/*background-color: #b8b8b8;*/
+	margin: 10px;
+}
+
+form {
+	width: 50%;
+	min-width: 50%;
+	margin: 0.5rem;
+}
+
+mat-label {
+	font-size: smaller;
+}
+
+input {
+	font-size: smaller;
+}
+
+button {
+	display: block;
+	width: 100%;
+	margin-top: 2rem;
+}
+
+code-input {
+	--item-spacing: 10px;
+	--item-height: 3rem;
+	color: #b8b8b8;
+	margin-right: 50%;
+	font-weight: bold;
+	font-size: larger;
+}
+
+.myError {
+	display: block;
+	width: 100%;
+	font-size: smaller;
+}
+
+.cred {
+	display: block;
+	width: 100%;
+	text-align: center;
+	font-size: smaller;
+	margin-top: 1rem;
+}

src/app/components/home/workspace/parametres/parametres.component.html

@@ -1,16 +1,15 @@
 <div class="container"
 	fxLayout="column"
-	fxLayoutAlign="space-around center">
+	fxLayoutAlign="space-around start">
-	<!-- Password Form -->
+	<!-- Params Form -->
 	<form [formGroup]="paramsFG"
 		fxLayout="column">
-		<mat-form-field>
+
-			<mat-label>Code PIN</mat-label>
+		<mat-slide-toggle (change)="onSlideChanged($event)" style="margin: 10px;">Activer code PIN</mat-slide-toggle>
-			<input matInput type="text" formControlName="pin" class="form-control" name="pin" placeholder="Code PIN" [ngClass]="{'is-invalid':submitted && paramsFG.controls['pin'].errors}">
+		<code-input [isCodeHidden]="false" [codeLength]="4" [disabled]="!pinChecked" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"></code-input>
-			<mat-error class="myError" *ngIf="paramsFG.controls['pin'].hasError('required')">Le code PIN est requis !</mat-error>
+		<mat-form-field style="margin: 10px;">
-		</mat-form-field>
+			<mat-label>Téléphone accepté</mat-label>
-		<mat-form-field>
+			<span matPrefix style="font-size: smaller;">+33 &nbsp;</span>
-			<mat-label>Numéro accepté</mat-label>
 			<input matInput type="text" formControlName="num_accepted" class="form-control" name="num_accepted" placeholder="Numéro accepté" [ngClass]="{'is-invalid':submitted && paramsFG.controls['num_accepted'].errors}">
 			<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('required')">Le numéro est requis !</mat-error>
 			<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('pattern')">Le numéro est composé de {{Pw}} chiffres</mat-error>

src/app/components/home/workspace/parametres/parametres.component.ts

@@ -12,7 +12,10 @@ import { ToastrService } from 'ngx-toastr';
 export class ParametresComponent implements OnInit {
 	paramsFG:FormGroup;
 	submitted:boolean=false;
-	Pw:number = 10;
+	PwPin:number = 4;
+	Pw:number = 9;
+	slideDisable:boolean=false;
+	pinChecked:boolean=false;
 
 	constructor(private fb:FormBuilder,
 				private bs:BackendService,
@@ -21,13 +24,9 @@ export class ParametresComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.paramsFG=this.fb.group({
-			pin:["", [
-				Validators.required,
-				Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.Pw + '}')
-			]],
 			num_accepted:["", [
 				Validators.required,
-				Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.Pw + '}'),
+				Validators.pattern('(?=[0-9]{9}).{' + this.Pw + '}'),
 			]],
 		});
 	}
@@ -36,4 +35,18 @@ export class ParametresComponent implements OnInit {
 
 	}
 
+	onSlideChanged(event: any): void {
+		console.log("checked ?", event.checked);
+		this.pinChecked=event.checked;
+	}
+
+	onCodeChanged(code: string): void {
+		// this called every time when user changed the code
+
+	}
+
+	onCodeCompleted(code: string): void {
+		// this called only if user entered full code
+	}
+
 }