From cefd02f202e27ddc74d7e9c84df88265836546c9 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Mon, 12 Jul 2021 20:00:17 -0500
Subject: [PATCH] Worked on content for home page.

---
 MultiShop/client/package-lock.json            |  43 +++++-
 MultiShop/client/src/App.vue                  |   3 +-
 .../client/src/assets/scss/_app-layout.scss   |   7 +-
 .../client/src/assets/scss/_variables.scss    |   2 +-
 MultiShop/client/src/assets/scss/main.scss    |  33 ++++-
 MultiShop/client/src/components/InfoCard.vue  |  19 +++
 MultiShop/client/src/components/SearchBar.vue |   2 +-
 MultiShop/client/src/main.js                  |   4 +-
 MultiShop/client/src/services/http.js         |  10 +-
 MultiShop/client/src/store/identity.js        |   4 +-
 MultiShop/client/src/views/Home.vue           | 134 ++++++++++++++++--
 MultiShop/client/vue.config.js                |  12 +-
 12 files changed, 237 insertions(+), 36 deletions(-)
 create mode 100644 MultiShop/client/src/components/InfoCard.vue

diff --git a/MultiShop/client/package-lock.json b/MultiShop/client/package-lock.json
index 78fc842..4c2a7a9 100644
--- a/MultiShop/client/package-lock.json
+++ b/MultiShop/client/package-lock.json
@@ -1233,6 +1233,11 @@
         }
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -4677,6 +4682,11 @@
         }
       }
     },
+    "can-use-dom": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
+      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -11153,8 +11163,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.defaults": {
       "version": "4.2.0",
@@ -11213,8 +11222,7 @@
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
-      "dev": true
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -11253,6 +11261,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -15296,6 +15309,28 @@
         }
       }
     },
+    "simplebar": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.3.4.tgz",
+      "integrity": "sha512-2mCaVdiroCKmXuD+Qfy+QSE32m5BMuZ4ssHvRD1QEPYH95Re/kox7j/Wy0Hje8Uo7LY7O6JK3XSNJmesGlsP8Q==",
+      "requires": {
+        "@juggle/resize-observer": "^3.3.1",
+        "can-use-dom": "^0.1.0",
+        "core-js": "^3.0.1",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
+    "simplebar-vue": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/simplebar-vue/-/simplebar-vue-1.6.6.tgz",
+      "integrity": "sha512-rtS9HC5KSVj8eMp37DxCldtihf7gECvLD3iE/iHfnG34I5kU1puERE51cpLJZV3PxcsKg5AIMdd5irGRCb88Qw==",
+      "requires": {
+        "core-js": "^3.0.1",
+        "simplebar": "^5.3.4"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/MultiShop/client/src/App.vue b/MultiShop/client/src/App.vue
index 80a0c7e..4c45774 100644
--- a/MultiShop/client/src/App.vue
+++ b/MultiShop/client/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="content" class="theme-light">
+    <div id="app-content" class="theme-light">
         <nav class="navbar" id="nav">
             <div class="container-fluid">
                 <router-link class="navbar-brand" to="/">Props</router-link>
@@ -57,7 +57,6 @@
 
 <script>
 import "bootstrap/js/dist/collapse";
-import "./assets/scss/main.scss";
 import ProfileDisplay from "./components/ProfileDisplay.vue";
 import ProfileLogIn from "./components/ProfileLogIn.vue";
 import ProfileLogOut from "./components/ProfileLogOut.vue";
diff --git a/MultiShop/client/src/assets/scss/_app-layout.scss b/MultiShop/client/src/assets/scss/_app-layout.scss
index 49b5441..1bb57e1 100644
--- a/MultiShop/client/src/assets/scss/_app-layout.scss
+++ b/MultiShop/client/src/assets/scss/_app-layout.scss
@@ -1,10 +1,9 @@
 // Used to provide inial layout for application containing elements.
-html, body, #app, #content {
-    min-height: 100%;
-    height: 100%;
+html, body, #app, #app-content {
+    min-height: 100vh;
 }
 
-#content {
+#app-content {
     display: flex;
     flex-direction: column;
 }
