Home screen: wiki/account selection UI (MediaWikiAGE#68)

* Add visual elements to the home screen

* Hook up account data for the home screen account selection

The interface works, but the choice isn't retained. Will have to
work on writing to the central store later. Hopefully not much
later.

public/preload.js

@@ -5,6 +5,7 @@ contextBridge.exposeInMainWorld(
     remote: (channel, ...data) => {
       const validChannels = [
         "getAuthSystemList",
+        "getAccountData",
         "addBotPasswordForAuthSystem",
         "createStandaloneWikiWithUrl",
         "createWikiFarmWithUrls",

src/background.js

@@ -27,6 +27,9 @@ const getUserData = (event, arg) => {
 ipcMain.handle("getAuthSystemList", (event) => {
   return spellbook.getAuthSystemList();
 });
+ipcMain.handle("getAccountData", (event) => {
+  return spellbook.getAccountData();
+});
 
 ipcMain.handle("addBotPasswordForAuthSystem", (event, ...args) => {
   const [ authSystemData, botPasswordData ] = args;

src/libraries/spellbook.js

@@ -262,6 +262,84 @@ class Farm extends AuthSystem {
   }
 }
 
+/// Returns a list of standalone wiki accounts for the account info exported
+/// function.
+///
+/// The entries in the list are objects with the following fields:
+///  - name: string
+///     The name of the standalone wiki
+///  - accounts: array of string
+///     Alphabetically-sorted (ascending) accounts for the wiki, in the format
+///     `UserName@BotPasswordName`
+///
+/// The returned list is itself sorted in ascending order of the `name` fields.
+function getStandaloneWikiAccountInfo() {
+  const wikiList = [];
+  for (const [wikiName, wikiData] of Object.entries(settings.wikis)) {
+    const wikiAccounts = [];
+    for (const [accountName, accountData] of Object.entries(wikiData.accounts)) {
+      for (const botPasswordName of Object.keys(accountData.botPasswords)) {
+        wikiAccounts.push({
+          name: `${accountName}@${botPasswordName}`
+        });
+      }
+    }
+    wikiAccounts.sort( (a, b) => a.localeCompare(b) );
+
+    wikiList.push({
+      name: wikiName,
+      accounts: wikiAccounts
+    });
+  }
+  wikiList.sort( (a, b) => a.name.localeCompare(b.name) );
+  return wikiList;
+}
+
+
+/// Returns a list of farm wikis and accounts for the account info exported
+/// function.
+///
+/// The entries in the list are objects with the following fields:
+///  - name: string
+///     The name of the farm
+///  - wikis: array of string
+///     Names of the wikis in the farm, in ascending order
+///  - accounts: array of string
+///     Alphabetically-sorted (ascending) accounts for the farm, in the format
+///     `UserName@BotPasswordName`
+///
+/// The returned list is itself sorted in ascending order of the `name` fields.
+function getWikiFarmAccountInfo() {
+  const farmList = [];
+  for (const [farmName, farmData] of Object.entries(settings.farms)) {
+    const farmWikis = [];
+    for (const wikiName in farmData.wikis) {
+      farmWikis.push({
+        name: wikiName
+      });
+    }
+    farmList.sort( (a, b) => a.localeCompare(b) );
+
+    const farmAccounts = [];
+    for (const [accountName, accountData] of Object.entries(farmData.accounts)) {
+      for (const botPasswordName of Object.keys(accountData.botPasswords)) {
+        farmAccounts.push({
+          name: `${accountName}@${botPasswordName}`
+        });
+      }
+    }
+    farmAccounts.sort( (a, b) => a.localeCompare(b) );
+
+    farmList.push({
+      name: farmName,
+      wikis: farmWikis,
+      accounts: farmAccounts
+    });
+  }
+  farmList.sort( (a, b) => a.name.localeCompare(b.name) );
+  return farmList;
+}
+
 export default {
   loadSettings: loadSettings,
 
@@ -295,6 +373,19 @@ export default {
     return list;
   },
 
+  /// Returns the data on all known wikis, farms, and associated accounts and
+  /// bot passwords.
+  ///
+  /// The returned object has the `standalone` field returned from
+  /// `getStandaloneWikiAccountInfo()`, and the `farms` field returned from
+  /// `getWikiFarmAccountInfo()`.
+  getAccountData() {
+    const accountData = {};
+    accountData.standalone = getStandaloneWikiAccountInfo();
+    accountData.farms = getWikiFarmAccountInfo();
+    return accountData;
+  },
+
   /// Adds a password specified in `botPasswordData` for the auth system specified in `authSystemData`.
   ///
   /// authSystemData fields:

src/views/Home.vue

@@ -1,14 +1,59 @@
 <template>
-  <div>
-    &nbsp;
+  <div class="dark:bg-gray-900 h-full">
+    <div class="w-full text-center">
+      <h2 class="text-3xl">Welcome to MAGE</h2>
+    </div>
+
+    <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">
+            <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">
+            <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">
+            <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>
+        </div>
+      </div>
+
+      <p class="mt-3 text-sm italic">MAGE will log in automatically as needed to run tasks</p>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "Home",
-  data: () => ({ users: [], name: null, wiki: null }),
+  data() {
+    return {
+      chosenFarm: -1,
+      chosenWiki: -1,
+      chosenAccount: -1,
+      accountData: {},
+      chosenFarmSource: [],
+      chosenWikiSource: [],
+      chosenAccountSource: []
+    };
+  },
   methods: {
+    /*
     login(event) {
       const userKey = event.target.dataset.id;
       window.api.remote("loginUser", userKey).then(data => {
@@ -26,11 +71,39 @@ export default {
         this.$store.state.current_user = { ...data.cacheUser, ...data.cacheSite };
       });
     }
+    */
+    onFarmChange(event) {
+      this.chosenFarm = parseInt(event.target.value, 10);
+      this.chosenWiki = -1;
+      this.chosenAccount = -1;
+
+      if (this.chosenFarm === -1) {
+        this.chosenWikiSource = this.accountData.standalone;
+        this.chosenAccountSource = [];
+      } else {
+        const farmData = this.accountData.farms[this.chosenFarm];
+        this.chosenWikiSource = farmData.wikis;
+        this.chosenAccountSource = farmData.accounts;
+      }
+    },
+    onWikiChange(event) {
+      this.chosenWiki = parseInt(event.target.value, 10);
+
+      if (this.chosenFarm === -1) {
+        const wikiData = this.accountData.standalone[this.chosenWiki];
+        this.chosenAccount = -1;
+        this.chosenAccountSource = wikiData.accounts;
+      }
+    },
+    onAccountChange(event) {
+      this.chosenAccount = parseInt(event.target.value, 10);
+    }
+  },
+  created: async function() {
+    const accountData = await window.api.remote("getAccountData");
+    this.accountData = accountData;
+    this.chosenFarmSource = accountData.farms;
+    this.chosenWikiSource = accountData.standalone;
   },
-  created() {
-    window.api.remote("getUserLists").then(data => {
-      this.users = data;
-    });
-  }
 };
 </script>