feat: add whatsapp/sms message links forger

Fix CorentinTh#635

Author: sharevb

components.d.ts

@@ -126,7 +126,9 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NA: typeof import('naive-ui')['NA']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
@@ -145,6 +147,7 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
+    NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/tools/phone-parser-and-formatter/index.ts

@@ -1,11 +1,11 @@
 import { Phone } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.phone-parser-and-formatter.title'),
+  name: 'Phone parser and formatter',
   path: '/phone-parser-and-formatter',
-  description: translate('tools.phone-parser-and-formatter.description'),
+  description:
+    'Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc. Forge link to send message in WhatsApp and SMS',
   keywords: [
     'phone',
     'parser',
@@ -18,6 +18,9 @@ export const tool = defineTool({
     'cell',
     'international',
     'national',
+    'whatsapp',
+    'sms',
+    'message',
   ],
   component: () => import('./phone-parser-and-formatter.vue'),
   icon: Phone,

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue

@@ -23,13 +23,16 @@ const validation = useValidation({
   ],
 });
 
-const parsedDetails = computed(() => {
+const parsedRaw = computed(() => {
   if (!validation.isValid) {
     return undefined;
   }
 
-  const parsed = withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined);
+  return withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined);
+});
 
+const parsedDetails = computed(() => {
+  const parsed = parsedRaw.value;
   if (!parsed) {
     return undefined;
   }
@@ -82,6 +85,27 @@ const countriesOptions = getCountries().map(code => ({
   label: `${lookup.byIso(code)?.country || code} (+${getCountryCallingCode(code)})`,
   value: code,
 }));
+
+const messageToSend = ref('');
+const whatsAppLink = computed(() => {
+  const parsed = parsedRaw.value;
+  if (!parsed) {
+    return undefined;
+  }
+
+  const internationalNoPunts = parsed.formatInternational().replace(/^\+0*/g, '').replace(/\D/g, '');
+
+  return `https://wa.me/${internationalNoPunts}?text=${encodeURIComponent(messageToSend.value)}`;
+});
+const smsLink = computed(() => {
+  const parsed = parsedRaw.value;
+  if (!parsed) {
+    return undefined;
+  }
+
+  const internationalNoSpaces = parsed.formatInternational().replace(/\s/g, '');
+  return `sms:${internationalNoSpaces}&body=${encodeURIComponent(messageToSend.value)}`;
+});
 </script>
 
 <template>
@@ -111,5 +135,34 @@ const countriesOptions = getCountries().map(code => ({
         </tr>
       </tbody>
     </n-table>
+
+    <n-divider />
+
+    <c-input-text
+      v-model:value="messageToSend"
+      multiline
+      rows="4"
+      placeholder="Enter a message to send"
+      label="Message to send:"
+      mb-2
+    />
+
+    <c-card v-if="whatsAppLink" title="WhatsApp Send link" mb-2>
+      <input-copyable :value="whatsAppLink" mb-2 />
+      <div flex justify-center>
+        <!-- //NOSONAR --><c-button :href="whatsAppLink" target="_blank">
+          Send via WhatsApp
+        </c-button>
+      </div>
+    </c-card>
+
+    <c-card v-if="smsLink" title="SMS Send link">
+      <input-copyable :value="smsLink" mb-2 />
+      <div flex justify-center>
+        <!-- //NOSONAR --><c-button :href="smsLink" target="_blank">
+          Send via SMS
+        </c-button>
+      </div>
+    </c-card>
   </div>
 </template>