moved all profile pic stuff into ContactDetailsAvatar

call-me-matt · Apr 8, 2020 · b61540e · b61540e
1 parent 596f315
commit b61540e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 52 deletions.
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
@@ -123,10 +123,6 @@
 							icon="icon-download">
 							{{ t('contacts', 'Download') }}
 						</ActionLink>
-						<!-- FIXME: show this menu item only if respective field available -->
-						<ActionButton v-if="hasFacebookId" icon="icon-category-multimedia" @click="downloadSocialPic">
-							{{ t('contacts', 'Get profile picture from facebook') }}
-						</ActionButton>
 						<ActionButton icon="icon-qrcode" @click="showQRcode">
 							{{ t('contacts', 'Generate QR Code') }}
 						</ActionButton>
@@ -262,17 +258,6 @@ export default {
 			return false
 		},
 
-		hasFacebookId() {
-			const jCal = this.contact.jCal.slice(0)
-			const facebookid = jCal[1].filter(props => props[0] === 'x-socialprofile')
-
-			if (facebookid.length > 0) {
-				return true
-			}
-
-			return false
-		},
-
 		/**
 		 * Warning messages
 		 *
@@ -488,19 +473,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Import facebook profile pic
-		 */
-		downloadSocialPic() {
-			const jCal = this.contact.jCal.slice(0)
-			const facebookid = jCal[1].filter(props => props[0] === 'x-socialprofile')
-			if (facebookid.length > 0) {
-				console.debug('https://graph.facebook.com/' + facebookid[0][3] + '/picture?width=720')
-				// TODO: upload picture
-			}
-			// TODO: error handling
-		},
-
 		/**
 		 * Select the text in the input if it is still set to 'new Contact'
 		 */

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -77,12 +77,14 @@
 				<ActionButton v-if="!isReadOnly" icon="icon-upload" @click="selectFileInput">
 					{{ t('contacts', 'Upload a new picture') }}
 				</ActionButton>
-				<ActionButton v-if="!isReadOnly" icon="icon-link" @click="selectWebInput">
-					{{ t('contacts', 'Choose from web') }}
-				</ActionButton>
 				<ActionButton v-if="!isReadOnly" icon="icon-picture" @click="selectFilePicker">
 					{{ t('contacts', 'Choose from files') }}
 				</ActionButton>
+				<!-- FIXME: show only if facebookId present; deactivated for debugging CSP error -->
+				<!-- <ActionButton v-if="!isReadOnly && hasFacebookId" icon="icon-link" @click="selectWebInput"> -->
+				<ActionButton v-if="!isReadOnly" icon="icon-link" @click="selectWebInput">
+					{{ t('contacts', 'Update from social media') }}
+				</ActionButton>
 			</Actions>
 		</div>
 	</div>
@@ -131,6 +133,12 @@ export default {
 			}
 			return false
 		},
+		hasFacebookId() {
+			const jCal = this.contact.jCal.slice(0)
+			const facebookid = jCal[1].filter(props => props[0] === 'x-socialprofile')
+			if (facebookid.length > 0) { return true }
+			return false
+		},
 	},
 	mounted() {
 		// update image size on window resize
@@ -329,32 +337,45 @@ export default {
 		},
 
 		/**
-		 * WebURL handlers
+		 * WebImage handlers
 		 */
 		async selectWebInput() {
-			if (!this.loading) {
 
-				// FIXME: replace with input field
-				const imageUrl = 'https://github.githubassets.com/images/icons/emoji/unicode/2764.png'
-				// This works (local image):
-				// const imageUrl = 'http://localhost:8099/core/preview?fileId=9&x=192&y=108&a=true'
+			// getting facebook id from contact
+			const jCal = this.contact.jCal.slice(0)
+			const facebookid = jCal[1].filter(props => props[0] === 'x-socialprofile')
+			if (facebookid.length > 0) {
+				// TODO: data verification
+				this.fbProfileUrl = 'https://graph.facebook.com/' + facebookid[0][3] + '/picture?width=720'
+				console.debug('facebook image found: ' + this.fbProfileUrl)
+			}
 
-				if (imageUrl) {
-					this.loading = true
-					try {
-						const { get } = await axios()
-						const response = await get(`${imageUrl}`, {
-							responseType: 'arraybuffer',
-						})
-						const type = response.headers['content-type']
-						const data = Buffer.from(response.data, 'binary').toString('base64')
-						this.setPhoto(data, type)
-					} catch (error) {
-						OC.Notification.showTemporary(t('contacts', 'Error while processing the picture.'))
-						console.error(error)
-						this.loading = false
-					}
+			// FIXME: overwriting non-functioning external imageUrl with local one works...
+			// const imageUrl = 'http://localhost:8099/core/preview?fileId=9&x=192&y=108&a=true'
+			// but external images don't :/
+			const imageUrl = 'https://github.githubassets.com/images/icons/emoji/unicode/2764.png'
+			console.debug('selectWebInput: ' + imageUrl)
+
+			if ((!this.loading) && (imageUrl)) {
+
+				this.loading = true
+				try {
+					const { get } = await axios()
+					const response = await get(`${imageUrl}`, {
+						responseType: 'arraybuffer',
+					})
+					const type = response.headers['content-type']
+					// TODO: error hanndling
+					console.debug('response: ' + response.status)
+					if (response.status !== 200) throw new URIError('verify set facebook profile id')
+					const data = Buffer.from(response.data, 'binary').toString('base64')
+					this.setPhoto(data, type)
+				} catch (error) {
+					OC.Notification.showTemporary(t('contacts', 'Error while processing the picture.'))
+					console.error(error)
+					this.loading = false
 				}
+
 			}
 		},