From 9deecb3cbda765b76e64b0da3c459dae159f16dd Mon Sep 17 00:00:00 2001
From: FyloZ <fylozdev@gmail.com>
Date: Fri, 3 Dec 2021 16:29:15 -0500
Subject: [PATCH] Update login page

---
 angular.json                                  |  2 +-
 .../accounts/accounts-routing.module.ts       | 20 +++++---
 src/app/modules/accounts/accounts.module.ts   | 23 ++++++----
 src/app/modules/accounts/accounts.ts          | 46 +++++++++++++++++++
 src/app/modules/accounts/login.html           | 27 +++++++++++
 .../shared/components/forms/buttons.ts        |  3 +-
 .../components/forms/submit-button.html       |  2 +-
 7 files changed, 106 insertions(+), 17 deletions(-)
 create mode 100644 src/app/modules/accounts/accounts.ts
 create mode 100644 src/app/modules/accounts/login.html

diff --git a/angular.json b/angular.json
index fb6d6d1..2fab785 100644
--- a/angular.json
+++ b/angular.json
@@ -40,7 +40,7 @@
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
-            "sourceMap": false,
+            "sourceMap": true,
             "optimization": false,
             "namedChunks": true
           },
diff --git a/src/app/modules/accounts/accounts-routing.module.ts b/src/app/modules/accounts/accounts-routing.module.ts
index 843486b..006c93f 100644
--- a/src/app/modules/accounts/accounts-routing.module.ts
+++ b/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)],
diff --git a/src/app/modules/accounts/accounts.module.ts b/src/app/modules/accounts/accounts.module.ts
index a935cd7..c8a05ec 100644
--- a/src/app/modules/accounts/accounts.module.ts
+++ b/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 {
diff --git a/src/app/modules/accounts/accounts.ts b/src/app/modules/accounts/accounts.ts
new file mode 100644
index 0000000..1629f85
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/src/app/modules/accounts/login.html b/src/app/modules/accounts/login.html
new file mode 100644
index 0000000..0521fdb
--- /dev/null
+++ b/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>
diff --git a/src/app/modules/shared/components/forms/buttons.ts b/src/app/modules/shared/components/forms/buttons.ts
index 0cebdc4..2c70ed1 100644
--- a/src/app/modules/shared/components/forms/buttons.ts
+++ b/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>()
 
diff --git a/src/app/modules/shared/components/forms/submit-button.html b/src/app/modules/shared/components/forms/submit-button.html
index 8e9289a..3d00a97 100644
--- a/src/app/modules/shared/components/forms/submit-button.html
+++ b/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>