angular.json

@@ -40,7 +40,7 @@
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
-            "sourceMap": false,
+            "sourceMap": true,
             "optimization": false,
             "namedChunks": true
           },

src/app/modules/accounts/accounts-routing.module.ts

@@ -1,10 +1,18 @@
-import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
+import {NgModule} from '@angular/core'
+import {RouterModule, Routes} from '@angular/router'
+import {LogoutComponent} from './pages/logout/logout.component'
+import {Login} from './accounts'
 
-import {LoginComponent} from './pages/login/login.component';
-import {LogoutComponent} from "./pages/logout/logout.component";
-
-const routes: Routes = [{path: 'login', component: LoginComponent}, {path: 'logout', component: LogoutComponent}, {path: '', redirectTo: 'login'}];
+const routes: Routes = [{
+  path: 'login',
+  component: Login
+}, {
+  path: 'logout',
+  component: LogoutComponent
+}, {
+  path: '',
+  redirectTo: 'login'
+}]
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/modules/accounts/accounts.module.ts

@@ -1,18 +1,25 @@
-import {NgModule} from '@angular/core';
+import {NgModule} from '@angular/core'
 
-import {AccountsRoutingModule} from './accounts-routing.module';
-import {LoginComponent} from './pages/login/login.component';
-import {SharedModule} from "../shared/shared.module";
-import {LogoutComponent} from './pages/logout/logout.component';
-import {CommonModule} from "@angular/common";
-import {BrowserModule} from "@angular/platform-browser";
+import {AccountsRoutingModule} from './accounts-routing.module'
+import {LoginComponent} from './pages/login/login.component'
+import {SharedModule} from '../shared/shared.module'
+import {LogoutComponent} from './pages/logout/logout.component'
+import {Login} from './accounts'
+import {CreInputsModule} from '../shared/components/inputs/inputs.module'
+import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
 
 
 @NgModule({
-  declarations: [LoginComponent, LogoutComponent],
+  declarations: [
+    LoginComponent,
+    LogoutComponent,
+    Login
+  ],
   imports: [
     SharedModule,
     AccountsRoutingModule,
+    CreInputsModule,
+    CreButtonsModule,
   ]
 })
 export class AccountsModule {

src/app/modules/accounts/accounts.ts

@@ -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
+    }
+  }
+}

src/app/modules/accounts/login.html

@@ -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>

src/app/modules/shared/components/forms/buttons.ts

@@ -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';
 
 @Component({
@@ -8,6 +8,7 @@ import {ICreForm} from './forms';
 export class CreSubmitButton {
   @Input() form: ICreForm
   @Input() valid: boolean | null
+  @Input() text = 'Enregistrer'
 
   @Output() submit = new EventEmitter<void>()
 

src/app/modules/shared/components/forms/submit-button.html

@@ -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>