src/Client/src/app/app.routes.ts

@@ -14,6 +14,7 @@ import { JobsComponent } from './pages/main/jobs/jobs.component';
 import { ResumesComponent } from './pages/main/resumes/resumes.component';
 import { JobNewComponent } from './pages/main/jobs/new/jobnew.component';
 import { JobEditComponent } from './pages/main/jobs/edit/jobedit.component';
+import { CompanyConnectComponent } from './pages/main/company/connect/companyconnect.component';
 
 export const routes: Routes = [
 
@@ -26,6 +27,9 @@ export const routes: Routes = [
     { path: "jobs/new", component: JobNewComponent },
     { path: "jobs/edit", component: JobEditComponent },
 
+    // Company
+    { path: "company/connect", component: CompanyConnectComponent },
+
     // Account stuff
     { path: "account/forgotpassword", component: ForgotPasswordComponent },
     { path: "account/resetpassword", component: ResetPasswordComponent },

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

@@ -0,0 +1,93 @@
+.title-text {
+    width: 100%;
+    text-align: center;
+}
+
+form {
+    display: grid;
+    grid-template-areas: "stack";
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    transition: 0.5s;
+}
+
+.center {
+    width: 100%;
+    display: grid;
+    justify-content: center;
+}
+
+.sub-frame {
+    position: relative;
+    grid-area: stack;
+    transition: 0.5s;
+    width: 100%;
+    text-align: center;
+}
+
+.content-frame {
+    background-color: #00000088;
+    border-radius: 10px;
+    padding: 40px;
+    break-inside: avoid;
+    margin-bottom: 20px;
+}
+
+.footer-frame {
+    background-color: #00000044;
+    border-radius: 10px;
+    padding: 10px;
+    break-inside: avoid;
+    margin-bottom: 20px;
+}
+
+.split {
+    column-count: 2;
+}
+
+.half-frame {
+    width: 400px;
+    break-inside: avoid;
+}
+
+.content-frame label {
+    color: #FFF;
+}
+
+.content-frame textarea {
+    width: calc(100% - 40px);
+    margin: 0 20px;
+    height: 200px;
+    resize: none;
+}
+
+.content-frame input {
+    width: calc(50% - 24px);
+    margin: 0 calc(25% + 10px);
+    margin-bottom: 20px;
+    appearance: textfield;
+}
+
+.content-frame input:focus ~ label {
+    color: green;
+}
+
+.content-frame select {
+    width: calc(50% - 24px);
+    margin: 0 calc(25% + 10px);
+    margin-bottom: 20px;
+}
+
+.tile-frame {
+    column-count: 4;
+    column-gap: 20px;
+    padding: 20px;
+    width: calc(100% - 40px);
+}
+
+.tile{
+    background-color: var(--Mistox-Dark)\);
+    height: 40px;
+    break-inside: avoid;
+}

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

@@ -0,0 +1,147 @@
+<div class="title-text">
+    <h1>Connect To Company</h1>
+</div>
+<form (ngSubmit)="PostNewCompany(newListing)">
+    <!-- Company Name -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>Company Name</label>
+                <input name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+            <div class="footer-frame">
+                <span>
+                    This should be your actual company name. It will be public on all the job postings you make.
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Company URL -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>Company Website URL</label>
+                <input 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>
+            <div class="footer-frame">
+                <span>This should be a link to your companies URL</span><br />
+                <span>so that people searching for your company</span><br />
+                <span>can find it with ease</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Company LOGO URL -->
+    <div #step class="sub-frame">
+        <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" />
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+            <div class="footer-frame">
+                <span>This should be a link to your companies Logo</span><br />
+                <span>This will show on all your job listings</span><br />
+            </div>
+        </div>
+    </div>
+
+    <!-- Contact -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame split">
+                <div class="half-frame">
+                    <label>Company Email</label>
+                    <input name="email" [(ngModel)]="newListing.email" type="text" />
+                </div>
+                <div class="half-frame">
+                    <label>Company Phone Number</label>
+                    <input name="email" [(ngModel)]="newListing.phone" type="text" />
+                </div>
+            </div>
+            <button type="button" (click)="prevStep()">Back</button>
+            <button type="button" (click)="nextStep()">Next</button>
+        </div>
+    </div>
+
+    <!-- Location -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <h2>Job Location</h2>
+            <div class="content-frame split">
+                <div class="half-frame">
+                    <label>City</label>
+                    <input name="city" [(ngModel)]="newListing.city" type="text" />
+                </div>
+                <div class="half-frame">
+                    <label>2 Letter Country</label>
+                    <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" />
+                </div>
+                <div class="half-frame">
+                    <label>2 Letter State/Region</label>
+                    <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" />
+                </div>
+                <div class="half-frame">
+                    <label>Postal Code</label>
+                    <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
+                </div>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Description -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>Description</label>
+                <textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Submit -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <a [href]="newListing.websiteURL">{{ newListing.name }}</a>
+                <div class="split">
+                    <a href="mailto:{{ newListing.email }}">{{ newListing.email }}</a>
+                    <a href="tel:{{ newListing.phone }}">{{ newListing.phone }}</a>
+                </div>
+                <div><img [src]="newListing.logoURL" /></div>
+                <div class="split">
+                    <div class="half-frame">
+                        <span>city: {{ newListing.city }}</span>
+                    </div>
+                    <div class="half-frame">
+                        <span>country: {{ newListing.country }}</span>
+                    </div>
+                </div>
+                <div class="split">
+                    <div class="half-frame">
+                        <span>state: {{ newListing.stateOrRegion }}</span>
+                    </div>
+                    <div class="half-frame">
+                        <span>postal code: {{ newListing.postalCode }}</span>
+                    </div>
+                </div>
+                <div>
+                    <span>{{ newListing.description }}</span>
+                </div>
+            </div>
+            <div class="content-frame">
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="submit">CREATE COMPANY</button>
+            </div>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,77 @@
+import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { Authentication } from 'app/services/Authentication';
+import { Company } from 'app/models/Company';
+
+@Component({
+  selector: 'main-company-connect',
+  templateUrl: './companyconnect.component.html',
+  styleUrls: [ './companyconnect.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class CompanyConnectComponent {
+
+  @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
+  currentStep: number = 0;
+
+  public newListing: Company = new Company();
+  public ErrorMsg: string = "";
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+    this.title.setTitle("Company - Connect | BoredCareers");
+  };
+
+  ngAfterViewInit(){
+    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+      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%';
+      }
+    });
+  }
+
+  nextStep(){
+    this.currentStep += 1;
+    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
+      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) => {
+      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%';
+      }
+    });
+  }
+
+  PostNewCompany(company: Company){
+    this.http.post("api/company?newCompany=true", company).subscribe({
+      next: data => {
+        this.router.navigate([""]);
+      },
+      error: err => {
+        alert("Failed to create the job listing. Err: " + err.error);
+      }
+    });
+  }
+
+}

