feat(user-profile component): ability to update user password

Give's the user the ability to update their password feat #50
softrams · Jun 17, 2020 · 9855987 · 9855987
1 parent 62c7896
commit 9855987
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git a/frontend/src/app/user-profile/user-profile.component.html b/frontend/src/app/user-profile/user-profile.component.html
@@ -39,5 +39,45 @@ <h4>Your Profile</h4>
         </div>
       </div>
     </div>
+    <br />
+    <div class="card">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-12">
+            <h4>Security</h4>
+            <hr />
+          </div>
+        </div>
+        <div id="formContent">
+          <form [formGroup]="securityForm" (ngSubmit)="onSecuritySubmit(securityForm)" id="userForm">
+            <div class="col-md-12">
+              <div class="form-group row">
+                <label for="oldPassword" class="col-4 col-form-label">Old Password:</label>
+                <div class="col-8">
+                  <input formControlName="oldPassword" type="password" id="oldPassword" class="form-control"
+                    name="oldPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <div class="form-group row">
+                <label for="newPassword" class="col-4 col-form-label">New Password:</label>
+                <div class="col-8">
+                  <input formControlName="newPassword" type="password" id="newPassword" class="form-control"
+                    name="newPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <div class="form-group row">
+                <label for="confirmNewPassword" class="col-4 col-form-label">Confirm New Password:</label>
+                <div class="col-8">
+                  <input formControlName="confirmNewPassword" type="password" id="confirmNewPassword"
+                    class="form-control" name="confirmNewPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <input [disabled]="isSecurityEdit ? !securityForm.valid : false" type="submit"
+                class="btn btn-primary float-right" [value]="isSecurityEdit ? 'Update' : 'Edit'" />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
+</div>
diff --git a/frontend/src/app/user-profile/user-profile.component.spec.ts b/frontend/src/app/user-profile/user-profile.component.spec.ts
@@ -11,7 +11,7 @@ const userService = {
   patchUser: () => {},
 };
 
-describe('UserProfileComponent', () => {
+fdescribe('UserProfileComponent', () => {
   let component: UserProfileComponent;
   let fixture: ComponentFixture<UserProfileComponent>;
 

diff --git a/frontend/src/app/user-profile/user-profile.component.ts b/frontend/src/app/user-profile/user-profile.component.ts
@@ -13,7 +13,9 @@ import { UserService } from '../user.service';
 })
 export class UserProfileComponent implements OnInit {
   userForm: FormGroup;
+  securityForm: FormGroup;
   isEdit = false;
+  isSecurityEdit = false;
   user: User;
   constructor(
     private fb: FormBuilder,
@@ -23,24 +25,39 @@ export class UserProfileComponent implements OnInit {
     public activatedRoute: ActivatedRoute,
     public userService: UserService
   ) {
-    this.createForm();
+    this.createForms();
   }
 
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ user }) => {
       if (user) {
         this.user = user;
         this.rebuildForm();
+        this.rebuildSecurityForm();
       }
     });
   }
 
-  createForm() {
+  createForms() {
     this.userForm = this.fb.group({
       firstName: [{ value: '', disabled: !this.isEdit }, Validators.required],
       lastName: [{ value: '', disabled: !this.isEdit }, Validators.required],
       title: [{ value: '', disabled: !this.isEdit }, Validators.required],
     });
+    this.securityForm = this.fb.group({
+      oldPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+      newPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+      confirmNewPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+    });
   }
 
   rebuildForm() {
@@ -51,6 +68,14 @@ export class UserProfileComponent implements OnInit {
     });
   }
 
+  rebuildSecurityForm() {
+    this.userForm.reset({
+      oldPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    });
+  }
+
   onSubmit(form: FormGroup) {
     if (!this.isEdit) {
       this.isEdit = true;
@@ -69,4 +94,15 @@ export class UserProfileComponent implements OnInit {
       });
     }
   }
+
+  onSecuritySubmit(form: FormGroup) {
+    if (!this.isSecurityEdit) {
+      this.isSecurityEdit = true;
+      this.securityForm.enable();
+    } else {
+      console.log(form);
+      this.isSecurityEdit = false;
+      this.securityForm.disable();
+    }
+  }
 }