client/components/Navbar.vue

@@ -76,19 +76,31 @@
                 </span>
               </a>
               <span class="icp-nav-link-border"></span>
-
-              <nuxt-link
-                to="/register"
-                class="nav-a nav-a-2"
-                id="nav-link-accountList"
-                tabindex="0"
-              >
-                <span class="nav-line-1">Hello, Sign in</span>
-                <span class="nav-line-2">
-                  Account &amp; Lists
-                  <span class="nav-icon nav-arrow" style="visiblity: visible"></span>
-                </span>
-              </nuxt-link>
+              <template v-if="$auth.$state.loggedIn">
+                <nuxt-link
+                  to="/register"
+                  class="nav-a nav-a-2"
+                  id="nav-link-accountList"
+                  tabindex="0"
+                >
+                  <span class="nav-line-1">Hello</span>
+                  <span class="nav-line-2">{{ $auth.$state.user.name }}</span>
+                </nuxt-link>
+              </template>
+              <template v-else>
+                <nuxt-link
+                  to="/register"
+                  class="nav-a nav-a-2"
+                  id="nav-link-accountList"
+                  tabindex="0"
+                >
+                  <span class="nav-line-1">Hello, Sign in</span>
+                  <span class="nav-line-2">
+                    Account &amp; Lists
+                    <span class="nav-icon nav-arrow" style="visiblity: visible"></span>
+                  </span>
+                </nuxt-link>
+              </template>
 
               <nuxt-link to="/orders" class="nav-a nav-a-2 nav-single-row-link">
                 <span class="nav-line-1"></span>

client/layouts/none.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <nuxt />
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+body {
+  font-size: 13px;
+  line-height: 19px;
+  color: #111;
+}
+</style>

client/nuxt.config.js

@@ -47,6 +47,7 @@ export default {
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
+    '@nuxtjs/auth'
   ],
   /*
   ** Axios module configuration
@@ -56,6 +57,11 @@ export default {
     proxy:  true,
     baseURL: URL
   },
+
+  proxy: {
+    '/api': URL
+  },
+
   /*
   ** Build configuration
   */
@@ -65,5 +71,18 @@ export default {
     */
     extend (config, ctx) {
     }
+  },
+
+  auth: {
+    strategies: {
+      local: {
+        endpoints: {
+          login: {
+            propertyName: 'token'
+          },
+          logout: true
+        }
+      }
+    }
   }
 }

client/package-lock.json

@@ -1208,6 +1208,28 @@
         }
       }
     },
+    "@nuxtjs/auth": {
+      "version": "4.8.5",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.8.5.tgz",
+      "integrity": "sha512-GqRKj+hrQhz1M4rjMyIiOcwJQBi79wlYshw26Uz79ASgTBupQjRFQVgB/nj6crdOGVVTZLQqOjALvdVmr9rqOg==",
+      "requires": {
+        "@nuxtjs/axios": "^5.9.0",
+        "body-parser": "^1.19.0",
+        "consola": "^2.11.2",
+        "cookie": "^0.4.0",
+        "is-https": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "lodash": "^4.17.15",
+        "nanoid": "^2.1.8"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+        }
+      }
+    },
     "@nuxtjs/axios": {
       "version": "5.9.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.0.tgz",
@@ -4664,6 +4686,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
+      "integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -4793,6 +4820,11 @@
       "resolved": "https://registry.npmjs.org/jimp-compact/-/jimp-compact-0.8.5.tgz",
       "integrity": "sha512-BkpiX6jZyDVLU+CleO/6yF8SFHnyZXiElPryNjZx58AK1vy+bqSFvhKeFS680TISSr8IWqHlIAwDMMA0DTQkMw=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -5280,6 +5312,11 @@
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
       "optional": true
     },
+    "nanoid": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.8.tgz",
+      "integrity": "sha512-g1z+n5s26w0TGKh7gjn7HCqurNKMZWzH08elXzh/gM/csQHd/UqDV6uxMghQYg9IvqRPm1QpeMk50YMofHvEjQ=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",

client/package.json

@@ -11,11 +11,12 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "nuxt": "^2.0.0",
-    "bootstrap-vue": "^2.0.0",
-    "bootstrap": "^4.1.3",
+    "@nuxtjs/auth": "^4.8.5",
     "@nuxtjs/axios": "^5.3.6",
-    "@nuxtjs/pwa": "^3.0.0-0"
+    "@nuxtjs/pwa": "^3.0.0-0",
+    "bootstrap": "^4.1.3",
+    "bootstrap-vue": "^2.0.0",
+    "nuxt": "^2.0.0"
   },
   "devDependencies": {}
 }

