add change

.gitignore

@@ -88,3 +88,5 @@ sw.*
 
 # Vim swap files
 *.swp
+
+#$env:NODE_OPTIONS="--openssl-legacy-provider"
\ No newline at end of file

components/DetailModal.vue

@@ -23,18 +23,20 @@
         </v-col>
         <v-col>
           <v-row class="flex-row align-center justify-space-between mt-2">
-          <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
-            {{ name }}
-          </v-card-title>
-          <v-btn icon @click="$emit('close')" style="background-color:red">
-              <v-icon color="white">mdi-close</v-icon>
+            <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
+              {{ name }}
+            </v-card-title>
+            <v-btn icon style="background-color:red" @click="$emit('close'); clearDialog()">
+              <v-icon color="white">
+                mdi-close
+              </v-icon>
             </v-btn>
           </v-row>
           <v-row class="flex-row align-center">
             <h3 class="mr-4">
               Price:
             </h3>
-            <v-card-title v-model="item.price">
+            <v-card-title v-model="item.price" class="price-tag">
               {{ price + "$" }}
             </v-card-title>
           </v-row>
@@ -51,7 +53,6 @@
               <v-radio-group
                 v-model="color_modal"
                 row
-                mandatory
                 class="square-radio"
               >
                 <v-radio
@@ -82,7 +83,6 @@
             <v-btn-toggle
               v-model="size_modal"
               color="primary"
-              mandatory
             >
               <v-btn value="S">
                 S
@@ -95,6 +95,11 @@
               </v-btn>
             </v-btn-toggle>
           </v-row>
+          <v-row v-if="isSelectionValid" class="flex-row align-center">
+            <h3 class="mr-4 mt-2 price-tag">
+              {{ total_price.toFixed(2) + "$" }}
+            </h3>
+          </v-row>
           <v-row class="mt-7">
             <v-divider :thickness="2" />
           </v-row>
@@ -180,11 +185,21 @@ export default {
     },
     size_modal: undefined,
     color_modal: undefined,
-    quantity_modal: ''
+    quantity_modal: 1
   }),
   computed: {
     dialogDetail () {
       return this.status
+    },
+    total_price () {
+      if (this.quantity_modal < 0) {
+        return 0
+      } else {
+        return this.quantity_modal * this.price
+      }
+    },
+    isSelectionValid () {
+      return this.size_modal !== undefined && this.color_modal !== undefined
     }
   },
   methods: {
@@ -194,6 +209,11 @@ export default {
     closeDialog () {
       this.$props.status = false
     },
+    clearDialog () {
+      this.size_modal = undefined
+      this.color_modal = undefined
+      this.quantity_modal = 1
+    },
     addProductToCard () {
       const fd = new FormData()
       fd.append('product_id', this.product_id)
@@ -255,5 +275,9 @@ export default {
 .v-dialog {
   overflow: hidden;
 }
-
+.price-tag {
+  color: rgb(210, 110, 75);
+  font-weight: 700;
+  line-height: 1;
+}
 </style>

components/LoginModal.vue

@@ -26,6 +26,7 @@
             v-model="password"
             variant="underlined"
             label="Password"
+            type="password"
             required
           />
         </v-col>
@@ -106,13 +107,13 @@ export default {
           this.$toast.success('Successfully authenticated', {
             duration: 2000
           })
-          this.$router.push('home')
+          window.location.reload()
         }
       } catch (e) {
         this.$toast.error('Username or Password not valid', {
           duration: 2000
         })
-        this.$router.push('/login')
+        window.location.reload()
       }
     },
     closeDialog () {

components/RegisterModal.vue

@@ -143,7 +143,7 @@ export default {
             this.$toast.success('Register successfully', {
               duration: 2000
             })
-            this.$router.push('login')
+            window.location.reload()
           }
         })
       } catch (error) {

components/user/Header.vue

@@ -61,7 +61,18 @@
               </v-icon>
               <span>Need help</span>
             </div>
-            <div class="authentication">
+            <div v-if="auth" class="authentication">
+              <div class="header-info">
+                <span class="font-weight-bold font-weight-black">{{ auth }}</span>
+              </div>
+              <v-icon small>
+                mdi-slash-forward
+              </v-icon>
+              <div class="header-info" @click="logout">
+                <span>log out</span>
+              </div>
+            </div>
+            <div v-else class="authentication">
               <div class="header-info" @click="openDialogLogin">
                 <v-icon small>
                   mdi-account-outline
@@ -123,7 +134,7 @@
           <v-divider vertical inset />
           <div id="menu-activator" class="cart" plain v-bind="attrs" v-on="on">
             <span>Shopping cart:
-              <b>$:0.00</b>
+              <b>$:{{ total }}.00</b>
             </span>
             <v-badge
               :content="products.length || 0"
@@ -189,6 +200,7 @@
     <SignupModal :status="activeRegister" @close="activeRegister = false" />
     <!-- show drawer -->
     <v-navigation-drawer
+      class="nav-modal"
       v-model="drawer"
       absolute
       right
@@ -208,7 +220,7 @@
       <v-list dense three-line>
         <v-list-item v-for="item in wishlist" :key="item.name" link>
           <v-list-item-avatar tile class="align-center item-avatar">
-            <v-img tile :src="item.product.images[0]" />
+            <v-img tile :src="item.product.images[0]"/>
           </v-list-item-avatar>
           <v-list-item-content class="list-item-card">
             <v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
@@ -266,6 +278,9 @@ export default {
         return arr?.push(value.price)
       })
       return arr.reduce((acc, cur) => acc + cur, 0)
