Qrcode implementation

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

css/ContactDetails.scss

@@ -130,4 +130,15 @@
 	line-height: 44px;
 	color: var(--color-text-lighter);
 	opacity: .5;
+}
+
+#qrcode-modal {
+	.modal-container {
+		display: flex;
+		padding: 10px;
+		background-color: #fff;
+		.qrcode {
+			width: 100%;
+		}
+	}
 }

css/icons.scss

@@ -24,6 +24,10 @@
 	@include icon-color('social', 'contacts', $color-black, 1);
 }
 
+.icon-qrcode {
+	@include icon-color('qrcode', 'contacts', $color-black, 2);
+}
+
 .icon-address-book {
 	@include icon-color('address-book', 'contacts', $color-black, 1);
 }

img/qrcode.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 4.23 4.23" xmlns="http://www.w3.org/2000/svg"><path d="M.53.25v1.33h1.32V.25zm.26.27h.8v.8h-.8z"/><path d="M1.06.79h.26v.26h-.26zM.53 2.37V3.7h1.32V2.37zm.26.27h.8v.79h-.8z"/><path d="M1.06 2.9h.26v.27h-.26zM2.65.25v1.33h1.32V.25zm.26.27h.8v.8h-.8z"/><path d="M3.17.79h.27v.26h-.27zM2.65 3.17v.53h.53v-.26H2.9v-.27zM2.65 2.38v.53h.26v-.27h.27v-.26zM3.44 2.38h.26v.26h-.26zM3.44 3.17h.26v.27h-.26zM3.7 3.44h.27v.26H3.7zM3.7 2.64h.27v.53H3.7zM3.17 2.9h.27v.27h-.27zM2.12.26v1.6H.52v.26h2.13v-.27h-.27V.26zM2.12 3.17h.26v.53h-.26zM2.12 2.65h.26v.26h-.26zM3.7 1.85h.27v.27H3.7zM2.91 1.85h.53v.27h-.53z"/></svg>

package.json

@@ -44,6 +44,7 @@
 		"nextcloud-vue": "^0.9.4",
 		"p-limit": "^2.2.0",
 		"p-queue": "^4.0.0",
+		"qr-image": "^3.2.0",
 		"uuid": "^3.3.2",
 		"v-tooltip": "^2.0.0-rc.33",
 		"vue": "^2.6.10",

src/components/ContactDetails.vue

@@ -86,6 +86,12 @@
 						</div>
 					</div>
 				</div>
+
+				<!-- qrcode -->
+				<modal v-if="qrcode" id="qrcode-modal" :title="contact.displayName"
+					@close="closeQrModal">
+					<img :src="`data:image/svg+xml;base64,${qrcode}`" class="qrcode">
+				</modal>
 			</header>
 
 			<!-- contact details loading -->
@@ -125,6 +131,10 @@
 <script>
 import debounce from 'debounce'
 import PQueue from 'p-queue'
+import qr from 'qr-image'
+import { stringify } from 'ical.js'
+
+import { Modal } from 'nextcloud-vue'
 
 import rfcProps from 'Models/rfcProps'
 import validate from 'Services/validate'
@@ -147,7 +157,8 @@ export default {
 		PropertyGroups,
 		PropertyRev,
 		AddNewProp,
-		ContactAvatar
+		ContactAvatar,
+		Modal
 	},
 
 	props: {
@@ -174,7 +185,8 @@ export default {
 			localContact: undefined,
 			loadingData: true,
 			loadingUpdate: false,
-			openedMenu: false
+			openedMenu: false,
+			qrcode: ''
 		}
 	},
 
@@ -243,6 +255,11 @@ export default {
 					icon: 'icon-download',
 					text: t('contacts', 'Download'),
 					href: this.contact.url
+				},
+				{
+					icon: 'icon-qrcode',
+					text: t('contacts', 'Generate QR Code'),
+					action: this.showQRcode
 				}
 			]
 			if (!this.contact.addressbook.readOnly) {
@@ -393,6 +410,20 @@ export default {
 			this.openedMenu = !this.openedMenu
 		},
 
+		/**
+		 * Generate a qrcode for the contact
+		 */
+		showQRcode() {
+			let jCal = this.contact.jCal.slice(0)
+			// do not encode photo
+			jCal[1] = jCal[1].filter(props => props[0] !== 'photo')
+
+			let data = stringify(jCal)
+			if (data.length > 0) {
+				this.qrcode = btoa(qr.imageSync(data, { type: 'svg' }))
+			}
+		},
+
 		/**
 		 * Select the text in the input if it is still set to 'new Contact'
 		 */
@@ -505,6 +536,11 @@ export default {
 				.then(() => {
 					this.contact.conflict = false
 				})
+		},
+
+		// reset the current qrcode
+		closeQrModal() {
+			this.qrcode = ''
 		}
 	}
 }