added first and last name support

ForkPoint · Jan 7, 2022 · c955cef · c955cef
1 parent c9beb53
commit c955cef
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/components/Preview.vue b/components/Preview.vue
@@ -23,18 +23,18 @@
           <meta name="designer" content="Vishnu Raghav" />
           <meta
             property="og:title"
-            :content="`${genInfo.name}'s Digital Business Card`"
+            :content="`${getFullname}'s Digital Business Card`"
           />
           <meta
             property="twitter:title"
-            :content="`${genInfo.name}'s Digital Business Card`"
+            :content="`${getFullname}'s Digital Business Card`"
           />
           <!-- prettier-ignore -->
           <script>
             "http"==window.location.href.substr(0,4)&&"/"!=window.location.href.slice(-1)&&window.location.replace(window.location.href+"/");
           </script>
           <link v-if="getCssHref" :href="getCssHref" rel="stylesheet" />
-          <title>{{ genInfo.name }}'s Digital Business Card</title>
+          <title>{{ getFullname }}'s Digital Business Card</title>
           <style>
             #body{ font-family: sans-serif; } input[type='range']::-moz-range-track { background: none; } input[type='range']::-moz-range-thumb { -moz-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: {{theme === 1? '100%': '0.25rem'}}; border: none; background: {{colors.buttonBg.color}}; z-index: 3; cursor: pointer; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: {{theme === 1? '100%': '0.25rem'}}; border: none; background: {{colors.buttonBg.color}}; z-index: 3; cursor: pointer; } .closeColor{ {{hasLightBG('mainBg') ? 'filter:invert(1) ':''}} } .topAction { {{ hasLightBG('logoBg') ? 'filter:invert(1) ':''}}} .iconColor{ color:#eee; {{hasLightBG('buttonBg') ? 'filter:invert(1)' : null}} } .cardColor{ {{hasLightBG('cardBg') && 'color:#222 !important'}} } .textColor{ {{hasLightBG('mainBg') ? 'color:#222 !important' : 'color:#eee !important'}} } .seekbarColor{  {{`background:${colors.buttonBg.color}80 !important`}} }
           </style>
@@ -64,7 +64,7 @@
                 Use my public key to send me encrypted messages
               </p>
               <a
-                :href="!PreviewMode && `./${genInfo.name}'s public key.asc`"
+                :href="!PreviewMode && `./${getFullname}'s public key.asc`"
                 download
                 target="_blank"
                 id="dlKey"
@@ -176,7 +176,7 @@
             />
             <div id="info" class="textColor">
               <p class="name">
-                {{ genInfo.name }}
+                {{ getFullname }}
               </p>
               <p v-if="genInfo.pronouns" class="pronouns">
                 ({{ genInfo.pronouns }})
@@ -393,6 +393,11 @@ export default {
   },
   computed: {
     ...mapState(['theme']),
+    getFullname() {
+      let fn = this.genInfo.fname
+      let ln = this.genInfo.lname
+      return (fn + ln).length ? `${fn ? fn : ''}${ln ? ' ' + ln : ''}` : null
+    },
     hasOnlyProfilePic() {
       return !(this.images.cover.url || this.images.logo.url)
     },

diff --git a/components/Vcard.vue b/components/Vcard.vue
@@ -2,7 +2,7 @@
   <pre v-show="false" ref="vCard">
 BEGIN:VCARD
 VERSION:3.0
-N:{{ vCard.fn }};;;;
+N:{{ getSplitName }}
 FN:{{ vCard.fn }}
 ORG:{{ vCard.org }}
 TITLE:{{ vCard.title }}
@@ -31,6 +31,11 @@ export default {
         .map((e) => `URL;TYPE=${e.title}:${e.url}`)
         .join('\n')
     },
+    getSplitName() {
+      let fn = this.vCard.fn
+      let ln = this.vCard.ln
+      return `${ln ? ln : ''};${fn ? fn : ''};;;`
+    },
   },
 }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -144,16 +144,29 @@
             Recommended profile photo size is 320 x 320 pixels, with an aspect
             ratio of 1:1
           </p>
-          <div class="stepC mt-6">
-            <label for="fullname" class="ml-4">Full name</label>
-            <input
-              id="fullname"
-              spellcheck="false"
-              type="text"
-              v-model="genInfo.name"
-              autocapitalize="words"
-              class="mt-2 px-4 w-full h-12 bg-black rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 hover:border-gray-600"
-            />
+          <div class="stepC mt-6 grid grid-cols-2 gap-4">
+            <div>
+              <label for="firstname" class="ml-4">First name</label>
+              <input
+                id="firstname"
+                spellcheck="false"
+                type="text"
+                v-model="genInfo.fname"
+                autocapitalize="words"
+                class="mt-2 px-4 w-full h-12 bg-black rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 hover:border-gray-600"
+              />
+            </div>
+            <div>
+              <label for="lastname" class="ml-4">Last name</label>
+              <input
+                id="lastname"
+                spellcheck="false"
+                type="text"
+                v-model="genInfo.lname"
+                autocapitalize="words"
+                class="mt-2 px-4 w-full h-12 bg-black rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 hover:border-gray-600"
+              />
+            </div>
           </div>
           <div class="stepC mt-6">
             <label for="fullname" class="ml-4">Gender pronouns</label>
@@ -678,7 +691,8 @@ export default {
         },
       },
       genInfo: {
-        name: null,
+        fname: null,
+        lname: null,
         pronouns: null,
         title: null,
         biz: null,
@@ -1197,6 +1211,11 @@ export default {
   },
   computed: {
     ...mapState(['theme']),
+    getFullname() {
+      let fn = this.genInfo.fname
+      let ln = this.genInfo.lname
+      return (fn + ln).length ? `${fn ? fn : ''}${ln ? ' ' + ln : ''}` : null
+    },
     pubKeyIsValid() {
       if (this.genInfo.key) {
         if (!this.genInfo.key.match(/^(-----BEGIN PGP PUBLIC KEY BLOCK-----)/))
@@ -1212,8 +1231,8 @@ export default {
       return this.downloadCheckList.filter((e) => e.checked).length == 3
     },
     username() {
-      return this.genInfo.name
-        ? this.genInfo.name.toLowerCase().replace(/\W+/g, '')
+      return this.getFullname
+        ? this.getFullname.toLowerCase().replace(/\W+/g, '')
         : 'username'
     },
     orderedPrimaryActions() {
@@ -1264,7 +1283,8 @@ export default {
       let key = this.pubKeyIsValid ? window.btoa(this.genInfo.key) : null
       let randomNumber = Math.floor(100000000 + Math.random() * 900000)
       return {
-        fn: this.genInfo.name,
+        fn: this.genInfo.fname,
+        ln: this.genInfo.lname,
         title: this.genInfo.title,
         org: this.genInfo.biz,
         cell: getNumber('Mobile'),
@@ -1359,7 +1379,7 @@ export default {
       })
       saveAs(
         window.URL.createObjectURL(blob),
-        `${this.genInfo.name}'s public key.asc`
+        `${this.getFullname}'s public key.asc`
       )
     },
     async resizeImage(type, mime, index1, index2) {
@@ -1574,7 +1594,7 @@ export default {
           }
 
           //  Public key
-          let name = this.genInfo.name
+          let name = this.getFullname
           if (this.pubKeyIsValid) {
             zip
               .folder(username)