profile.component.html
4.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<mat-card>
<mat-toolbar color="primary">Operator</mat-toolbar>
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>Profile</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxLayout="row wrap">
<div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name" value="alex" disabled>
</mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name" value="paul" disabled>
</mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="User Name" value="alex123" disabled>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap">
<div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Email address" value="alex@ymail.com" disabled>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Role" [(value)]="selectedRole" disabled>
<mat-option value="SUPERADMIN">Super Admin</mat-option>
<mat-option value="ADMIN">Admin</mat-option>
<mat-option value="MARKETING">Marketing</mat-option>
<mat-option value="DEVELOPER">Developer</mat-option>
<mat-option value="QA">QA</mat-option>
<mat-option value="CS">CS</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Change Password</ng-template>
<mat-card-content>
<form [formGroup]="form" >
<div fxLayout="row wrap">
<div class="pb-1" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="User Name" [formControl]="form.controls['uname']" required>
<mat-error *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include username.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="Old Password" type="password" [formControl]="form.controls['old_password']" required>
<mat-error
*ngIf="form.controls['old_password'].hasError('required') && form.controls['old_password'].touched"
class="mat-text-warn">You must include old password.</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap">
<div class="pb-1" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="New Password" type="password" [formControl]="form.controls['new_password']"required>
<mat-error
*ngIf="form.controls['new_password'].hasError('required') && form.controls['new_password'].touched"
class="mat-text-warn">You must include new password.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="Confirm Password" type="password" [formControl]="form.controls['confirm_password']"required>
<mat-error
*ngIf="form.controls['confirm_password'].hasError('required') && form.controls['confirm_password'].touched"
class="mat-text-warn">You must include confirm password.</mat-error>
<mat-error *ngIf="form.controls['confirm_password'].errors?.equalTo" class="mat-text-warn">Passwords
do not match.</mat-error>
</mat-form-field>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
</mat-tab-group>
</mat-card>