implement packager email address format

frontend/src/utils/packager.js

@@ -0,0 +1,24 @@
+const reMailField = /<(?<email>.*)>/
+
+function generateMailtoAnchor (address) {
+  return `<a href="mailto:${address}">${address}</a>`
+}
+
+/**
+ * replace range of string with another string
+ * "... [index+length] ..." -> "... replacement ..."
+ * @param {Number} start start position of range
+ * @param {Number} length length of range
+ * @param {String} replacement replacement string
+ * @returns {String} Result
+ */
+function replaceRange (start, length, replacement) {
+  return this.substr(0, start) + replacement + this.substr(start + length)
+}
+
+export function formatPackager (desc) {
+  if (desc === undefined) { return }
+  const mailMatch = reMailField.exec(desc)
+  const htmlAnchor = generateMailtoAnchor(mailMatch.groups.email)
+  return replaceRange.call(desc, mailMatch.index, mailMatch[0].length, `<${htmlAnchor}>`)
+}

frontend/src/views/Package.vue

@@ -7,6 +7,7 @@ import ViewDetail from '@/components/PackageInfo/ViewDetail.vue'
 import moment from 'moment'
 import { requestPackageInfo } from '@/api'
 import { calculateSize } from '@/utils/sizing'
+import { formatPackager } from '@/utils/packager'
 
 const route = useRoute()
 
@@ -54,7 +55,7 @@ requestPackageInfo(route.params.packageName)
         </tr>
         <tr>
           <th>Packager:</th>
-          <td>{{ pkginfo.packager }}</td>
+          <td v-html="formatPackager(pkginfo.packager)"></td>
         </tr>
         <tr>
           <th>Package Size:</th>