Merge branch 'master' into #1-server-selector

.gitignore

@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+#Electron-builder output
+/dist_electron

DEVELOPER.md

@@ -24,6 +24,18 @@ npm run build
 npm run lint
 ```
 
+### Electron Run
+
+```md
+npm run electron:serve
+```
+
+### Electron Build
+
+```md
+npm run electron:build
+```
+
 ### Customize configuration
 
 See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -6,8 +6,13 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
   },
+  "main": "background.js",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "axios": "^0.19.2",
@@ -29,8 +34,10 @@
     "@vue/cli-plugin-vuex": "^4.3.1",
     "@vue/cli-service": "~4.3.0",
     "babel-eslint": "^10.1.0",
+    "electron": "^6.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "vue-cli-plugin-electron-builder": "^1.4.6",
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-template-compiler": "^2.6.11"
   },

src/background.js

@@ -0,0 +1,89 @@
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import {
+  createProtocol,
+  /* installVueDevtools */
+} from 'vue-cli-plugin-electron-builder/lib'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }])
+
+function createWindow () {
+  // Create the browser window.
+  win = new BrowserWindow({ width: 1024, height: 768, webPreferences: {
+    nodeIntegration: true
+  } })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+
+  win.on('closed', () => {
+    win = null
+  })
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (win === null) {
+    createWindow()
+  }
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    // Devtools extensions are broken in Electron 6.0.0 and greater
+    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
+    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
+    // If you are not using Windows 10 dark mode, you may uncomment these lines
+    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
+    // try {
+    //   await installVueDevtools()
+    // } catch (e) {
+    //   console.error('Vue Devtools failed to install:', e.toString())
+    // }
+
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', data => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

src/components/Export.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="section">
-    <h1 class="title is-2">{{ $t("ET.Name") }}</h1>    
-    <h2 class="subtitle">{{ $t("ET.Description") }}</h2>
+    <h1 class="title is-2">{{ $t("Modules.ET.Name") }}</h1>    
+    <h2 class="subtitle">{{ $t("Modules.ET.Description") }}</h2>
     <br>
   </section>
 </template>

src/components/Home.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="section">
-    <h1 class="title is-2">{{ $t("Home.Title") }}</h1>    
-    <h2 class="subtitle">{{ $t("Home.About") }}</h2>
+    <h1 class="title is-2">{{ $t("Common.Home.Title") }}</h1>    
+    <h2 class="subtitle">{{ $t("Common.Home.About") }}</h2>
     <br>
-    <h1 class="title">{{ $t("Home.Modules") }}</h1>
-    <h3 class="title is-4">{{ $t("ET.Name") }}</h3>
-    <h4 class="subtitle is-5">{{ $t("ET.Description") }}</h4>
+    <h1 class="title">{{ $t("Common.Home.Modules") }}</h1>
+    <h3 class="title is-4">{{ $t("Modules.ET.Name") }}</h3>
+    <h4 class="subtitle is-5">{{ $t("Modules.ET.Description") }}</h4>
   </section>
 </template>
 

src/components/Language.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="section">
-    <h1 class="title is-2">{{ $t("Language.Name") }}</h1>    
-    <h2 class="subtitle">{{ $t("Language.Description") }}</h2>
+    <h1 class="title is-2">{{ $t("Common.Language.Name") }}</h1>    
+    <h2 class="subtitle">{{ $t("Common.Language.Description") }}</h2>
     <br>
     <div class="control has-icons-left">
     <div class="locale-changer select is-dark is-medium" >

src/components/Login.vue

@@ -9,22 +9,22 @@
             has-icon
             icon-pack="fas"
             aria-close-label="Close notification">
-            Sign in with plex.tv <br> Use your regular Plex credentials
+            {{ $t("Common.Login.SignIn") }} <br> {{ $t("Common.Login.UseCred") }} <br> {{ $t("Common.Login.Note") }}
         </b-notification>
           <form action="" class="box">
             <div class="field">
-              <label for="" class="label">Username</label>
+              <label for="" class="label">{{ $t("Common.Login.Username") }}</label>
               <div class="control has-icons-left">
-                <input type="text" placeholder="admin" class="input is-dark" v-model="input.username" required>
+                <input type="text" v-bind:placeholder="$t('Common.Login.UsernamePrompt')" class="input is-dark" v-model="input.username" required>
                 <span class="icon is-small is-left">
                   <i class="fa fa-user"></i>
                 </span>
               </div>
             </div>
             <div class="field">
-              <label for="" class="label">Password</label>
+              <label for="" class="label">{{ $t("Common.Login.Password") }}</label>
               <div class="control has-icons-left">
-                <input type="password" placeholder="1234" class="input is-dark" v-model="input.password" v-on:keyup.enter="newLogin()" required>
+                <input type="password" v-bind:placeholder="$t('Common.Login.PasswordPrompt')" class="input is-dark" v-model="input.password" v-on:keyup.enter="loginToPlex()" required>                
                 <span class="icon is-small is-left">
                   <i class="fa fa-lock"></i>
                 </span>

src/locales/da.json

@@ -1,19 +1,21 @@
 {
     "Common": {
-    "AppName": "WebTools-NG"
-  },
-  "ET": {
-    "Description": "@:ET.Name gør det muligt at eksportere information vedr. de medias du har i dine biblioteker",
-    "Name": "ExportTool"
-  },
+        "AppName": "WebTools-NG",
         "Home": {
-    "About": "@:Common.AppName er et værktøj, som kan hjælpe med at administrere en Plex Media Server.",
-    "Modules": "Tool Moduler som er tilgængelige er:",
-    "Name": "Hjem",
+            "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.",
+            "Modules": "Tool Modules currently available are:",
+            "Name": "Home",
             "Title": "Velkommen til @:Common.AppName"
         },
         "Language": {
-    "Description": "@:Language.Name module gør det muligt at skifte sprog",
+            "Description": "@:Common.Language.Name lader dig skifte sprog",
             "Name": "Sprog"
         }
+    },
+    "Modules": {
+        "ET": {
+            "Description": "@:Modules.ET.Name allows you to export some information about the medias in your libraries",
+            "Name": "ExportTool"
+        }
+    }
 }

src/locales/de.json

@@ -0,0 +1,21 @@
+{
+    "Common": {
+        "AppName": "WebTools-NG",
+        "Home": {
+            "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.",
+            "Modules": "Tool Modules currently available are:",
+            "Name": "Home",
+            "Title": "Welcome to @:Common.AppName"
+        },
+        "Language": {
+            "Description": "@:Common.Language.Name allows you to change language of the app",
+            "Name": "Language"
+        }
+    },
+    "Modules": {
+        "ET": {
+            "Description": "@:Modules.ET.Name allows you to export some information about the medias in your libraries",
+            "Name": "ExportTool"
+        }
+    }
+}

src/locales/en.json

@@ -1,12 +1,6 @@
 {
     "Common": {
         "AppName": "WebTools-NG",
-    "SelServer": "Select Server"
-  },
-  "ET": {
-    "Description": "@:ET.Name allows you to export some information about the medias in your libraries",
-    "Name": "ExportTool"
-  },
         "Home": {
             "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.",
             "Modules": "Tool Modules currently available are:",
@@ -14,7 +8,23 @@
             "Title": "Welcome to @:Common.AppName"
         },
         "Language": {
-    "Description": "@:Language.Name allows you to change language of the app",
+            "Description": "@:Common.Language.Name allows you to change language of the app",
             "Name": "Language"
+        },
+        "Login": {
+            "SignIn": "Sign in with plex.tv",
+            "UseCred": "Use your regular Plex credentials",
+            "Note": "3.Party Auth is not supported!",
+            "Username": "Username",
+            "UsernamePrompt": "Enter your plex.tv Username",
+            "Password": "Password",
+            "PasswordPrompt": "Enter your plex.tv password"
+        }
+    },
+    "Modules": {
+        "ET": {
+            "Description": "@:Modules.ET.Name allows you to export some information about the medias in your libraries",
+            "Name": "ExportTool"
+        }
     }
 }

src/router/index.js

@@ -8,7 +8,8 @@ import Store from '../store/index.js'
 Vue.use(VueRouter)
 
   const router = new VueRouter({
-    mode: 'history',
+    
+    mode: process.env.IS_ELECTRON ? 'hash' : 'history',
     base: process.env.BASE_URL,
     routes: [
   {