Merge pull request opengs#130 from sepo274/feature/tray-icon

Tray icon support and app start on startup

src-electron/electron-main.js

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, nativeTheme, ipcMain } from 'electron'
+import { app, BrowserWindow, nativeTheme, ipcMain, Tray, Menu, nativeImage } from 'electron'
 import path from 'path'
 import os from 'os'
 
@@ -10,6 +10,8 @@ const { autoUpdater } = require('electron-updater')
 
 // needed in case process is undefined under Linux
 const platform = process.platform || os.platform()
+const appIcon = nativeImage.createFromPath(path.resolve(__dirname, 'icons/icon.png'))
+const appName = 'UA Cyber SHIELD'
 
 try {
   if (platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
@@ -18,6 +20,10 @@ try {
 } catch (_) { }
 
 let mainWindow
+let tray
+// default value will be set in Index.vue -> mounted
+let minimizeToTray
+let isQuite
 
 function sendStatusToWindow (text) {
   try {
@@ -31,7 +37,7 @@ function createWindow () {
    * Initial window options
    */
   mainWindow = new BrowserWindow({
-    icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
+    icon: appIcon,
     width: 600,
     height: 900,
     useContentSize: true,
@@ -43,18 +49,64 @@ function createWindow () {
     }
   })
 
+  // Tray constructor requires image as a param, icon is going to be changed later
+  tray = new Tray(nativeImage.createEmpty())
+  tray.setToolTip(appName)
+  tray.setImage(appIcon.resize({ width: 16, height: 16 }))
+  // For win platform, open context with click on tray icon
+  tray.on('click', () => {
+    tray.popUpContextMenu()
+  })
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: `Show ${appName}`,
+      click: () => {
+        // restore from minimized state
+        mainWindow.restore()
+        // bring into focus
+        mainWindow.show()
+      }
+    },
+    { type: 'separator' },
+    {
+      label: 'Quite',
+      click: () => {
+        isQuite = true
+        mainWindow.close()
+      }
+    }
+  ])
+
+  tray.setContextMenu(contextMenu)
+
   mainWindow.setMenu(null)
   mainWindow.loadURL(process.env.APP_URL)
   if (process.env.DEBUGGING) {
   // if on DEV or Production with debug enabled
     mainWindow.webContents.openDevTools()
+    // close window on reload
+    isQuite = true
   } else {
     // we're on production; no access to devtools pls
     mainWindow.webContents.on('devtools-opened', () => {
       mainWindow.webContents.closeDevTools()
     })
   }
 
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.send('systemRunAtStartup', app.getLoginItemSettings().openAtLogin)
+  })
+
+  mainWindow.on('close', (event) => {
+    if (minimizeToTray && !isQuite) {
+      event.preventDefault()
+      mainWindow.minimize()
+    } else {
+      app.quit()
+    }
+  })
+
   mainWindow.on('closed', () => {
     mainWindow = null
   })
@@ -72,17 +124,11 @@ function createWindow () {
   engine.setExecutorStartegy('automatic')
 
   const window = mainWindow
+
   engine.executionStartegy.on('atack', (data) => window.webContents.send('atack', data))
   engine.executionStartegy.on('error', (data) => window.webContents.send('error', data))
   engine.executionStartegy.on('automatic_executorsCountUpdate', (data) => window.webContents.send('executorsCountUpdate', data))
 
-  // const doser = new Doser(true, 32)
-  // const window = mainWindow
-  // doser.listen('atack', (data) => console.log(data.log))
-  // doser.listen('atack', (data) => window.webContents.send('atack', data))
-  // doser.listen('error', (data) => window.webContents.send('error', data))
-  // doser.start()
-
   engine.start()
 
   ipcMain.on('updateDDOSEnable', (event, arg) => {
@@ -108,6 +154,17 @@ function createWindow () {
     engine.executionStartegy.setExecutorsCount(arg.newVal)
   })
 
+  ipcMain.on('updateMinimizeToTray', (event, arg) => {
+    minimizeToTray = !!arg.newVal
+  })
+
+  ipcMain.on('updateRunAtStartup', (event, arg) => {
+    app.setLoginItemSettings({
+      openAtLogin: arg.newVal,
+      name: appName
+    })
+  })
+
   ipcMain.on('installUpdate', () => {
     autoUpdater.quitAndInstall()
   })
@@ -144,7 +201,9 @@ autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
   }
 })
 