src/Server/Controllers/CompanyController.cs

@@ -17,19 +17,30 @@ namespace BoredCareers.Controllers {
                 if (company != null) {
                     return Ok(company);
                 }
+                return NotFound("Company doesn't exist");
             }
-            return NotFound();
+            return NotFound("Not logged in");
         }
 
         [HttpPost]
-        public async Task<IActionResult> SetCompany([FromBody] Company company) {
+        public async Task<IActionResult> SetCompany([FromBody] Company company, [FromQuery] bool newCompany = false) {
             if (isLoggedIn()) {
+                if (newCompany) {
+                    Company? test = await _databaseService.GetCompany(company.ID);
+                    if (test == null) {
+                        await _databaseService.SetCompany(company);
+                        return Ok();
+                    }
+                    return NotFound("The company already exists");
+                } else {
                     if (await isLoggedInUserEmployeeOf(company.ID)) {
                         await _databaseService.SetCompany(company);
                         return Ok();
                     }
+                    return NotFound("You are not an employee of company");
                 }
-            return NotFound();
+            }
+            return NotFound("Not logged in");
         }
 
         [HttpDelete]
@@ -39,8 +50,9 @@ namespace BoredCareers.Controllers {
                     await _databaseService.DeleteCompany(CompanyID);
                     return Ok();
                 }
+                return NotFound("You are not an employee of company");
             }
-            return NotFound();
+            return NotFound("Not logged in");
         }
 
     }