fix: only display the first 5 character of the project secret key (#419)

* fix: only display the first 5 character of the project secret key

The rest is masked as "*"

* trigger GitHub actions

* fixed length mask to avoid potential UI scaling issues

* feat: display additional metadata in SyncFooter

* feat: show 'MAPEO' when there's no encryption key

src/renderer/components/SyncView/SyncFooter.js

@@ -1,19 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React, {useEffect, useState} from 'react'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
+import {makeStyles} from '@material-ui/core/styles'
 import api from '../../new-api'
 
+const visibleKeyLength = 5
+
 const SyncFooter = () => {
   const cx = useStyles()
   const [encryptionKey, setEncryptionKey] = useState(null)
+  const [metadata, setMetadata] = useState(null)
 
   // Check encryption key on load
   useEffect(() => {
     const check = async () => {
       const encryptionKey = await api.getEncryptionKey()
       setEncryptionKey(encryptionKey)
+      const metadata = await api.getMetadata()
+      setMetadata(metadata)
     }
     check()
   }, [])
@@ -23,7 +28,13 @@ const SyncFooter = () => {
       <Toolbar>
         <div className={cx.titleBar}>
           <Typography component='h2' className={cx.title}>
-            {encryptionKey}
+            {[metadata ? metadata.name : '',
+              metadata ? metadata.version : ''].join(' ')}
+          </Typography>
+          <Typography component='h2' className={cx.subTitle}>
+            {encryptionKey
+              ? `${encryptionKey.slice(0, visibleKeyLength)}${'*'.repeat(10)}`
+              : 'MAPEO'}
           </Typography>
         </div>
       </Toolbar>
@@ -45,5 +56,8 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     color: 'black'
+  },
+  subTitle: {
+    color: 'grey'
   }
 }))

src/renderer/new-api.js

@@ -82,6 +82,12 @@ function Api ({ baseUrl, ipc }) {
       return get(`styles/${id}/style.json?${startupTime}`)
     },
 
+    getMetadata: function getMetadata () {
+      return get(`presets/default/metadata.json?${Date.now()}`).then(
+        (data) => data || {}
+      )
+    },
+
     /**
      * DELETE methods
      */