feat: (issue-23) create reusable single input component

Author: SebastienDechand

src/app/common/components/input-field/input-field.component.html

@@ -1,9 +1,33 @@
 <p-floatlabel [variant]="variant">
   @if (type === 'date') {
-    <p-calendar [inputId]="'input_' + (label | lowercase)" [(ngModel)]="value" [disabled]="disabled" dateFormat="dd.mm.yy"> </p-calendar>
+  <p-calendar [inputId]="'input_' + label" [(ngModel)]="value" [disabled]="disabled" dateFormat="dd.mm.yy" ariaLabel="date"></p-calendar>
+  } @else if (type === 'password') {
+  <p-password
+    [inputId]="'input_' + label"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [feedback]="showPasswordRules"
+    [toggleMask]="true"
+    autocomplete="off"
+    ariaLabel="password">
+    @if (showPasswordRules) {
+    <ng-template #header>
+      <div class="font-semibold text-xm mb-4">Choisir un mot de passe</div>
+    </ng-template>
+    <ng-template #footer>
+      <p-divider></p-divider>
+      <ul class="pl-2 ml-2 my-0 leading-normal">
+        <li>Au moins une lettre minuscule</li>
+        <li>Au moins une lettre majuscule</li>
+        <li>Au moins un chiffre</li>
+        <li>Minimum 8 caractères</li>
+      </ul>
+    </ng-template>
+    }
+  </p-password>
   } @else {
-    <input pInputText [id]="'input_' + (label | lowercase)" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" />
+  <input pInputText [id]="'input_' + label" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" [ariaLabel]="label" />
   }
 
-  <label [for]="'input_' + (label | lowercase)">{{ label }}</label>
+  <label [for]="'input_' + label">{{ label }}</label>
 </p-floatlabel>

src/app/common/components/input-field/input-field.component.scss

@@ -1,9 +1,10 @@
 p-floatlabel {
   input,
-  ::ng-deep p-calendar span input {
+  ::ng-deep p-calendar span input,
+  ::ng-deep p-password div input {
     width: 100%;
     font-size: 16px;
-    background-color: var(--background-color-light);
+    background-color: var(--background-color-white);
     border: var(--grey-border);
     border-radius: 8px;
     transition: border-color 0.3s ease-in-out;
@@ -24,4 +25,13 @@ p-floatlabel {
       color: var(--primary-light-color);
     }
   }
+
+  ::ng-deep .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
+    padding-inline-end: 12px !important;
+  }
+}
+
+::ng-deep p-password div eyeicon svg.p-icon,
+::ng-deep p-password div eyeslashicon svg.p-icon {
+  color: var(--icon-color);
 }

src/app/common/components/input-field/input-field.component.ts

@@ -4,11 +4,13 @@ import { InputTextModule } from 'primeng/inputtext';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { FormsModule } from '@angular/forms';
 import { CalendarModule } from 'primeng/calendar';
+import { PasswordModule } from 'primeng/password';
+import { DividerModule } from 'primeng/divider';
 
 @Component({
   selector: 'app-input-field',
   standalone: true,
-  imports: [CommonModule, InputTextModule, FloatLabelModule, CalendarModule, FormsModule],
+  imports: [CommonModule, InputTextModule, FloatLabelModule, CalendarModule, FormsModule, PasswordModule, DividerModule],
   templateUrl: './input-field.component.html',
   styleUrls: ['./input-field.component.scss'],
 })
@@ -17,5 +19,6 @@ export class InputFieldComponent {
   @Input() type: string = 'text';
   @Input() disabled: boolean = false;
   @Input() variant: 'in' | 'on' = 'in';
+  @Input() showPasswordRules: boolean = false;
   value: string = '';
 }

src/app/features/activity/pages/demo/demo.component.html

@@ -1,3 +1,5 @@
+<!-- TODO : SUPPRIMER CE FICHIER -->
+
 <div class="input-demo">
   <h3>Single Input Demo</h3>
   <app-input-field label="Nom" type="text"></app-input-field>

src/app/features/activity/pages/demo/demo.component.scss

@@ -1,10 +1,13 @@
+// TODO : SUPPRIMER CE FICHIER
+
 .input-demo {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   margin: 50px 0;
+  gap: 25px;
 
   h3 {
     color: var(--primary-light-color);

src/app/features/activity/pages/demo/demo.component.ts

@@ -1,3 +1,5 @@
+// TODO : SUPPRIMER CE FICHIER
+
 import { Component } from '@angular/core';
 import { InputFieldComponent } from 'src/app/common/components/input-field/input-field.component';
 

src/styles.scss

@@ -16,6 +16,7 @@ body {
   --background-color-white: white;
   --background-color-light: #f8f8f8;
   --font-color: #505050;
+  --icon-color: #d9d9d9;
 
   --primary-dark-color: #13678a;
   --primary-light-color: #1385a8;