diff options
| author | transtrike <transtrike@gmail.com> | 2021-02-25 20:51:24 +0200 |
|---|---|---|
| committer | transtrike <transtrike@gmail.com> | 2021-02-25 20:51:24 +0200 |
| commit | ca7e618ca3350a5cf200ae39c851b016c9088d41 (patch) | |
| tree | 04a4ee7104e55d3e070e6306901d9e2400717e4e /src/app/components/profile-settings/profile-settings.component.html | |
| parent | 118b463fc81d05467cffdf3c6de69a1e9f4e9303 (diff) | |
| download | DevHive-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.html | 234 |
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> |
