.gitlab/merge_request_templates/Default.md

@@ -43,4 +43,4 @@ For all below check the following breakpoints for Vue apps
 - [ ] If dealing with forms, make sure the form has input validation.
 - [ ] Avoid logging confidental information.
 - [ ] Make sure `no-cache` is on confidental web pages.
-- [ ] Make sure `rel="noopener noreferer"` is on any link that opens to a new tab.
+- [ ] Make sure `rel="noopener noreferrer"` is on any link that opens to a new tab.

cypress.json

 {
-  "pluginsFile": "tests/e2e/plugins/index.js"
+  "pluginsFile": "tests/e2e/plugins/index.js",
+  "numTestsKeptInMemory": 0,
+  "video": false
 }

package.json

@@ -6,13 +6,14 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e --mode=test",
+    "test:e2e": "vue-cli-service test:e2e --mode=development",
     "lint": "vue-cli-service lint",
     "build-staging": "NODE_ENV=production vue-cli-service build --mode=test",
     "preinstall": "cross-env NPM_CONFIG_YES=true npx npm-force-resolutions",
     "test": "npm run test:unit && npx vue-cli-service test:e2e --headless",
     "test:e2e-ci": "npx vue-cli-service test:e2e --headless",
-    "pretty-quick": "npx pretty-quick --staged"
+    "pretty-quick": "npx pretty-quick --staged",
+    "prepare": "husky install"
   },
   "pre-commit": [
     "pretty-quick"
@@ -38,7 +39,7 @@
     "@babel/plugin-transform-strict-mode": "^7.8.3",
     "@mdi/font": "^5.3.45",
     "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-e2e-cypress": "~4.3.0",
+    "@vue/cli-plugin-e2e-cypress": "^5.0.1",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
     "@vue/cli-plugin-unit-jest": "^4.4.1",
@@ -47,15 +48,16 @@
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "chokidar": "^3.5.2",
+    "cypress": "^9.5.1",
     "eslint": "^6.7.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "gulp-sass": "^5.0.0",
-    "husky": "^7.0.0",
+    "husky": "^7.0.4",
     "node-sass": "^6.0.1",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.19.1",
+    "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
     "sass": "^1.19.0",
     "sass-loader": "^10.2.0",

src/components/Base/DownloadButton.vue

 <template>
   <a
+    data-cy="download"
     :href="internalFilePath"
     :relativeURL="true ? 'download' : undefined"
     class="download-button"
@@ -15,10 +16,11 @@
     >
       <v-icon
         left
+        :class="iconClass"
         :size="iconSize"
         :style="{
           fill: iconFillColor,
-          color: fileMultipleColor + ' !important'
+          color: fileMultipleColor + ' !important',
         }"
       >
         {{ icon }}
@@ -34,7 +36,7 @@
           right
           size="24"
           :style="{ color: downloadColor + ' !important' }"
-          class="mt-1 "
+          :class="downloadIconClass"
         >
           mdi-download
         </v-icon>
@@ -48,73 +50,81 @@ export default {
   props: {
     showDownload: {
       type: Boolean,
-      default: true
+      default: true,
     },
     text: {
       type: String,
-      default: ""
+      default: "",
     },
     internalFilePath: {
       type: String,
-      default: ""
+      default: "",
     },
     iconFillColor: {
       type: String,
-      default: "#FFFFFF"
+      default: "#FFFFFF",
     },
     fileMultipleColor: {
       type: String,
-      default: "#FFFFFF"
+      default: "#FFFFFF",
     },
     textColor: {
       type: String,
-      default: ""
+      default: "",
     },
     textSize: {
       type: String,
-      default: "16"
+      default: "16",
     },
     downloadColor: {
       type: String,
-      default: "#BDC931"
+      default: "#BDC931",
     },
     btnColor: {
       type: String,
-      default: "#002743"
+      default: "#002743",
     },
     btnSpanTextClass: {
       type: String,
-      default: "ml-2 mr-8"
+      default: "ml-2 mr-8",
     },
     btnClass: {
       type: String,
-      default: ""
+      default: "",
     },
     target: {
       type: String,
-      default: "_blank"
+      default: "_blank",
     },
     btnWidth: {
       type: String,
-      default: ""
+      default: "",
     },
     btnHeight: {
       type: String,
-      default: ""
+      default: "",
     },
     relativeURL: {
       type: String,
-      default: ""
+      default: "",
     },
     icon: {
       type: String,
-      default: "mdi-file-multiple"
+      default: "mdi-file-multiple",
     },
     iconSize: {
       type: Number,
-      default: 24
-    }
-  }
+      default: 24,
+    },
+    iconClass: {
+      type: String,
+      default: "",
+    },
+    downloadIconClass: {
+      type: String,
+      default: "mt-1",
+    },
+  },
 };
 </script>
 <style lang="scss" scoped></style>

