feat: add momemnt js, format html entities

Author: akinsey

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.9.6",
+    "moment": "^2.29.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "swrv": "^1.0.0-beta.5",

src/components/modals/profile/UpdateProfile.vue

@@ -51,7 +51,7 @@
             <div class="input-section">
               <label for="dob">Date of Birth
               </label>
-              <input type="date" id="dob" placeholder="YYYY-MM-DD" v-model="userCopy.dob">
+              <input type="date" id="dob" placeholder="YYYY-MM-DD" v-model="userCopy.dob_formatted" >
             </div>
 
             <div class="input-section">
@@ -84,7 +84,8 @@
 import Modal from '@/components/layout/Modal.vue'
 import { reactive, toRefs, inject } from 'vue'
 import { usersApi } from '@/api'
-// import { debounce } from 'lodash'
+import { cloneDeep } from 'lodash'
+import moment from 'moment'
 
 export default {
   name: 'update-profile-modal',
@@ -94,6 +95,12 @@ export default {
   setup(props, { emit }) {
     /* Internal Methods */
     // const checkFormValid = () => v.form.valid = v.form.email.valid && v.form.email.unique && v.form.emailPassword.valid
+    const decodeHtml = html => {
+      let text = document.createElement('textarea')
+      text.innerHTML = html
+      return text.value
+    }
+
 
     /* Template Methods */
     const updateProfile = () => {
@@ -121,7 +128,7 @@ export default {
 
     /* Template Data */
     const v = reactive({
-      userCopy: props.user,
+      userCopy: cloneDeep(props.user), // don't want reactiveness
       formValid: false,
       usernameUnique: true,
       usernameValid: true,
@@ -130,6 +137,12 @@ export default {
       errorMessage: ''
     })
 
+    v.userCopy.dob_formatted = moment(v.userCopy.dob).format('YYYY-MM-DD')
+    v.userCopy.name = decodeHtml(v.userCopy.name)
+    v.userCopy.gender = decodeHtml(v.userCopy.gender)
+    v.userCopy.website = decodeHtml(v.userCopy.website)
+    v.userCopy.location = decodeHtml(v.userCopy.location)
+    v.userCopy.language = decodeHtml(v.userCopy.language)
     /* Watch Data */
     // watch(() => v.form.emailPassword.val, val => {
     //   v.form.emailPassword.valid = val && val.length >= 1 && val.length <= 72

yarn.lock

@@ -5815,6 +5815,11 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"