Merge branch 'main' into Vt-logoPlacing

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,38 @@
+## Title
+<!-- Enter your ticket number and text, and make a link to it -->
+
+## Describe your changes: 
+<!-- Describe what changes you did, and include screenshots if necessary -->
+
+## Type of changes:
+<!-- What type of changes did you make? -->
+
+## Checklist before requesting a review
+
+* [ ] I created a new branch before starting with this ticket?
+* [ ] I commented the issue after finish in the Frontend Team Board?
+* [ ] I moved the card to Quality Assurance after finish?
+
+## Did you run into any issues?
+<!-- Remove the line below that you don't need -->
+- No, issues encountered.
+- Yes, I encountered issues. (Please describe below).
+<!-- Description of the issues you run into -->
+
+## Screenshots:
+<!-- Remove the line below that you don't need -->
+- No screenshots to include.
+- Yes, the screenshots are included in the table below.
+
+| Before | After |
+---------|--------
+|        |       |
+<!-- Insert screenshot of code/UI before/after -->
+
+## Additional information:
+<!-- Fill in other information here -->
+
+## Feedback
+<!-- Remove the line below that you don't need -->
+- No, I don't want feedback.
+- Yes, I want feedback.

.github/workflows/static.yml

@@ -42,7 +42,7 @@ jobs:
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: './'
+          path: './dist'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1

README.md

@@ -6,20 +6,21 @@ Documentations: [Link](./documentation/)
 
 ## Installing and starting the project
 
-Installing
-```
-npm i
-```
-
-Build
-```
-npm run build
-```
-
-Run locally
-```
-npm run dev
-```
+### Update! (by Hans M. Andreassen - Aug22FT)
+
+Vite configured.
+To simplify the changes made, some scripts have been removed and the already-used scripts have been changed to run Vite.
+This was done so developers already using this won't have to adapt to new scripts and commands.
+
+**NB! New HTML files must be added to the `vite.config.js` rollupOptions inputs!**
+
+- Installation: `npm i`
+
+- Local server: `npm run dev` or `npm run watch`
+
+- Production build: `npm run build` (creates the dist folder and compiles)
+
+- Production build preview: `npm run build-preview` (launches a local server that shows the project as it will show when deployed)
 
 ## Dependencies
 

index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="" />
     <title></title>
     <!-- Links and scripts -->
-    <link href="/css/index.css" rel="stylesheet" />
+
     <script defer src="./index.js" type="module"></script>
     <script
       defer

index.js

@@ -12,6 +12,7 @@ import { setRegisterFormListenerCompany } from './src/js/listeners/auth/index.js
 import { createListing } from './src/js/listeners/post/createListing.js';
 import { postApplication } from './src/js/listeners/post/postApplication.js';
 import { showListings } from './src/js/views/admin/showListings.js';
+import '/src/scss/index.scss';
 
 displayBaseLayout();
 

package.json

@@ -11,13 +11,11 @@
     "format": "prettier --write 'src/**/*.js'",
     "lint": "eslint src/**/*.js",
     "lint-fix": "eslint src/**/*.js --cache --fix",
-    "build": "sass src/scss:css",
-    "watch": "sass --watch src/scss:css & live-server",
-    "start": "sass --watch src/scss:css & vite",
+    "build": "vite build",
+    "watch": "vite",
+    "build-preview": "vite preview",
     "prepare": "husky install",
