aboutsummaryrefslogtreecommitdiff
path: root/src/app/components/profile-settings/profile-settings.component.html
diff options
context:
space:
mode:
authortranstrike <transtrike@gmail.com>2021-02-25 20:51:24 +0200
committertranstrike <transtrike@gmail.com>2021-02-25 20:51:24 +0200
commitca7e618ca3350a5cf200ae39c851b016c9088d41 (patch)
tree04a4ee7104e55d3e070e6306901d9e2400717e4e /src/app/components/profile-settings/profile-settings.component.html
parent118b463fc81d05467cffdf3c6de69a1e9f4e9303 (diff)
downloadDevHive-Angular-footer.tar
DevHive-Angular-footer.tar.gz
DevHive-Angular-footer.zip
Footer added; Pages fucked upfooter
Diffstat (limited to 'src/app/components/profile-settings/profile-settings.component.html')
-rw-r--r--src/app/components/profile-settings/profile-settings.component.html234
1 files changed, 198 insertions, 36 deletions
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 502697d..f5f19bd 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,114 +3,276 @@
<div id="content" *ngIf="dataArrived">
<nav id="navigation">
<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
- <button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
+ <button
+ class="submit-btn"
+ (click)="navigateToAdminPanel()"
+ *ngIf="isAdminUser"
+ >
+ Panel
+ </button>
<button class="submit-btn" (click)="logout()">Logout</button>
</nav>
- <hr>
+ <hr />
<div class="scroll-standalone">
- <form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
- <img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
+ <form
+ id="update-profile-picture"
+ [formGroup]="updateProfilePictureFormGroup"
+ (ngSubmit)="updateProfilePicture()"
+ >
+ <img
+ id="profile-picture"
+ class="round-image"
+ [src]="user.profilePictureURL"
+ />
<div id="submit-file">
<div id="upload-file" class="submit-btn">
- <input type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
+ <input
+ type="file"
+ accept="image/*"
+ formControlName="fileUpload"
+ (change)="onFileUpload($event)"
+ />
</div>
- <button class="submit-btn" type="submit">Update profile picture</button>
+ <button class="submit-btn" type="submit">
+ Update profile picture
+ </button>
</div>
</form>
- <hr>
- <form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+ <hr />
+ <form
+ id="update-user"
+ [formGroup]="updateUserFormGroup"
+ (ngSubmit)="onSubmit()"
+ >
<div class="input-selection">
- <input type="text" class="input-field" formControlName="firstName" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="firstName"
+ required
+ />
<label class="input-field-label">First Name</label>
<div class="input-errors">
- <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
- <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</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>
</div>
<div class="input-selection">
- <input type="text" class="input-field" formControlName="lastName" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="lastName"
+ required
+ />
<label class="input-field-label">Last Name</label>
<div class="input-errors">
- <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
- <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</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>
</div>
<div class="input-selection">
- <input type="text" class="input-field" formControlName="username" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="username"
+ required
+ />
<label class="input-field-label">Username</label>
<div class="input-errors">
- <label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
- <label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</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>
</div>
<div class="input-selection">
- <input type="text" class="input-field" formControlName="email" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="email"
+ required
+ />
<label class="input-field-label">Email</label>
<div class="input-errors">
- <label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
- <label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid 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>
</div>
<div class="input-selection">
- <input type="password" class="input-field" formControlName="password" required>
+ <input
+ type="password"
+ class="input-field"
+ formControlName="password"
+ required
+ />
<label class="input-field-label">Password</label>
<div class="input-errors">
- <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>
+ <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>
</div>
- <button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
+ <button
+ type="button"
+ class="submit-btn edit-btn"
+ (click)="toggleLanguages()"
+ >
+ ▼ Edit Languages ▼
+ </button>
<div *ngIf="showLanguages">
<div class="input-selection">
- <input type="text" class="input-field" formControlName="languageInput" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="languageInput"
+ required
+ />
<div class="input-errors">
- <label class="error">Type in your desired languages, separated by a space</label>
+ <label class="error"
+ >Type in your desired languages, separated by a
+ space</label
+ >
</div>
</div>
Available languages:
<div id="all-languages">
- <div class="user-language" *ngFor="let lang of availableLanguages">
+ <div
+ class="user-language"
+ *ngFor="let lang of availableLanguages"
+ >
{{ lang.name }}
</div>
</div>
</div>
- <button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button>
+ <button
+ type="button"
+ class="submit-btn edit-btn"
+ (click)="toggleTechnologies()"
+ >
+ ▼ Edit Technologies ▼
+ </button>
<div *ngIf="showTechnologies">
<div class="input-selection">
- <input type="text" class="input-field" formControlName="technologyInput" required>
+ <input
+ type="text"
+ class="input-field"
+ formControlName="technologyInput"
+ required
+ />
<div class="input-errors">
- <label class="error">Type in your desired technologies, separated by a space</label>
+ <label class="error"
+ >Type in your desired technologies, separated by a
+ space</label
+ >
</div>
</div>
Available technologies:
<div id="all-technologies">
- <div class="user-technology" *ngFor="let tech of availableTechnologies">
+ <div
+ class="user-technology"
+ *ngFor="let tech of availableTechnologies"
+ >
{{ tech.name }}
</div>
</div>
</div>
- <button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button>
+ <button id="update-profile-btn" class="submit-btn" type="submit">
+ Update profile
+ </button>
<app-success-bar></app-success-bar>
<app-error-bar></app-error-bar>
</form>
- <hr>
+ <hr />
<div id="confirm-delete" *ngIf="deleteAccountConfirm">
- Are you sure you want to delete your account?<br>This is permanent!
+ Are you sure you want to delete your account?<br />This is
+ permanent!
</div>
- <button class="submit-btn delete-btn" (click)="deleteAccount()">Delete account</button>
+ <button class="submit-btn delete-btn" (click)="deleteAccount()">
+ Delete account
+ </button>
</div>
+ <app-footer></app-footer>
</div>