blob: 39f332557911077022cf4daa063b0081251658f3 (
plain) (
blame)
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<div class="container-xl px-4 mt-1">
<hr class="mt-0 mb-4">
<div class="row">
<div class="col-xl-4">
<!-- Profile picture card-->
<div class="card mb-4 mb-xl-0">
<div class="card-header">Moj profil</div>
<div class="card-body text-center">
<div class=" image d-flex flex-column justify-content-center align-items-center">
<!-- Profile picture image-->
<img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
<!-- User's info -->
<span>@ {{this.user.username}}</span>
<span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span>
</div>
</div>
</div>
<!-- Password Change card -->
<div class="card mt-3">
<div class="card-header">Promena lozinke</div>
<div class="card-body">
<form>
<div class="row">
<!-- Form Row-->
<div class="row gx-3 mb-3">
<!-- Form Group (password)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Važeća lozinka</mat-label>
<input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
</mat-form-field>
<small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small>
<small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (new password)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Nova lozinka</mat-label>
<input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1">
</mat-form-field>
<small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
<small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
<!-- Form Row-->
<div class="row gx-3 mb-3">
<div class="col-md-6">
<div class="col text-center">
<!-- Save changes button-->
<button mat-raised-button color="basic" (click)="savePasswordChanges()">Promeni lozinku</button>
</div>
</div>
<!-- Form Group (new password again)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Ponovo nova lozinka</mat-label>
<input matInput id="inputNewPasswordAgain" name="inputNewPasswordAgain" placeholder="" type="password" [(ngModel)]="this.newPass2">
</mat-form-field>
<small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
<small *ngIf="wrongNewPass2Bool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Info Change card -->
<div class="col-xl-8">
<!-- Account details card-->
<div class="card mb-4">
<div class="card-header">Osnovni podaci</div>
<div class="card-body">
<form>
<!-- Form Row-->
<div class="row gx-3 mb-3">
<!-- Form Group (username)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Korisničko ime (kako će ostali korisnici videti tvoje ime)</mat-label>
<input matInput id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
</mat-form-field>
<small *ngIf="wrongUsernameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (email address)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Email adresa</mat-label>
<input matInput id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
</mat-form-field>
<small *ngIf="wrongEmailBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
<!-- Form Row-->
<div class="row gx-3 mb-3">
<!-- Form Group (first name)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Ime</mat-label>
<input matInput id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
</mat-form-field>
<small *ngIf="wrongFirstNameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (last name)-->
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Prezime</mat-label>
<input matInput id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
</mat-form-field>
<small *ngIf="wrongLastNameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
<div>
<label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
<div class="container">
<div class="card-group">
<!--bootstrap card with 3 horizontal images-->
<div class="row overflow-auto" style="max-height: 255px;">
<div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
<img src="{{picture.path}}">
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col text-center">
<!-- Save changes button-->
<button mat-raised-button color="basic" (click)="saveInfoChanges()">Sačuvaj izmene</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4">
</div>
</div>
</div>
|