-    "dev": "vite",
-    "vite-build": "vite build",
-    "vite-preview": "vite preview"
+    "dev": "vite"
   },
   "repository": {
     "type": "git",

pages/TBD/client/application/index.html

@@ -5,12 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Description -->
-    <meta name="description" content="Companies view of the applicants submitted application form." />
+    <meta
+      name="description"
+      content="Companies view of the applicants submitted application form."
+    />
     <title>Client - View Application</title>
     <!-- Links and scripts -->
-    <link href="/css/index.css" rel="stylesheet" />
+
     <script defer src="./index.js" type="module"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body id="singleApplicationPage">
     <header></header>
@@ -19,11 +27,17 @@
       <div class="h-100 align-items-center d-flex mb-5">
         <!-- Card -->
         <div class="card m-auto clientAplication">
-          <img class="card-img-top" id="applicationImage" src="https://via.placeholder.com/450" alt="Application image" />
+          <img
+            class="card-img-top"
+            id="applicationImage"
+            src="https://via.placeholder.com/450"
+            alt="Application image"
+          />
           <div class="card-header pt-4">
             <h3 class="card-title ms-3" id="clientApplicationTitle">Listing Title</h3>
             <p class="card-text ms-3">
-              <span id="contactPerson"> Contact person </span> / <span id="companyName"> Company name </span> /
+              <span id="contactPerson"> Contact person </span> /
+              <span id="companyName"> Company name </span> /
               <span id="loaction"> Location </span>
             </p>
           </div>
@@ -42,9 +56,16 @@ <h2 class="d-inline" id="aplicantsName">Applicants name</h2>
             <h5 class="font-bold">Lorem</h5>
 
             <div class="card-text">
-              <p class="mb-2" id="applicationText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi id tempus porttitor, risus erat euismod risus, at dapibus neque turpis vel est. Sed accumsan, nibh id euismod bibendum, elit est placerat nibh, euismod rhoncus nisl nisl in est.</p>
+              <p class="mb-2" id="applicationText">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi id tempus
+                porttitor, risus erat euismod risus, at dapibus neque turpis vel est. Sed accumsan,
+                nibh id euismod bibendum, elit est placerat nibh, euismod rhoncus nisl nisl in est.
+              </p>
               <br />
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi id tempus porttitor, risus erat euismod risus, at dapibus neque turpis vel est.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi id tempus
+                porttitor, risus erat euismod risus, at dapibus neque turpis vel est.
+              </p>
             </div>
 
             <h5 class="font-bold my-4" id="apllicantsName">Applicants/Student Name</h5>
@@ -57,13 +78,19 @@ <h5 class="font-bold my-4" id="apllicantsName">Applicants/Student Name</h5>
 
               <div>
                 <img src="/public/assets/icons/link.svg" alt="Placeholder Icon" />
-                <a href="#" class="text-dark" id="applicationLink2">Filename (link added by student)</a>
+                <a href="#" class="text-dark" id="applicationLink2"
+                  >Filename (link added by student)</a
+                >
               </div>
             </div>
 
             <form id="clientApplication">
-              <a href="#" class="btn btn-theme-secondary px-5 m-1" id="clientApplicationOffer">Offer</a>
-              <a href="#" class="btn btn-secondary px-5 m-1" id="clientAplicationRejects">Rejects</a>
+              <a href="#" class="btn btn-theme-secondary px-5 m-1" id="clientApplicationOffer"
+                >Offer</a
+              >
+              <a href="#" class="btn btn-secondary px-5 m-1" id="clientAplicationRejects"
+                >Rejects</a
+              >
             </form>
           </div>
           <!-- Card body ends -->

pages/TBD/index.html

@@ -8,21 +8,47 @@
     <meta name="description" content="page for creating an offer" />
     <title>Offer Form</title>
     <!-- Links and scripts -->
-    <link href="/css/index.css" rel="stylesheet" />
+
     <script defer src="./index.js" type="module"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body id="offerPage" class="d-flex flex-column min-vh-100 gap-4">
     <header></header>
     <main class="container-fluid flex-fill">
       <!-- Example button for opening modal -->
-      <button type="button" class="btn btn-secondary fw-semibold border-0 rounded-0" data-auth="openModalBtn" data-bs-toggle="modal" data-bs-target="#offerModal">Create Offer</button>
+      <button
+        type="button"
+        class="btn btn-secondary fw-semibold border-0 rounded-0"
+        data-auth="openModalBtn"
+        data-bs-toggle="modal"
+        data-bs-target="#offerModal"
+      >
+        Create Offer
+      </button>
       <!-- The offer form in a modal -->
-      <div class="modal fade" id="offerModal" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+      <div
+        class="modal fade"
+        id="offerModal"
+        data-bs-backdrop="static"
+        data-bs-keyboard="true"
+        tabindex="-1"
+        aria-labelledby="staticBackdropLabel"
+        aria-hidden="true"
+      >
         <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content bg-light">
             <div class="modal-header border-0">
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
             </div>
             <!-- Text and inputs that appears in the modal-->
             <div class="p-3 p-md-5 col-12 position-relative">
@@ -33,30 +59,76 @@ <h1 class="text-center">Job Offer</h1>
                 <!-- Contact Person -->
                 <div class="form-group mt-4">
                   <label for="inputName" class="fw-semibold">Contact Person</label>
-                  <input required type="text" class="form-control bg-theme-grey rounded-0" id="inputName" name="name" data-auth="inputName" title="Please input the Contact Persons name" />
+                  <input
+                    required
+                    type="text"
+                    class="form-control bg-theme-grey rounded-0"
+                    id="inputName"
+                    name="name"
+                    data-auth="inputName"
+                    title="Please input the Contact Persons name"
+                  />
                 </div>
                 <!-- Email -->
                 <div class="form-group mt-3">
                   <label for="inputEmail" class="fw-semibold">Email</label>
-                  <input required type="email" class="form-control bg-theme-grey rounded-0" id="inputEmail" name="email" data-auth="inputEmail" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="A-Z, 0-9 with proper .com or similar ending" />
+                  <input
+                    required
+                    type="email"
+                    class="form-control bg-theme-grey rounded-0"
+                    id="inputEmail"
+                    name="email"
+                    data-auth="inputEmail"
+                    pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
+                    title="A-Z, 0-9 with proper .com or similar ending"
+                  />
                 </div>
                 <!-- Phone Number -->
                 <div class="form-group mt-3">
                   <label for="inputPhone" class="fw-semibold">Phone Number</label>
-                  <input required type="tel" class="form-control bg-theme-grey rounded-0" id="inputPhone" name="number" data-auth="inputPhoneNumber" title="Please enter a phone number" />
+                  <input
+                    required
+                    type="tel"
+                    class="form-control bg-theme-grey rounded-0"
+                    id="inputPhone"
+                    name="number"
+                    data-auth="inputPhoneNumber"
+                    title="Please enter a phone number"
+                  />
                 </div>
                 <!-- Deadline -->
                 <div class="form-group mt-3">
                   <label for="deadline" class="fw-semibold">Deadline Date</label>
-                  <input required type="date" class="form-control bg-theme-grey rounded-0 deadlineWidth" id="deadline" name="deadline" data-auth="inputDeadline" title="Pleae pick a deadline for the offer." />
+                  <input
+                    required
+                    type="date"
+                    class="form-control bg-theme-grey rounded-0 deadlineWidth"
+                    id="deadline"
+                    name="deadline"
+                    data-auth="inputDeadline"
+                    title="Pleae pick a deadline for the offer."
+                  />
                 </div>
                 <!-- Offer Text -->
                 <div class="form-group mt-4 mb-3">
                   <label for="inputLetter" class="fw-semibold">Offer Text</label>
-                  <textarea required class="form-control bg-theme-grey rounded-0" id="inputLetter" rows="8" name="offerText" data-auth="inputOfferText" title="Please add something to the offer text."></textarea>
+                  <textarea
+                    required
+                    class="form-control bg-theme-grey rounded-0"
+                    id="inputLetter"
+                    rows="8"
+                    name="offerText"
+                    data-auth="inputOfferText"
+                    title="Please add something to the offer text."
+                  ></textarea>
                 </div>
                 <!-- Submit -->
-                <button class="btn btn-secondary fw-semibold border-0 rounded-0 mt-2 px-5" data-auth="sendOfferBtn">SEND</button>
+                <button
+                  class="btn btn-secondary fw-semibold border-0 rounded-0 mt-2 px-5"
+                  data-auth="sendOfferBtn"
+                >
+                  SEND
+                </button>
               </form>
             </div>
           </div>

pages/TBD/listings.html

@@ -8,9 +8,14 @@
     <meta name="description" content="this page contains a list of awaitable job opportunities" />
     <title>Noroff Jobs</title>
     <!-- Links and scripts -->
-    <link href="/css/index.css" rel="stylesheet" />
+
     <script defer src="./index.js" type="module"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body id="listingsPage">
     <header></header>
@@ -23,7 +28,13 @@ <h1 class="text-center">Job Listings</h1>
         <div class="container d-flex justify-content-center mt-3">
           <div class="col-md-5">
             <div class="input-group">
-              <input class="form-control" type="search" placeholder="Search Listings..." id="searchListing" data-search-listings />
+              <input
+                class="form-control"
+                type="search"
+                placeholder="Search Listings..."
+                id="searchListing"
+                data-search-listings
+              />
               <span class="input-group-append">
                 <button class="btn ms-n5" type="button">
                   <img src="/assets/icons/search.svg" alt="Search icon" class="icon-sm" />
@@ -32,7 +43,13 @@ <h1 class="text-center">Job Listings</h1>
             </div>
           </div>
           <div class="dropdown">
-            <button class="btn" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+            <button
+              class="btn"
+              type="button"
+              id="dropdownMenuButton1"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
               <img src="/assets/icons/filter.svg" alt="Search icon" class="icon-sm" />
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">