회원가입

This commit is contained in:
Park Byung Eun 2022-08-20 09:41:55 +00:00
parent 14fb4f4063
commit 0d13ec8174
10 changed files with 580 additions and 60 deletions

View File

@ -21,6 +21,8 @@ import { environment } from 'environments/environment';
import { BankModule } from 'app/modules/polyglot/bank/bank.module';
import { IdentityModule } from 'app/modules/polyglot/identity/identity.module';
import { MemberModule } from 'app/modules/polyglot/member/member.module';
import { MemberReferrerModule } from 'app/modules/polyglot/member_referrer/member_referrer.module';
import { ApiModule } from 'app/modules/polyglot/api/api.module';
@ -53,8 +55,10 @@ const routerConfig: ExtraOptions = {
NatsModule.forRoot(environment.nats),
WebStorageModule.forRoot({}),
MemberModule.forRoot(),
BankModule.forRoot(),
IdentityModule.forRoot(),
MemberReferrerModule.forRoot(),
ApiModule.forRoot(),
],

View File

@ -0,0 +1,16 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { SERVICES } from './services';
@NgModule({})
export class MemberRootModule {}
@NgModule({})
export class MemberModule {
public static forRoot(): ModuleWithProviders<MemberRootModule> {
return {
ngModule: MemberRootModule,
providers: [...SERVICES],
};
}
}

View File

@ -0,0 +1,5 @@
import { Type } from '@angular/core';
import { MemberService } from './member.service';
export const SERVICES: Type<any>[] = [MemberService];

View File

