From fb4438e33915c749faa8ae273af5e8709e873d7d Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 23 May 2022 13:37:23 +0000
Subject: [PATCH] fix(design sprint1): login page, onboarding
---
.../account-credentials.component.scss | 2 +-
src/app/login/login.component.scss | 14 ++++
.../reset-password.component.html | 74 ++++++++++---------
.../reset-password.component.scss | 8 +-
.../reset-password.component.ts | 1 -
.../components/button/button.component.scss | 3 +-
.../checkbox-form.component.html | 13 +---
.../checkbox-form.component.scss | 73 ++++++++----------
src/assets/form/sprite.svg | 5 ++
9 files changed, 98 insertions(+), 95 deletions(-)
diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
index 06cb0ad1d..6399786d7 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
@@ -4,7 +4,7 @@
p.special {
@include lato-regular-14;
color: $grey-3;
- margin: 4px 0 8px 0;
+ margin: 4px 0;
width: 280px;
&.invalid {
color: $orange-warning;
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index a03988f8d..40a69f888 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -92,6 +92,20 @@
}
.footer {
margin-bottom: 1rem;
+ gap: 24px;
+ }
+ ::ng-deep app-button {
+ flex: 1;
+ .secondary {
+ width: 100% !important;
+
+ div {
+ width: 95% !important;
+ }
+ }
+ .tertiary {
+ border-radius: 4px !important;
+ }
}
}
diff --git a/src/app/reset-password/reset-password.component.html b/src/app/reset-password/reset-password.component.html
index a53661d6d..ed9aa01a9 100644
--- a/src/app/reset-password/reset-password.component.html
+++ b/src/app/reset-password/reset-password.component.html
@@ -1,43 +1,47 @@
<div class="content">
<div class="resetPage">
<div class="resetPasswordForm">
- <h1>Mot de passe oublié</h1>
- <p>Saisissez votre email afin de réinitialiser votre mot de passe</p>
- <form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
- <div class="form-group">
- <label for="email">Email du compte</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- autocomplete="on"
- formControlName="email"
- class="form-input"
- [ngClass]="{ inputInvalid: submitted && f.email.errors }"
- />
+ <div class="title">
+ <h1>Mot de passe oublié</h1>
+ <p>Saisissez votre email afin de réinitialiser votre mot de passe</p>
+ </div>
+ <div class="fields">
+ <form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
+ <div class="form-group">
+ <label for="email">Email du compte</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ type="text"
+ autocomplete="on"
+ formControlName="email"
+ class="form-input"
+ [ngClass]="{ inputInvalid: submitted && f.email.errors }"
+ />
+ </div>
+ <div *ngIf="submitted && f.email.errors" class="incorrectId">
+ <div *ngIf="f.email.errors.required">L'adresse e-mail est requise</div>
+ </div>
</div>
- <div *ngIf="submitted && f.email.errors" class="incorrectId">
- <div *ngIf="f.email.errors.required">L'adresse e-mail est requise</div>
+ <div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
+ <app-button
+ (action)="goLogin()"
+ [type]="'button'"
+ [text]="'Annuler'"
+ [style]="buttonTypeEnum.Secondary"
+ [extraClass]="'fullButton'"
+ >
+ </app-button>
+ <app-button
+ [type]="'submit'"
+ [disabled]="loading"
+ [text]="'Envoyer'"
+ [style]="buttonTypeEnum.Primary"
+ [extraClass]="'fullWidth'"
+ >
+ </app-button>
</div>
- </div>
- <div class="footer" fxLayout="row" fxLayoutAlign="space-around center">
- <app-button
- (action)="goLogin()"
- [type]="'button'"
- [text]="'Annuler'"
- [style]="buttonTypeEnum.Secondary"
- [extraClass]="'fullButton'"
- >
- </app-button>
- <app-button
- [type]="'submit'"
- [disabled]="loading"
- [text]="'Envoyer'"
- [style]="buttonTypeEnum.Primary"
- [extraClass]="'fullButton'"
- >
- </app-button>
- </div>
- </form>
+ </form>
+ </div>
<!-- <app-password-form *ngIf="token" (passwordForm)="onSubmitPassword($event)"></app-password-form> -->
</div>
</div>
diff --git a/src/app/reset-password/reset-password.component.scss b/src/app/reset-password/reset-password.component.scss
index 241a92753..cc2549e55 100644
--- a/src/app/reset-password/reset-password.component.scss
+++ b/src/app/reset-password/reset-password.component.scss
@@ -34,8 +34,9 @@
}
}
.resetPasswordForm {
- max-width: 430px;
- margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
h1,
p {
text-align: center;
@@ -50,8 +51,8 @@
}
.form-group {
max-width: 320px;
- margin: auto;
margin-top: 2rem;
+
label {
color: $grey-2;
}
@@ -71,6 +72,5 @@
}
.footer {
width: 340px;
- margin: auto;
margin-top: 2rem;
}
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 1e9a5819b..92c04057f 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -23,7 +23,6 @@ export class ResetPasswordComponent implements OnInit {
private formBuilder: FormBuilder,
private authService: AuthService,
private router: Router,
- private activatedRoute: ActivatedRoute,
private notificationService: NotificationService
) {}
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index c198e1f0f..99a93e5ba 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -249,11 +249,10 @@ button {
}
}
.fullButton {
- @include lato-regular-14;
width: 125px !important;
}
.fullWidth {
- width: 100%;
+ width: 100% !important;
}
.bigButton {
width: 280px !important;
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 832c0cb51..527f8c985 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,16 +1,11 @@
-<button
- (click)="clicked()"
- [ngClass]="{ selected: isChecked }"
- fxLayout="row"
- fxLayoutAlign=" center"
- fxLayoutGap="17px"
->
+<button (click)="clicked()" [ngClass]="{ selected: isChecked }">
<div class="checkmark">
<svg class="validate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareFull'"></use>
+ <use *ngIf="isChecked" [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareFull'"></use>
+ <use *ngIf="isChecked === false" [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareEmpty'"></use>
</svg>
</div>
- <svg *ngIf="iconSvg" aria-hidden="true" [ngClass]="iconType">
+ <svg *ngIf="iconSvg" aria-hidden="true" [ngClass]="iconType" class="icon">
<use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg"></use>
</svg>
<p>{{ text }}</p>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index 958c3b8ca..680ae5d99 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -1,61 +1,48 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
-svg {
- min-width: 44px;
- width: 44px;
- height: 44px;
- fill: $primary-color;
- stroke: $primary-color;
- &.validate {
- stroke: none;
- display: none;
- }
- &.labels {
- min-width: 50px;
- width: 50px;
- }
-}
-
button {
width: 296px;
+ height: 65px;
+ margin-top: 8px;
background: $grey-8;
- border-radius: 4px;
padding: 0 16px;
- height: 65px;
+ border-radius: 4px;
outline: none;
- border: none;
+ border: 3px solid transparent;
cursor: pointer;
- margin: 8px 0 0 0;
- &.selected {
- background: $white;
- border: 3px solid $green-1;
- .validate {
- display: initial;
- width: 100%;
- height: 100%;
- }
- .checkmark {
- width: 24px;
- height: 24px;
- // to compensate viewbox of svg
- margin-right: 8px !important;
- transform: translate(-5px);
- border: none;
- }
+ box-sizing: border-box;
+
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 8px;
+
+ svg.validate {
+ width: 24px;
+ height: 24px;
}
+
+ svg.icon {
+ height: 44px;
+ width: 44px;
+ min-width: 44px;
+ }
+
p {
@include lato-bold-16;
text-align: left;
color: $grey-2;
}
- .checkmark {
- width: 18px;
- height: 18px;
- min-width: 18px;
+
+ &:hover {
+ p {
+ color: $grey-3;
+ }
+ }
+
+ &.selected {
background: $white;
- border: 1px solid $grey-3;
- border-radius: 4px;
- box-sizing: border-box;
+ border: 3px solid $green-1;
}
}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 91b8f1a80..e6c7163dc 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -27,6 +27,11 @@
<path d="M7 12.8182L10.8889 16L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
+<symbol id="checkVectorSquareEmpty" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.5" y="3.5" width="17" height="17" rx="3.5" fill="white" stroke="#696969"/>
+</symbol>
+
+
<symbol id="typeStructure_privateLucratif" viewBox="0 0 20 45" xmlns="http://www.w3.org/2000/svg">
<path d="M3.56201 15.4203L16.562 10V43H3.56201V15.4203Z" stroke="none"/>
<rect x="0.562012" y="44" width="19" height="1" stroke="none"/>
--
GitLab