회원수정 페이지 수정

src/app/pages/users/user/component/user-detail/user-detail.component.html

@@ -55,7 +55,7 @@
                 fxFlex="1 0 auto"
                 name="userForm"
                 [formGroup]="userForm"
-                (ngSubmit)="registUser()"
+                (ngSubmit)="updateUser()"
               >
                 <div class="h2 mb-24">기본정보</div>
 
@@ -110,6 +110,23 @@
                     <mat-icon matSuffix class="secondary-text"
                       >vpn_key</mat-icon
                     >
+                    <mat-error
+                      *ngIf="
+                        userForm.get('passwordConfirm').hasError('required')
+                      "
+                    >
+                      패스워드 확인은 필수 사항입니다!
+                    </mat-error>
+                    <mat-error
+                      *ngIf="
+                        !userForm.get('passwordConfirm').hasError('required') &&
+                        userForm
+                          .get('passwordConfirm')
+                          .hasError('passwordsNotMatching')
+                      "
+                    >
+                      패스워드가 일치하지 않습니다!
+                    </mat-error>
                   </mat-form-field>
                 </div>
 

src/app/pages/users/user/component/user-detail/user-detail.component.ts

@@ -1,7 +1,15 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  Validators,
+  ValidationErrors,
+  ValidatorFn
+} from '@angular/forms';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/internal/operators';
 
 import { fuseAnimations } from 'src/@fuse/animations';
 import { User } from 'src/modules/user/model/user.model';
@@ -52,6 +60,12 @@ export class UserDetailComponent implements OnInit, OnDestroy {
 
       this.initializeForm();
     });
+    this.userForm
+      .get('password')
+      .valueChanges.pipe(takeUntil(this._unsubscribeAll))
+      .subscribe(() => {
+        this.userForm.get('passwordConfirm').updateValueAndValidity();
+      });
   }
 
   /**
@@ -75,17 +89,33 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         }
       ],
       password: '',
+      passwordConfirm: ['', confirmPasswordValidator],
       email: this.user.email,
-      nickname: this.user.nickname,
+      nickname: [this.user.nickname, Validators.required],
       phone: this.user.phone,
       descriptions: this.user.descriptions
     });
   }
 
   // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
+  // @ Public methodsAbstractControl
   // -----------------------------------------------------------------------------------------------------
 
+  updateUser(): void {
+    let updateUser: User = <User>this.userForm.value;
+    const pw: string = this.userForm.get('password').value;
+    this.userService
+      .updateUser(this.user.id, updateUser, pw)
+      .pipe(take(1))
+      .subscribe(
+        res => {
+          console.log(res);
+        },
+        err => {
+          console.log(err);
+        }
+      );
+  }
   /**
    * Update status
    */
@@ -101,3 +131,28 @@ export class UserDetailComponent implements OnInit, OnDestroy {
     // this.order.status.unshift(newStatus);
   }
 }
+
+export const confirmPasswordValidator: ValidatorFn = (
+  control: AbstractControl
+): ValidationErrors | null => {
+  if (!control.parent || !control) {
+    return null;
+  }
+
+  const password = control.parent.get('password');
+  const passwordConfirm = control.parent.get('passwordConfirm');
+
+  if (!password || !passwordConfirm) {
+    return null;
+  }
+
+  if (passwordConfirm.value === '') {
+    return null;
+  }
+
+  if (password.value === passwordConfirm.value) {
+    return null;
+  }
+
+  return { passwordsNotMatching: true };
+};

src/app/pages/users/user/component/user-regist/user-regist.component.ts

@@ -11,7 +11,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/internal/operators';
 import { take } from 'rxjs/operators';
 import { fuseAnimations } from 'src/@fuse/animations';
-import { User } from 'src/modules/user/model/user.model';
+
 import { SignupRequest } from 'src/modules/auth/model/auth-signup-request.model';
 import { AuthService } from 'src/modules/auth/service/auth.service';
 @Component({

src/modules/user/model/user.model.ts

@@ -2,6 +2,7 @@ import { Role } from './role.model';
 import { DateAudit } from 'src/modules/common/data/model/audit';
 
 export interface User extends DateAudit {
+  id?: number;
   username?: string;
   nickname?: string;
   email?: string;

src/modules/user/service/user.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { User } from 'src/modules/user/model/user.model';
 import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
 import { Page } from 'src/modules/common/data/model/page';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class UserService {
@@ -19,4 +20,33 @@ export class UserService {
   public getUser(id: number): Observable<User> {
     return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
   }
+
+  public updateUser(
+    id: number,
+    newUser: User,
+    newPassword: string
+  ): Observable<User> {
+    const username = newUser.username;
+    const password = newPassword;
+    const email = newUser.email;
+    const phone = newUser.phone;
+    const descriptions = newUser.descriptions;
+    const nickname = newUser.nickname;
+
+    return this.httpClient
+      .put<any>(`${this.apiBaseUrl}/users/${id}`, {
+        username,
+        nickname,
+        email,
+        password,
+        descriptions,
+        phone
+      })
+      .pipe(
+        map(res => {
+          console.log('update response: ' + res);
+          return res;
+        })
+      );
+  }
 }