From 9cb6b5904dc8452410c58a013ef632d054889ebd Mon Sep 17 00:00:00 2001
From: Armin Ster <sterarmin@gmail.com>
Date: Tue, 10 May 2022 21:27:28 +0200
Subject: [PATCH] Refactor register screen

---
 src/app/components/auth/auth.component.scss   |  4 +-
 .../auth/login/login.component.html           |  4 +-
 .../auth/login/login.component.scss           |  4 --
 .../auth/register/register.component.html     | 44 +++++++++----------
 .../auth/register/register.component.scss     |  5 +++
 .../auth/register/register.component.ts       |  6 ++-
 6 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/app/components/auth/auth.component.scss b/src/app/components/auth/auth.component.scss
index 7aed7d004..c581d9a18 100644
--- a/src/app/components/auth/auth.component.scss
+++ b/src/app/components/auth/auth.component.scss
@@ -5,9 +5,11 @@
 
 :host {
   background: #142f43;
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
   width: 100%;
   display: inline-block;
+  padding-bottom: 20px;
 
   .auth-page-container {
     display: grid;
diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
index 5523eaa92..f03cf24cd 100644
--- a/src/app/components/auth/login/login.component.html
+++ b/src/app/components/auth/login/login.component.html
@@ -1,8 +1,8 @@
 <form class="form" role="form" autocomplete="off" id="formLogin" novalidate="" [formGroup]="form">
-  <anglify-form-field label="Username" type="outlined" hide-details>
+  <anglify-form-field label="Username" type="outlined">
     <input anglifyInput name="username" formControlName="username" />
   </anglify-form-field>
-  <anglify-form-field label="Password" type="outlined" hide-details>
+  <anglify-form-field label="Password" type="outlined">
     <input anglifyInput type="password" name="username" formControlName="password" />
   </anglify-form-field>
   <button anglifyButton type="submit" class="btn btn-primary" id="btnLogin" (click)="doLogin()">Login</button>
diff --git a/src/app/components/auth/login/login.component.scss b/src/app/components/auth/login/login.component.scss
index 76dafa7e7..61565193a 100644
--- a/src/app/components/auth/login/login.component.scss
+++ b/src/app/components/auth/login/login.component.scss
@@ -2,8 +2,4 @@
   button {
     margin-top: 10px;
   }
-
-  anglify-form-field {
-    margin-bottom: 10px;
-  }
 }
diff --git a/src/app/components/auth/register/register.component.html b/src/app/components/auth/register/register.component.html
index 3818ca77b..9dc21b1f3 100644
--- a/src/app/components/auth/register/register.component.html
+++ b/src/app/components/auth/register/register.component.html
@@ -1,25 +1,21 @@
-<form class="form" role="form" autocomplete="off" id="formRegister" novalidate="" [formGroup]="form">
-  <anx-forms-input formControlName="username" [errors]="form.get('username').errors" [placeholder]="'Username'"></anx-forms-input>
-
-  <anx-forms-input formControlName="first_name" [errors]="form.get('first_name').errors" [placeholder]="'First name'"></anx-forms-input>
-
-  <anx-forms-input formControlName="last_name" [errors]="form.get('last_name').errors" [placeholder]="'Last name'"></anx-forms-input>
-
-  <anx-forms-input formControlName="email" [errors]="form.get('email').errors" [placeholder]="'Email'"></anx-forms-input>
-
-  <anx-forms-input
-    formControlName="password"
-    [errors]="form.get('password').errors"
-    [placeholder]="'Password'"
-    [type]="'password'"
-  ></anx-forms-input>
-
-  <anx-forms-input
-    formControlName="password_confirm"
-    [errors]="form.get('password_confirm').errors"
-    [placeholder]="'Password confirm'"
-    [type]="'password'"
-  ></anx-forms-input>
-
-  <button type="submit" class="btn btn-success" id="btnRegister" (click)="doRegister()">Register</button>
+<form class="form" role="form" autocomplete="off" id="formRegister" novalidate="" [formGroup]="form" (submit)="doRegister()">
+  <anglify-form-field label="Username" type="outlined">
+    <input anglifyInput name="username" formControlName="username" />
+  </anglify-form-field>
+  <anglify-form-field label="First name" type="outlined">
+    <input anglifyInput name="firstname" formControlName="first_name" />
+  </anglify-form-field>
+  <anglify-form-field label="Last name" type="outlined">
+    <input anglifyInput name="lastname" formControlName="last_name" />
+  </anglify-form-field>
+  <anglify-form-field label="Email" type="outlined">
+    <input anglifyInput name="email" formControlName="email" />
+  </anglify-form-field>
+  <anglify-form-field label="Password" type="outlined">
+    <input anglifyInput name="password" formControlName="password" type="password" />
+  </anglify-form-field>
+  <anglify-form-field label="Password confirm" type="outlined">
+    <input anglifyInput name="password" formControlName="password_confirm" type="password" />
+  </anglify-form-field>
+  <button anglifyButton type="submit" id="btnRegister">Register</button>
 </form>
diff --git a/src/app/components/auth/register/register.component.scss b/src/app/components/auth/register/register.component.scss
index e69de29bb..61565193a 100644
--- a/src/app/components/auth/register/register.component.scss
+++ b/src/app/components/auth/register/register.component.scss
@@ -0,0 +1,5 @@
+:host {
+  button {
+    margin-top: 10px;
+  }
+}
diff --git a/src/app/components/auth/register/register.component.ts b/src/app/components/auth/register/register.component.ts
index 6288a5654..321764c85 100644
--- a/src/app/components/auth/register/register.component.ts
+++ b/src/app/components/auth/register/register.component.ts
@@ -1,13 +1,15 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { mapFormErrors } from 'ngx-anx-forms';
 import { ToastrService } from 'ngx-toastr';
+import { Validators } from '../../../helpers/validators';
 import { RegisterPayload } from '../../../services/resources/auth.resource';
 
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegisterComponent implements OnInit, OnChanges {
   @Output() register = new EventEmitter<RegisterPayload>();