florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Misc changes about form inputs.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-21 14:40:15 +02:00
committed by Florian THIERRY
parent cfca22bf66
commit 053ac89e3c
14 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/publication-edition/publication-edition.component.html
View File

@@ -92,7 +92,7 @@
</mat-tab>
</mat-tab-group>
<footer>
<app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
<app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
<button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
Cancel
</button>

7
frontend/src/app/components/submit-button/submit-button.component.html
View File

@@ -1,8 +1,11 @@
<button type="submit" [class]="color" [disabled]="disabled || requestPending" (click)="click.emit()">
<button type="submit"
class="cod-button {{color}}"
[disabled]="disabled || requestPending"
(click)="click.emit()">
@if (requestPending) {
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
}
<span>
{{ label }}
<ng-content/>
</span>
</button>

6
frontend/src/app/pages/login/login.component.html
View File

@@ -1,4 +1,4 @@
<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
<form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
<h1 i18n>Login</h1>
<div class="form-field">
<mat-icon>mail</mat-icon>
@@ -17,7 +17,7 @@
<input type="password" id="password" formControlName="password" required />
</div>
<div class="actions reversed">
<button type="submit" i18n>Send</button>
<a [routerLink]="['/signin']" class="button secondary" i18n>Create an account</a>
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/signin']" class="cod-button secondary" i18n>Create an account</a>
</div>
</form>

13
frontend/src/app/pages/login/login.component.scss
View File

@@ -4,17 +4,4 @@
justify-content: center;
align-items: center;
padding: 1em;
form {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
}
}

3
frontend/src/app/pages/login/login.component.ts
View File

@@ -5,13 +5,14 @@ import { Subscription, debounceTime, map } from 'rxjs';
import { LoginService } from './login.service';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
@Component({
selector: 'app-login',
standalone: true,
templateUrl: './login.component.html',
styleUrl: './login.component.scss',
imports: [ReactiveFormsModule, MatIconModule, RouterModule],
imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
providers: [LoginService, MatSnackBarModule]
})
export class LoginComponent implements OnInit, OnDestroy {

30
frontend/src/app/pages/login/login.service.ts
View File

@@ -60,18 +60,24 @@ export class LoginService {
performLogin(): void {
const state = this.state;
// Check state is valid
if (this.isStateValid(state)) {
this.userRestService
.login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/home']);
})
.catch((error) => {
console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
});
} else {
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
}
}
this.userRestService
.login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/home']);
})
.catch((error) => {
console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
});
isStateValid(state: LoginState): boolean {
return !!state.request.email?.trim().length && !!state.request.password?.length;
}
}

6
frontend/src/app/pages/signin/signin.component.html
View File

@@ -1,4 +1,4 @@
<form [formGroup]="signinForm" (submit)="performSignin()" ngNativeValidate>
<form [formGroup]="signinForm" (submit)="performSignin()" class="cod-form card" ngNativeValidate>
<h1 i18n>Signin</h1>
<div class="form-field">
<mat-icon>person</mat-icon>
@@ -33,7 +33,7 @@
<input type="password" id="confirm-password" formControlName="confirmPassword" required />
</div>
<div class="actions reversed">
<button type="submit" i18n>Send</button>
<a [routerLink]="['/login']" class="button secondary" i18n>I already have an account</a>
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/login']" class="cod-button secondary" i18n>I already have an account</a>
</div>
</form>

13
frontend/src/app/pages/signin/signin.component.scss
View File

@@ -4,17 +4,4 @@
justify-content: center;
align-items: center;
padding: 1em;
form {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
}
}

3
frontend/src/app/pages/signin/signin.component.ts
View File

@@ -6,11 +6,12 @@ import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
import { SigninService } from './signin.service';
import { LoginService } from '../login/login.service';
import { FormError } from '../../core/model/FormError';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
@Component({
selector: 'app-signin',
standalone: true,
imports: [ReactiveFormsModule, MatIconModule, RouterModule],
imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
templateUrl: './signin.component.html',
styleUrl: './signin.component.scss',
providers: [SigninService, LoginService]