Merge pull request #1208 from sterapps/refactor-register-screen

Refactor register screen
snypy · May 10, 2022 · 855d2a6 · 855d2a6
2 parents 898df08 + 9cb6b59
commit 855d2a6
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>();