@ -0,0 +1,183 @@
import { Injectable } from '@angular/core';
import { NatsService } from 'app/core/nats/services/nats.service';
import * as nats from 'nats.ws';
import { Error } from 'app/modules/proto/protobuf/rpc_pb';
import {
ListMembersRequest,
ListMembersResponse,
GetMemberByUsernameRequest,
GetMemberByUsernameResponse,
GetMemberRequest,
GetMemberResponse,
UpdateMemberRequest,
UpdateMemberResponse,
CreateMemberResponse,
CreateMemberRequest,
} from 'app/modules/proto/c2se/member_pb';
import {
SUBJECT_LIST_MEMBERS,
SUBJECT_GET_MEMBER,
SUBJECT_GET_MEMBER_BY_USERNAME,
SUBJECT_UPDATE_MEMBER,
SUBJECT_CREATE_MEMBER,
} from 'app/modules/proto/c2se/backend/member_pb';
import { Pagination } from 'app/modules/proto/protobuf/pagination_pb';
@Injectable({
providedIn: 'root',
})
export class MemberService {
/**
* Constructor
*/
constructor(private __natsService: NatsService) {}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
listMembers(req?: ListMembersRequest): Promise<ListMembersResponse.Result> {
return new Promise<ListMembersResponse.Result>((resolve, reject) => {
if (!req) {
req = new ListMembersRequest();
}
if (!req.hasPagination()) {
let paging = new Pagination();
paging.setPageSize(10);
paging.setPage(0);
req.setPagination(paging);
}
this.__natsService
.request<ListMembersResponse.Result>(
SUBJECT_LIST_MEMBERS,
req.serializeBinary(),
ListMembersResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMembersList());
resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
});
}
getMember(id: string): Promise<GetMemberResponse.Result> {
return new Promise<GetMemberResponse.Result>((resolve, reject) => {
let req = new GetMemberRequest();
req.setId(id);
this.__natsService
.request<GetMemberResponse.Result>(
SUBJECT_GET_MEMBER,
req.serializeBinary(),
GetMemberResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMember());
resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
});
}
getMemberByUsername(): Promise<GetMemberByUsernameResponse.Result> {
return new Promise<GetMemberByUsernameResponse.Result>(
(resolve, reject) => {
let req = new GetMemberByUsernameRequest();
this.__natsService
.request<GetMemberByUsernameResponse.Result>(
SUBJECT_GET_MEMBER_BY_USERNAME,
req.serializeBinary(),
GetMemberByUsernameResponse.deserializeBinary
)
.then((result) => {
resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
}
);
}
updateMember(
id: string,
siteId: string,
memberLevelId: string,
password: string,
mobilePhoneNumber: string
): Promise<UpdateMemberResponse.Result> {
return new Promise<UpdateMemberResponse.Result>((resolve, reject) => {
let req = new UpdateMemberRequest();
req.setId(id);
if (!!siteId) {
req.setSiteId(siteId);
}
if (!!memberLevelId) {
req.setMemberLevelId(memberLevelId);
}
if (!!password) {
req.setPassword(password);
}
if (!!mobilePhoneNumber) {
req.setMobilePhoneNumber(mobilePhoneNumber);
}
this.__natsService
.request<UpdateMemberResponse.Result>(
SUBJECT_UPDATE_MEMBER,
req.serializeBinary(),
UpdateMemberResponse.deserializeBinary
)
.then((result) => {
console.log('updateMember Result: ', result);
resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
});
}
// siteId: 8429a7ab-b9de-400b-a209-28ff46e22bec
// classId: 4b014ef5-3bab-4413-aaf9-b0040a70ec77
// levelId: c56231ac-2120-4a81-a30a-5d41fafb6c57
createMember(req: CreateMemberRequest): Promise<CreateMemberResponse.Result> {
return new Promise<CreateMemberResponse.Result>((resolve, reject) => {
this.__natsService
.request<CreateMemberResponse.Result>(
SUBJECT_CREATE_MEMBER,
req.serializeBinary(),
CreateMemberResponse.deserializeBinary
)
.then((result) => {
console.log('createMember Result: ', result);
resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
});
}
}

View File

@ -0,0 +1,16 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { SERVICES } from './services';
@NgModule({})
export class MemberReferrerRootModule {}
@NgModule({})
export class MemberReferrerModule {
public static forRoot(): ModuleWithProviders<MemberReferrerRootModule> {
return {
ngModule: MemberReferrerRootModule,
providers: [...SERVICES],
};
}
}

View File

@ -0,0 +1,5 @@
import { Type } from '@angular/core';
import { MemberReferrerService } from './member_referrer.service';
export const SERVICES: Type<any>[] = [MemberReferrerService];

View File

@ -0,0 +1,165 @@
import { Injectable } from '@angular/core';
import { NatsService } from 'app/core/nats/services/nats.service';
import * as nats from 'nats.ws';
import { Error } from 'app/modules/proto/protobuf/rpc_pb';
import {
ListMemberReferrersRequest,
ListMemberReferrersResponse,
CreateMemberReferrerRequest,
CreateMemberReferrerResponse,
UpdateMemberReferrerRequest,
UpdateMemberReferrerResponse,
DeleteMemberReferrerRequest,
DeleteMemberReferrerResponse,
GetMemberReferrerResponse,
GetMemberReferrerRequest,
} from 'app/modules/proto/c2se/member_referrer_pb';
import {
SUBJECT_LIST_MEMBER_REFERRERS,
SUBJECT_CREATE_MEMBER_REFERRER,
SUBJECT_UPDATE_MEMBER_REFERRER,
SUBJECT_DELETE_MEMBER_REFERRER,
SUBJECT_GET_MEMBER_REFERRER,
} from 'app/modules/proto/c2se/backend/member_referrer_pb';
@Injectable({
providedIn: 'root',
})
export class MemberReferrerService {
/**
* Constructor
*/
constructor(private __natsService: NatsService) {}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
createMemberReferrer(
memberId: string
): Promise<CreateMemberReferrerResponse.Result> {
return new Promise<CreateMemberReferrerResponse.Result>(
(resolve, reject) => {
let req = new CreateMemberReferrerRequest();
req.setMemberId(memberId);
this.__natsService
.request<CreateMemberReferrerResponse.Result>(
SUBJECT_CREATE_MEMBER_REFERRER,
req.serializeBinary(),
CreateMemberReferrerResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMemberReferrer());
return resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
return reject(e);
});
}
);
}
listMemberReferrers(): Promise<ListMemberReferrersResponse.Result> {
return new Promise<ListMemberReferrersResponse.Result>(
(resolve, reject) => {
let req = new ListMemberReferrersRequest();
this.__natsService
.request<ListMemberReferrersResponse.Result>(
SUBJECT_LIST_MEMBER_REFERRERS,
req.serializeBinary(),
ListMemberReferrersResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMemberReferrersList());
return resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
reject(e);
});
}
);
}
getMemberReferrer(id: string): Promise<GetMemberReferrerResponse.Result> {
return new Promise<GetMemberReferrerResponse.Result>((resolve, reject) => {
let req = new GetMemberReferrerRequest();
req.setId(id);
this.__natsService
.request<GetMemberReferrerResponse.Result>(
SUBJECT_GET_MEMBER_REFERRER,
req.serializeBinary(),
GetMemberReferrerResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMemberReferrer());
return resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
return reject(e);
});
});
}
updateMemberReferrer(): Promise<UpdateMemberReferrerResponse.Result> {
return new Promise<UpdateMemberReferrerResponse.Result>(
(resolve, reject) => {
let req = new UpdateMemberReferrerRequest();
this.__natsService
.request<UpdateMemberReferrerResponse.Result>(
SUBJECT_UPDATE_MEMBER_REFERRER,
req.serializeBinary(),
UpdateMemberReferrerResponse.deserializeBinary
)
.then((result) => {
console.log('success', result, result.getMemberReferrer());
return resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
return reject(e);
});
}
);
}
deleteMemberReferrer(
id: string
): Promise<DeleteMemberReferrerResponse.Result> {
return new Promise<DeleteMemberReferrerResponse.Result>(
(resolve, reject) => {
let req = new DeleteMemberReferrerRequest();
req.setId(id);
this.__natsService
.request<DeleteMemberReferrerResponse.Result>(
SUBJECT_DELETE_MEMBER_REFERRER,
req.serializeBinary(),
DeleteMemberReferrerResponse.deserializeBinary
)
.then((result) => {
console.log('success', result);
return resolve(result);
})
.catch((e: Error) => {
console.log('failed', e);
return reject(e);
});
}
);
}
}

