Update login page
This commit is contained in:
parent
23b80daa75
commit
9deecb3cbd
|
@ -40,7 +40,7 @@
|
||||||
"vendorChunk": true,
|
"vendorChunk": true,
|
||||||
"extractLicenses": false,
|
"extractLicenses": false,
|
||||||
"buildOptimizer": false,
|
"buildOptimizer": false,
|
||||||
"sourceMap": false,
|
"sourceMap": true,
|
||||||
"optimization": false,
|
"optimization": false,
|
||||||
"namedChunks": true
|
"namedChunks": true
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,10 +1,18 @@
|
||||||
import {NgModule} from '@angular/core';
|
import {NgModule} from '@angular/core'
|
||||||
import {Routes, RouterModule} from '@angular/router';
|
import {RouterModule, Routes} from '@angular/router'
|
||||||
|
import {LogoutComponent} from './pages/logout/logout.component'
|
||||||
|
import {Login} from './accounts'
|
||||||
|
|
||||||
import {LoginComponent} from './pages/login/login.component';
|
const routes: Routes = [{
|
||||||
import {LogoutComponent} from "./pages/logout/logout.component";
|
path: 'login',
|
||||||
|
component: Login
|
||||||
const routes: Routes = [{path: 'login', component: LoginComponent}, {path: 'logout', component: LogoutComponent}, {path: '', redirectTo: 'login'}];
|
}, {
|
||||||
|
path: 'logout',
|
||||||
|
component: LogoutComponent
|
||||||
|
}, {
|
||||||
|
path: '',
|
||||||
|
redirectTo: 'login'
|
||||||
|
}]
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forChild(routes)],
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
import {NgModule} from '@angular/core';
|
import {NgModule} from '@angular/core'
|
||||||
|
|
||||||
import {AccountsRoutingModule} from './accounts-routing.module';
|
import {AccountsRoutingModule} from './accounts-routing.module'
|
||||||
import {LoginComponent} from './pages/login/login.component';
|
import {LoginComponent} from './pages/login/login.component'
|
||||||
import {SharedModule} from "../shared/shared.module";
|
import {SharedModule} from '../shared/shared.module'
|
||||||
import {LogoutComponent} from './pages/logout/logout.component';
|
import {LogoutComponent} from './pages/logout/logout.component'
|
||||||
import {CommonModule} from "@angular/common";
|
import {Login} from './accounts'
|
||||||
import {BrowserModule} from "@angular/platform-browser";
|
import {CreInputsModule} from '../shared/components/inputs/inputs.module'
|
||||||
|
import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [LoginComponent, LogoutComponent],
|
declarations: [
|
||||||
|
LoginComponent,
|
||||||
|
LogoutComponent,
|
||||||
|
Login
|
||||||
|
],
|
||||||
imports: [
|
imports: [
|
||||||
SharedModule,
|
SharedModule,
|
||||||
AccountsRoutingModule,
|
AccountsRoutingModule,
|
||||||
|
CreInputsModule,
|
||||||
|
CreButtonsModule,
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AccountsModule {
|
export class AccountsModule {
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
import {Component} from '@angular/core'
|
||||||
|
import {FormBuilder, FormControl, Validators} from '@angular/forms'
|
||||||
|
import {SubscribingComponent} from '../shared/components/subscribing.component'
|
||||||
|
import {AccountService} from './services/account.service'
|
||||||
|
import {AppState} from '../shared/app-state'
|
||||||
|
import {ErrorService} from '../shared/service/error.service'
|
||||||
|
import {ActivatedRoute, Router} from '@angular/router'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cre-login',
|
||||||
|
templateUrl: 'login.html',
|
||||||
|
styles: [
|
||||||
|
'cre-form { min-width: 25rem; margin-top: 50vh; transform: translateY(-70%) }'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class Login extends SubscribingComponent {
|
||||||
|
userIdControl = new FormControl(null, Validators.compose([Validators.required, Validators.pattern(new RegExp('^[0-9]+$'))]))
|
||||||
|
passwordControl = new FormControl(null, Validators.required)
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private formBuilder: FormBuilder,
|
||||||
|
private accountService: AccountService,
|
||||||
|
private appState: AppState,
|
||||||
|
errorService: ErrorService,
|
||||||
|
router: Router,
|
||||||
|
activatedRoute: ActivatedRoute
|
||||||
|
) {
|
||||||
|
super(errorService, activatedRoute, router)
|
||||||
|
this.appState.title = 'Connexion'
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
this.accountService.login(
|
||||||
|
this.userIdControl.value,
|
||||||
|
this.passwordControl.value,
|
||||||
|
() => this.urlUtils.navigateTo('/color')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
get controls(): { userId: FormControl, password: FormControl } {
|
||||||
|
return {
|
||||||
|
userId: this.userIdControl,
|
||||||
|
password: this.passwordControl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
<cre-form #form [formControls]="controls" class="mx-auto">
|
||||||
|
<cre-form-title>Connexion au système</cre-form-title>
|
||||||
|
<cre-form-content>
|
||||||
|
<cre-input
|
||||||
|
[control]="userIdControl"
|
||||||
|
label="Numéro d'utilisateur"
|
||||||
|
icon="account">
|
||||||
|
<ng-template let-errors="errors">
|
||||||
|
<span *ngIf="errors && errors.pattern">Le numéro d'utilisateur doit être un nombre</span>
|
||||||
|
</ng-template>
|
||||||
|
</cre-input>
|
||||||
|
|
||||||
|
<cre-input
|
||||||
|
[control]="passwordControl"
|
||||||
|
type="password"
|
||||||
|
label="Mot de passe"
|
||||||
|
icon="lock">
|
||||||
|
</cre-input>
|
||||||
|
</cre-form-content>
|
||||||
|
<cre-form-actions>
|
||||||
|
<cre-submit-button
|
||||||
|
text="Connexion"
|
||||||
|
[form]="form"
|
||||||
|
(submit)="submit()">
|
||||||
|
</cre-submit-button>
|
||||||
|
</cre-form-actions>
|
||||||
|
</cre-form>
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
import {Component, ContentChild, EventEmitter, Input, Output} from '@angular/core'
|
||||||
import {ICreForm} from './forms';
|
import {ICreForm} from './forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -8,6 +8,7 @@ import {ICreForm} from './forms';
|
||||||
export class CreSubmitButton {
|
export class CreSubmitButton {
|
||||||
@Input() form: ICreForm
|
@Input() form: ICreForm
|
||||||
@Input() valid: boolean | null
|
@Input() valid: boolean | null
|
||||||
|
@Input() text = 'Enregistrer'
|
||||||
|
|
||||||
@Output() submit = new EventEmitter<void>()
|
@Output() submit = new EventEmitter<void>()
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
<cre-accent-button [disabled]="disableButton" (click)="submit.emit()">Enregistrer</cre-accent-button>
|
<cre-accent-button [disabled]="disableButton" (click)="submit.emit()">{{text}}</cre-accent-button>
|
||||||
|
|
Loading…
Reference in New Issue