client/pages/address/add.vue

@@ -0,0 +1,216 @@
+<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>New Address</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="a-section">
+              <h2>Add a new 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 value>--</option>
+                      <option></option>
+                    </select>
+                  </div>
+                  <!-- Full name -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">Full Name</label>
+                    <input v-model="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"
+                      type="text"
+                      class="a-input-text"
+                      style="width: 100%;"
+                      placeholder="Street and number, P.O. box, c/o."
+                    />
+                    <!-- Street Address 2 -->
+                    <input
+                      v-model="streetAddress2"
+                      type="text"
+                      class="a-input-text a-spacing-top-small"
+                      style="width: 100%;"
+                      placeholder="Apartment, suite, unit, building, floor, etc."
+                    />
+                  </div>
+                  <!-- City -->
+                  <div class="a-spacing-top-medium">
+                    <label style="margin-bottom: 0px;">City</label>
+                    <input v-model="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" 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" 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" 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="Provide details such as building description, a nearby landmark, or other navigation instructions"
+                      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" type="text" class="a-input-text" style="width: 100%;" placeholder="1234" />
+                  </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 class="a-button-text">Add 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 {
+  data () {
+    return {
+      country: '',
+      fullName: '',
+      streetAddress1: '',
+      streetAddress2: '',
+      city: '',
+      state: '',
+      zipCode: '',
+      phoneNumber: '',
+      deliverInstructions: '',
+      securityCode: ''
+    }
+  },
+
+  methods: {
+    async onAddAddress () {
+      try {
+        let data = {
+          country: this.country,
+          fullName: this.fullName,
+          streetAddress1: this.streetAddress1,
+          streetAddress2: this.streetAddress2,
+          city: this.city,
+          state: this.state,
+          zipCode: this.zipCode,
+          phoneNumber: this.phoneNumber,
+          deliverInstructions: this.deliverInstructions,
+          securityCode: this.securityCode,
+        }
+
+        let response = await $axios.$post('/api/address', data)
+
+        if (response.success) {
+          this.$router.push('/address')
+        }
+      } catch (err) {
+
+      }
+
+    }
+  }
+}
+</script>

server/models/address.js

@@ -0,0 +1,17 @@
+const mongoose = require('mongoose')
+const Schema = mongoose.Schema
+
+const AddressSchema = new Schema({
+  user: { type: Schema.Types.ObjectId, ref: 'User'},
+  country: String,
+  fullName: String,
+  streetAddress: String,
+  city: String,
+  state: String,
+  zipCode: String,
+  phoneNumber: String,
+  deliverInstructions: String,
+  securityCode: String
+})
+
+module.exports = mongoose.model('Address', AddressSchema)

server/routes/address.js

@@ -0,0 +1,49 @@
+const router = require('express').Router()
+const Address = require('../models/address')
+const virifyToken = require('../middlewares/verify-token')
+
+router.post('/address', virifyToken, async (req, res) => {
+  try {
+    let address = new Address()
+    address.user = req.decoded._id
+    address.country = req.body.country
+    address.fullName = req.body.fullName
+    address.streetAddress = req.body.streetAddress
+    address.city = req.body.city
+    address.state = req.body.state
+    address.zipCode = req.body.zipCode
+    address.phoneNumber = req.body.phoneNumber
+    address.deliverInstructions = req.body.deliverInstructions
+    address.securityCode = req.body.securityCode
+
+    await address.save()
+    res.json({
+      success: true,
+      message: 'Success added an address'
+    })
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+router.get('/address', virifyToken, async (req, res) => {
+  try {
+    let addresses = await Address.find({ user: req.decoded._id })
+
+    res.json({
+      success: true,
+      addresses
+    })
+
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+module.exports = router

server/server.js

@@ -30,7 +30,7 @@ const categoryRouters = require('./routes/category')
 const ownerRouters = require('./routes/owner')
 const userRouters = require('./routes/auth')
 const reviewRouters = require('./routes/review')
-
+const addressRouters = require('./routes/address')
 
 
 app.use('/api', productRouters)
@@ -38,6 +38,7 @@ app.use('/api', categoryRouters)
 app.use('/api', ownerRouters)
 app.use('/api', userRouters)
 app.use('/api', reviewRouters)
+app.use('/api', addressRouters)
 
 app.listen(3000, (err) => {
   if (err) {