\ No newline at end of file
diff --git a/MultiShop/client/src/assets/scss/_variables.scss b/MultiShop/client/src/assets/scss/_variables.scss
index ecf238e..983982f 100644
--- a/MultiShop/client/src/assets/scss/_variables.scss
+++ b/MultiShop/client/src/assets/scss/_variables.scss
@@ -1,3 +1,3 @@
 $themes: (
-    "light": ("background": #F4F4F4, "navbar": #FFF7F7, "main": #BDF2D5, "text": #1A1A1A),
+    "light": ("background": #F4F4F4, "navbar": #FFF7F7, "main": #BDF2D5, "sub": #F2FCFC, "bold": #1E56A0, "text": #1A1A1A),
 );
diff --git a/MultiShop/client/src/assets/scss/main.scss b/MultiShop/client/src/assets/scss/main.scss
index e5a1f70..4ef146b 100644
--- a/MultiShop/client/src/assets/scss/main.scss
+++ b/MultiShop/client/src/assets/scss/main.scss
@@ -1,10 +1,16 @@
 @use "app-layout";
-@use "themer";
 @use "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons.css";
+
+#app-content {
+    @include themer.themed {
+        background-color: themer.color-of("background");
+        color: themer.color-of("text");
+    }
+}
 
 nav.navbar {
     @extend .navbar-expand-lg;
+    @extend .sticky-top;
     @include themer.themed {
         @extend .navbar-light;
         background-color: themer.color-of("navbar");
@@ -17,11 +23,26 @@ nav.navbar {
     @include themer.themed {
         background-color: themer.color-of("main");
     }
+
+    &.sub {
+        @include themer.themed {
+            background-color: themer.color-of("sub");
+        }
+    }
 }
 
-#content {
+h1 {
+    font-size: 5em;
+}
+
+h2 {
+    font-size: 3em;
+}
+
+hr {
+    @extend .my-3;
     @include themer.themed {
-        background-color: themer.color-of("background");
-        color: themer.color-of("text");
+        color: themer.color-of("bold");
     }
-}
\ No newline at end of file
+}
+
diff --git a/MultiShop/client/src/components/InfoCard.vue b/MultiShop/client/src/components/InfoCard.vue
new file mode 100644
index 0000000..4619132
--- /dev/null
+++ b/MultiShop/client/src/components/InfoCard.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title"><slot name="title">Title</slot></h5>
+            <h6 class="card-subtitle mb-3 text-muted">
+                <slot name="subtitle">Subtitle</slot>
+            </h6>
+            <p class="card-text">
+                <slot name="text"> </slot>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "InfoCard"
+};
+</script>
diff --git a/MultiShop/client/src/components/SearchBar.vue b/MultiShop/client/src/components/SearchBar.vue
index 67df3a2..89e1d70 100644
--- a/MultiShop/client/src/components/SearchBar.vue
+++ b/MultiShop/client/src/components/SearchBar.vue
@@ -4,7 +4,7 @@
             <input type="text" class="form-control" :placeholder="placeholder" v-model="query" @keyup.enter="onEnter">
             <slot name="append"></slot>
             <button class="btn btn-outline-primary" type="button" @click="onClick">
-                <i class="bi bi-search"></i>
+                Search
             </button>
         </div>
     </form>
diff --git a/MultiShop/client/src/main.js b/MultiShop/client/src/main.js
index 195029e..4badd84 100644
--- a/MultiShop/client/src/main.js
+++ b/MultiShop/client/src/main.js
@@ -3,7 +3,9 @@ import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
 import store from "./store";
-import "./assets/scss/main.scss";
+
+import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
+import "./assets/scss/main.scss"; // Main global scss file.
 
 const app = createApp(App);
 
diff --git a/MultiShop/client/src/services/http.js b/MultiShop/client/src/services/http.js
index 41274b6..b1898af 100644
--- a/MultiShop/client/src/services/http.js
+++ b/MultiShop/client/src/services/http.js
@@ -2,13 +2,13 @@ import axios from "axios";
 
 let currentAuthorizationInterceptorID = null;
 
-const http = axios.create({
+const apiHttp = axios.create({
     baseURL: window.location.origin + "/api",
-    timeout: 2000,
+    timeout: 3000,
 });
 
 function addBearerTokenInterceptor(token) {
-    currentAuthorizationInterceptorID = http.interceptors.request.use((config) => {
+    currentAuthorizationInterceptorID = apiHttp.interceptors.request.use((config) => {
         config.headers.Authorization = `Bearer ${token}`;
         return config;
     }, (err) => {
@@ -17,7 +17,7 @@ function addBearerTokenInterceptor(token) {
 }
 
 function removeBearerTokenInterceptor() {
-    http.interceptors.request.eject(currentAuthorizationInterceptorID);
+    apiHttp.interceptors.request.eject(currentAuthorizationInterceptorID);
 }
 
-export { http, addBearerTokenInterceptor, removeBearerTokenInterceptor };
+export { apiHttp, addBearerTokenInterceptor, removeBearerTokenInterceptor };
diff --git a/MultiShop/client/src/store/identity.js b/MultiShop/client/src/store/identity.js
index 74e70cb..d07e59e 100644
--- a/MultiShop/client/src/store/identity.js
+++ b/MultiShop/client/src/store/identity.js
@@ -1,6 +1,6 @@
 import router from "../router";
 import { identityPaths, identityQueryParameters, userManager } from "../services/authentication";
-import { addBearerTokenInterceptor, http, removeBearerTokenInterceptor } from "../services/http";
+import { addBearerTokenInterceptor, apiHttp, removeBearerTokenInterceptor } from "../services/http";
 import { get, put } from "../services/persistence";
 
 const identity = {
@@ -116,7 +116,7 @@ const identity = {
         },
         async updatePublicApiSettings(context) {
             try {
-                const settings = (await http.get("PublicApiSettings")).data;
+                const settings = (await apiHttp.get("PublicApiSettings")).data;
                 if (settings.RegistrationEnabled === "True") {
                     context.commit("enableIdentificationRegistration");
                 } else {
diff --git a/MultiShop/client/src/views/Home.vue b/MultiShop/client/src/views/Home.vue
index 7953cad..5aaae64 100644
--- a/MultiShop/client/src/views/Home.vue
+++ b/MultiShop/client/src/views/Home.vue
@@ -2,6 +2,7 @@
     <div id="main" class="jumbotron d-flex flex-column align-items-center">
         <div>
             <img
+                id="large-logo"
                 alt="SHAID logo"
                 src="../assets/images/logo.svg"
                 class="img-fluid"
@@ -10,31 +11,146 @@
         <div id="description" class="text-center px-3 my-2">
             <h1 class="my-2">Props</h1>
             <p>
-                Props is a site designed to help with the online project
-                component shopping experience. Create project component lists
-                and search across multiple commonly used online retail stores to
-                find the ideal purchase.
+                {{ content?.description }}
             </p>
         </div>
     </div>
+    <div class="jumbotron sub">
+        <div
+            id="help"
+            class="container d-flex flex-column align-items-center my-3"
+        >
+            <div class="large"><i class="bi bi-search"></i></div>
+            <h2 class="mb-3 mt-4">{{ content?.help.title }}</h2>
+            <SearchBar
+                id="searchbar"
+                placeholder="Search here to get started!"
+                class="my-4"
+                style="width: 100%;"
+            ></SearchBar>
+            <p>
+                {{ content?.help.searchIntroduction }}
+            </p>
+            <p>
+                {{ content?.help.additionalInfo }}
+            </p>
+        </div>
+    </div>
+    <div
+        id="features"
+        class="container d-flex flex-column align-items-center my-3"
+    >
+        <h2 class="mb-3 mt-4">Features</h2>
+        <p>
+            {{ content?.features.description }}
+        </p>
+        <div class="overflow-auto">
+            <div v-if="content" class="row my-2">
+                <InfoCard
+                    v-for="feature in content.features.list"
+                    v-bind:key="feature"
+                    style="width: 32rem"
+                >
+                    <template v-slot:title>{{ feature.title }}</template>
+                    <template v-slot:subtitle>{{ feature.subtitle }}</template>
+                    <template v-slot:text>{{ feature.text }}</template>
+                </InfoCard>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import InfoCard from "../components/InfoCard.vue";
+import SearchBar from "../components/SearchBar.vue";
+
 export default {
     name: "Home",
-    components: {}
+    components: {
+        InfoCard,
+        SearchBar
+    },
+    data() {
+        return {
+            content: {
+                description:
+                    "Props is a site designed to help with the online project component shopping experience. Create project component lists and search across multiple commonly used online retail stores to find the ideal purchase.",
+                help: {
+                    title: "Getting Started",
+                    searchIntroduction:
+                        "Props is a site designed to help with the online project component shopping experience. Create project component lists and search across multiple commonly used online retail stores to find the ideal purchase.",
+                    additionalInfo:
+                        "Take advantage of our project component manager, where you can add detailed descriptions of what things are for, as well as overall project summaries."
+                },
+                features: {
+                    description:
+                        "Props strives to be a platform where people can find and organize the material they need to complete their projects. Our features are therefore tailored to the community helping each other, as well as smart tools to quickly compare different products from different stores.",
+                    list: [
+                        {
+                            title: "Shopping List",
+                            subtitle: "We'll do it so you don't need to.",
+                            text:
+                                "We'll help you track the components you need. You can add descriptions, and mark things as purchased, or shipped at your convenience. You can even add components from stores that Props doesn't know about yet!"
+                        },
+                        {
+                            title: "Product Comparison",
+                            subtitle: "So many shops to look through...",
+                            text:
+                                "There's so many online retailers nowadays that it's becoming more and more work to check all of them for what you need. With us, we'll do the searching for you. All you need to do is decide if the shipping time, cost, ratings and reviews are suitable!"
+                        },
+                        {
+                            title: "Auto Listing Search",
+                            subtitle: "Need a starting point?",
+                            text:
+                                "Some project parts commonly used. We'll try and find these parts for you automatically. This means you can create a shopping list, and we'll try and the best fitting products for you based on your shopping list entries."
+                        },
+                        {
+                            title: "Share It!",
+                            subtitle: "Show off your work!",
+                            text:
+                                "Have a project that you're excited about? Want to tell all your friends? We'll help. Each of your projects has a privacy setting. You can have it publically listed, unlisted, or completely private. Short link included."
+                        }
+                    ]
+                }
+            }
+        };
+    }
 };
 </script>
 
 <style lang="scss" scoped>
-h1 {
-    font-size: 5em;
+#large-logo {
+    max-height: 270px;
 }
+
+.overflow-auto {
+    max-width: 100%;
+}
+
+.row {
+    flex-wrap: nowrap;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.card {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+#help {
+    max-width: 810px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 #description {
     max-width: 540px;
 }
 
-.img-fluid {
-    max-height: 450px;
+.large {
+    .bi {
+        font-size: 5em;
+    }
 }
 </style>
diff --git a/MultiShop/client/vue.config.js b/MultiShop/client/vue.config.js
index 8b13789..8a395b7 100644
--- a/MultiShop/client/vue.config.js
+++ b/MultiShop/client/vue.config.js
@@ -1 +1,11 @@
-
+module.exports = {
+    css: {
+        loaderOptions: {
+            sass: {
+                prependData: `
+                    @use "@/assets/scss/_themer.scss";
+                `
+            }
+        }
+    }
+};