blob: fd2d0c550f51d8030b180e3902ef7a459c842580 (
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
|
<app-navbar></app-navbar>
<app-loading *ngIf="!dataArrived"></app-loading>
<main class="scroll-standalone under-navbar centered-content flex-col">
<section class="card width-full" *ngIf="this.isAdminUser">
<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="goToAdminPanel()">
Go to admin panel
</button>
</section>
<form class="flex-row card width-full font-size-dot9 margin-top-bot-dot7" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
<section class="flexible flex-col flex-center-align-items flex-justify-center padding-side-font">
<input class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-dot4" type="submit" *ngIf="newProfilePicture.size > 0">
Update profile picture
</button>
</section>
</form>
<form class="flex-col card width-full padding-dot6" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
<section class="flex-col">
<div class="flex-row">
<label class="flexible fg-focus">First Name</label>
<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
</div>
<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="firstName" required>
</section>
<section class="flex-col">
<div class="flex-row">
<label class="flexible fg-focus">Last Name</label>
<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
</div>
<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="lastName" required>
</section>
<section class="flex-col">
<div class="flex-row">
<label class="flexible fg-focus">Username</label>
<label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
<label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
</div>
<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="username" required>
</section>
<section class="flex-col">
<div class="flex-row">
<label class="flexible fg-focus">Email</label>
<label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
<label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
</div>
<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="email" required>
</section>
<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleLanguages()">
▼ Edit Languages ▼
</button>
<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showLanguages">
<section class="padding-right-1">
<div class="none-message" *ngIf="chosenLanguages.length === 0">
You haven't chosen any languages!
</div>
<div class="border-faded-slim border-bottom-only" *ngIf="chosenLanguages.length > 0">
Chosen languages:
</div>
<div class="flex-row margin-top-dot4">
<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of chosenLanguages" (click)="langClick(lang.name)">
{{ lang.name }}
</div>
</div>
</section>
<section>
<div class="none-message" *ngIf="availableLanguages.length === 0">
No other languages available!
</div>
<div class="border-faded-slim border-bottom-only" *ngIf="availableLanguages.length > 0">
Available languages:
</div>
<div class="flex-row margin-top-dot4">
<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
{{ lang.name }}
</div>
</div>
</section>
</section>
<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
▼ Edit Technologies ▼
</button>
<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showTechnologies">
<section class="padding-right-1">
<div class="none-message" *ngIf="chosenTechnologies.length === 0">
You haven't chosen any technologies!
</div>
<div class="border-faded-slim border-bottom-only" *ngIf="chosenTechnologies.length > 0">
Chosen technologies:
</div>
<div class="flex-row margin-top-dot4">
<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of chosenTechnologies" (click)="techClick(tech.name)">
{{ tech.name }}
</div>
</div>
</section>
<section>
<div class="none-message" *ngIf="availableTechnologies.length === 0">
No other technologies available!
</div>
<div class="border-faded-slim border-bottom-only" *ngIf="availableTechnologies.length > 0">
Available technologies:
</div>
<div class="flex-row margin-top-dot4">
<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
{{ tech.name }}
</div>
</div>
</section>
</section>
<section class="flex-col margin-top-dot5">
<div class="flex-row">
<label class="flexible fg-focus">Current Password</label>
<label *ngIf="updateUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
<label *ngIf="updateUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
<label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
</div>
<input type="password" class="fancy-input border-faded-slim border-bottom-only" formControlName="password" required>
</section>
<section class="margin-top-bot-dot3">
<app-success-bar></app-success-bar>
<app-error-bar></app-error-bar>
</section>
<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
Update profile
</button>
</form>
<section class="card width-full">
<div class="margin-bot-dot5 text-centered fg-error" *ngIf="deleteAccountConfirm">
Are you sure you want to delete your account?<br>This is permanent!
</div>
<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 fg-error" (click)="deleteAccount()">
Delete account
</button>
</section>
</main>
|
