Display registration validation errors to user

marvac · Jan 28, 2019 · 5e79b8a · 5e79b8a
1 parent 4f4f726
commit 5e79b8a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/Client/src/app/components/members/member-detail/member-detail.component.html b/Client/src/app/components/members/member-detail/member-detail.component.html
@@ -31,25 +31,25 @@
     </div>
     <div class="col-sm-8">
       <div class="tab-panel">
-        <tabset class="member-tabset">
-          <tab heading="About {{user.knownAs}}">
-            <h4>Description</h4>
-            <p>{{user.introduction}}</p>
-            <h4>Interested In</h4>
-            <p>{{user.lookingFor}}</p>
-          </tab>
-          <tab heading="Interests">
-            <h4>Interests</h4>
-            <p>{{user.interests}}</p>
-          </tab>
-          <tab heading="Photos">
-            <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
-          </tab>
-          <tab heading="Messages">
+      <tabset class="member-tabset">
+        <tab heading="About {{user.knownAs}}">
+          <h4>Description</h4>
+          <p>{{user.introduction}}</p>
+          <h4>Interested In</h4>
+          <p>{{user.lookingFor}}</p>
+        </tab>
+        <tab heading="Interests">
+          <h4>Interests</h4>
+          <p>{{user.interests}}</p>
+        </tab>
+        <tab heading="Photos">
+          <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
+        </tab>
+        <tab heading="Messages">
 
-          </tab>
-        </tabset>
-      </div>
+        </tab>
+      </tabset>
+    </div>
     </div>
   </div>
 </div>
diff --git a/Client/src/app/components/register/register.component.html b/Client/src/app/components/register/register.component.html
@@ -3,11 +3,23 @@ <h2 class="text-center text-primary">Sign Up</h2>
   <hr>
 
   <div class="form-group">
-    <input type="text" formControlName="username" class="form-control" placeholder="Username">
+    <input [ngClass]="{'is-invalid':registerForm.get('username').errors && registerForm.get('username').touched}"
+           type="text"
+           formControlName="username"
+           class="form-control"
+           placeholder="Username">
+    <div class="invalid-feedback">Please choose a username</div>
   </div>
 
   <div class="form-group">
-    <input type="password" formControlName="password" class="form-control" placeholder="Password">
+    <input [ngClass]="{'is-invalid':registerForm.get('password').errors && registerForm.get('password').touched}"
+           type="password"
+           formControlName="password"
+           class="form-control"
+           placeholder="Password">
+    <div *ngIf="registerForm.get('password').hasError('required') && registerForm.get('password').touched" class="invalid-feedback">Password is required</div>
+    <div *ngIf="registerForm.get('password').hasError('minlength') && registerForm.get('password').touched" class="invalid-feedback">Password must be at least 4 characters</div>
+    <div *ngIf="registerForm.get('password').hasError('maxlength') && registerForm.get('password').touched" class="invalid-feedback">Password cannot be over 10 characters</div>
   </div>
 
   <div class="form-group">

diff --git a/Client/src/app/components/register/register.component.ts b/Client/src/app/components/register/register.component.ts
@@ -19,7 +19,7 @@ export class RegisterComponent implements OnInit {
   ngOnInit() {
     this.registerForm = new FormGroup({
       username: new FormControl('', Validators.required),
-      password: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(8)]),
+      password: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]),
       confirmPassword: new FormControl('', Validators.required)
     }, this.passwordConfirmationValidator);
   }
@@ -39,7 +39,7 @@ export class RegisterComponent implements OnInit {
       return null;
     }
 
-    return {'mismatch: true'};
+    return {'mismatch': true};
   }
 
   cancel() {

diff --git a/Client/src/styles.css b/Client/src/styles.css
@@ -13,9 +13,8 @@
 }
 
 .member-tabset > .tab-content {
-  margin-top: -3px;
   background-color: #fff;
   border: 0;
   border-top: 1px solid #eee;
-  padding: 15px 0;
+  padding: 15px;
 }