src/components/Footer.vue

@@ -52,15 +52,9 @@
               <router-link to="/">
                 <h4 class="px-0 mb-3 mt-1">HOME</h4>
               </router-link>
-              <router-link to="/services">
-                Services
-              </router-link>
-              <router-link to="/who-we-are">
-                Who We Are
-              </router-link>
-              <router-link to="/contact-us">
-                Contact Us
-              </router-link>
+              <router-link to="/services"> Services </router-link>
+              <router-link to="/who-we-are"> Who We Are </router-link>
+              <router-link to="/contact-us"> Contact Us </router-link>
             </v-col>
             <v-col
               class="py-0 d-flex flex-column mt-4 mt-sm-0 link-column text-left"
@@ -75,18 +69,22 @@
               <a href="https://software.af.mil/training/" target="_blank">
                 DevSecOps Training
               </a>
-              <a href="https://repo1.dso.mil" target="_blank">
-                Repo One
-              </a>
+              <a href="https://repo1.dso.mil" target="_blank"> Repo One </a>
               <a href="https://repo1.dso.mil/dsawg-devsecops/" target="_blank">
                 DSAWG on Repo One
               </a>
               <a href="https://ironbank.dso.mil" target="_blank">
                 Iron Bank
+                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
+                  >mdi-lock</v-icon
+                >
               </a>
               <a href="https://registry1.dso.mil/" target="_blank"
-                >Registry One</a
-              >
+                >Registry One
+                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
+                  >mdi-lock</v-icon
+                >
+              </a>
             </v-col>
             <v-col
               class="py-0 d-flex flex-column mt-4 mt-md-0 link-column text-left"
@@ -109,6 +107,9 @@
                 target="_blank"
               >
                 Chat
+                <v-icon small left color="#E1E1E1" class="mr-0 mb-1"
+                  >mdi-lock</v-icon
+                >
               </a>
               <a href="https://onboarding.il2.dso.mil/" target="_blank">
                 Cohort On-boarding
@@ -138,8 +139,8 @@ export default {
     LinkedInLogo,
     YouTubeLogo,
     AirForceLogo,
-    MediumLogo
-  }
+    MediumLogo,
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/NavBar.vue

@@ -9,12 +9,14 @@
       <v-spacer></v-spacer>
       <v-toolbar-items v-show="!burgerMenu">
         <div class="navbar-nav my-auto">
-          <router-link class="nav-item" to="/" exact> HOME </router-link>
+          <router-link class="nav-item" to="/" exact>
+            {{ PageMeta.Home.nav }}
+          </router-link>
           <v-menu open-on-hover bottom offset-y>
             <template v-slot:activator="{ on, attrs }">
               <span v-bind="attrs" v-on="on">
                 <router-link class="nav-item d-inline" to="/services">
-                  SERVICES
+                  {{ PageMeta.Services.nav }}
                   <v-icon class="navbar-chevron-icon">mdi-chevron-down</v-icon>
                 </router-link>
               </span>
@@ -27,20 +29,23 @@
                 link
               >
                 <v-list-item-title class="navbar-list-items"
