profile percentage & mobile percentage masks

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

@@ -23,14 +23,6 @@
                 </app-form-control>
             </div>
 
-            <div class="form-group position-relative">
-                <label>Confirm your new password</label>
-                <app-form-control>
-                    <input [type]="showPassword ? 'text' : 'password'" name="confirmPassword" required class="form-control" [(ngModel)]="registerForm.confirmPassword">
-                </app-form-control>
-                <small *ngIf="form.valid && registerForm.password !== registerForm.confirmPassword" class="text-danger">Passwords do not match.</small>
-            </div>
-
             <div class="was-referred form-group">
                 <span>Were you referred by another member?</span>
                 <div class="mt-sm-top" style="white-space: nowrap;">
@@ -62,7 +54,7 @@
 
             <div class="d-flex justify-content-center">
                 <app-overlay [isActive]="isLoading"></app-overlay>
-                <button class="action-btn" (click)="register()" [disabled]="isLoading || !registerForm.terms || !registerForm.policy || registerForm.password !== registerForm.confirmPassword || form.invalid">
+                <button class="action-btn" (click)="register()" [disabled]="isLoading || !registerForm.terms || !registerForm.policy || form.invalid">
                     Sign up
                 </button>
             </div>

frontend/angular/src/app/components/my-career-web/auth/register/register.component.ts

@@ -20,7 +20,6 @@ export class RegisterComponent extends BaseComponent implements OnInit {
         lastname: '',
         email: '',
         password: '',
-        confirmPassword: '',
         ReferralCode: '',
         was_referred: false,
         terms: false,
@@ -45,7 +44,7 @@ export class RegisterComponent extends BaseComponent implements OnInit {
     }
 
     register(): void {
-        if (this.form.invalid || this.registerForm.password !== this.registerForm.confirmPassword) {
+        if (this.form.invalid) {
             return this.hs.validateAllFormFields(this.form);
         }
         this.registerForm.firstname = 'AA';

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

@@ -5,7 +5,7 @@
             <div class="home-header-card-content">
                 We need some information from you so you can fill out your career profile and get job hunting.
             </div>
-            <div class="home-header-card-action">I'm ready to get started</div>
+            <div class="home-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
         </div>
     </div>
     <div class="home-body">
@@ -73,7 +73,7 @@
             <div class="mobile-header-heading">Hey Mark, Welcome to Matchd Career.</div>
             <div class="mobile-header-card">
                 We need some information from you so you can fill out your career profile and get job hunting.
-                <div class="mobile-header-card-action">I'm ready to get started</div>
+                <div class="mobile-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
             </div>
         </div>
 

frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.html

@@ -29,9 +29,10 @@
         <div class="col-md-6 form-group">
             <label>Mobile</label>
             <app-form-control>
-                <input type="text"  class="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
+                <p-inputMask mask="9999 999 9999" styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
+                </p-inputMask>
             </app-form-control>
-            <div class="mobile-no-msg" *ngIf="!careerProfile.Mobile">
+            <div class="mobile-no-msg" *ngIf="!careerProfile.Mobile && !isLoading">
                 You did not enter a mobile phone number. We occasionally try to contact you via text message.
             </div>
         </div>

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

@@ -2,12 +2,12 @@
     <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="user-profile">
         <i class="fa fa-bell" *ngIf="!isMobileView"></i>
-        <div class="user-profile-avatar-wrapper">
+        <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder}">
             <div class="user-profile-avatar">
                 <img src="assets/my-career-web/svgs/avatar.svg" alt="">
             </div>
         </div>
-        <div class="user-profile-label">Profile 67% complete</div>
+        <div class="user-profile-label">Profile {{careerProfile.CompletedPercentage || 0}}% complete</div>
 
         <hr style="border-bottom: 1px solid #E0E0E0; margin: 24px 0;">
 

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

@@ -14,7 +14,7 @@
             height: 112px;
             margin: 0 auto;
             border-radius: 100%;
-            background: linear-gradient(270deg, #1469A2 50%, transparent 50%), linear-gradient(-90deg, #1469A2 50%, #EAECEE 50%);
+            background-color: #1469A2;
             padding: 4px;
 
             .user-profile-avatar {

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

@@ -15,6 +15,7 @@ export class ProfileTasksComponent extends BaseComponent implements OnInit {
 
     assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
     careerProfile = new CareerProfileModel();
+    avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
 
     constructor(
         private hs: HelperService,
@@ -30,6 +31,7 @@ export class ProfileTasksComponent extends BaseComponent implements OnInit {
             .pipe(takeUntil(this.componentInView))
             .subscribe(profile => {
                 this.careerProfile = this.us.cloneObject(profile);
+                this.setProfileCompletion();
             })
     }
 
@@ -39,6 +41,7 @@ export class ProfileTasksComponent extends BaseComponent implements OnInit {
             .pipe(takeUntil(this.componentInView))
             .subscribe(response => {
                 this.careerProfile = response;
+                this.setProfileCompletion();
                 this.isLoading = false;
             }, err => {
                 this.hs.handleHttpError(err);
@@ -46,4 +49,10 @@ export class ProfileTasksComponent extends BaseComponent implements OnInit {
             })
     }
 
+    setProfileCompletion(): void {
+        const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
+        const degree =  percentage <= 180 ? 90 + percentage : percentage - 90;
+        this.avatarBorder = `linear-gradient(${degree}deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
+    }
+
 }

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

@@ -14,6 +14,7 @@ import { PersonalDetailsService } from '../services/personal-details.service';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { ButtonModule } from 'primeng/button';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
+import { InputMaskModule } from 'primeng/inputmask';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -25,6 +26,7 @@ const MODULES = [
     ToastModule,
     InputSwitchModule,
     ButtonModule,
+    InputMaskModule
 ];
 
 const COMPONENTS = [

frontend/angular/src/app/components/my-career-web/models/career-profile.model.ts

@@ -8,6 +8,7 @@ export class CareerProfileModel extends BaseModel {
     GoogleAddress: string;
     Skype: string;
     Candidate = new CandidateModel();
+    CompletedPercentage: number;
     IsGoogleConnected: boolean;
     IsLinkedInConnected: boolean;
 }

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

@@ -15,5 +15,6 @@
     @import "primeng/dropdown";
     @import "primeng/switch";
     @import "primeng/button";
+    @import "primeng/mask";
 
 }

frontend/angular/src/styles/my-career-styles/primeng/_mask.scss

+p-inputMask {
+    input {
+        width: 100% !important;
+        background-image: none !important;
+        padding: 6px 12px;
+    }
+}