active-fox-2018 · arievrchmn · Feb 18, 2019 · Feb 18, 2019 · Feb 18, 2019 · Feb 19, 2019
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-# e-commerce
+# Ecommerce
+
+# Product API Routes
+
+# Cart API Routes
+
+# User API Routes
diff --git a/client/.browserslistrc b/client/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/client/.editorconfig b/client/.editorconfig
@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,29 @@
+# client
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/client/babel.config.js b/client/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "lint-staged": "^8.1.0",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "vue-cli-service lint",
+      "git add"
+    ],
+    "*.vue": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <title>client</title>
+</head>
+<body>
+  <noscript>
+    <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+    crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="app">
+    <Navbar :check-login="signIn" :role="checkRole" />
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import Navbar from '@/components/Navbar.vue';
+
+export default {
+  name: 'app',
+  components: {
+    Navbar,
+  },
+  mounted() {
+    if (localStorage.getItem('token')) {
+      this.$store.dispatch('checkInStore');
+    }
+  },
+  computed: {
+    signIn() {
+      return this.$store.state.isLogin;
+    },
+    checkRole() {
+      return this.$store.state.role;
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/client/src/assets/asus.jpg b/client/src/assets/asus.jpg
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/assets/msi.jpg b/client/src/assets/msi.jpg
diff --git a/client/src/assets/my-commerce.png b/client/src/assets/my-commerce.png
diff --git a/client/src/assets/razer.jpg b/client/src/assets/razer.jpg
diff --git a/client/src/assets/sample/sample.png b/client/src/assets/sample/sample.png
diff --git a/client/src/components/Navbar.vue b/client/src/components/Navbar.vue
@@ -0,0 +1,86 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light m-3 border-bottom">
+    <div class="container d-flex align-self">
+      <router-link to="/">
+        <a class="navbar-brand">My-Commerce</a>
+      </router-link>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item dropdown">
+            <a
+              id="subMenu"
+              class="nav-link dropdown-toggle"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >Products</a>
+            <div class="dropdown-menu" aria-labelledby="subMenu">
+              <router-link to="/products/test">
+                <a v-if="role == 'admin'" class="dropdown-item">Test Nested Routes</a>
+              </router-link>
+              <router-link to="/products">
+                <a class="dropdown-item" >All Products</a>
+              </router-link>
+            </div>
+          </li>
+        </ul>
+        <div v-if="!checkLogin">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <router-link to="/signin">
+                <button type="button" class="btn btn-light-outline">Signin</button>
+              </router-link>
+            </li>
+            <li class="nav-item signup">
+              <router-link to="/signup">
+                <button type="button" class="btn btn-light-outline">
+                  <span style="color: #004be4">Signup</span>
+                </button>
+              </router-link>
+            </li>
+          </ul>
+        </div>
+        <div v-else>
+          <button @click="signOut" type="button" class="btn btn-sm btn-primary">Signout</button>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "navbar",
+  props: ["checkLogin", "role"],
+  methods: {
+    signOut() {
+      localStorage.removeItem("token");
+      this.$store.commit("signOut", false);
+      this.$router.push("/");
+    }
+  }
+};
+</script>
+
+<style>
+.signup {
+  border: #004be4 1px solid;
+  border-radius: 6px;
+}
+.btn-light-outline {
+  background-color: transparent;
+}
+</style>
diff --git a/client/src/components/TestNested.vue b/client/src/components/TestNested.vue
@@ -0,0 +1,13 @@
+<template>
+  <h1>Test Nested Routes</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/client/src/main.js b/client/src/main.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import axios from 'axios';
+import VueAlertify from 'vue-alertify';
+
+
+Vue.prototype.$axios = axios.create({
+  baseURL: 'http://localhost:3000'
+});
+
+Vue.use(VueAlertify);
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#app');
diff --git a/client/src/router.js b/client/src/router.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/Home.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+    },
+    {
+      path: '/products',
+      name: 'products',
+      component: () => import('@/views/Products.vue'),
+      children: [
+        {
+          path: 'test',
+          name: 'test',
+          component: () => import('@/components/TestNested.vue'),
+        }
+      ]
+    },
+    {
+      path: '/signup',
+      name: 'Signup',
+      component: () => import('@/views/Signup.vue'),
+    },
+    {
+      path: '/signin',
+      name: 'Signin',
+      component: () => import('@/views/Signin.vue'),
+    }
+  ],
+});