better admin logo management

components/admin/Settings.vue

@@ -24,14 +24,17 @@
       small.d-block.text-secondary {{$t('admin.description_description')}}
 
       div.mt-4 {{$t('admin.favicon')}}
-      el-upload(ref='upload' :action='`${settings.baseurl}/api/settings/favicon`'
+      el-upload(ref='upload'
+        :action='`${settings.baseurl}/api/settings/logo`'
+        :on-success="forceLogoReload"
+        name='logo'
+        :show-file-list="true"
+        accept='image/png'
         :limit='1'
-        name='favicon'
-        accept='image/*'
         :multiple='false')
         el-button(slot='trigger' size='small' type='primary' plain) Select file
-        .el-upload__tip(slot='tip') jpg/png files with a size less than 500kb
+        .el-upload__tip(slot='tip') png files with a size less than 500kb
-
+      el-image(:src='`${settings.baseurl}/favicon.ico?${logoKey}`')
       el-switch.d-block.mt-4(v-model='allow_registration'
         :active-text="$t('admin.allow_registration_description')")
       el-switch.d-block.mt-4(v-model='allow_anon_event' :active-text="$t('admin.allow_anon_event')")
@@ -55,7 +58,8 @@ export default {
       queryTz: '',
       title: $store.state.settings.title,
       description: $store.state.settings.description,
-      locales
+      locales,
+      logoKey: 0
     }
   },
   computed: {
@@ -98,6 +102,10 @@ export default {
   },
   methods: {
     ...mapActions(['setSetting']),
+    forceLogoReload () {
+      this.$refs.upload.clearFiles()
+      this.logoKey++
+    },
     save (key, value) {
       if (this.settings[key] !== value) {
         this.setSetting({ key, value })

server/api/controller/settings.js

@@ -7,7 +7,10 @@ const pkg = require('../../../package.json')
 const debug = require('debug')('settings')
 const crypto = require('crypto')
 const util = require('util')
+const toIco = require('to-ico')
 const generateKeyPair = util.promisify(crypto.generateKeyPair)
+const readFile = util.promisify(fs.readFile)
+const writeFile = util.promisify(fs.writeFile)
 
 const defaultSettings = {
   instance_timezone: 'Europe/Rome',
@@ -94,7 +97,6 @@ const settingsController = {
       settingsController[is_secret ? 'secretSettings' : 'settings'][key] = value
       return true
     } catch (e) {
-      console.error(e)
       return false
     }
   },
@@ -105,11 +107,18 @@ const settingsController = {
     if (ret) { res.sendStatus(200) } else { res.sendStatus(400) }
   },
 
-  async setFavicon (req, res) {
+  async setLogo (req, res) {
     if (!req.file) {
       return res.status(400).send('Mmmmm sould not be here!')
     }
-    await settingsController.set('favicon', path.join(req.file.destination, req.file.filename))
+
+    const image = await readFile(path.join(req.file.destination, req.file.filename))
+    const favicon_path = path.resolve(config.upload_path, 'favicon.ico')
+    const favicon = await toIco([image], { sizes: [64], resize: true })
+
+    writeFile(favicon_path, favicon)
+    settingsController.set('favicon', favicon_path)
+
     res.sendStatus(200)
   },
 

server/api/index.js

@@ -16,7 +16,6 @@ const announceController = require('./controller/announce')
 const storage = require('./storage')
 const upload = multer({ storage })
 
-const path = require('path')
 const config = require('config')
 const debug = require('debug')('api')
 
@@ -105,7 +104,7 @@ api.delete('/event/notification/:code', eventController.delNotification)
 api.get('/settings', settingsController.getAllRequest)
 api.post('/settings', isAdmin, settingsController.setRequest)
 api.get('/event/:event_id.:format?', cors, eventController.get)
-api.post('/settings/favicon', isAdmin, multer({ dest: path.resolve(config.upload_path, 'thumb/') }).single('favicon'), settingsController.setFavicon)
+api.post('/settings/logo', isAdmin, multer({ dest: config.upload_path }).single('logo'), settingsController.setLogo)
 
 // confirm event
 api.get('/event/confirm/:event_id', hasPerm('event:write'), eventController.confirm)