회원조회 및 회원정보 수정 화면
This commit is contained in:
Park Byung Eun
parent
78f5f37a3c
commit
b9040b6fb8
|
|
@ -77,6 +77,34 @@
|
|||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
||||
<div *ngIf="!!loggedIn">
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-1 ml-auto">
|
||||
<div
|
||||
class="justify-self-end font-medium tracking-tight text-secondary"
|
||||
>
|
||||
회원아이디
|
||||
</div>
|
||||
<div class="font-medium">test님</div>
|
||||
<div
|
||||
class="justify-self-end font-medium tracking-tight text-secondary"
|
||||
>
|
||||
보유금액
|
||||
</div>
|
||||
<div class="font-medium">74,100원</div>
|
||||
<div
|
||||
class="justify-self-end font-medium tracking-tight text-secondary"
|
||||
>
|
||||
콤프
|
||||
</div>
|
||||
<div class="font-medium">3,100P</div>
|
||||
<div
|
||||
class="justify-self-end font-medium tracking-tight text-secondary"
|
||||
>
|
||||
쪽지
|
||||
</div>
|
||||
<div class="font-medium">(0)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
|
||||
<button
|
||||
|
|
@ -85,23 +113,28 @@
|
|||
[color]="'primary'"
|
||||
(click)="
|
||||
__onClickCompose(
|
||||
!!loggedIn ? composeMenuType.signOut : composeMenuType.signIn
|
||||
!loggedIn ? composeMenuType.signIn : composeMenuType.modifyMember
|
||||
)
|
||||
"
|
||||
>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">{{ !loggedIn ? "로그인" : "로그아웃" }}</span>
|
||||
<span class="ml-2 mr-1">{{ !loggedIn ? "로그인" : "정보수정" }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
*ngIf="!loggedIn"
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="__onClickCompose(composeMenuType.signup)"
|
||||
(click)="
|
||||
__onClickCompose(
|
||||
!loggedIn ? composeMenuType.signup : composeMenuType.signOut
|
||||
)
|
||||
"
|
||||
>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">회원가입</span>
|
||||
<span class="ml-2 mr-1">{{
|
||||
!loggedIn ? "회원가입" : "로그아웃"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,12 +25,14 @@ import { VendorService } from 'app/modules/polyglot/api/services/vendor.service'
|
|||
import { ListGamesResponse } from 'app/modules/proto/c2se/api/game_pb';
|
||||
import { Game } from 'app/modules/proto/models/api/game_pb';
|
||||
import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
|
||||
import { ModifyMemberComposeComponent } from '../compose/compose/modify-member-compose.component';
|
||||
import { SlotGameComposeComponent } from '../compose/compose/slot-game-compose.component';
|
||||
|
||||
export enum ComposeMenuType {
|
||||
signIn = 'signIn',
|
||||
signup = 'signup',
|
||||
signOut = 'signOut',
|
||||
signIn = 'SignIn',
|
||||
signup = 'Signup',
|
||||
signOut = 'SignOut',
|
||||
modifyMember = 'ModifyMember',
|
||||
deposit = 'Deposit',
|
||||
withdraw = 'Withdraw',
|
||||
notice = 'Notice',
|
||||
|
|
@ -98,6 +100,8 @@ export class HomeComponent implements OnInit {
|
|||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!!this.loggedIn) {
|
||||
}
|
||||
this._vendorService.listVendors().then((result) => {
|
||||
this.liveCasinos = result
|
||||
.getVendorsList()
|
||||
|
|
@ -172,6 +176,9 @@ export class HomeComponent implements OnInit {
|
|||
case ComposeMenuType.signup:
|
||||
selectType = SignUpComposeComponent;
|
||||
break;
|
||||
case ComposeMenuType.modifyMember:
|
||||
selectType = ModifyMemberComposeComponent;
|
||||
break;
|
||||
case ComposeMenuType.deposit:
|
||||
selectType = DepositComposeComponent;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.comp
|
|||
import { SignUpComposeComponent } from './sign-up-compose.component';
|
||||
import { SignInComposeComponent } from './sign-in-compose.component';
|
||||
import { SlotGameComposeComponent } from './slot-game-compose.component';
|
||||
import { ModifyMemberComposeComponent } from './modify-member-compose.component';
|
||||
|
||||
export const COMPOSE = [
|
||||
DepositComposeComponent,
|
||||
|
|
@ -20,4 +21,5 @@ export const COMPOSE = [
|
|||
SignUpComposeComponent,
|
||||
SignInComposeComponent,
|
||||
SlotGameComposeComponent,
|
||||
ModifyMemberComposeComponent,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
||||
>
|
||||
<div class="text-lg font-medium">회원가입</div>
|
||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:x'"
|
||||
></mat-icon>
|
||||
</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">
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col items-start overflow-y-auto"
|
||||
[formGroup]="modifyMemberComposeForm"
|
||||
>
|
||||
<!-- 아이디 -->
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex items-center w-full mt-6">
|
||||
<!-- Icon name -->
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>아이디</mat-label>
|
||||
<input matInput [formControlName]="'username'" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Icon color -->
|
||||
<!-- 닉네임 -->
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>닉네임</mat-label>
|
||||
<input matInput [formControlName]="'nickname'" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>현재 비밀번호</mat-label>
|
||||
<input matInput [formControlName]="'currentPassword'" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex items-center w-full mt-6">
|
||||
<!-- 비밀번호 -->
|
||||
<mat-form-field class="w-1/2 pr-2">
|
||||
<mat-label>비밀번호</mat-label>
|
||||
<input matInput [formControlName]="'password'" />
|
||||
<mat-error
|
||||
*ngIf="
|
||||
modifyMemberComposeForm
|
||||
?.get('password')
|
||||
?.hasError('required')
|
||||
"
|
||||
>
|
||||
비밀번호는 필수 입력입니다.
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- 비밀번호 확인 -->
|
||||
<mat-form-field class="w-1/2 pl-2">
|
||||
<mat-label>비밀번호 확인</mat-label>
|
||||
<input matInput [formControlName]="'passwordConfirm'" />
|
||||
<mat-error
|
||||
*ngIf="
|
||||
modifyMemberComposeForm
|
||||
?.get('passwordConfirm')
|
||||
?.hasError('required')
|
||||
"
|
||||
>
|
||||
비밀번호 확인은 필수 입력입니다.
|
||||
</mat-error>
|
||||
<mat-error
|
||||
*ngIf="
|
||||
modifyMemberComposeForm
|
||||
?.get('passwordConfirm')
|
||||
?.hasError('passwordNotMatch')
|
||||
"
|
||||
>
|
||||
비밀번호가 동일하지 않습니다.
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
||||
style="align-items: center"
|
||||
>
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button
|
||||
class="ml-auto sm:ml-0"
|
||||
mat-stroked-button
|
||||
(click)="discard()"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()"
|
||||
[disabled]="isSendDisable"
|
||||
>
|
||||
회원가입
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
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,
|
||||
UpdateMemberForPasswordRequest,
|
||||
UpdateMemberForPasswordResponse,
|
||||
} from 'app/modules/proto/c2se/member_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'modify-member-compose',
|
||||
templateUrl: './modify-member-compose.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: fuseAnimations,
|
||||
})
|
||||
export class ModifyMemberComposeComponent implements OnInit {
|
||||
modifyMemberComposeForm!: FormGroup;
|
||||
|
||||
isSendDisable = false;
|
||||
|
||||
alert: { type: FuseAlertType; message: string } = {
|
||||
type: 'success',
|
||||
message: '수정이 성공하였습니다.',
|
||||
};
|
||||
|
||||
showAlert: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public matDialogRef: MatDialogRef<ModifyMemberComposeComponent>,
|
||||
private _formBuilder: FormBuilder,
|
||||
private _identityService: IdentityService,
|
||||
private _memberService: MemberService,
|
||||
private _memberReferrerService: MemberReferrerService
|
||||
) {}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
// Create the form
|
||||
this.modifyMemberComposeForm = this._formBuilder.group({
|
||||
username: [{ value: '', disabled: true }],
|
||||
nickname: [{ value: '', disabled: true }],
|
||||
currentPassword: ['1234', [Validators.required]],
|
||||
password: ['1234', [Validators.required]],
|
||||
passwordConfirm: [
|
||||
'1234',
|
||||
[Validators.required, this.checkSameForPassword()],
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Save and close
|
||||
*/
|
||||
saveAndClose(): void {
|
||||
// Save the message as a draft
|
||||
this.saveAsDraft();
|
||||
|
||||
// Close the dialog
|
||||
this.matDialogRef.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Discard the message
|
||||
*/
|
||||
discard(): void {}
|
||||
|
||||
/**
|
||||
* Save the message as a draft
|
||||
*/
|
||||
saveAsDraft(): void {}
|
||||
|
||||
/**
|
||||
* Send the message
|
||||
*/
|
||||
send(): void {
|
||||
if (!this.modifyMemberComposeForm?.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSendDisable = true;
|
||||
|
||||
const { username, nickname, currentPassword, password, passwordConfirm } =
|
||||
this.modifyMemberComposeForm?.value;
|
||||
|
||||
this._memberService
|
||||
.updateMemberForPassword('', password)
|
||||
.then((res: UpdateMemberForPasswordResponse.Result) => {
|
||||
this.showAlert = true;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.showAlert = true;
|
||||
this.alert = { type: 'error', message: '수정에 실패하였습니다.' };
|
||||
})
|
||||
.finally(() => setTimeout(() => this.close(), 5000));
|
||||
}
|
||||
|
||||
__checkCurrentPassword(event: FocusEvent): void {
|
||||
const code = this.modifyMemberComposeForm.get('currentPassword')?.value;
|
||||
|
||||
// this._memberReferrerService.getMemberReferrerByCode(code).then((result) => {
|
||||
// if (!result.getMemberReferrer()) {
|
||||
// this.modifyMemberComposeForm
|
||||
// ?.get('referalCode')
|
||||
// ?.setErrors({ notExistReferalCode: true });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
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.modifyMemberComposeForm?.get('password')
|
||||
?.value as string;
|
||||
const passwordConfirm = control.value as string;
|
||||
|
||||
if (password !== passwordConfirm) {
|
||||
return { passwordNotMatch: true };
|
||||
}
|
||||
return null;
|
||||
};
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user