diff options
Diffstat (limited to 'src/app/components/profile-settings/profile-settings.component.html')
| -rw-r--r-- | src/app/components/profile-settings/profile-settings.component.html | 234 |
1 files changed, 36 insertions, 198 deletions
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index f5f19bd..502697d 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -3,276 +3,114 @@ <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> |