Fix all the things (#69)

* Update dependencies, part 1

Preparing for the postcss update. Note:
- Keytar is intentionally pinned to 7.6.0 due to an electron-builder
  bug that makes 7.7.0 not work.
  atom/node-keytar#380
  electron-userland/electron-builder#5438

* Update dependencies, part 2

Mostly preparing to get rid of unsupported and vulnerable PostCSS 7.
Notes:
 - This requires a lot of beta versions for Vue-related packages.
   Non-beta versions tend to depend on PostCSS 7.
 - PostCSS 7 is still not eliminated entirely as one of the Vue packages
   still requires 7.
 - The babel-eslint package is deprecated, but can't be upgraded to the
   non-deprecated @babel/eslint-parser package, otherwise the standard
   build process would be broken.
 - The change in the SVG icon component was needed to make SVG icons
   display again. Not sure why this happened.
 - It seems Electron 13 can't be used due to no support from Keytar.

* Fix sorting functions in spellbook.js

* Fix login form allowing to enter "new" data under existing names

This silently overwrote and/or added to old settings. Now it's a
validation error.

* Fix saving wiki farms with certain URL patterns

Closes: #67

* Adjust breakpoints in the login screen

Closes: #65

* Increase vertical spacing in the login form

That makes the fields much more clearly separated.
Closes: #64

* Add event handlers for modals

Currently just the Escape key is handled to close the modal.

Closes: #63

* Update dependencies, part 3

This gets rid of the PostCSS security alert. Unfortunately, two
new and unrelated vulnerabilities were reported in other indirect
dependencies two days ago.

Closes: #66

* Address keyboard navigation in task view modals

The actual view still has some issues.

* Switch to Tailwind utility

and adjust the lightness slightly. This should also fit both light
and dark themes (somewhat).

* Improve task view navigation further

Add focus indicators, fix elements that shouldn't be focusable,
fix the "no input" zone of "Enabled?" checkboxes, and extract the
"deferred focus" hack into its own method. Sigh.

Closes: #59

* Fix logic error with deferred focusing

That added one iteration to the loop = extra 50 milliseconds of waiting.
Improves switching times when the conditionally-rendered element
is absent from the DOM entirely (read: `v-if`).

* Make the controls on the home page more separated

Like with the changes to the login menu.

* Improve keyboard navigation for the home view

Like with the tasks view. Also de-cluttered the HTML by using
`@apply` in a `<style>` rather than specifying all utilities
inline.

* Improve focusing indication in the login view as well

* Import jquery

Why didn't anyone do this before?

* Implement class-based dark mode handling

Simplifies style testing.

Closes: #61

* Persist home view state

This should actually be not just a major usability issue, but a
critical matter of communicating state to other components.

* Fix logic error in home view

Otherwise this will print errors about accessing the `accounts`
property of `undefined`.

* Persist login view data

* Improve inactive input visibility in dark login view

* Persist task view state.

This does not persist actual task process. This will have to be handled
very, very differently, and I'm not sure how yet.

Closes: #53

* Fix improperly using event handler

package.json

@@ -14,30 +14,31 @@
   "main": "background.js",
   "dependencies": {
     "@lavgup/mediawiki.js": "^1.1.0",
-    "autoprefixer": "^9.8.6",
-    "core-js": "^3.8.3",
-    "got": "^11.8.1",
-    "keytar": "^7.4.0",
-    "postcss": "^7.0.35",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.3",
-    "vue-template-compiler": "^2.6.12",
-    "vuex": "^4.0.0"
+    "autoprefixer": "^10.2.6",
+    "core-js": "^3.14.0",
+    "got": "^11.8.2",
+    "jquery": "^3.6.0",
+    "keytar": "~7.6.0",
+    "postcss": "^8.3.0",
+    "tailwindcss": "^2.1.4",
+    "vue": "^3.1.1",
+    "vue-router": "^4.0.8",
+    "vue-template-compiler": "^2.6.14",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-plugin-router": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/compiler-sfc": "^3.0.5",
-    "babel-eslint": "^10.1.0",
-    "dotenv": "^8.2.0",
-    "electron": "^11.2.3",
-    "electron-devtools-installer": "^3.1.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^7.6.0",
-    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6"
+    "@vue/cli-plugin-babel": "^5.0.0-beta.1",
+    "@vue/cli-plugin-eslint": "^5.0.0-beta.1",
+    "@vue/cli-plugin-router": "^5.0.0-beta.1",
+    "@vue/cli-service": "^5.0.0-beta.1",
+    "@vue/compiler-sfc": "^3.1.1",
+    "babel-eslint": "^11.0.0-beta.2",
+    "dotenv": "^8.6.0",
+    "electron": "^12.0.10",
+    "electron-devtools-installer": "^3.2.0",
+    "eslint": "^7.28.0",
+    "eslint-plugin-vue": "^7.10.0",
+    "vue-cli-plugin-electron-builder": "~2.0.0"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -22,6 +22,7 @@
 <script>
   import MageFooter from "@/components/Footer";
   import SvgIcon from "@/components/SvgIcon";
+  import $ from "jquery";
 
   import { ref } from "vue";
   export default {
@@ -49,6 +50,12 @@
       }
     },
 
+    beforeCreate() {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        $("html").addClass("dark");
+      }
+    },
+
     onmount() {
       this.$nextTick(function () { });
     },

