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 | 107 |
1 files changed, 64 insertions, 43 deletions
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index dd3d186..1471859 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -54,59 +54,80 @@ </div> <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="email" required> </section> - <section class="flex-col"> - <div class="flex-row"> - <label class="flexible fg-focus">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> <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 *ngIf="showLanguages"> - <div class="margin-top-dot5"> - <label class="error"> - Type in your desired languages, separated by a space - </label> - <input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required> - </div> - <div class="none-message" *ngIf="availableLanguages.length === 0"> - No languages available! - </div> - <div *ngIf="availableLanguages.length > 0"> - Available languages: - </div> - <div class="flex-row margin-top-dot4"> - <div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of availableLanguages"> - {{ lang.name }} + <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> + <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 *ngIf="showTechnologies"> - <div class="margin-top-dot5"> - <label class="error"> - Type in your desired technologies, separated by a space - </label> - <input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required> - </div> - <div class="none-message" *ngIf="availableTechnologies.length === 0"> - No technologies available! - </div> - <div *ngIf="availableTechnologies.length > 0"> - Available technologies: - </div> - <div class="flex-row margin-top-dot4"> - <div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of availableTechnologies"> - {{ tech.name }} + <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 input-selection"> + <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]="showCurrentPassword ? 'text' : 'password'" class="fancy-input border-faded-slim border-bottom-only padding-right-1dot5" formControlName="password" required> + <button type="button" class="show-password-button hover-half-opacity click-effect" (click)="toggleShowPassword(0)"> + <img [src]="showCurrentPassword ? '/assets/icons/tabler-icon-eye-off.svg' : '/assets/icons/tabler-icon-eye.svg'"> + </button> </section> <section class="margin-top-bot-dot3"> <app-success-bar></app-success-bar> |