From 3c19cd27b7aa9207b8461969ef6a641db4d6075e Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 10 Feb 2021 09:37:49 +0100
Subject: [PATCH] fix(signup) : fix svg sprite
---
.../signup-modal/signup-modal.component.html | 25 +++++++------------
.../signup-modal/signup-modal.component.scss | 8 ++++++
.../signup-modal/signup-modal.component.ts | 1 -
src/assets/form/sprite.svg | 12 +++++++++
4 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.html b/src/app/shared/components/signup-modal/signup-modal.component.html
index 1069f993c..91900cf36 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.html
+++ b/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>
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.scss b/src/app/shared/components/signup-modal/signup-modal.component.scss
index bdee93df1..3403cb7ca 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.scss
+++ b/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;
}
}
}
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.ts b/src/app/shared/components/signup-modal/signup-modal.component.ts
index 5d53eceaa..eb03ae892 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.ts
+++ b/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);
}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 4b583444a..e81f41f7b 100644
--- a/src/assets/form/sprite.svg
+++ b/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
--
GitLab