Merge pull request 'Add XMPP Field' (#2) from add-xmpp into master

Reviewed-on: https://codeberg.org/arran/QCard/pulls/2

src/ContactCard.svelte

@@ -112,6 +112,7 @@
 	export let website = "";
 	export let comment = "";
 	export let address = "";
+	export let xmpp = "";
 
 	export let vCardString;
 	export let selfLink;
@@ -131,12 +132,14 @@
 		setVCardProperty("url", website);
 		setVCardProperty("note", comment);
 		setVCardProperty("adr", address);
+		setVCardProperty("X-JABBER", xmpp);
 
 		vCardString = generateVCardString(
 			vCardObj,
 			true
 		);
 
+
 		selfLink = getSelfLink();
 	};
 
@@ -243,7 +246,7 @@
 		</div>
 
 
-		{#if email || phone || website || address}
+		{#if email || phone || website || address || xmpp}
 		<div class="contact-methods">
 			{#if email}
 			<div class="contact-method-item">
@@ -261,6 +264,14 @@
 			</div>
 			{/if}
 
+			{#if xmpp}
+			<div class="contact-method-item">
+				<a href="xmpp:{xmpp}" target="_blank" alt="{xmpp}">
+					<img src="/icons/xmpp.svg" alt="XMPP icon"/>
+				</a>
+			</div>
+			{/if}
+
 			{#if website}
 			<div class="contact-method-item">
 				<a href={website} target="_blank" alt="Website provided by {name}">

src/CreateForm.svelte

@@ -76,6 +76,7 @@
 		{ id: 'websiteField', type:"url", displayName: "Website", value: '', placeholder: "https://thelute.com"},
 		{ id: 'commentField', type:"textarea", displayName: "Comment", value: '', placeholder: "Yes, yes, yes. You never get involved. Except you actually do, all of the time."},
 		{ id: 'addressField', type:"text", displayName: "Address", value: '', placeholder: "10 Lute Street, 012"},
+		{ id: 'xmppField', type:"text", displayName: "XMPP", value: '', placeholder: "[email protected]"},
 	];
 
 	let activeFields = [
@@ -98,6 +99,7 @@
 			website: form.target.websiteField ? form.target.websiteField.value : "",
 			comment: form.target.commentField ? form.target.commentField.value : "",
 			address: form.target.addressField ? form.target.addressField.value : "",
+			xmpp: form.target.xmppField ? form.target.xmppField.value : "",
 		});
 	}
 

src/pages/CreateCard.svelte

@@ -16,6 +16,7 @@
     	website: "",
 		comment: "",
 		address: "",
+		xmpp: "",
     };
 
 	// sleep time expects milliseconds
@@ -60,6 +61,7 @@
 				website = {contactDetails.website}
 				comment = {contactDetails.comment}
 				address = {contactDetails.address}
+				xmpp = {contactDetails.xmpp}
 			/>
 		</div>
 		{/if}

src/pages/ViewCard.svelte

@@ -26,13 +26,14 @@
     }
 
     let contactDetails = {
-		name: "",
-		title: "",
-		email: "",
-		phone: "",
-    	website: "",
-		comment: "",
-		address: "",
+        name: "",
+        title: "",
+        email: "",
+        phone: "",
+        website: "",
+        comment: "",
+        address: "",
+        xmpp: "",
     };
 
     let loading = true;
@@ -54,7 +55,8 @@
             phone: getVCardProperty(VCardObj, "tel"),
             website: getVCardProperty(VCardObj, "url"),
             comment: getVCardProperty(VCardObj, "note"),
-            address: getVCardProperty(VCardObj, "adr")
+            address: getVCardProperty(VCardObj, "adr"),
+            xmpp: getVCardProperty(VCardObj, "X-JABBER"),
         }
         loading = false;
     }
@@ -80,6 +82,7 @@
         website = {contactDetails.website}
         comment = {contactDetails.comment}
         address = {contactDetails.address}
+        xmpp = {contactDetails.xmpp}
         /> 
         <div class="create-footer-link" in:fly="{{ y: -20, duration: 600, delay:800, easing: backOut}}">
             <a href="https://qcard.link">Create your own <strong>QCard</strong></a>