diff --git a/src/app/pages/users/user/component/user-list/user-list.data-source.ts b/src/app/pages/users/user/component/user-list/user-list.data-source.ts index 4f18efc..656c18d 100644 --- a/src/app/pages/users/user/component/user-list/user-list.data-source.ts +++ b/src/app/pages/users/user/component/user-list/user-list.data-source.ts @@ -18,9 +18,12 @@ export class UsersDataSource extends DataSource { private paginator: MatPaginator, private sort: MatSort ) { + User; super(); + User; } - + User; + User; // Filter get filter(): string { return this.filterSubject.value; diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.html b/src/app/pages/users/user/component/user-regist/user-regist.component.html index 962fbf0..d6716c8 100644 --- a/src/app/pages/users/user/component/user-regist/user-regist.component.html +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.html @@ -1,7 +1,10 @@
- -
+
home @@ -15,164 +18,123 @@
-
- Reactive Forms + 회원가입
-

- Angular reactive forms facilitate a reactive style of programming that favors explicit management of the - data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model - that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using - reactive patterns, testing, and validation. -

-
- Horizontal Stepper -
-
+
+
+
기본정보
+
+ + 아이디 + + account_circle + 아이디는 필수 사항입니다! + + + 핸드폰 + + phone + 핸드폰은 필수 사항입니다! + +
- +
+ + 패스워드 + + vpn_key + + 패스워드는 필수 사항입니다! + + -
+ + 패스워드 (확인) + + vpn_key + + 패스워드 확인은 필수 사항입니다! + + + 패스워드가 일치하지 않습니다! + + +
- - +
+ + 닉네임 + + account_circle + 닉네임은 필수 사항입니다!! + - - - - - Fill out your name - -
- - - First Name - - First Name is required! - - - - Last Name - - Last Name is required! - - -
- -
- -
- - - - - - - -
- - Fill out your address - -
- - - Address - - Address is required! - - -
- -
- - -
- -
- - - - - -
- - Fill out your address - -
- - - City - - City is required! - - - - State - - State is required! - - - - Postal Code - - {{postalCode2.value.length}} / 5 - Postal Code is required! - - -
- -
- - -
- -
- - - - - - Done - -
- Thank your for filling out our form. -
- -
- - -
- - - - - + + 이메일 + + mail + +
+
+ + 비고 + + +
+ + +
+
계좌정보
+ 
계좌정보
- +
- +
+
Reactive Form Model
+ 
아아아다다다다다다다
+
+
+
Reactive Form Model
+ 
아아아다다다다다다다
+
+
diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.scss b/src/app/pages/users/user/component/user-regist/user-regist.component.scss index f0c8f94..bd23700 100644 --- a/src/app/pages/users/user/component/user-regist/user-regist.component.scss +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.scss @@ -1,23 +1,21 @@ :host { - - .content { - - form { - width: 100%; - max-width: 800px !important; - } - - .form-errors-model { - flex: 1; - - code { - background: none !important; - } - } - - .horizontal-stepper-wrapper, - .vertical-stepper-wrapper { - max-width: 800px; - } + .content { + form { + width: 100%; + max-width: 800px !important; } + + .form-errors-model { + flex: 1; + + code { + background: none !important; + } + } + + .horizontal-stepper-wrapper, + .vertical-stepper-wrapper { + max-width: 800px; + } + } } diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.ts b/src/app/pages/users/user/component/user-regist/user-regist.component.ts index fb90397..aa5299d 100644 --- a/src/app/pages/users/user/component/user-regist/user-regist.component.ts +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.ts @@ -1,15 +1,28 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { + AbstractControl, + FormBuilder, + FormGroup, + ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; 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({ selector: 'app-user-regist', templateUrl: './user-regist.component.html', - styleUrls: ['./user-regist.component.scss'] + styleUrls: ['./user-regist.component.scss'], + encapsulation: ViewEncapsulation.Emulated, + animations: fuseAnimations }) export class UserRegistComponent implements OnInit, OnDestroy { - - form: FormGroup; + registerForm: FormGroup; // Horizontal Stepper horizontalStepperStep1: FormGroup; horizontalStepperStep2: FormGroup; @@ -19,13 +32,14 @@ export class UserRegistComponent implements OnInit, OnDestroy { private _unsubscribeAll: Subject; /* - * - * Constructor - * - * @param {FormBuilder} _formBuilder - */ + * + * Constructor + * + * @param {FormBuilder} _formBuilder + */ constructor( - private _formBuilder: FormBuilder + private _formBuilder: FormBuilder, + private _authService: AuthService ) { // Set the private defaults this._unsubscribeAll = new Subject(); @@ -40,38 +54,24 @@ export class UserRegistComponent implements OnInit, OnDestroy { */ ngOnInit() { // Reactive Form - this.form = this._formBuilder.group({ - company: [ - { - value: 'Google', - disabled: true - }, Validators.required - ], - firstName: ['', Validators.required], - lastName: ['', Validators.required], - address: ['', Validators.required], - address2: ['', Validators.required], - city: ['', Validators.required], - state: ['', Validators.required], - postalCode: ['', [Validators.required, Validators.maxLength(5)]], - country: ['', Validators.required] + this.registerForm = this._formBuilder.group({ + username: ['', Validators.required], + phone: ['', Validators.required], + password: ['', Validators.required], + passwordConfirm: ['', [Validators.required, confirmPasswordValidator]], + nickname: ['', Validators.required], + email: [''], + descriptions: [''] }); - // Horizontal Stepper form steps - this.horizontalStepperStep1 = this._formBuilder.group({ - firstName: ['', Validators.required], - lastName: ['', Validators.required] - }); - - this.horizontalStepperStep2 = this._formBuilder.group({ - address: ['', Validators.required] - }); - - this.horizontalStepperStep3 = this._formBuilder.group({ - city: ['', Validators.required], - state: ['', Validators.required], - postalCode: ['', [Validators.required, Validators.maxLength(5)]] - }); + // Update the validity of the 'passwordConfirm' field + // when the 'password' field changes + this.registerForm + .get('password') + .valueChanges.pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.registerForm.get('passwordConfirm').updateValueAndValidity(); + }); } /** @@ -83,21 +83,44 @@ export class UserRegistComponent implements OnInit, OnDestroy { this._unsubscribeAll.complete(); } - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * Finish the horizontal stepper - */ - finishHorizontalStepper(): void { - alert('You have finished the horizontal stepper!'); - } - - /** - * Finish the vertical stepper - */ - finishVerticalStepper(): void { - alert('You have finished the vertical stepper!'); + registUser(): void { + let user: SignupRequest = this.registerForm.value; + console.log(user); + this._authService + .signup(user) + .pipe(take(1)) + .subscribe( + res => { + console.log(res); + }, + err => { + console.log(err); + } + ); } } + +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 }; +}; diff --git a/src/modules/auth/model/auth-signup-request.model.ts b/src/modules/auth/model/auth-signup-request.model.ts new file mode 100644 index 0000000..05c6015 --- /dev/null +++ b/src/modules/auth/model/auth-signup-request.model.ts @@ -0,0 +1,8 @@ +export interface SignupRequest { + username: string; + nickname: string; + email: string; + password: string; + descriptions: string; + phone: string; +} diff --git a/src/modules/auth/service/auth.service.ts b/src/modules/auth/service/auth.service.ts index c85f800..d6edbe4 100644 --- a/src/modules/auth/service/auth.service.ts +++ b/src/modules/auth/service/auth.service.ts @@ -7,6 +7,7 @@ import { JwtSigninResponse } from '../model/jwt-signin-response.model'; import { CookieService } from 'ngx-cookie-service'; import { API_BASE_URL } from 'src/modules/common/type/injection-token.type'; +import { SignupRequest } from '../model/auth-signup-request.model'; @Injectable({ providedIn: 'root' }) export class AuthService { @@ -14,8 +15,33 @@ export class AuthService { private httpClient: HttpClient, private cookieService: CookieService, @Inject(API_BASE_URL) private apiBaseUrl: string - ) { } + ) {} + public signup(signupInfo: SignupRequest): Observable { + const ll = JSON.stringify(signupInfo); + const username = signupInfo.username; + const password = signupInfo.password; + const email = signupInfo.email; + const phone = signupInfo.phone; + const descriptions = signupInfo.descriptions; + const nickname = signupInfo.nickname; + + return this.httpClient + .post(`${this.apiBaseUrl}/auth/signup`, { + username, + nickname, + email, + password, + descriptions, + phone + }) + .pipe( + map(res => { + console.log('signup response: ' + res); + return res; + }) + ); + } public authenticate( username: string, password: string diff --git a/src/modules/user/model/user.model.ts b/src/modules/user/model/user.model.ts index 12c4cb8..418e314 100644 --- a/src/modules/user/model/user.model.ts +++ b/src/modules/user/model/user.model.ts @@ -14,5 +14,6 @@ export interface User extends DateAudit { otpKey?: string; otp?: string; requireReset?: boolean; - + phone?: string; + descriptions?: string; } diff --git a/src/modules/user/service/user.service.ts b/src/modules/user/service/user.service.ts index 9c1345e..6e053d8 100644 --- a/src/modules/user/service/user.service.ts +++ b/src/modules/user/service/user.service.ts @@ -7,11 +7,10 @@ import { Page } from 'src/modules/common/data/model/page'; @Injectable() export class UserService { - constructor( @Inject(API_BASE_URL) private apiBaseUrl: string, private httpClient: HttpClient - ) { } + ) {} public getAllUsers(): Observable> { return this.httpClient.get>(`${this.apiBaseUrl}/users`, {});