-app.whenReady().then(createWindow)
+app.whenReady().then(() => {
+  createWindow()
+})
 
 function checkUpdates () {
   try {

src/i18n/ua-ua/index.ts

@@ -26,6 +26,14 @@ export default {
       masDosersCount: {
         name: 'Рівень паралелізму',
         description: 'Задає кількість паралельних процесів. Використовуються асинхронні механізми (не потокові), тому це не сильно впливає на CPU/RAM. Після зміни, треба почекати ~10 cекунд поки стартують додаткові паралельні досери'
+      },
+      minimizeToTray: {
+        name: 'Згорнути в трею',
+        description: 'Додаток буде згорнуто в трей замість закриття'
+      },
+      runAtStartup: {
+        name: 'Запуск автоматично при запуску ОС',
+        description: 'Дозволити програмі запускатися автоматично під час запуску операційної системи'
       }
     },
     update: {

src/pages/Index.vue

@@ -98,6 +98,26 @@
           </q-linear-progress>
         </q-card-section>
 
+        <q-item tag="label" v-ripple>
+          <q-item-section>
+            <q-item-label>{{ $t('ddos.advanced.minimizeToTray.name') }}</q-item-label>
+            <q-item-label caption class="text-grey-7">{{ $t('ddos.advanced.minimizeToTray.description') }}</q-item-label>
+          </q-item-section>
+          <q-item-section avatar>
+            <q-toggle color="blue" v-model="minimizeToTray" val="picture" />
+          </q-item-section>
+        </q-item>
+
+        <q-item tag="label" v-ripple>
+          <q-item-section>
+            <q-item-label>{{ $t('ddos.advanced.runAtStartup.name') }}</q-item-label>
+            <q-item-label caption class="text-grey-7">{{ $t('ddos.advanced.runAtStartup.description') }}</q-item-label>
+          </q-item-section>
+          <q-item-section avatar>
+            <q-toggle color="blue" v-model="runAtStartup" val="picture" />
+          </q-item-section>
+        </q-item>
+
         <q-card-actions align="right">
           <q-btn flat label="OK" color="primary" class="fit" v-close-popup />
         </q-card-actions>
@@ -133,7 +153,6 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import LanguageSelect from '../components/LanguageSelect.vue'
-// import { ipcRenderer, IpcRendererEvent } from 'electron'
 
 export default defineComponent({
   name: 'PageIndex',
@@ -214,9 +233,17 @@ export default defineComponent({
     window.require('electron').ipcRenderer.on('atack', this.serveAttack.bind(this))
     window.require('electron').ipcRenderer.on('executorsCountUpdate', this.serverExecutorsCountUpdate.bind(this))
     window.require('electron').ipcRenderer.on('update', this.askForInstallUpdate.bind(this))
+
+    // update main process with initial value
+    window.require('electron').ipcRenderer.send('updateMinimizeToTray', { newVal: this.minimizeToTray })
   },
 
   setup () {
+    // update value from system register
+    window.require('electron').ipcRenderer.on('systemRunAtStartup', (_, systemRunAtStartup: boolean) => {
+      runAtStartup.value = systemRunAtStartup
+    })
+
     const ddosEnabled = ref(true)
     const forceProxy = ref(true)
     const attackCounter = ref(0)
@@ -230,6 +257,8 @@ export default defineComponent({
     const advancedSettingsDialog = ref(false)
     const automaticMode = ref(true)
     const maxDosersCount = ref(32)
+    const minimizeToTray = ref(true)
+    const runAtStartup = ref(false)
     const updateDialog = ref(false)
     const updateMessage = ref('message')