src/Client/src/app/pages/main/company/connect/companyconnect.component.css

@@ -1,3 +1,21 @@
+button {
+    width: 150px;
+    border-radius: 5px;
+    margin: 10px;
+    text-align: center;
+    padding: 15px 0;
+    transition: .5s;
+    background-color: #0000;
+    border: 1px solid var(--Mistox-White);
+    color: var(--Mistox-White);
+    text-decoration: none;
+}
+
+    button:hover {
+        background-color: #00000044;
+        color: var(--Mistox-Light);
+    }
+
 .title-text {
     width: 100%;
     text-align: center;

src/Client/src/app/pages/main/company/connect/companyconnect.component.html

@@ -7,7 +7,7 @@
         <div class="center">
             <div class="content-frame">
                 <label>Company Name</label>
-                <input name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
+                <input class="input-field" name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
             <div class="footer-frame">
@@ -22,7 +22,7 @@
         <div class="center">
             <div class="content-frame">
                 <label>Company Website URL</label>
-                <input name="url" [(ngModel)]="newListing.websiteURL" type="text" placeholder="https://mistox.com/" />
+                <input class="input-field" name="url" [(ngModel)]="newListing.websiteURL" type="text" placeholder="https://mistox.com/" />
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
@@ -37,7 +37,7 @@
         <div class="center">
             <div class="content-frame">
                 <label>Company Logo URL</label>
-                <input name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
+                <input class="input-field" name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
@@ -55,11 +55,11 @@
                 <div class="split">
                     <div class="half-frame">
                         <label>Company Email</label>
-                        <input name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
+                        <input class="input-field" name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
                     </div>
                     <div class="half-frame">
                         <label>Company Phone Number</label>
-                        <input name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
+                        <input class="input-field" name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
                     </div>
                 </div>
                 <button type="button" (click)="prevStep()">Back</button>
@@ -78,19 +78,19 @@
                 <div class="split">
                     <div class="half-frame">
                         <label>City</label>
-                        <input name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
+                        <input class="input-field" name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
                     </div>
                     <div class="half-frame">
                         <label>2 Letter Country</label>
-                        <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
+                        <input class="input-field" name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
                     </div>
                     <div class="half-frame">
                         <label>2 Letter State/Region</label>
-                        <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
+                        <input class="input-field" name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
                     </div>
                     <div class="half-frame">
                         <label>Postal Code</label>
-                        <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
+                        <input class="input-field" name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
                     </div>
                 </div>
                 <button type="button" (click)="prevStep()">Back</button>
@@ -107,7 +107,7 @@
         <div class="center">
             <div class="content-frame">
                 <label>Description</label>
-                <textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea>
+                <textarea class="input-field" name="description" [(ngModel)]="newListing.description" type="text"></textarea>
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
@@ -143,8 +143,8 @@
                         <span>postal code: {{ newListing.postalCode }}</span>
                     </div>
                 </div>
-                <div>
+                <div *ngFor="let descLine of newListing.description.split('\n')">
-                    <span>{{ newListing.description }}</span>
+                    <span>{{ descLine }}</span><br />
                 </div>
             </div>
             <div class="content-frame">

src/Client/src/app/pages/main/company/connect/companyconnect.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
+import { Component, ElementRef, HostListener, QueryList, ViewChildren } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -26,6 +26,20 @@ export class CompanyConnectComponent {
   };
 
   ngAfterViewInit(){
+    this.formSteps.changes.subscribe(() => {
+      this.updateUI(0);
+    });
+    this.updateUI(0);
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  handleGlobalKeyDown(event: KeyboardEvent){
+    if (event.key === 'Tab'){
+      event.preventDefault();
+    }
+  }
+
+  updateUI(subItem: number){
     this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
       if (i === this.currentStep) {
         step.nativeElement.style.left = '0%';
@@ -35,35 +49,82 @@ export class CompanyConnectComponent {
         step.nativeElement.style.left = '100%';
       }
     });
+    setTimeout(() => {
+      (this.formSteps.get(this.currentStep)?.nativeElement.querySelectorAll('.input-field')[subItem] as HTMLElement)?.focus();
+    }, 500);
   }
 
   nextStep(){
     this.currentStep += 1;
-    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+    this.updateUI(0);
-      if (i === this.currentStep) {
-        step.nativeElement.style.left = '0%';
-      } else if (i < this.currentStep) {
-        step.nativeElement.style.left = '-100%';
-      } else {
-        step.nativeElement.style.left = '100%';
-      }
-    });
   }
 
   prevStep(){
     this.currentStep -= 1;
-    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+    this.updateUI(0);
-      if (i === this.currentStep) {
+  }
-        step.nativeElement.style.left = '0%';
+
-      } else if (i < this.currentStep) {
+  isNullOrEmpty(str: string | null | undefined): boolean {
-        step.nativeElement.style.left = '-100%';
+    return !str || str.trim().length === 0;
-      } else {
+  }
-        step.nativeElement.style.left = '100%';
+
-      }
+  focusFrame(frameNum: number, subItem: number): void {
-    });
+    this.currentStep = frameNum;
+    this.updateUI(subItem);
   }
 
   PostNewCompany(company: Company){
+
+    if (this.isNullOrEmpty(company.name)){
+      this.focusFrame(0, 0);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.websiteURL)){
+      this.focusFrame(1, 0);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.logoURL)){
+      this.focusFrame(2, 0);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.email)){
+      this.focusFrame(3, 0);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.phone)){
+      this.focusFrame(3, 1);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.city)){
+      this.focusFrame(4, 0);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.country)){
+      this.focusFrame(4, 1);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.stateOrRegion)){
+      this.focusFrame(4, 2);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.postalCode)){
+      this.focusFrame(4, 3);
+      return;
+    }
+
+    if (this.isNullOrEmpty(company.description)){
+      this.focusFrame(5, 0);
+      return;
+    }
+
     this.http.post("api/company?newCompany=true", company).subscribe({
       next: data => {
         this.router.navigate([""]);