blob: 557d69fd5a77dd9d8939846de538e04176499a58 (
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
|
<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">
<label class="small mb-1" for="inputPassword">Važeća lozinka</label>
<input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
<small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
<small *ngIf="wrongOldPassBool" class="form-text text-danger">Pogrešan format.</small>
</div>
<!-- Form Group (new password)-->
<div class="col-md-6">
<label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
<input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
<small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
<small *ngIf="wrongNewPass1Bool" class="form-text text-danger">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 class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
</div>
</div>
<!-- Form Group (new password again)-->
<div class="col-md-6">
<label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
<input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
<small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
<small *ngIf="wrongNewPass2Bool" class="form-text text-danger">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">
<label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label>
<input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
<small *ngIf="wrongUsernameBool" class="form-text text-danger">Pogrešan format.</small>
</div>
<!-- Form Group (email address)-->
<div class="col-md-6">
<label class="small mb-1" for="inputEmailAddress">Email adresa</label>
<input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
<small *ngIf="wrongEmailBool" class="form-text text-danger">Pogrešan format.</small>
</div>
</div>
<!-- Form Row-->
<div class="row gx-3 mb-3">
<!-- Form Group (first name)-->
<div class="col-md-6">
<label class="small mb-1" for="inputFirstName">Ime</label>
<input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
<small *ngIf="wrongFirstNameBool" class="form-text text-danger">Pogrešan format.</small>
</div>
<!-- Form Group (last name)-->
<div class="col-md-6">
<label class="small mb-1" for="inputLastName">Prezime</label>
<input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
<small *ngIf="wrongLastNameBool" class="form-text text-danger">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: 200px;">
<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 class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4">
</div>
</div>
</div>
|