-                  >{{ item.title }}
+                  >{{ item.nav }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
 
+          <router-link class="nav-item" to="/resellers">
+            {{ PageMeta.Resellers.nav }}
+          </router-link>
           <router-link class="nav-item" to="/resources">
-            RESOURCES
+            {{ PageMeta.Resources.nav }}
           </router-link>
           <router-link class="nav-item" to="/who-we-are">
-            WHO WE ARE
+            {{ PageMeta.WhoWeAre.nav }}
           </router-link>
           <router-link class="nav-item" to="/contact-us">
-            CONTACT US
+            {{ PageMeta.ContactUs.nav }}
           </router-link>
         </div>
       </v-toolbar-items>
@@ -77,7 +82,7 @@
           exact
           @click.native="menuVisible = false"
         >
-          HOME
+          {{ PageMeta.Home.nav }}
         </router-link>
         <v-divider class="my-2" />
 
@@ -86,28 +91,38 @@
           to="/services"
           @click.native="menuVisible = false"
         >
-          SERVICES
+          {{ PageMeta.Services.nav }}
         </router-link>
 
         <router-link
           v-for="item in items"
-          :key="item.title"
+          :key="item.nav"
           :to="item.path"
           @click.native="menuVisible = false"
           style="color: white"
           class="nav-item-mobile"
         >
-          {{ item.title }}
+          {{ item.nav }}
         </router-link>
 
         <v-divider class="mt-6 mb-2" />
 
+        <router-link
+          class="nav-item"
+          to="/resellers"
+          @click.native="menuVisible = false"
+        >
+          RESELLERS
+        </router-link>
+
+        <v-divider class="my-2" />
+
         <router-link
           class="nav-item"
           to="/resources"
           @click.native="menuVisible = false"
         >
-          RESOURCES
+          {{ PageMeta.Resources.nav }}
         </router-link>
 
         <v-divider class="my-2" />
@@ -116,7 +131,7 @@
           to="/who-we-are"
           @click.native="menuVisible = false"
         >
-          WHO WE ARE
+          {{ PageMeta.WhoWeAre.nav }}
         </router-link>
 
         <v-divider class="my-2" />
@@ -126,7 +141,7 @@
           to="/contact-us"
           @click.native="menuVisible = false"
         >
-          CONTACT US
+          {{ PageMeta.ContactUs.nav }}
         </router-link>
 
         <v-divider class="mt-2 mb-4" />
@@ -136,24 +151,26 @@
 </template>
 <script>
 import YodaLogo from "@/assets/images/logos/Logo_P1_Yoda_Campfire-WH.svg";
+import { PageMeta } from "@/constants/PageMeta";
 
 export default {
   name: "NavBar",
   components: {
-    YodaLogo
+    YodaLogo,
   },
 
   data: () => ({
     menuVisible: false,
+    PageMeta,
     items: [
-      { title: "Iron Bank", path: "/products/iron-bank/" },
-      { title: "Party Bus", path: "/products/party-bus" },
-      { title: "Big Bang", path: "/products/big-bang/" },
-      { title: "CNAP", path: "/products/cnap" },
-      { title: "CYBER", path: "/products/cybersecurity" }
+      PageMeta.IronBank,
+      PageMeta.PartyBus,
+      PageMeta.BigBang,
+      PageMeta.CNAP,
+      PageMeta.Cybersecurity,
     ],
     navigationDrawerBreakPoint: 1020,
-    burgerMenu: false
+    burgerMenu: false,
   }),
   beforeDestroy() {
     if (typeof window === "undefined") return;
@@ -168,17 +185,17 @@ export default {
   },
   methods: {
     onResize() {
-      this.burgerMenu = window.innerWidth < 1020;
-    }
+      this.burgerMenu = window.innerWidth < 1045;
+    },
   },
 
   watch: {
-    "$vuetify.breakpoint.width": function(value) {
+    "$vuetify.breakpoint.width": function (value) {
       if (value >= this.navigationDrawerBreakPoint) {
         this.menuVisible = false;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">