회원수정 화면 수정
This commit is contained in:
byung eun park
parent
cd12420b11
commit
636f10eae1
|
|
@ -40,17 +40,8 @@
|
|||
<div class="content-card">
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<mat-tab-group fxLayout="column" fxFlex>
|
||||
<mat-tab label="User Details">
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
<div class="section pb-48">
|
||||
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="m-0 mr-16 secondary-text"
|
||||
>account_circle</mat-icon
|
||||
>
|
||||
<div class="h2 secondary-text">기본정보</div>
|
||||
</div>
|
||||
|
||||
<mat-tab-group fxLayout="column">
|
||||
<mat-tab label="회원정보">
|
||||
<div
|
||||
class="mb-24"
|
||||
fxLayout="column"
|
||||
|
|
@ -58,167 +49,116 @@
|
|||
fxLayout.gt-md="row"
|
||||
>
|
||||
<form
|
||||
class="tab-content mb-24 p-24 mr-24"
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start"
|
||||
fxFlex="1 0 auto"
|
||||
name="userForm"
|
||||
[formGroup]="userForm"
|
||||
fxLayout="column"
|
||||
fxFlex="1 0 auto"
|
||||
class="tab-content mb-24"
|
||||
(ngSubmit)="registUser()"
|
||||
>
|
||||
<div class="h2 mb-24">기본정보</div>
|
||||
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel="always"
|
||||
fxFlex="40"
|
||||
class="w-40-p"
|
||||
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
|
||||
<mat-label>아이디</mat-label>
|
||||
<input matInput formControlName="username" />
|
||||
<mat-icon matSuffix class="secondary-text"
|
||||
>account_circle</mat-icon
|
||||
>
|
||||
<mat-label>아이디 (disabled)</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="username"
|
||||
formControlName="username"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
<mat-error>아이디는 필수 사항입니다!</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" fxFlex="50" class="pl-4">
|
||||
<mat-label>핸드폰</mat-label>
|
||||
<input matInput formControlName="phone" />
|
||||
<mat-icon matSuffix class="secondary-text">phone</mat-icon>
|
||||
<mat-error>핸드폰은 필수 사항입니다!</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel=""
|
||||
fxFlex="40"
|
||||
class="w-40-p"
|
||||
>
|
||||
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
|
||||
<mat-label>패스워드</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
formControlName="password"
|
||||
type="password"
|
||||
formControlName="password"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel=""
|
||||
fxFlex="40"
|
||||
class="mr-16"
|
||||
>
|
||||
<mat-label>이메일</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="이메일"
|
||||
name="email"
|
||||
formControlName="email"
|
||||
type="email"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel=""
|
||||
fxFlex="40"
|
||||
class="mr-16"
|
||||
>
|
||||
<mat-label>연락처</mat-label>
|
||||
<mat-icon matSuffix class="secondary-text"
|
||||
>phone</mat-icon
|
||||
>vpn_key</mat-icon
|
||||
>
|
||||
<mat-error>
|
||||
패스워드는 필수 사항입니다!
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="50" class="pl-4">
|
||||
<mat-label>패스워드 (확인)</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="연락처"
|
||||
name="phone"
|
||||
formControlName="phone"
|
||||
type="tel"
|
||||
type="password"
|
||||
formControlName="passwordConfirm"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
<mat-icon matSuffix class="secondary-text"
|
||||
>vpn_key</mat-icon
|
||||
>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel=""
|
||||
fxFlex="40"
|
||||
class="mr-16"
|
||||
>
|
||||
<mat-form-field appearance="outline" fxFlex="50">
|
||||
<mat-label>닉네임</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="닉네임"
|
||||
name="nickname"
|
||||
formControlName="nickname"
|
||||
type="text"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
<input matInput formControlName="nickname" required />
|
||||
<mat-icon matSuffix class="secondary-text"
|
||||
>account_circle</mat-icon
|
||||
>
|
||||
<mat-error>닉네임은 필수 사항입니다!!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="50" class="px-8">
|
||||
<mat-label>이메일</mat-label>
|
||||
<input matInput formControlName="email" />
|
||||
<mat-icon matSuffix class="secondary-text">mail</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div
|
||||
fxLayout="row"
|
||||
class="textarea-wrapper"
|
||||
fxLayout="row wrap"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field appearance="outline" fxFlex="40">
|
||||
<mat-label>Notes</mat-label>
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>비고</mat-label>
|
||||
<textarea
|
||||
name="notes"
|
||||
formControlName="notes"
|
||||
matInput
|
||||
type="text"
|
||||
max-rows="4"
|
||||
formControlName="descriptions"
|
||||
placeholder="부가적인 설명"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="submit-button"
|
||||
aria-label="회원수정"
|
||||
>
|
||||
<button mat-raised-button class="mat-accent">
|
||||
Update Status
|
||||
회원수정
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
class="mb-24"
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start center"
|
||||
fxLayout.gt-md="row"
|
||||
>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<button mat-raised-button class="mat-accent">
|
||||
Update Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- / HORIZONTAL STEPPER EXAMPLE -->
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,9 +75,10 @@ export class UserDetailComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
],
|
||||
password: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
phone: ''
|
||||
email: this.user.email,
|
||||
nickname: this.user.nickname,
|
||||
phone: this.user.phone,
|
||||
descriptions: this.user.descriptions
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user