src/components/SvgIcon.vue

@@ -3,7 +3,7 @@
 export default {
   data: function() {
     return {
-      image: require(`../assets/icons/${this.icon}.svg`)
+      image: require(`../assets/icons/${this.icon}.svg`).default
     };
   },
   props: [ "width", "height", "icon", "noinvert" ]

src/libraries/spellbook.js

@@ -254,7 +254,18 @@ class Farm extends AuthSystem {
   addWikisFromUrls(urls) {
     const farmSettings = checkFarmSettings(this.name);
     for (const url of urls) {
-      const wikiSettings = checkFarmWikiSettings(farmSettings, getWikiNameFromUrl(url));
+      const baseWikiName = getWikiNameFromUrl(url);
+      let wikiNameSuffix = "";
+      let suffixIndex = 1;
+
+      // A truthy `url` field implies a preexisting settings structure.
+      // This is done to avoid overwriting such structures.
+      while (checkFarmWikiSettings(farmSettings, baseWikiName + wikiNameSuffix).url) {
+        suffixIndex += 1;
+        wikiNameSuffix = ` [${suffixIndex}]`;
+      }
+
+      const wikiSettings = checkFarmWikiSettings(farmSettings, baseWikiName + wikiNameSuffix);
       wikiSettings.url = url;
     }
 
@@ -284,7 +295,7 @@ function getStandaloneWikiAccountInfo() {
         });
       }
     }
-    wikiAccounts.sort( (a, b) => a.localeCompare(b) );
+    wikiAccounts.sort( (a, b) => a.name.localeCompare(b.name) );
 
     wikiList.push({
       name: wikiName,
@@ -318,7 +329,7 @@ function getWikiFarmAccountInfo() {
         name: wikiName
       });
     }
-    farmList.sort( (a, b) => a.localeCompare(b) );
+    farmList.sort( (a, b) => a.name.localeCompare(b.name) );
 
     const farmAccounts = [];
     for (const [accountName, accountData] of Object.entries(farmData.accounts)) {
@@ -328,7 +339,7 @@ function getWikiFarmAccountInfo() {
         });
       }
     }
