주소 수정 기능 추가

client/components/Navbar.vue

@@ -28,7 +28,7 @@
                 <div id="nav-packard-glow-loc-icon" class="nav-sprite"></div>
                 <div class="glow-ingress-block">
                   <span id="glow-ingress-line1" class="nav-line-2">Deliver to </span>
-                  <span id="glow-ingress-line2" class="nav-line-2">Califonia</span>
+                  <span id="glow-ingress-line2" class="nav-line-2">{{ $auth.$state.user.address.city }}</span>
                 </div>
               </nuxt-link>
             </div>

client/pages/address/_id.vue

@@ -0,0 +1,239 @@
+<template>
+  <!--MAIN-->
+  <main>
+    <!--REGISTER ADDRESS-->
+    <div class="registerAddress mt-3">
+      <div class="container-fluid c-section">
+        <div class="row">
+          <div class="col-sm-3"></div>
+          <div class="col-sm-6">
+            <div class="a-section a-spacing-medium">
+              <div class="a-subheader a-breadcrumb a-spacing-small">
+                <ul>
+                  <li>
+                    <a href="#">
+                      <span>Your Account</span>
+                    </a>
+                  </li>
+                  <li class="a-breadcrumb-divider">›</li>
+                  <li>
+                    <a href="#">
+                      <span>Your Adresses</span>
+                    </a>
+                  </li>
+                  <li class="a-breadcrumb-divider">›</li>
+                  <li class="active">
+                    <a href="#">
+                      <span>Update Address</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="a-section">
+              <h2>Update address</h2>
+              <div class="a-section a-spacing-none a-spacing-top-small">
+                <b>
+                  Or pick up your packages at your convenience from our self-service locations. To add an Amazon Pickup Point or Locker, click
+                  <a
+                    href="#"
+                  >here</a>.
+                </b>
+              </div>
+              <!-- Error Message -->
+              <div class="a-section a-spacing-none a-spacing-top-small">
+                <b></b>
+              </div>
+              <form>
+                <div class="a-spacing-medium a-spacing-top-medium">
+                  <!-- Country / Region -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Country/Region</label>
+                    <select v-model="country" class="a-select-option">
+                      <option
+                        v-for="country in countries"
+                        :key="country.alpha2Code"
+                        :value="country.name"
+                      >{{ country.name }}</option>
+                    </select>
+                  </div>
+                  <!-- Full name -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Full Name</label>
+                    <input v-model="fullName" :placeholder="address.fullName" type="text" class="a-input-text" style="width: 100%;" />
+                  </div>
+                  <!-- Street Address -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Street Address</label>
+                    <input
+                      v-model="streetAddress1"
+                      :placeholder="address.streetAddress1"
+                      type="text"
+                      class="a-input-text"
+                      style="width: 100%;"
+                    />
+                    <!-- Street Address 2 -->
+                    <input
+                      v-model="streetAddress2"
+                      :placeholder="address.streetAddress2"
+                      type="text"
+                      class="a-input-text a-spacing-top-small"
+                      style="width: 100%;"
+                    />
+                  </div>
+                  <!-- City -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">City</label>
+                    <input v-model="city" :placeholder="address.city" type="text" class="a-input-text" style="width: 100%;" />
+                  </div>
+                  <!-- State -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">State / Province / Region</label>
+                    <input v-model="state" :placeholder="address.state" type="text" class="a-input-text" style="width: 100%;" />
+                  </div>
+                  <!-- Zip Code -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Zip Code</label>
+                    <input v-model="zipCode" :placeholder="address.zipCode" type="text" class="a-input-text" style="width: 100%;" />
+                  </div>
+                  <!-- Phone Number -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Phone Number</label>
+                    <input v-model="phoneNumber" :placeholder="address.phoneNumber" type="text" class="a-input-text" style="width: 100%;" />
+                    <div class="a-section a-spacing-none a-spacing-top-micro">
+                      <span class="a-size-mini">May be used to assist delivery</span>
+                    </div>
+                  </div>
+                  <div class="a-spacing-base a-spacing-top-medium">
+                    <h3>Add delivery instructions</h3>
+                  </div>
+                  <!-- Delivery Instruction -->
+                  <div class="a-spacing-top-medium">
+                    <label
+                      style="margin-bottom: 0px;"
+                    >Do we need additional instructions to find this address?</label>
+                    <textarea
+                      v-model="deliverInstructions"
+                      :placeholder="address.deliverInstructions"
+                      style="height:6em; width: 100%;"
+                    ></textarea>
+                  </div>
+                  <!-- Security code -->
+                  <div class="a-spacing-top-medium">
+                    <label
+                      style="margin-bottom: 0px;"
+                    >Do we need a security code or a call box number to access this building?</label>
+                    <input v-model="securityCode" :placeholder="address.securityCode" type="text" class="a-input-text" style="width: 100%;" />
+                  </div>
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Weekend delivery</label>
+                    <a href="#">
+                      <i class="fas fa-angle-down"></i> Which days can you receive packages?
+                    </a>
+                  </div>
+                  <div class="a-spacing-top-medium"></div>
+                  <hr />
+                  <div class="a-spacing-top-medium">
+                    <span>
+                      <b>Make sure your address is correct</b>
+                    </span>
+                  </div>
+                  <div>
+                    <span>If the address contains typos or other errors, your package may be undeliverable.</span>
+                  </div>
+                  <div class="a-spacing-top-small">
+                    <span>
+                      <a href="#">Tips for entering addresses</a>
+                    </span>
+                    <span>|</span>
+                    <span>
+                      <a href="#">APO/FPO address tips</a>
+                    </span>
+                  </div>
+                  <div class="a-spacing-top-large">
+                    <span class="a-button-register">
+                      <span class="a-button-inner">
+                        <span @click="onUpdateAddress" class="a-button-text">Update address</span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+          <div class="col-sm-3"></div>
+        </div>
+      </div>
+    </div>
+    <!--/REGISTER ADDRESS-->
+  </main>
+  <!--/MAIN-->
+</template>
+
+
+<script>
+export default {
+  async asyncData ({ $axios, params }) {
+    try {
+      let response =  $axios.$get('/api/countries')
+      let singleAddress =  $axios.$get(`/api/address/${params.id}`)
+
+      let [countriesResponse, addressResponse] = await Promise.all([
+        response,
+        singleAddress
+      ])
+
+      console.log(singleAddress)
+
+      return {
+        countries: countriesResponse,
+        address: addressResponse.address
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+
+  data () {
+    return {
+      country: 'United States of America',
+      fullName: '',
+      streetAddress1: '',
+      streetAddress2: '',
+      city: '',
+      state: '',
+      zipCode: '',
+      phoneNumber: '',
+      deliverInstructions: '',
+      securityCode: ''
+    }
+  },
+
+  methods: {
+    async onUpdateAddress () {
+      try {
+        let data = {
+          country: this.country,
+          fullName: this.fullName,
+          streetAddress: this.streetAddress1 + ' ' + this.streetAddress2,
+          city: this.city,
+          state: this.state,
+          zipCode: this.zipCode,
+          phoneNumber: this.phoneNumber,
+          deliverInstructions: this.deliverInstructions,
+          securityCode: this.securityCode,
+        }
+
+        let response = await this.$axios.$put(`/api/address/${this.$route.params.id}`, data)
+
+        if (response.success) {
+          this.$router.push('/address')
+        }
+      } catch (err) {
+        console.log(err)
+      }
+
+    }
+  }
+}
+</script>

client/pages/address/index.vue

@@ -71,7 +71,7 @@
                       </div>
                       <!-- Delete Button -->
                       <div class="edit-address-desktop-link">
-                        <a href="#">Edit</a>
+                        <nuxt-link :to="`/address/${address._id}`">Edit</nuxt-link>
                         &nbsp; | &nbsp;
                         <a @click="onDeleteAddress(address._id, index)" href="#">Delete</a>
                         &nbsp; | &nbsp;

server/routes/address.js

@@ -61,6 +61,22 @@ router.get('/countries', async (req, res) => {
   }
 })
 
+router.get('/address/:id', virifyToken, async (req, res) => {
+  try {
+    let address = await Address.findOne({ _id: req.params.id })
+
+    res.json({
+      success: true,
+      address,
+    })
+  } catch (err) {
+    res.status(500).json({
+      success: fail,
+      message: err.message
+    })
+  }
+})
+
 router.put('/address/:id', virifyToken, async (req, res) => {
   try {
     let foundAddress = await Address.findOne({ user: req.decoded._id, _id: req.params.id })

server/routes/auth.js

@@ -36,7 +36,7 @@ router.post('/auth/signup', async (req, res) => {
 
 router.get('/auth/user', virifyToken, async (req, res) => {
   try {
-    let foundUser = await User.findOne({ _id: req.decoded._id })
+    let foundUser = await (await User.findOne({ _id: req.decoded._id })).populate('address')
     if (foundUser) {
       res.json({
         success: true,