+    },
+    auth () {
+      return this.$auth.$storage.getUniversal('userName')
     }
   },
   mounted () {
@@ -381,6 +396,28 @@ export default {
     },
     changeColor () {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+    },
+    async logout () {
+      try {
+        const resp = await this.$axios.post('/logout', {
+          token: this.$auth.$storage.getUniversal('token')
+        })
+        if (resp.status === 200) {
+          this.$toast.success('Logout!', {
+            duration: 2000
+          })
+          window.location.reload()
+          localStorage.setItem('token', '')
+          this.$auth.$storage.setUniversal('loggedIn', 'false')
+          this.$auth.$storage.setUniversal('token', '')
+          this.$auth.$storage.setUniversal('userName', '')
+          this.$auth.$storage.setUniversal('ID', '')
+        }
+      } catch (e) {
+        this.$toast.error('ERR !', {
+          duration: 2000
+        })
+      }
     }
   }
 }
@@ -557,6 +594,10 @@ b {
 .header-bottom {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
+.v-navigation-drawer--close{
+  display: none;
+}
+
 @media only screen and (max-width: 768px) {
   .header-middle-content {
     display: flex;
@@ -566,5 +607,8 @@ b {
     margin-top: 10px;
     width: 95%;
   }
+  .v-navigation-drawer--close{
+    display: none;
+  }
 }
 </style>

pages/home-page/products/_id/index.vue

@@ -8,28 +8,28 @@
             <div class="numbertext">
               1 / 4
             </div>
-            <img src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;">
+            <img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               2 / 4
             </div>
-            <img src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;">
+            <img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               3 / 4
             </div>
-            <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;">
+            <img src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               4 / 4
             </div>
-            <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;">
+            <img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
           </div>
 
           <!-- Next and previous buttons -->
@@ -40,16 +40,16 @@
         <!-- Thumbnail images -->
         <div class="c2">
           <div class="column">
-            <img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
+            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
+            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
+            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
+            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
           </div>
         </div>
       </div>
@@ -133,6 +133,47 @@
         </v-col>
       </div>
     </div>
+    <v-row class="d-flex justify-center mt-10">
+      <h2>
+        RELATED PRODUCT
+      </h2>
+    </v-row>
+    <v-row class="pt-5 pb-5">
+      <v-col
+        v-for="(item, i) in items"
+        :key="i"
+        cols="12"
+        md="3"
+      >
+        <v-hover
+          v-slot="{ hover }"
+          :elevation="hover ? 12 : 2"
+          :class="{ 'on-hover': hover }"
+        >
+          <v-card
+            :elevation="hover ? 16 : 2"
+            :class="{ 'on-hover': hover }"
+            class="mx-auto pa-2 ma-3"
+            max-width="280"
+            link
+          >
+            <div>
+              <v-img
+                :src="item.images"
+                height="250px"
+                cover
+              />
+            </div>
+            <v-card-title class="d-flex justify-center">
+              {{ item.name }}
+            </v-card-title>
+            <v-card-subtitle class="d-flex justify-center">
+              {{ item.price }}
+            </v-card-subtitle>
+          </v-card>
+        </v-hover>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -142,7 +183,29 @@ export default {
   data: () => {
     return {
       product: [],
-      slideIndex: 1
+      slideIndex: 1,
+      items: [
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          price: '100$',
+          name: 'xiaomi x99'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          price: '100$',
+          name: 'xiaomi x99'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          price: '100$',
+          name: 'xiaomi x99'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          price: '100$',
+          name: 'xiaomi x99'
+        }
+      ]
     }
   },
   mounted () {