From 13725f040bca346a7b35b832f36f4e86c5da11e4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 7 Feb 2019 03:05:59 -0500
Subject: Add avatar crop popup

---
 src/components/image_cropper/image_cropper.js | 88 +++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/components/image_cropper/image_cropper.js

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
new file mode 100644
index 00000000..e4bf5ea2
--- /dev/null
+++ b/src/components/image_cropper/image_cropper.js
@@ -0,0 +1,88 @@
+import Cropper from 'cropperjs'
+import Modal from '../modal/modal.vue'
+import 'cropperjs/dist/cropper.css'
+
+const ImageCropper = {
+  props: {
+    trigger: {
+      type: [String, Element],
+      required: true
+    },
+    cropperOptions: {
+      type: Object,
+      default () {
+        return {
+          aspectRatio: 1,
+          autoCropArea: 1,
+          viewMode: 1,
+          movable: false,
+          zoomable: false,
+          guides: false
+        }
+      }
+    },
+    mimes: {
+      type: String,
+      default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
+    },
+    title: {
+      type: String,
+      default: 'Crop picture'
+    },
+    saveButtonLabel: {
+      type: String,
+      default: 'Save'
+    }
+  },
+  data () {
+    return {
+      cropper: undefined,
+      dataUrl: undefined,
+      filename: undefined
+    }
+  },
+  components: {
+    Modal
+  },
+  methods: {
+    destroy () {
+      this.cropper.destroy()
+      this.$refs.input.value = ''
+      this.dataUrl = undefined
+    },
+    submit () {
+      this.$emit('submit', this.cropper, this.filename)
+      this.destroy()
+    },
+    pickImage () {
+      this.$refs.input.click()
+    },
+    createCropper () {
+      this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
+    }
+  },
+  mounted () {
+    // listen for click event on trigger
+    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    if (!trigger) {
+      this.$emit('error', 'No image make trigger found.', 'user')
+    } else {
+      trigger.addEventListener('click', this.pickImage)
+    }
+    // listen for input file changes
+    let fileInput = this.$refs.input
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files != null && fileInput.files[0] != null) {
+        let reader = new FileReader()
+        reader.onload = (e) => {
+          this.dataUrl = e.target.result
+        }
+        reader.readAsDataURL(fileInput.files[0])
+        this.filename = fileInput.files[0].name || 'unknown'
+        this.$emit('changed', fileInput.files[0], reader)
+      }
+    })
+  }
+}
+
+export default ImageCropper
-- 
cgit v1.2.3-70-g09d2


From 228e6681e3fd4a16d08d96edb9eea21d64be5600 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 11:42:02 -0500
Subject: Localization of ImageCropper component