client/pages/login.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="registerPage">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4"></div>
+        <div class="col-sm-4">
+          <div class="text-center">
+            <nuxt-link to="#">
+              <img src="/img/logo-black.png" alt="">
+            </nuxt-link>
+          </div>
+          <div class="mt-4">
+            <div class="a-box a-spacing-extra-large">
+              <div class="a-blx-inner">
+                <h1 class="a-spacing-small">Login</h1>
+                <!--Your Email-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Email</label>
+                  <input
+                    v-model="email"
+                    type="text"
+                    id="ap_customer_email"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                </div>
+                <!--Your Password-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Password</label>
+                  <input
+                    v-model="password"
+                    type="password"
+                    id="ap_customer_password"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                  <div class="a-alert-container">
+                    <div class="a-alert-content">password must be at least 6 charteres</div>
+                  </div>
+                </div>
+                <!-- Button -->
+                <div class="a-row a-spacing-extra-large mb-4">
+                  <span class="a-button-primary">
+                    <span class="a-button-inner">
+                      <span @click="onLogin" class="a-button-text">Continuye</span>
+                    </span>
+                  </span>
+                  <div class="a-row a-spacing-top-medium a-size-small">
+                    <b>
+                      By create an accoutnm
+                      <a href="#">conditions of Use</a> and
+                      <a href="#">conditions of Use</a>
+                    </b>
+                  </div>
+                </div>
+                <h4/>
+                <div class="a-row">
+                  <b>
+                    don have an account?
+                    <nuxt-link to="/signup" class="a-link-emphasis">Sign up</nuxt-link>
+                  </b>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  middleware: 'auth',
+  auth: 'guest',
+
+  layout: 'none',
+
+  data () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+
+  methods: {
+    async onLogin () {
+      try {
+        this.$auth.loginWith('local', {
+          data: {
+            email: this.email,
+            password: this.password
+          }
+        })
+
+        this.$router.push('/')
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+}
+</script>

client/pages/signup.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="registerPage">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4"></div>
+        <div class="col-sm-4">
+          <div class="text-center">
+            <nuxt-link to="#">
+              <img src="/img/logo-black.png" alt="">
+            </nuxt-link>
+          </div>
+          <div class="mt-4">
+            <div class="a-box a-spacing-extra-large">
+              <div class="a-blx-inner">
+                <h1 class="a-spacing-small">Create account</h1>
+                <!--Your Name-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur name</label>
+                  <input
+                    v-model="name"
+                    type="text"
+                    id="ap_customer_name"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                </div>
+                <!--Your Email-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Email</label>
+                  <input
+                    v-model="email"
+                    type="text"
+                    id="ap_customer_email"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                </div>
+                <!--Your Password-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Password</label>
+                  <input
+                    v-model="password"
+                    type="password"
+                    id="ap_customer_password"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                  <div class="a-alert-container">
+                    <div class="a-alert-content">password must be at least 6 charteres</div>
+                  </div>
+                </div>
+                <!-- Button -->
+                <div class="a-row a-spacing-extra-large mb-4">
+                  <span class="a-button-primary">
+                    <span class="a-button-inner">
+                      <span @click="onSignup" class="a-button-text">Create your Amazon account</span>
+                    </span>
+                  </span>
+                  <div class="a-row a-spacing-top-medium a-size-small">
+                    <b>
+                      By create an accoutnm
+                      <a href="#">conditions of Use</a> and
+                      <a href="#">conditions of Use</a>
+                    </b>
+                  </div>
+                </div>
+                <h4/>
+                <div class="a-row">
+                  <b>
+                    Aready habe an accouint?
+                    <nuxt-link to="/login" class="a-link-emphasis">login</nuxt-link>
+                  </b>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  middleware: 'auth',
+  auth: 'guest',
+
+  layout: 'none',
+
+  data () {
+    return {
+      name: '',
+      email: '',
+      password: ''
+    }
+  },
+
+  methods: {
+    async onSignup () {
+      try {
+        let  data = {
+          name: this.name,
+          email: this.email,
+          password: this.password
+        }
+
+        let response = await this.$axios.$post('/api/auth/signup', data)
+
+        console.log(response)
+
+        if (response.success) {
+          this.$auth.loginWith('local', {
+            data: {
+              email: this.email,
+              password: this.password
+            }
+          })
+
+          debugger
+
+          this.$router.push('/')
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+}
+</script>

server/routes/auth.js

@@ -54,6 +54,7 @@ router.get('/auth/user', virifyToken, async (req, res) => {
 router.post('/auth/login', async (req, res) => {
   try {
     let foundUser = await User.findOne({ email: req.body.email})
+    console.log(foundUser)
     if (!foundUser) {
       res.status(403).json({
         success: false,
@@ -64,7 +65,6 @@ router.post('/auth/login', async (req, res) => {
         let token = jwt.sign(foundUser.toJSON(), process.env.SECRET, {
           expiresIn: 604800
         })
-s
         res.json({ success: true, token})
       } else {
         res.status(403).json({