fix(signup) : fix svg sprite

src/app/shared/components/signup-modal/signup-modal.component.html

@@ -14,11 +14,9 @@
             <label for="email">Courriel personnel</label>
             <div fxLayout="row" fxLayoutGap="13px">
               <input type="text" autocomplete="on" formControlName="email" class="form-input" />
-              <img
-                *ngIf="f.email.invalid && f.email.value"
-                src="../../assets/form/notvalidate.svg"
-                alt="logo invalid"
-              />
+              <svg *ngIf="f.email.invalid && f.email.value" class="notValidate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'"></use>
+              </svg>
             </div>
           </div>
           <div class="form-group password" fxLayout="column">
@@ -34,17 +32,12 @@
                 formControlName="password"
                 class="form-input"
               />
-              <img
-                (click)="toggleShowPassword()"
-                class="eyePassword"
-                src="../../assets/form/eyePassword.svg"
-                alt="logo eyePassword"
-              />
-              <img
-                *ngIf="f.password.invalid && f.password.value"
-                src="../../assets/form/notvalidate.svg"
-                alt="logo invalid"
-              />
+              <svg (click)="toggleShowPassword()" class="eyePassword" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#eyePassword'"></use>
+              </svg>
+              <svg *ngIf="f.password.invalid && f.password.value" class="notValidate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'"></use>
+              </svg>
             </div>
             <div class="invalid" *ngIf="authFailed">Identifiant ou mot de passe invalide</div>
           </div>

src/app/shared/components/signup-modal/signup-modal.component.scss

@@ -22,6 +22,10 @@ h3 {
 
 .form-group {
   margin-top: 26px;
+  .notValidate {
+    width: 32px;
+    height: 40px;
+  }
   label {
     margin-bottom: 4px;
     @include cn-regular-14;
@@ -46,6 +50,10 @@ h3 {
     .eyePassword {
       cursor: pointer;
       margin-right: 39px;
+      width: 24px;
+      height: 40px;
+      stroke: $grey-3;
+      fill: $grey-3;
     }
   }
 }

src/app/shared/components/signup-modal/signup-modal.component.ts

@@ -48,7 +48,6 @@ export class SignUpModalComponent implements OnInit {
   }
 
   public closeModal(): void {
-    console.log('ok');
     this.closed.emit(true);
   }
 

src/assets/form/sprite.svg

@@ -324,4 +324,16 @@
 <path d="M16 6L8 12.5L16 19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol>
 
+<symbol id="eyePassword" viewBox="0 0 22 16"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99519 3.00001C8.83101 2.37183 9.87111 2 11 2C13.7667 2 16 4.23333 16 7C16 9.76667 13.7667 12 11 12C8.23333 12 6 9.76667 6 7C6 6.5747 6.05278 6.162 6.15215 5.76809C6.45257 6.49223 7.16566 7 8 7C9.10667 7 10 6.10667 10 5C10 3.89333 9.10667 3 8 3C7.9984 3 7.9968 3 7.99519 3.00001Z" stroke="none"/>
+<path d="M1 8C2.57273 3.90267 6.45455 1 11 1C15.5455 1 19.4273 3.90267 21 8" fill="none" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 8C2.57273 12.0973 6.45455 15 11 15C15.5455 15 19.4273 12.0973 21 8" fill="none" stroke-width="1.5" stroke-linecap="round"/>
+</symbol>
+
+<symbol id="notValidate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="#DA6C2E"/>
+<path d="M13.25 14.5L13.25 6.00001" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.25 20.6066L13.25 20" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
 </svg>
\ No newline at end of file