-    farmAccounts.sort( (a, b) => a.localeCompare(b) );
+    farmAccounts.sort( (a, b) => a.name.localeCompare(b.name) );
 
     farmList.push({
       name: farmName,

src/main.js

@@ -5,13 +5,49 @@ import "@/assets/css/tailwind.css";
 import router from "./router";
 
 const store = createStore({
-  state () {
-    return {};
+  state: {
+    processedFarmName: null,
+    processedWikiName: null,
+    processedUsername: null,
+    processedBotPassId: null,
+
+    loginFormData: null,
+    taskViewData: null,
+  },
+  mutations: {
+    saveProcessedWiki(state, processedWikiData) {
+      const [farm, wiki, user, botPass] = processedWikiData;
+      state.processedFarmName = farm;
+      state.processedWikiName = wiki;
+      state.processedUsername = user;
+      state.processedBotPassId = botPass;
+    },
+    saveLoginFormData(state, loginFormData) {
+      state.loginFormData = loginFormData;
+    },
+    saveTaskViewData(state, taskViewData) {
+      state.taskViewData = taskViewData;
+    }
   },
-  mutations: {}
+  getters: {
+    getProcessedWiki(state) {
+      return [
+        state.processedFarmName,
+        state.processedWikiName,
+        state.processedUsername,
+        state.processedBotPassId
+      ];
+    },
+    getLoginFormData(state) {
+      return state.loginFormData;
+    },
+    getTaskViewData(state) {
+      return state.taskViewData;
+    }
+  }
 });
 
 createApp(App)
   .use(router)
   .use(store)
-  .mount("#app");
+  .mount("#app");

src/views/Home.vue

@@ -7,26 +7,26 @@
     <div class="mt-3 ml-2">
       <h3 class="text-xl">Choose a wiki to operate on:</h3>
 
-      <div class="max-w-xs">
-        <div class="select-none flex flex-col w-full">
-          <label for="chosenFarm" class="pr-1">Wiki farm name</label>
-          <select id="chosenFarm" name="chosenFarm" class="flex-grow dark:bg-gray-700" :value="chosenFarm" @change="onFarmChange">
+      <div class="wiki-choice-container">
+        <div class="control-container">
+          <label for="chosenFarm">Wiki farm name</label>
+          <select id="chosenFarm" name="chosenFarm" :value="chosenFarm" @change="onFarmChange">
             <option value="-1" selected>None (standalone wiki)</option>
             <option v-for="(knownFarm, index) in chosenFarmSource" :key="knownFarm.name" :value="index">{{ knownFarm.name }}</option>
           </select>
         </div>
 
-        <div class="select-none flex flex-col w-full mt-2">
-          <label for="chosenWiki" class="pr-1">Wiki name</label>
-          <select id="chosenWiki" name="chosenWiki" class="flex-grow dark:bg-gray-700" :value="chosenWiki" @change="onWikiChange">
+        <div class="control-container">
+          <label for="chosenWiki">Wiki name</label>
+          <select id="chosenWiki" name="chosenWiki" :value="chosenWiki" @change="onWikiChange">
             <option value="-1" disabled selected>None</option>
             <option v-for="(knownWiki, index) in chosenWikiSource" :key="knownWiki.name" :value="index">{{ knownWiki.name }}</option>
           </select>
         </div>
 
-        <div class="select-none flex flex-col w-full mt-2">
-          <label for="chosenAccount" class="pr-1">User account</label>
-          <select id="chosenAccount" name="chosenAccount" class="flex-grow dark:bg-gray-700" :value="chosenAccount" @change="onAccountChange">
+        <div class="control-container">
+          <label for="chosenAccount">User account</label>
+          <select id="chosenAccount" name="chosenAccount" :value="chosenAccount" @change="onAccountChange">
             <option value="-1" selected>None (identify using your IP)</option>
             <option v-for="(knownAccount, index) in chosenAccountSource" :key="knownAccount.name" :value="index">{{ knownAccount.name }}</option>
           </select>
@@ -72,8 +72,37 @@ export default {
       });
     }
     */
-    onFarmChange(event) {
-      this.chosenFarm = parseInt(event.target.value, 10);
+    commitChoices() {
+      let farmName = null;
+      let wikiName = null;
+      let userName = null;
+      let botPassName = null;
+
+      if (this.chosenFarm !== -1) {
+        farmName = this.chosenFarmSource[this.chosenFarm].name;
+      }
+      if (this.chosenWiki !== -1) {
+        wikiName = this.chosenWikiSource[this.chosenWiki].name;
+      }
+      if (this.chosenAccount !== -1) {
+        [userName, botPassName] = this.chosenAccountSource[this.chosenAccount].name.split("@");
+      }
+
+      this.$store.commit("saveProcessedWiki", [farmName, wikiName, userName, botPassName]);
+    },
+    restoreFromState() {
+      const [farmName, wikiName, userName, botPassName] = this.$store.getters.getProcessedWiki;
+      const fullAccountName = `${userName}@${botPassName}`;
+
+      this.setFarm(this.chosenFarmSource.findIndex( farm => farm.name === farmName ));
+      this.setWiki(this.chosenWikiSource.findIndex( wiki => wiki.name === wikiName ));
+      if (this.chosenWiki !== -1) {
+        this.setAccount(this.chosenAccountSource.findIndex( account => account.name === fullAccountName ));
+      }
+      this.commitChoices();
+    },
+    setFarm(farmId) {
+      this.chosenFarm = farmId;
       this.chosenWiki = -1;
       this.chosenAccount = -1;
 
@@ -86,24 +115,55 @@ export default {
         this.chosenAccountSource = farmData.accounts;
       }
     },
-    onWikiChange(event) {
-      this.chosenWiki = parseInt(event.target.value, 10);
+    setWiki(wikiId) {
+      this.chosenWiki = wikiId;
 
-      if (this.chosenFarm === -1) {
+      if (this.chosenFarm === -1 && this.chosenWiki !== -1) {
         const wikiData = this.accountData.standalone[this.chosenWiki];
         this.chosenAccount = -1;
         this.chosenAccountSource = wikiData.accounts;
       }
     },
+    setAccount(accountId) {
+      this.chosenAccount = accountId;
+    },
+    onFarmChange(event) {
+      this.setFarm(parseInt(event.target.value, 10));
+      this.commitChoices();
+    },
+    onWikiChange(event) {
+      this.setWiki(parseInt(event.target.value, 10));
+      this.commitChoices();
+    },
     onAccountChange(event) {
-      this.chosenAccount = parseInt(event.target.value, 10);
+      this.setAccount(parseInt(event.target.value, 10));
+      this.commitChoices();
     }
   },
   created: async function() {
     const accountData = await window.api.remote("getAccountData");
     this.accountData = accountData;
     this.chosenFarmSource = accountData.farms;
     this.chosenWikiSource = accountData.standalone;
+    this.restoreFromState();
   },
 };
 </script>
+<style>
+.wiki-choice-container {
+  @apply max-w-xs;
+}
+.wiki-choice-container .control-container {
+  @apply select-none flex flex-col w-full;
+}
+.wiki-choice-container .control-container:not(:first-child) {
+  @apply mt-4;
+}
+.control-container label {
+  @apply pr-1;
+}
+.control-container select {
+  @apply flex-grow dark:bg-gray-700;
+  @apply focus:ring-1 focus:ring-yellow-600 dark:focus:ring-yellow-300;
+}
+</style>