View File

@ -12,6 +12,17 @@
</button>
</div>
<fuse-alert
class="mt-8 -mb-4"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
[type]="alert.type"
[@shake]="alert.type === 'error'"
>
{{ alert.message }}
</fuse-alert>
<div class="flex-auto p-6 sm:p-10">
<div class="max-w-3xl">
<div class="flex flex-col p-8 pt-0">
@ -24,9 +35,15 @@
<mat-form-field class="w-full mt-6">
<mat-label>추천인 코드</mat-label>
<input matInput [formControlName]="'referalCode'" />
<input
matInput
[formControlName]="'referalCode'"
(focusout)="__checkReferrerCode($event)"
/>
<mat-error
*ngIf="signupComposeForm.get('referalCode')?.hasError('required')"
*ngIf="
signupComposeForm?.get('referalCode')?.hasError('required')
"
>
추천인 코드는 필수 입력입니다.
</mat-error>
@ -47,7 +64,7 @@
/>
<mat-error
*ngIf="
signupComposeForm.get('username')?.hasError('required')
signupComposeForm?.get('username')?.hasError('required')
"
>
아이디는 필수 입력입니다.
@ -55,7 +72,7 @@
<mat-error
*ngIf="
signupComposeForm
.get('username')
?.get('username')
?.hasError('usernameDuplicate')
"
>
@ -74,7 +91,7 @@
/>
<mat-error
*ngIf="
signupComposeForm.get('nickname')?.hasError('required')
signupComposeForm?.get('nickname')?.hasError('required')
"
>
닉네임은 필수 입력입니다.
@ -82,7 +99,7 @@
<mat-error
*ngIf="
signupComposeForm
.get('nickname')
?.get('nickname')
?.hasError('nicknameDuplicate')
"
>
@ -100,7 +117,7 @@
<input matInput [formControlName]="'password'" />
<mat-error
*ngIf="
signupComposeForm.get('password')?.hasError('required')
signupComposeForm?.get('password')?.hasError('required')
"
>
비밀번호는 필수 입력입니다.
@ -114,12 +131,21 @@
<mat-error
*ngIf="
signupComposeForm
.get('passwordConfirm')
?.get('passwordConfirm')
?.hasError('required')
"
>
비밀번호 확인은 필수 입력입니다.
</mat-error>
<mat-error
*ngIf="
signupComposeForm
?.get('passwordConfirm')
?.hasError('passwordNotMatch')
"
>
비밀번호가 동일하지 않습니다.
</mat-error>
</mat-form-field>
</div>
</div>
@ -132,7 +158,7 @@
<mat-error
*ngIf="
signupComposeForm
.get('exchangePassword')
?.get('exchangePassword')
?.hasError('required')
"
>
@ -147,7 +173,7 @@
<mat-error
*ngIf="
signupComposeForm
.get('mobilePhoneNumber')
?.get('mobilePhoneNumber')
?.hasError('required')
"
>
@ -161,11 +187,17 @@
<!-- 은행명 -->
<mat-form-field class="w-1/2 pr-2">
<mat-label>은행명</mat-label>
<input matInput [formControlName]="'bankName'" />
<mat-select
[formControlName]="'bankId'"
placeholder="은행 선택"
>
<mat-option *ngFor="let bank of banks" [value]="bank.getId()">
{{ bank.getName() }}
</mat-option>
<!-- <mat-option [value]="'0'"> 국민은행 </mat-option> -->
</mat-select>
<mat-error
*ngIf="
signupComposeForm.get('bankName')?.hasError('required')
"
*ngIf="signupComposeForm?.get('bankId')?.hasError('required')"
>
은행명은 필수 입력입니다.
</mat-error>
@ -177,7 +209,9 @@
<input matInput [formControlName]="'accountNumber'" />
<mat-error
*ngIf="
signupComposeForm.get('accountNumber')?.hasError('required')
signupComposeForm
?.get('accountNumber')
?.hasError('required')
"
>
계좌번호는 필수 입력입니다.
@ -193,7 +227,9 @@
<input matInput [formControlName]="'accountHolder'" />
<mat-error
*ngIf="
signupComposeForm.get('accountHolder')?.hasError('required')
signupComposeForm
?.get('accountHolder')
?.hasError('required')
"
>
예금주는 필수 입력입니다.
@ -222,6 +258,7 @@
mat-flat-button
[color]="'primary'"
(click)="send()"
[disabled]="isSendDisable"
>
회원가입
</button>