---
 src/components/image_cropper/image_cropper.js  | 14 ++++++++++----
 src/components/image_cropper/image_cropper.vue |  4 ++--
 src/i18n/en.json                               |  4 ++++
 3 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index e4bf5ea2..86bd2d67 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -26,12 +26,10 @@ const ImageCropper = {
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
     title: {
-      type: String,
-      default: 'Crop picture'
+      type: String
     },
     saveButtonLabel: {
-      type: String,
-      default: 'Save'
+      type: String
     }
   },
   data () {
@@ -44,6 +42,14 @@ const ImageCropper = {
   components: {
     Modal
   },
+  computed: {
+    modalTitle () {
+      return this.title || this.$t('image_cropper.crop_picture')
+    },
+    modalSaveButtonLabel () {
+      return this.saveButtonLabel || this.$t('image_cropper.save')
+    }
+  },
   methods: {
     destroy () {
       this.cropper.destroy()
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 1c52842c..b2367128 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="image-cropper">
-    <modal :show="dataUrl" :title="title" @close="destroy">
+    <modal :show="dataUrl" :title="modalTitle" @close="destroy">
       <div class="modal-body">
         <div class="image-cropper-image-container">
           <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button>
+        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
       </div>
     </modal>
     <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d44091e6..3e9ac157 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -21,6 +21,10 @@
     "more": "More",
     "generic_error": "An error occured"
   },
+  "image_cropper": {
+    "crop_picture": "Crop picture",
+    "save": "Save"
+  },
   "login": {
     "login": "Log in",
     "description": "Log in with OAuth",
-- 
cgit v1.2.3-70-g09d2


From ddfdaf3284c6790b1e973ca4ce469b07a2136ebc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 12:03:04 -0500
Subject: Remove event listeners when destory ImageCropper

---
 src/components/image_cropper/image_cropper.js | 40 ++++++++++++++++++---------
 1 file changed, 27 insertions(+), 13 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 86bd2d67..c15ce9d8 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -65,29 +65,43 @@ const ImageCropper = {
     },
     createCropper () {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
+    },
+    getTriggerDOM () {
+      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    },
+    readFile () {
+      const fileInput = this.$refs.input
+      if (fileInput.files != null && fileInput.files[0] != null) {
+        let reader = new FileReader()
+        reader.onload = (e) => {
+          this.dataUrl = e.target.result
+        }
+        reader.readAsDataURL(fileInput.files[0])
+        this.filename = fileInput.files[0].name || 'unknown'
+        this.$emit('changed', fileInput.files[0], reader)
+      }
     }
   },
   mounted () {
     // listen for click event on trigger
-    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    const trigger = this.getTriggerDOM()
     if (!trigger) {
       this.$emit('error', 'No image make trigger found.', 'user')
     } else {
       trigger.addEventListener('click', this.pickImage)
     }
     // listen for input file changes
-    let fileInput = this.$refs.input
-    fileInput.addEventListener('change', () => {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let reader = new FileReader()
-        reader.onload = (e) => {
-          this.dataUrl = e.target.result
-        }
-        reader.readAsDataURL(fileInput.files[0])
-        this.filename = fileInput.files[0].name || 'unknown'
-        this.$emit('changed', fileInput.files[0], reader)
-      }
-    })
+    const fileInput = this.$refs.input
+    fileInput.addEventListener('change', this.readFile)
+  },
+  beforeDestroy: function () {
+    // remove the event listeners
+    const trigger = this.getTriggerDOM()
+    if (trigger) {
+      trigger.removeEventListener('click', this.pickImage)
+    }
+    const fileInput = this.$refs.input
+    fileInput.removeEventListener('change', this.readFile)
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From b458b2ae5f6c939781af16e32b50e61e1c1bf929 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 12:07:25 -0500
Subject: Check if variable exists before using

---
 src/components/image_cropper/image_cropper.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index c15ce9d8..d919827f 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -52,7 +52,9 @@ const ImageCropper = {
   },
   methods: {
     destroy () {
-      this.cropper.destroy()
+      if (this.cropper) {
+        this.cropper.destroy()
+      }
       this.$refs.input.value = ''
       this.dataUrl = undefined
     },
-- 
cgit v1.2.3-70-g09d2


From 546ba9eba98041ef1c097541a734c73c4917070e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 12:13:23 -0500
Subject: Revert eslintrc changes

---
 .eslintrc.js                                  | 6 ------
 src/components/image_cropper/image_cropper.js | 4 ++--
 2 files changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/.eslintrc.js b/.eslintrc.js
index 32842d3c..800f9a4f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,12 +10,6 @@ module.exports = {
   plugins: [
     'html'
   ],
-  globals: {
-    'FileReader': false,
-    'Element': false,
-    'FormData': false,
-    'XMLHttpRequest': false
-  },
   // add your custom rules here
   rules: {
     // allow paren-less arrow functions
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index d919827f..b2580240 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -5,7 +5,7 @@ import 'cropperjs/dist/cropper.css'
 const ImageCropper = {
   props: {
     trigger: {
-      type: [String, Element],
+      type: [String, window.Element],
       required: true
     },
     cropperOptions: {
@@ -74,7 +74,7 @@ const ImageCropper = {
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
-        let reader = new FileReader()
+        let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
         }
-- 
cgit v1.2.3-70-g09d2


From b24db12e1cc318e862169355a22f051d3ea2e809 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 21:59:33 -0500
Subject: Make embedded image cropper

---
 src/components/image_cropper/image_cropper.js  | 37 ++++++++++++++--------
 src/components/image_cropper/image_cropper.vue | 25 ++++++++-------
 src/components/user_settings/user_settings.js  |  9 ++----
 src/components/user_settings/user_settings.vue | 43 ++++----------------------
 src/i18n/en.json                               |  5 +--
 5 files changed, 50 insertions(+), 69 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index b2580240..4eaa08d4 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -1,5 +1,4 @@
 import Cropper from 'cropperjs'
-import Modal from '../modal/modal.vue'
 import 'cropperjs/dist/cropper.css'
 
 const ImageCropper = {
@@ -8,6 +7,10 @@ const ImageCropper = {
       type: [String, window.Element],
       required: true
     },
+    submitHandler: {
+      type: Function,
+      required: true
+    },
     cropperOptions: {
       type: Object,
       default () {
@@ -25,10 +28,10 @@ const ImageCropper = {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
-    title: {
+    saveButtonLabel: {
       type: String
     },
-    saveButtonLabel: {
+    cancelButtonLabel: {
       type: String
     }
   },
@@ -36,18 +39,17 @@ const ImageCropper = {
     return {
       cropper: undefined,
       dataUrl: undefined,
-      filename: undefined
+      filename: undefined,
+      submitting: false,
+      submitError: null
     }
   },
-  components: {
-    Modal
-  },
   computed: {
-    modalTitle () {
-      return this.title || this.$t('image_cropper.crop_picture')
-    },
-    modalSaveButtonLabel () {
+    saveText () {
       return this.saveButtonLabel || this.$t('image_cropper.save')
+    },
+    cancelText () {
+      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
     }
   },
   methods: {
@@ -57,10 +59,15 @@ const ImageCropper = {
       }
       this.$refs.input.value = ''
       this.dataUrl = undefined
+      this.$emit('close')
     },
     submit () {
-      this.$emit('submit', this.cropper, this.filename)
-      this.destroy()
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(this.cropper, this.filename)
+        .then(() => this.destroy())
+        .catch(err => this.submitError = err)
+        .finally(() => this.submitting = false)
     },
     pickImage () {
       this.$refs.input.click()
@@ -77,11 +84,15 @@ const ImageCropper = {
         let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
+          this.$emit('open')
         }
         reader.readAsDataURL(fileInput.files[0])
         this.filename = fileInput.files[0].name || 'unknown'
         this.$emit('changed', fileInput.files[0], reader)
       }
+    },
+    clearError () {
+      this.submitError = null
     }
   },
   mounted () {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index b2367128..aa895863 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -1,15 +1,19 @@
 <template>
   <div class="image-cropper">
-    <modal :show="dataUrl" :title="modalTitle" @close="destroy">
-      <div class="modal-body">
-        <div class="image-cropper-image-container">
-          <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
-        </div>
+    <div v-if="dataUrl">
+      <div class="image-cropper-image-container">
+        <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
       </div>
-      <div class="modal-footer">
-        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
+      <div class="image-cropper-buttons-wrapper">
+        <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
-    </modal>
+      <div class="alert error" v-if="submitError">
+        Error: {{ submitError }}
+        <i class="button-icon icon-cancel" @click="clearError"></i>
+      </div>
+    </div>
     <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
   </div>
 </template>
@@ -31,9 +35,8 @@
     }
   }
 
-  &-btn {
-    display: block;
-    width: 100%;
+  &-buttons-wrapper {
+    margin-top: 15px;
   }
 }
 </style>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 8987c691..2d521c14 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -21,13 +21,12 @@ const UserSettings = {
       followImportError: false,
       followsImported: false,
       enableFollowsExport: true,
-      avatarUploading: false,
+      pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
       followListUploading: false,
       bannerPreview: null,
       backgroundPreview: null,
-      avatarUploadError: null,
       bannerUploadError: null,
       backgroundUploadError: null,
       deletingAccount: false,
@@ -120,15 +119,13 @@ const UserSettings = {
     },
     submitAvatar (cropper) {
       const img = cropper.getCroppedCanvas({ minWidth: 150, minHeight: 150 }).toDataURL('image/jpeg')
-      this.avatarUploading = true
-      this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
+      return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
         } else {
-          this.avatarUploadError = this.$t('upload.error.base') + user.error
+          throw this.$t('upload.error.base') + user.error
         }
-        this.avatarUploading = false
       })
     },
     clearUploadError (slot) {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 9fcd3752..8ab92e95 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -47,20 +47,11 @@
           <div class="setting-item">
             <h2>{{$t('settings.avatar')}}</h2>
             <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
-            <div class="avatar-upload-wrapper">
-              <div class="avatar-upload">
-                <img :src="user.profile_image_url_original" class="avatar" />
-                <div class="avatar-upload-loading-wrapper" v-if="avatarUploading">
-                  <i class="icon-spin4 animate-spin"></i>
-                </div>
-              </div>
-            </div>
-            <button class="btn" type="button" id="pick-avatar" :disabled="avatarUploading">{{$t('settings.set_new_avatar')}}</button>
-            <div class="alert error" v-if="avatarUploadError">
-              Error: {{ avatarUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
-            </div>
-            <image-cropper trigger="#pick-avatar" :title="$t('settings.crop_your_new_avatar')" :saveButtonLabel="$t('settings.set_new_avatar')" @submit="submitAvatar" />
+            <p>{{$t('settings.current_avatar')}}</p>
+            <img :src="user.profile_image_url_original" class="current-avatar"></img>
+            <p>{{$t('settings.set_new_avatar')}}</p>
+            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
+            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
@@ -196,29 +187,7 @@
     max-width: 100%;
   }
 
-  .avatar-upload {
-    display: inline-block;
-    position: relative;
-  }
-
-  .avatar-upload-loading-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0,0,0,.3);
-
-    i {
-      font-size: 50px;
-      color: #FFF;
-    }
-  }
-
-  .avatar {
+  .current-avatar {
     display: block;
     width: 150px;
     height: 150px;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3e9ac157..af62acfc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -23,7 +23,8 @@
   },
   "image_cropper": {
     "crop_picture": "Crop picture",
-    "save": "Save"
+    "save": "Save",
+    "cancel": "Cancel"
   },
   "login": {
     "login": "Log in",
@@ -116,7 +117,6 @@
     "collapse_subject": "Collapse posts with subjects",
     "composing": "Composing",
     "confirm_new_password": "Confirm new password",
-    "crop_your_new_avatar": "Crop your new avatar",
     "current_avatar": "Your current avatar",
     "current_password": "Current password",
     "current_profile_banner": "Your current profile banner",
@@ -211,6 +211,7 @@
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
     "tooltipRadius": "Tooltips/alerts",
+    "upload_a_photo": "Upload a photo",
     "user_settings": "User Settings",
     "values": {
       "false": "no",
-- 
cgit v1.2.3-70-g09d2


From 2de756aa0c27ae5267032e07c2e1f998d49d0df5 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 22:17:53 -0500
Subject: Better error handling

---
 src/components/image_cropper/image_cropper.js  | 3 +++
 src/components/image_cropper/image_cropper.vue | 2 +-
 src/components/user_settings/user_settings.js  | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 4eaa08d4..da94427a 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -50,6 +50,9 @@ const ImageCropper = {
     },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
+    },
+    submitErrorMsg () {
+      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
     }
   },
   methods: {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index aa895863..24a6f3bd 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -10,7 +10,7 @@
         <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
       <div class="alert error" v-if="submitError">
-        Error: {{ submitError }}
+        {{submitErrorMsg}}
         <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
     </div>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index c1c60102..dce3eeed 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -124,7 +124,7 @@ const UserSettings = {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
         } else {
-          throw this.$t('upload.error.base') + user.error
+          throw new Error(this.$t('upload.error.base') + user.error)
         }
       })
     },
-- 
cgit v1.2.3-70-g09d2


From 3094c50ff9e7abc7fc8b7fa4d21d606170843178 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 22:37:45 -0500
Subject: Fix lint errors

---
 src/components/image_cropper/image_cropper.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index da94427a..990c0370 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -69,8 +69,12 @@ const ImageCropper = {
       this.avatarUploadError = null
       this.submitHandler(this.cropper, this.filename)
         .then(() => this.destroy())
-        .catch(err => this.submitError = err)
-        .finally(() => this.submitting = false)
+        .catch((err) => {
+          this.submitError = err
+        })
+        .finally(() => {
+          this.submitting = false
+        })
     },
     pickImage () {
       this.$refs.input.click()
-- 
cgit v1.2.3-70-g09d2


From ff9e55ae4248504345b5ee7935b084defc4cad1c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 4 Mar 2019 21:22:32 -0500
Subject: Generate cropped avatar image in the original file type

---
 src/components/image_cropper/image_cropper.js | 8 ++++----
 src/components/user_settings/user_settings.js | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 990c0370..49d51846 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -67,7 +67,7 @@ const ImageCropper = {
     submit () {
       this.submitting = true
       this.avatarUploadError = null
-      this.submitHandler(this.cropper, this.filename)
+      this.submitHandler(this.cropper, this.file)
         .then(() => this.destroy())
         .catch((err) => {
           this.submitError = err
@@ -88,14 +88,14 @@ const ImageCropper = {
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
+        this.file = fileInput.files[0]
         let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
           this.$emit('open')
         }
-        reader.readAsDataURL(fileInput.files[0])
-        this.filename = fileInput.files[0].name || 'unknown'
-        this.$emit('changed', fileInput.files[0], reader)
+        reader.readAsDataURL(this.file)
+        this.$emit('changed', this.file, reader)
       }
     },
     clearError () {
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index d6972737..c0ab759c 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -157,8 +157,8 @@ const UserSettings = {
       }
       reader.readAsDataURL(file)
     },
-    submitAvatar (cropper) {
-      const img = cropper.getCroppedCanvas().toDataURL('image/jpeg')
+    submitAvatar (cropper, file) {
+      const img = cropper.getCroppedCanvas().toDataURL(file.type)
       return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
-- 
cgit v1.2.3-70-g09d2