src/Client/src/app/app.ts

@@ -20,7 +20,6 @@ export class App {
     this.devMode = isDevMode();
     this.route.queryParams.subscribe(params => {
       this.loginToken = params['LoginToken'];
-      console.log("LoginToken : " + this.loginToken);
       if (this.loginToken){
         this.http.post( "api/account/loginticket", JSON.stringify(this.loginToken), { headers: {'Content-Type': 'application/json'} } ).subscribe({
           next: async() => {

src/Client/src/app/pages/company/editor/editor.component.html

@@ -60,11 +60,11 @@
                 <div class="split">
                     <div class="half-frame">
                         <label>Company Email</label>
-                        <input class="input-field" name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
+                        <input class="input-field" name="email" [(ngModel)]="newListing.email" type="text" (ngModelChange)="validateEmail(newListing.email)" placeholder="Questions@mistox.com" />
                     </div>
                     <div class="half-frame">
                         <label>Company Phone Number</label>
-                        <input class="input-field" name="phone" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
+                        <input class="input-field" name="phone" [(ngModel)]="newListing.phone" type="tel" (ngModelChange)="validatePhone(newListing.phone)" placeholder="+1 800-000-0000" />
                     </div>
                 </div>
                 <button type="button" (click)="prevStep()">Back</button>

src/Client/src/app/pages/company/editor/editor.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from 'app/services/Authentication';
 import { Company } from 'app/models/Company';
+import { Validation } from 'app/services/Validation';
 
 @Component({
   selector: 'main-company-editor',
@@ -23,7 +24,7 @@ export class CompanyEditorComponent {
   public ErrorMsg: string = "";
   MaxFileMB: number = 3;
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, public validator: Validation ) {
     this.title.setTitle("Company - Editor | BoredCareers");
     if (!auth.isLoggedIn){
       router.navigate(["/"]);
@@ -54,6 +55,18 @@ export class CompanyEditorComponent {
     this.updateUI(0);
   }
 
+  validatePhone(input: string){
+    let result = this.validator.validatePhoneNumber(input);
+    this.newListing.phone = result[1];
+  }
+
+  validateEmail(input: string){
+    let result = this.validator.validateEmail(input);
+    if (result[0]){
+      this.newListing.email = result[1];
+    }
+  }
+
   @HostListener('window:keydown', ['$event'])
   handleGlobalKeyDown(event: KeyboardEvent){
     if ( event.key === 'Tab' ){
@@ -122,51 +135,73 @@ export class CompanyEditorComponent {
   PostNewCompany(company: Company){
 
     if (this.isNullOrEmpty(company.name)){
+      this.ErrorMsg = "Comany name is blank";
       this.focusFrame(0, 0);
       return;
     }
 
     if (this.isNullOrEmpty(company.websiteURL)){
+      this.ErrorMsg = "Website URL is blank";
       this.focusFrame(1, 0);
       return;
     }
 
     if (this.isNullOrEmpty(company.logo)){
+      this.ErrorMsg = "Logo is blank";
       this.focusFrame(2, 0);
       return;
     }
 
     if (this.isNullOrEmpty(company.email)){
+      this.ErrorMsg = "Email is blank";
+      this.focusFrame(3, 0);
+      return;
+    }
+
+    if (this.validator.validateEmail(company.email)[0]){
+      this.ErrorMsg = "Email is invalid";
       this.focusFrame(3, 0);
       return;
     }
 
     if (this.isNullOrEmpty(company.phone)){
+      this.ErrorMsg = "Phone number is blank";
+      this.focusFrame(3, 1);
+      return;
+    }
+
+    if (this.validator.validatePhoneNumber(company.phone)[0]){
+      this.ErrorMsg = "Phone number is invalid";
       this.focusFrame(3, 1);
       return;
     }
 
     if (this.isNullOrEmpty(company.city)){
+      this.ErrorMsg = "City is blank";
       this.focusFrame(4, 0);
       return;
     }
 
     if (this.isNullOrEmpty(company.country)){
+      this.ErrorMsg = "Country is blank";
       this.focusFrame(4, 1);
       return;
     }
 
     if (this.isNullOrEmpty(company.stateOrRegion)){
+      this.ErrorMsg = "State or Region is blank";
       this.focusFrame(4, 2);
       return;
     }
 
     if (this.isNullOrEmpty(company.postalCode)){
+      this.ErrorMsg = "Postal Code is blank";
       this.focusFrame(4, 3);
       return;
     }
 
     if (this.isNullOrEmpty(company.description)){
+      this.ErrorMsg = "Description is blank";
       this.focusFrame(5, 0);
       return;
     }

src/Client/src/app/pages/resumes/editor/editor.component.html

@@ -23,8 +23,8 @@
                     </div>
                 </div>
                 <div class="header-right">
-                    <input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" placeholder="Email Address" />
+                    <input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" (ngModelChange)="validateEmail(resume.email)" placeholder="Email Address" />
-                    <input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="Phone number" />
+                    <input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" (ngModelChange)="validatePhone(resume.phoneNumber)" type="tel" placeholder="Phone number" />
                 </div>
             </div>
 

src/Client/src/app/pages/resumes/editor/editor.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Resume, ResumeCertification, ResumeEducation, ResumeExperience, ResumeExperienceBullet, ResumeLanguage, ResumeMilitary, ResumeMilitaryBullet, ResumeProject, ResumeSkill } from 'app/models/Resume';
 import { Authentication } from 'app/services/Authentication';
+import { Validation } from 'app/services/Validation';
 
 @Component({
   selector: 'main-resume-editor',
@@ -20,7 +21,7 @@ export class ResumesEditorComponent {
 
   public ErrorMsg: string = "";
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, public validator: Validation ) {
     this.title.setTitle("Resume - Editor | BoredCareers");
     if (!this.auth.isLoggedIn){
       this.router.navigate(["/"]);
@@ -87,6 +88,20 @@ export class ResumesEditorComponent {
     });
   }
 
+  validatePhone(input: string){
+    let result = this.validator.validatePhoneNumber(input);
+    if (result[0]){
+      this.resume.phoneNumber = result[1];
+    }
+  }
+
+  validateEmail(input: string){
+    let result = this.validator.validateEmail(input);
+    if (result[0]){
+      this.resume.email = result[1];
+    }
+  }
+
   PrintResume(){
     const divToPrint = document.getElementsByClassName("paper")[0];
 

src/Client/src/app/services/Validation.ts

@@ -0,0 +1,35 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({ providedIn: 'root' })
+export class Validation {
+
+    constructor(){ }
+
+    validatePhoneNumber(input: string): [boolean, string] {
+        var sanitized = input.replace(/\D/g, '');
+        if (sanitized.length < 10){
+            let formatted = sanitized.replace(/(\d{3})(?=\d{3})/g, '$1-').replace(/(\d{4})(?=\d{1,4}$)/, '$1-');
+            return [false, formatted];
+        } else if (sanitized.length === 10) {
+            let result = `(${sanitized.slice(0, 3)})${sanitized.slice(3, 6)}-${sanitized.slice(6, 10)}`;
+            return [true, result];
+        } else if (sanitized.length > 10 && sanitized.length < 14) {
+            let countryCode = sanitized.slice(0, sanitized.length - 10);
+            let areaCode = sanitized.slice(sanitized.length - 10, sanitized.length - 7);
+            let firstPart = sanitized.slice(sanitized.length - 7, sanitized.length - 4);
+            let secondPart = sanitized.slice(sanitized.length - 4);
+            let result = `+${countryCode} (${areaCode})${firstPart}-${secondPart}`;
+            return [true, result];
+        }else{
+            return [false, input];
+        }
+    }
+
+    emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    validateEmail(input: string): [boolean, string] {
+        const corrected = input.trim().toLowerCase();
+        const success = this.emailRegex.test(corrected);
+        return [success, corrected];
+    }
+
+}