Merge pull request #4 from Team-Kaleidoscope/click-sec-info

Click sec info

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>