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