client feedback fixes

frontend/angular/src/app/my-career-web/auth/login/login.component.html

@@ -15,15 +15,12 @@
                 </app-form-control>
             </div>
 
-            <div class="form-group">
+            <div class="form-group position-relative">
                 <label>Password</label>
                 <app-form-control>
                     <input type="password" name="password" required class="form-control" [(ngModel)]="loginForm.password">
                 </app-form-control>
-            </div>
-
-            <div class="text-center">
-                <span class="forgot-password mc-nav-link" routerLink="/my-career-web/auth/forgot-password">Forgot password?</span>
+                <span [ngClass]="{'show-pass' : loginForm.password}" class="forgot-password mc-nav-link" routerLink="/my-career-web/auth/forgot-password">Forgot?</span>
             </div>
 
             <div class="d-flex justify-content-center">
@@ -42,7 +39,7 @@
 
 
             <div class="d-flex justify-content-center">
-                <button class="action-btn linkedin-login" (click)="socialMediaLogin('linkedIn')" [disabled]="isLoading">Sign in with Linkedin</button>
+                <button class="action-btn linkedin-login" (click)="socialMediaLogin('linkedIn')" [disabled]="isLoading">Sign in with LinkedIn</button>
             </div>
         </form>
     </div>

frontend/angular/src/app/my-career-web/auth/login/login.component.scss

@@ -2,4 +2,18 @@
 
 .auth-wrapper {
     margin-bottom: 45px;
+
+    .forgot-password {
+        position: absolute;
+        bottom: 10px;
+        right: 15px;
+        font-weight: bold;
+        opacity: 0;
+        transition: .3s;
+
+
+        &.show-pass {
+            opacity: 1;
+        }
+    }
 }

frontend/angular/src/app/my-career-web/config/constants.ts

@@ -69,3 +69,61 @@ export const EXTERNAL_LINKS = {
     TERMS_CONDITIONS: 'https://www.matchd.com/career-terms',
     PRIVACY_POLICY: 'https:/www.matchd.com/privacy',
 };
+
+
+export const PROFILE_TASKS = [
+    {
+        label: 'Personal Details',
+        text: 'We need some information from you so that you can fill out your Career Profile.',
+        firstTime: 'We need some information from you so you can fill out your career profile and get job hunting.',
+        button: 'I’m ready to get started',
+        firstTimeBtn: 'Get Started',
+        link: '/my-career-web/dashboard/personal-details',
+        key: 'CompletedPercentage',
+        inProgress: false,
+        completed: false,
+        started: false
+    },
+    {
+        label: 'Work Strengths',
+        text: 'Complete the Work Strengths questionnaire to find out your individual work strengths.',
+        button: 'Do the questionnaire',
+        link: '/my-career-web/assessments/work-style',
+        key: 'CompletedPercentageWS',
+        inProgress: false,
+        completed: false,
+        allowEditField: 'AllowResubmitWS',
+        started: false
+    },
+    {
+        label: 'Career Values',
+        text: 'Now complete the Career Values questionnaire to create your values profile.',
+        button: 'Do the questionnaire',
+        link: '/my-career-web/assessments/work-preference',
+        key: 'CompletedPercentageWP',
+        inProgress: false,
+        completed: false,
+        allowEditField: 'AllowResubmitWP',
+        started: false
+    },
+    {
+        label: 'Career History',
+        text: 'Add your work, education and experience to finish your Career Profile.',
+        button: 'Add career history',
+        link: '/my-career-web/career-history/personal-data',
+        key: 'CompletedPercentageCH',
+        inProgress: false,
+        completed: false,
+        started: false
+    },
+    {
+        label: 'Diversity',
+        text: 'Include your diversity profile for employers that use affirmative action policy.',
+        button: 'Update my profile',
+        link: '/my-career-web/assessments/diversity-profile',
+        key: 'CompletedPercentageDiv',
+        inProgress: false,
+        completed: false,
+        started: false
+    }
+];

frontend/angular/src/app/my-career-web/dashboard/home/home.component.html

@@ -13,13 +13,13 @@
         <div class="home-body-card">
 
             <div class="home-body-card-content">
-                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
-                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.text}}</span>
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection?.firstTime">{{contentSection?.firstTime}}</span>
             </div>
 
             <div class="home-body-card-action" [routerLink]="activeSection?.link">
-                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
-                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection.firstTimeBtn">{{contentSection?.firstTimeBtn}}</span>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.button}}</span>
             </div>
 
         </div>
@@ -91,12 +91,12 @@
             </div>
 
             <div class="mobile-header-card">
