Changed the way we display notifications

package-lock.json

@@ -18,6 +18,7 @@
         "electron-squirrel-startup": "^1.0.0",
         "extract-zip": "^2.0.1",
         "hasha": "^5.2.2",
+        "izitoast": "^1.4.0",
         "minecraft-launcher-core": "^3.16.9",
         "msmc": "^3.0.1",
         "vue": "^2.6.14"
@@ -3912,6 +3913,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "node_modules/izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "node_modules/jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -9761,6 +9767,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "electron-squirrel-startup": "^1.0.0",
     "extract-zip": "^2.0.1",
     "hasha": "^5.2.2",
+    "izitoast": "^1.4.0",
     "minecraft-launcher-core": "^3.16.9",
     "msmc": "^3.0.1",
     "vue": "^2.6.14"

src/client/assets/css/menubar.css

@@ -69,4 +69,8 @@
 #vue {
 	width: 100vw;
 	height: 100vh;
+}
+
+.iziToast-wrapper-topRight {
+    top: 25px;
 }

src/client/assets/js/index.js

@@ -19,15 +19,27 @@ let app = new vue({
         loadingMessageText: "Téléchargement de Minecraft en cours...",
         fullprogressbarHidden: true,
         progressbarWidth: 0,
-        sidebarContent: "<hr><p>Chargement en cours</p>"
+        sidebarContent: "<hr><p>Chargement en cours</p>",
+        notificationTitle: "",
+        notificationMessage: ""
     },
     mounted: function () {
         this.demandModsInformations()
+        iziToast.settings({
+            close: false,
+            closeOnClick: true,
+            timeout: 5000,
+            position: 'topRight',
+            resetOnHover: true,
+        })
     },
     methods: {
         invalidateData: function () {
             this.invalidateButtonDisabled = true
             this.invalidateButtonText = "Opération en cours"
+            this.notificationTitle = "Opération en cours"
+            this.notificationMessage = "Suppression des données du jeu en cours"
+            this.showInfo()
             ipcRenderer.send('invalidateData')
         },
         launchBtnClick: function () {
@@ -45,10 +57,9 @@ let app = new vue({
                 localStorage.setItem("maxMem", this.maxMemValue)
                 gameLaunching = true
             } else{
-                ipcRenderer.send('notification', {
+                app.notificationTitle = "Erreur de lancement"
-                    title: "Erreur de lancement",
+                app.notificationMessage = "La mémoire minimale doit être inférieure ou égale à la mémoire maximale."
-                    body: "La mémoire minimale doit être inférieure ou égale à la mémoire maximale"
+                this.showError()
-                })
             }
         },
         disconnectBtn: function () {
@@ -65,6 +76,32 @@ let app = new vue({
         },
         demandModsInformations: function () {
             ipcRenderer.send('demandModsInformations')
+        },
+        showInfo: function () {
+            iziToast.info({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+            })
+        },
+        showError: function() {
+            iziToast.show({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+                color: 'red'
+
+            })
+        },
+        showWarning: function() {
+            iziToast.warning({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+            })
+        },
+        showSuccess: function () {
+            iziToast.success({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+            })
         }
     }
 })
@@ -77,6 +114,9 @@ ipcRenderer.on("nick", (_, args) => app.nick = args.name)
 ipcRenderer.on("invalidated", () => {
     app.invalidateButtonDisabled = false
     app.invalidateButtonText = "Supprimer et retélécharger les bibliothèques"
+    app.notificationTitle = "Opération terminée"
+    app.notificationMessage = "Les données du jeu ont été supprimé avec succès"
+    app.showSuccess()
 })
 
 ipcRenderer.on("progress", (e, args) => {

src/client/assets/js/login.js

@@ -1,5 +1,4 @@
-
+// const {default: iziToast } = require('izitoast')
-
 let app = new vue({
     el: "#vue",
     data: {
@@ -7,10 +6,21 @@ let app = new vue({
         email: "Email",
         password: "Mot de passe",
         send_credentials: "Se connecter",
-        microsoft_button: "Connexion avec un compte Microsoft"
+        microsoft_button: "Connexion avec un compte Microsoft",
+        notificationTitle: "",
+        notificationMessage: ""
+    },
+    mounted: function () {
+        iziToast.settings({
+            close: false,
+            closeOnClick: true,
+            timeout: 5000,
+            position: 'topRight',
+            resetOnHover: true,
+        })
     },
     methods: {
-        formSubmit: (e) => {
+        formSubmit: function (e) {
             e.preventDefault()
             if(!microsoftButton.disabled) {
                 form.disabled = true
@@ -20,20 +30,48 @@ let app = new vue({
                         pass: password.value
                     })
                 }else{
-                    ipcRenderer.send("notification", {
+                    this.notificationTitle = "Erreur de connexion"
-                        title: "error",
+                    this.notificationMessage = "Veuillez entrer des identifiants"
-                        body: "Veuillez entrer des identifiants"
+                    this.showWarning()
-                    })
                 }
             }
         },
-        microsoftButton: (e) => {
+        microsoftButton: function (e) {
             e.preventDefault()
             if(!form.disabled) {
                 microsoftButton.disabled = true
                 form.disabled = true
                 ipcRenderer.send("microsoft-login")
             }
+        },
+        showInfo: function () {
+            iziToast.info({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+                color: 'blue'
+            })
+        },
+        showError: function() {
+            iziToast.show({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+                color: 'red'
+
+            })
+        },
+        showWarning: function() {
+            iziToast.warning({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+                color: 'yellow'
+            })
+        },
+        showSuccess: function () {
+            iziToast.success({
+                title: this.notificationTitle,
+                message: this.notificationMessage,
+                color: 'green'
+            })
         }
     }
 });
@@ -47,4 +85,4 @@ const microsoftButton = document.querySelector("#microsoft-button")
 ipcRenderer.on("loginError", () => {
     form.disabled = false
     microsoftButton.disabled = false
-})
+})

src/client/assets/js/preload.js

@@ -10,3 +10,21 @@ window.addEventListener("DOMContentLoaded", () => {
 
     closeButton.addEventListener("click", () => ipcRenderer.send('closeWindow'))
 })
+
+ipcRenderer.on('notification', (_e, args) => {
+    app.notificationTitle = args.title
+    app.notificationMessage = args.body
+    switch(args.class) {
+        case "success":
+            app.showSuccess()
+            break;
+        case "warning":
+            app.showWarning()
+            break;
+        case "error":
+            app.showError()
+            break;
+        case "info":default:
+            app.showInfo()
+    }
+})

src/client/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Altarik Launcher</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
+    <link rel="stylesheet" href="../../node_modules/izitoast/dist/css/iziToast.min.css">
     <link href="assets/css/fonts.css" rel="stylesheet" />
     <link href="assets/css/index.css" rel="stylesheet" />
     <link href="assets/css/menubar.css" rel="stylesheet" />
@@ -63,7 +64,8 @@
             </div>
         </div>
     </div>
-    <script src="assets/js/script.js"></script>
+    <script src="../../node_modules/izitoast/dist/js/iziToast.js" type="text/javascript"></script>
+    <script src="assets/js/preload.js"></script>
     <script src="assets/js/index.js"></script>
 </body>
 </html>

src/client/login.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Altarik Launcher</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
+    <link rel="stylesheet" href="../../node_modules/izitoast/dist/css/iziToast.min.css">
     <link href="assets/css/fonts.css" rel="stylesheet" />
     <link href="assets/css/login.css" rel="stylesheet" />
     <link href="assets/css/menubar.css" rel="stylesheet" />
@@ -36,7 +37,8 @@
         </div>
         
     </div>
-    <script src="assets/js/script.js"></script>
+    <script src="../../node_modules/izitoast/dist/js/iziToast.js" type="text/javascript"></script>
+    <script src="assets/js/preload.js"></script>
     <script src="assets/js/login.js"></script>
 </body>
 </html>

src/server/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, ipcMain, Notification, autoUpdater, dialog } = require('electron')
+const { app, BrowserWindow, Menu, ipcMain, autoUpdater, dialog } = require('electron')
 const logger = require('electron-log')
 const { join } = require('path')
 if (require('electron-squirrel-startup')) {
@@ -6,7 +6,7 @@ if (require('electron-squirrel-startup')) {
     app.quit()
     return
 }
-require('./updater.js').configUpdater(app, autoUpdater, dialog, logger) 
+require('./updater.js').configUpdater(app, autoUpdater, dialog, logger, showNotification) 
 
 const minecraft = require('./minecraft.js')
 minecraft.showNotification = showNotification
@@ -77,16 +77,14 @@ ipcMain.on("launch", (event, args) => {
   minecraft.launch(event, args)
 })
 
-function showNotification(title, body="") {
+function showNotification(title, body="", clazz="info") {
-    new Notification({ title: title, body: body, silent: false, icon: "../../icon.ico"}).show()
+    win.webContents.send('notification', {title: title, body: body, class: clazz})
 }
 
-ipcMain.on("notification", (event, args) => {
-    showNotification(args.title, args.body)
-})
-
 ipcMain.on("disconnect", () => {
-    win.loadFile('src/client/login.html')
+    minecraft.auth = null
+    win.loadFile('src/client/login.html').then(() =>  showNotification("Déconnecté", "Vous avez été déconnecter de votre compte", "success"))
+   
 })
 
 

src/server/minecraft.js

@@ -36,10 +36,10 @@ class Minecraft {
             }).catch(() => {
                 event.sender.send("loginError")
                 logger.error("[MJ login] User haven't purchase the game")
-                this.showNotification("Erreur de connexion")
+                this.showNotification("Erreur de connexion", "Vous ne possèdez pas de licence Minecraft sur ce compte", "error")
             })
         } else {
-            this.showNotification("Veuillez renseignez un mot de passe")
+            this.showNotification("Erreur de connexion", "Veuillez renseignez un mot de passe", "warning")
         }
     }
 
@@ -52,7 +52,7 @@ class Minecraft {
             switch (update.type) {
                 case "Error":
                     event.sender.send("loginError")
-                    this.showNotification("Une erreur est survenue", update.data)
+                    this.showNotification("Une erreur est survenue", update.data, "error")
                     logger.error("MC-Account error:", update.data);
                   break;
               }
@@ -60,7 +60,7 @@ class Minecraft {
             if(msmc.errorCheck(result)) {
                 event.sender.send("loginError")
                 logger.error(result.reason)
-                this.showNotification("Erreur de connexion", result.reason)
+                this.showNotification("Erreur de connexion", result.reason, "error")
             } else {
                 if(!msmc.isDemoUser(result)) {
                     this.auth = msmc.getMCLC().getAuth(result)
@@ -70,13 +70,13 @@ class Minecraft {
                 } else {
                     event.sender.send("loginError")
                     logger.error("[MS login] User haven't purchase the game")
-                    this.showNotification("Erreur de connexion", "Vous ne possèdez pas de licence Minecraft sur ce compte")
+                    this.showNotification("Erreur de connexion", "Vous ne possèdez pas de licence Minecraft sur ce compte", "error")
                 }
             }
         }).catch(reason => {
             event.sender.send("loginError")
             logger.error(reason)
-            this.showNotification("Erreur de connexion")
+            this.showNotification("Erreur de connexion", "Erreur inconnue", "error")
         })
     }
 
@@ -113,17 +113,17 @@ class Minecraft {
                     if(e !== 0) {
                         logger.warn("Minecraft didn't close properly")
                         logger.warn(e)
-                        this.showNotification("Une erreur est survenue", "Minecraft ne s'est pas fermé correctement")
+                        this.showNotification("Une erreur est survenue", "Minecraft ne s'est pas fermé correctement", "error")
                     }
                 })
             }).catch((err) => {
-                this.showNotification("Impossible de lancer le jeu")
+                this.showNotification("Impossible de lancer le jeu", "Erreur inconnue", "error")
                 event.sender.send("close", 1)
                 logger.error('Unable to launch the game')
                 logger.error(err)
             })
         }).catch(err => {
-            this.showNotification("Impossible d'intaller Java pour votre configuration")
+            this.showNotification("Impossible de lancer le jeu", "Impossible d'installer Java pour votre configuration", "error")
             event.sender.send("close", 1)
             logger.warn("Unable to install java")
             logger.warn(err)
@@ -157,10 +157,10 @@ class Minecraft {
         if(fs.existsSync(filepath)) {
             let content = fs.readFileSync(filepath)
             if(content !== null) {
-                this.showNotification("Impossible de récupérer certaines informations en ligne", "utilisation des dernières données récupérées")
+                this.showNotification("Impossible de récupérer certaines informations en ligne", "utilisation des dernières données récupérées", "warning")
                 return this.extractModsInformations(JSON.parse(content))
             } else {
-                this.showNotification("Impossible de récupérer certaines informations en ligne", "Veuillez réessayez en cliquant sur le bouton")
+                this.showNotification("Impossible de récupérer certaines informations en ligne", "Veuillez réessayez en cliquant sur le bouton", "warning")
                 logger.error("Unable to get chapters informations from server or filesystem")
                 return null
             }

src/server/updater.js

@@ -1,5 +1,4 @@
 const isDev = require('electron-is-dev')
-const { Notification } = require('electron')
 const pkg = require('../../package.json')
 const server = 'https://update.electronjs.org'
 
@@ -10,7 +9,7 @@ function initUpdater(autoUpdater) {
     }, 10 * 60 * 1000) // 10 minutes
 }
 
-function configUpdater(app, autoUpdater, dialog, logger) {
+function configUpdater(app, autoUpdater, dialog, logger, showNotification) {
     logger.info(`electron version: ${process.versions['electron']}`)
     logger.info(`chrome version: ${process.versions['chrome']}`)
     logger.info(`Node version: ${process.versions['node']}`)
@@ -45,21 +44,17 @@ function configUpdater(app, autoUpdater, dialog, logger) {
     })
 
     autoUpdater.on('error', message => {
-        showNotification("Impossible de mettre à jour le launcher", "vérifier votre connexion")
+        showNotification("Impossible de mettre à jour le launcher", "vérifier votre connexion", "warning")
         logger.error('There was a problem updating the application')
         logger.error(message)
     })
 
     autoUpdater.on('update-available', () => {
-        showNotification("Altarik launcher", "Téléchargement de la mise à jour")
+        showNotification("Mise à jour", "Téléchargement de la mise à jour", "warning")
         logger.info("update available, downloading...")
     })
 }
 
-function showNotification(title, body="") {
-    new Notification({ title: title, body: body }).show()
-}
-
 module.exports = {
     configUpdater
 }