View File

@ -1,39 +1,54 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
AbstractControl,
FormBuilder,
FormGroup,
ValidatorFn,
Validators,
} from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { fuseAnimations } from '@fuse/animations';
import { FuseAlertType } from '@fuse/components/alert';
import { BankService } from 'app/modules/polyglot/bank/services/bank.service';
import { IdentityService } from 'app/modules/polyglot/identity/services/identity.service';
import { MemberService } from 'app/modules/polyglot/member/services/member.service';
import { MemberReferrerService } from 'app/modules/polyglot/member_referrer/services/member_referrer.service';
import {
CreateMemberRequest,
CreateMemberResponse,
} from 'app/modules/proto/c2se/member_pb';
import { Bank } from 'app/modules/proto/models/bank_pb';
@Component({
selector: 'sign-up-compose',
templateUrl: './sign-up-compose.component.html',
encapsulation: ViewEncapsulation.None,
animations: fuseAnimations,
})
export class SignUpComposeComponent implements OnInit {
signupComposeForm!: FormGroup;
copyFields: { cc: boolean; bcc: boolean } = {
cc: false,
bcc: false,
};
quillModules: any = {
toolbar: [
['bold', 'italic', 'underline'],
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
['clean'],
],
isSendDisable = false;
banks!: Bank[];
alert: { type: FuseAlertType; message: string } = {
type: 'success',
message: '등록이 성공하였습니다.',
};
showAlert: boolean = false;
/**
* Constructor
*/
constructor(
public matDialogRef: MatDialogRef<SignUpComposeComponent>,
private _formBuilder: FormBuilder,
private _identityService: IdentityService
) {
this._identityService
.checkUsernameForDuplication('administrator')
.then((v) => console.log('result: ', v));
}
private _identityService: IdentityService,
private _memberService: MemberService,
private _memberReferrerService: MemberReferrerService,
private _bankService: BankService
) {}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
@ -43,17 +58,27 @@ export class SignUpComposeComponent implements OnInit {
* On init
*/
ngOnInit(): void {
this._bankService
.listBanks()
.then((result) => {
this.banks = result.getBanksList();
})
.catch((reson) => console.log(reson));
// Create the form
this.signupComposeForm = this._formBuilder.group({
referalCode: ['', [Validators.required]],
referalCode: ['maejang0lvl1', [Validators.required]],
username: ['', [Validators.required]],
nickname: ['', Validators.required],
password: ['', [Validators.required]],
passwordConfirm: ['', [Validators.required]],
exchangePassword: ['', [Validators.required]],
mobilePhoneNumber: ['', [Validators.required]],
bankName: ['', [Validators.required]],
accountNumber: ['', [Validators.required]],
password: ['1234', [Validators.required]],
passwordConfirm: [
'1234',
[Validators.required, this.checkSameForPassword()],
],
exchangePassword: ['1234', [Validators.required]],
mobilePhoneNumber: ['01012345678', [Validators.required]],
bankId: ['', [Validators.required]],
accountNumber: ['123123123', [Validators.required]],
accountHolder: ['', [Validators.required]],
});
}
@ -62,21 +87,6 @@ export class SignUpComposeComponent implements OnInit {
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Show the copy field with the given field name
*
* @param name
*/
showCopyField(name: string): void {
// Return if the name is not one of the available names
if (name !== 'cc' && name !== 'bcc') {
return;
}
// Show the field
this.copyFields[name] = true;
}
/**
* Save and close
*/
@ -102,20 +112,72 @@ export class SignUpComposeComponent implements OnInit {
* Send the message
*/
send(): void {
if (!this.signupComposeForm.valid) {
if (!this.signupComposeForm?.valid) {
return;
}
this.isSendDisable = true;
const {
referalCode,
username,
nickname,
password,
passwordConfirm,
exchangePassword,
mobilePhoneNumber,
bankId,
accountNumber,
accountHolder,
} = this.signupComposeForm?.value;
let bank_account = new CreateMemberRequest.BankAccount();
bank_account.setBankId(bankId);
bank_account.setName(accountHolder);
bank_account.setAccountNumber(accountNumber);
bank_account.setExchangePassword(exchangePassword);
const member = new CreateMemberRequest();
member.setSiteId('d7cbae26-53b6-4cb1-85a4-66b956cbe1d4');
member.setUsername(username);
member.setPassword(password);
member.setMemberClassId('4598f07a-86d1-42a4-b038-25706683a7cd');
member.setMemberLevelId('c56231ac-2120-4a81-a30a-5d41fafb6c57');
member.setReferrerMemberUsername(referalCode);
member.setNickname(nickname);
member.setMobilePhoneNumber(mobilePhoneNumber);
member.setBankAccount(bank_account);
this._memberService
.createMember(member)
.then((res: CreateMemberResponse.Result) => {
console.log(res.getMember());
this.showAlert = true;
})
.catch((e) => {
this.showAlert = true;
this.alert = { type: 'error', message: '등록에 실패하였습니다.' };
})
.finally(() => setTimeout(() => this.close(), 5000));
}
__checkReferrerCode(event: FocusEvent): void {
// const code = this.signupComposeForm.get('referalCode')?.value;
// this._memberReferrerService.getMemberReferrer(
// '6df060ad-3b30-4c6c-8e9f-9d3e30974157'
// );
}
__checkUsernameDuplicate(event: FocusEvent): void {
const username = this.signupComposeForm.get('username')?.value;
const username = this.signupComposeForm?.get('username')?.value;
// console.log(event, '::', username);
this._identityService
.checkUsernameForDuplication(username)
.then((isUse: boolean) => {
if (!!isUse) {
this.signupComposeForm
.get('username')
?.get('username')
?.setErrors({ usernameDuplicate: true });
}
// this._changeDetectorRef.markForCheck();
@ -123,17 +185,38 @@ export class SignUpComposeComponent implements OnInit {
}
__checkNickname(event: FocusEvent): void {
const nickname = this.signupComposeForm.get('nickname')?.value;
const nickname = this.signupComposeForm?.get('nickname')?.value;
this._identityService
.checkNicknameForDuplication(nickname)
.then((isUse: boolean) => {
if (!!isUse) {
this.signupComposeForm
.get('nickname')
?.get('nickname')
?.setErrors({ nicknameDuplicate: true });
}
// this._changeDetectorRef.markForCheck();
});
}
close(): void {
this.matDialogRef.close({
choice: true,
});
}
private checkSameForPassword(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (!control || !control.value || control.value === '') {
return null;
}
const password = this.signupComposeForm?.get('password')?.value as string;
const passwordConfirm = control.value as string;
if (password !== passwordConfirm) {
return { passwordNotMatch: true };
}
return null;
};
}
}

View File

@ -6,12 +6,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTabsModule } from '@angular/material/tabs';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from '@angular/material/select';
import { FuseCardModule } from '@fuse/components/card';
import { SharedModule } from 'app/shared/shared.module';
import { MainComponent } from 'app/modules/user/main/main.component';
import { FuseAlertModule } from '@fuse/components/alert';
import { COMPOSE } from './compose';
const mainRoutes: Route[] = [
@ -31,8 +34,11 @@ const mainRoutes: Route[] = [
MatTabsModule,
MatInputModule,
MatDialogModule,
MatSelectModule,
FuseCardModule,
SharedModule,
FuseAlertModule,
],
})
export class MainModule {}