-                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
-                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.text}}</span>
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection?.firstTime">{{contentSection?.firstTime}}</span>
 
                 <div class="mobile-header-card-action" [routerLink]="activeSection?.link">
-                    <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
-                    <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
+                    <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection.firstTimeBtn">{{contentSection?.firstTimeBtn}}</span>
+                    <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.button}}</span>
                 </div>
 
             </div>

frontend/angular/src/app/my-career-web/dashboard/home/home.component.ts

@@ -23,6 +23,7 @@ export class HomeComponent extends BaseComponent implements OnInit {
         {link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv'}
     ];
     activeSection;
+    contentSection: {text: string, button: string, link: string, firstTime: string, firstTimeBtn: string};
 
     constructor(
         private personalDetailsService: PersonalDetailsService,
@@ -38,6 +39,19 @@ export class HomeComponent extends BaseComponent implements OnInit {
             .subscribe(profile => {
                 this.careerProfile = this.utilsService.cloneObject(profile);
             });
+        this.personalDetailsService.currentTab$
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(tab => {
+                if (tab) {
+                    this.contentSection = tab;
+                } else {
+                    this.contentSection = {
+                        text: 'Your Career Profile is complete. You can use your Career Profile to show employers your natural strengths.',
+                        button: 'Show my profile',
+                        link: ''
+                    }
+                }
+            });
     }
 
     getCareerProfile(): void {

frontend/angular/src/app/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts

@@ -4,6 +4,7 @@ import { PersonalDetailsService } from '../../services/personal-details.service'
 import { takeUntil } from 'rxjs/operators';
 import { UtilsService } from '../../../oneit/services/utils.service';
 import { CareerProfileModel } from '../../models/career-profile.model';
+import { PROFILE_TASKS } from '../../config/constants';
 
 @Component({
     selector: 'app-profile-tasks',
@@ -16,13 +17,7 @@ export class ProfileTasksComponent extends BaseComponent {
     avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
     backgroundColor = '#1469A2';
     assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
-    profileTasks = [
-        {label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', inProgress: false, completed: false, started: false},
-        {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', inProgress: false, completed: false, allowEditField: 'AllowResubmitWS', started: false},
-        {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', inProgress: false, completed: false, allowEditField: 'AllowResubmitWP', started: false},
-        {label: 'Career History', link: '/my-career-web/career-history/personal-data', key: 'CompletedPercentageCH', inProgress: false, completed: false, started: false},
-        {label: 'Diversity', link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv', inProgress: false, completed: false, started: false}
-    ];
+    profileTasks = PROFILE_TASKS;
 
     constructor(
         private personalDetailsService: PersonalDetailsService,
@@ -66,6 +61,7 @@ export class ProfileTasksComponent extends BaseComponent {
                 t.inProgress = true;
             }
         });
+        this.personalDetailsService.currentTab = this.profileTasks.find(t => t.inProgress || !this.careerProfile[t.key]);
         const currentTask = this.profileTasks.find(t => !this.careerProfile[t.key]);
         currentTask.started = true;
         // const percentage =  (this.careerProfile.CompletedPercentage || 0) * 3.6;

frontend/angular/src/app/my-career-web/services/personal-details.service.ts

@@ -21,6 +21,16 @@ export class PersonalDetailsService {
         this._detailsUpdated.next(profile);
     }
 
+    private _currentTabSubject = new Subject<any>();
+
+    get currentTab$(): Observable<any> {
+        return this._currentTabSubject.asObservable();
+    }
+
+    set currentTab(value: any) {
+        this._currentTabSubject.next(value);
+    }
+
     constructor(
         private enumService: EnumService,
         private utilsService: UtilsService,

frontend/angular/src/assets/data/config.json

@@ -21,7 +21,7 @@
     },
     "showMenuIcon": true,
     "defaultMenuIcon": "dashboard",
-    "showErrorAfterTouched": false,
+    "showErrorAfterTouched": true,
     "fetchErrorMsgsFromServer": false,
     "loadMessageSource": false,
     "mobileBreakpoint": 1024,
@@ -30,4 +30,4 @@
         "time" : "HH:mm",
         "dateTime" : "d MMM yyyy HH:mm"
     }
-}
+}
\ No newline at end of file

frontend/angular/src/styles/my-career-styles/_misc.scss

@@ -3,6 +3,7 @@
     border-bottom: 1px solid transparent;
     transition: .3s;
     cursor: pointer;
+    font-weight: normal;
 
     &:hover {
         border-bottom-color: $primaryColor;