Handle required input types (#1059)

* Initial commit

* Handle all input types

* Fix info and label text

* Misc

* Verify that requiredInput has not changed

* Submit input on enter key press

* Show error if code is empty

* Show info about required input as bot status

Author: MrBurrBurr

src/components/BotCard.vue

@@ -27,6 +27,7 @@
 
 <script>
   import { mapGetters } from 'vuex';
+  import getUserInputType from '../utils/getUserInputType';
 
   const quickActionButtons = [
     { name: '2fa', icon: 'lock' },
@@ -44,6 +45,7 @@
       ...mapGetters({
         nicknames: 'settings/nicknames',
         favButtons: 'settings/favButtons',
+        headless: 'asf/headless',
       }),
       isPauseButtonSelected() {
         return this.selectedButtons.filter(e => e.name === 'pause').length > 0;
@@ -76,6 +78,13 @@
       },
       async start() {
         try {
+          const inputType = getUserInputType(this.bot.requiredInput);
+
+          if (this.headless && inputType !== 'None') {
+            this.$router.push({ name: 'bot-input', params: { bot: this.bot.name, type: inputType } });
+            return;
+          }
+          
           await this.$http.botAction(this.bot.name, 'start');
           await this.$store.dispatch('bots/updateBot', { name: this.bot.name, active: true });
         } catch (err) {

src/i18n/locale/default.json

@@ -48,6 +48,7 @@
   "bot-nicknames-description": "Display steam nicknames (if available) instead of bot names.",
   "bot-status-disabled": "Disabled",
   "bot-status-farming": "Farming",
+  "bot-status-input": "Requires input",
   "bot-status-offline": "Offline",
   "bot-status-online": "Online",
   "bots": "Bots",
@@ -79,6 +80,23 @@
   "global-config": "Global Config",
   "info": "Info",
   "input-all-selected": "All values selected",
+  "input-info-login": "You have not set a login name for this account.",
+  "input-info-password": "You have not set a password for this account.",
+  "input-info-steamguard": "This account is currently using Steam Guard.",
+  "input-info-steamparentalcode": "This account is currently using Steam Family View.",
+  "input-info-twofactorauthentication": "This account is currently using a Steam authenticator app.",
+  "input-label-login": "Steam login name",
+  "input-label-password": "Steam password",
+  "input-label-steamguard": "Steam Guard code",
+  "input-label-steamparentalcode": "Steam Parental code",
+  "input-label-twofactorauthentication": "2FA code",
+  "input-no-code-login": "You have to enter a Steam login name",
+  "input-no-code-password": "You have to enter a Steam password",
+  "input-no-code-steamguard": "You have to enter a Steam Guard code",
+  "input-no-code-steamparentalcode": "You have to enter a Steam Parental code",
+  "input-no-code-twofactorauthentication": "You have to enter a 2FA code",
+  "input-submit": "Submit",
+  "input-switch-visibility": "Switch input field visibility",
   "input-unknown-type": "Unknown field type",
   "keep-unchanged": "<keep unchanged>",
   "keys-copied": "Copied keys to clipboard!",

src/models/Bot.js

@@ -20,6 +20,7 @@ export class Bot {
     this.walletBalance = data.WalletBalance;
     this.walletCurrency = data.WalletCurrency;
     this.has2FA = data.HasMobileAuthenticator;
+    this.requiredInput = data.RequiredInput;
 
     this.active = data.KeepRunning;
     this.config = data.BotConfig;
@@ -44,6 +45,7 @@ export class Bot {
 
     if (this.status === 'farming' && this.currentGamesFarming.length === 1) return `${statusText} - ${this.currentGamesFarming[0].GameName}`;
     if (this.status === 'farming' && this.currentGamesFarming.length > 1) return `${statusText} - ${Vue.i18n.translate('multiple-games')}`;
+    if (this.status === 'disabled' && this.requiredInput !== 0) return Vue.i18n.translate('bot-status-input');
 
     return statusText;
   }

src/plugins/icons.js

@@ -6,7 +6,7 @@ import {
   faTimesCircle, faCheckCircle, faEdit, faTimes, faSquare, faMoon, faPalette, faPlay, faQuestion, faPlus,
   faSpinner, faKey, faTrash, faCloudDownloadAlt, faSignOutAlt, faAngleDown, faLanguage, faGamepad, faClone,
   faCalendarCheck, faLock, faBookOpen, faExclamation, faCodeBranch, faHourglassEnd, faHourglassHalf, faHourglassStart,
-  faRedoAlt, faClipboard, faPuzzlePiece, faUndoAlt,
+  faRedoAlt, faClipboard, faPuzzlePiece, faUndoAlt, faEye, faEyeSlash,
 } from '@fortawesome/free-solid-svg-icons';
 
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
@@ -15,7 +15,7 @@ library.add(faWrench, faBars, faLaptop, faUsers, faFileAlt, faTachometerAlt, faP
   faClock, faTimesCircle, faCheckCircle, faEdit, faTimes, faSquare, faMoon, faPalette, faPlay, faQuestion,
   faPlus, faSpinner, faKey, faTrash, faCloudDownloadAlt, faSignOutAlt, faAngleDown, faLanguage, faGamepad,
   faClone, faCalendarCheck, faLock, faGithub, faBookOpen, faExclamation, faCodeBranch, faHourglassEnd, faHourglassHalf,
-  faHourglassStart, faRedoAlt, faClipboard, faPuzzlePiece, faUndoAlt);
+  faHourglassStart, faRedoAlt, faClipboard, faPuzzlePiece, faUndoAlt, faEye, faEyeSlash);
 
 export default {
   install(Vue) {

src/router/routes.js

@@ -100,6 +100,15 @@ export default [
 			modal: () => import('../views/modals/Bot2FA.vue')
 		},
 		meta: { modal: true }
+  },
+  {
+		path: '/page/bot/:bot/input/:type',
+		name: 'bot-input',
+		components: {
+			default: () => import('../views/Bots.vue'),
+			modal: () => import('../views/modals/BotInput.vue')
+		},
+		meta: { modal: true }
 	},
 	{
 		path: '/page/bot/:bot/delete',

src/store/modules/asf.js

@@ -31,6 +31,7 @@ export const state = {
   uptime: '0s',
   updateChannel: 1,
   steamOwnerID: '0',
+  headless: false,
 };
 
 export const mutations = {
@@ -47,6 +48,7 @@ export const mutations = {
   },
   updateUpdateChannel: (state, updateChannel) => (state.updateChannel = updateChannel),
   updateSteamOwnerID: (state, steamOwnerID) => (state.steamOwnerID = steamOwnerID),
+  updateHeadless: (state, headless) => (state.headless = headless),
 };
 
 export const actions = {
@@ -69,6 +71,7 @@ export const actions = {
       commit('calculateUptime');
       commit('updateUpdateChannel', response.GlobalConfig.UpdateChannel);
       commit('updateSteamOwnerID', response.GlobalConfig.s_SteamOwnerID);
+      commit('updateHeadless', response.GlobalConfig.Headless);
     } catch (err) {
       console.warn(err.message);
     }
@@ -87,4 +90,5 @@ export const getters = {
   startTime: state => state.startTime,
   updateChannel: state => state.updateChannel,
   steamOwnerID: state => state.steamOwnerID,
+  headless: state => state.headless,
 };

src/utils/getUserInputType.js

@@ -0,0 +1,14 @@
+// Todo: Read EUserInputType from api
+
+const types = {
+  None: 0,
+  Login: 1,
+  Password: 2,
+  SteamGuard: 3,
+  SteamParentalCode: 4,
+  TwoFactorAuthentication: 5,
+};
+
+export default function getUserInputType(id) {
+  return Object.keys(types)[id];
+}

src/views/modals/Bot.vue

@@ -52,14 +52,18 @@
   import BotFarmingInfo from '../../components/BotFarmingInfo.vue';
   import BotGames from '../../components/BotGames.vue';
   import BotLink from '../../components/BotLink.vue';
+  import getUserInputType from '../../utils/getUserInputType';
 
   export default {
     name: 'bot',
     components: {
       BotAction, BotFarmingInfo, BotGames, BotLink,
     },
     computed: {
-      ...mapGetters({ nicknames: 'settings/nicknames' }),
+      ...mapGetters({ 
+        nicknames: 'settings/nicknames',
+        headless: 'asf/headless',
+      }),
       bot() {
         return this.$store.getters['bots/bot'](this.$route.params.bot);
       },
@@ -100,6 +104,13 @@
         await this.update({ paused: false });
       },
       async start() {
+        const inputType = getUserInputType(this.bot.requiredInput);
+
+        if (this.headless && inputType !== 'None') {
+          this.$router.push({ name: 'bot-input', params: { bot: this.bot.name, type: inputType } });
+          return;
+        }
+
         await this.action('start');
         await this.update({ active: true });
       },

src/views/modals/BotInput.vue

@@ -0,0 +1,125 @@
+<template>
+  <main v-if="bot" class="main-container">
+    <h2 v-if="bot.nickname && nicknames" class="title">{{ bot.nickname }}</h2>
+    <h2 v-else class="title">{{ bot.name }}</h2>
+
+    <div class="form-item">
+      <div class="form-item__info">{{ $t(`input-info-${inputType}`) }}</div>
+      <div class="form-item__code">
+        <div>
+          <label for="input" class="form-item__label">{{ $t(`input-label-${inputType}`) }}</label>
+          <input id="input" class="form-item__input" type="password" autocomplete="new-password" v-model="code" />
+        </div>
+        <div class="form-item__buttons form-item__buttons--column">
+          <button class="button button--helper" :title="$t('input-switch-visibility')" @click="switchInputType">
+            <font-awesome-icon v-if="inputHidden" icon="eye" size="lg"></font-awesome-icon>
+            <font-awesome-icon v-else icon="eye-slash" size="lg"></font-awesome-icon>
+          </button>
+        </div>
+      </div>
+      <div class="form-item__buttons form-item__buttons--center">
+        <button class="button button--confirm" @click="submit">
+          <font-awesome-icon v-if="submitting" icon="spinner" spin></font-awesome-icon>
+          <span v-else>{{ $t('input-submit') }}</span>
+        </button>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import getUserInputType from '../../utils/getUserInputType';
+
+  export default {
+    name: 'bot-input',
+    data() {
+      return {
+        submitting: false,
+        code: '',
+        inputHidden: true,
+      };
+    },
+    computed: {
+      ...mapGetters({ nicknames: 'settings/nicknames' }),
+      bot() {
+        return this.$store.getters['bots/bot'](this.$route.params.bot);
+      },
+      inputType() {
+        return this.$route.params.type.toLowerCase();
+      },
+    },
+    created() {
+      if (!this.bot || !this.$route.params.type) this.$router.replace({ name: 'bots' });
+      document.addEventListener('keydown', this.onEnterClick);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.onEnterClick);
+    },
+    mounted() {
+      document.getElementById('input').focus();
+    },
+    methods: {
+      switchInputType() {
+        this.inputHidden = !this.inputHidden;
+        const field = document.getElementById('input');
+
+        if (field.getAttribute('type') === 'password') field.setAttribute('type', 'text');
+        else field.setAttribute('type', 'password');
+      },
+      onEnterClick(e) {
+        const charCode = (e.which) ? e.which : e.keyCode;
+
+        if (charCode === 13) {
+          this.submit();
+          return e.preventDefault();
+        }
+      },
+      async submit() {
+        if (this.submitting) return;
+
+        if (this.code === '') {
+          this.$error(this.$t(`input-no-code-${this.inputType}`));
+          return;
+        }
+
+        this.submitting = true;
+
+        try {
+          const inputType = getUserInputType(this.bot.requiredInput);
+          if (inputType === this.$route.params.type) await this.$http.post(`bot/${this.bot.name}/input`, { type: this.bot.requiredInput, value: this.code });
+          await this.$http.botAction(this.bot.name, 'start');
+          await this.$store.dispatch('bots/updateBot', { name: this.bot.name, active: true });
+
+          this.$router.back();
+        } catch (err) {
+          this.$error(err.message);
+        } finally {
+          this.submitting = false;
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .form-item__info {
+    padding-bottom: 1em;
+  }
+
+  .form-item__code {
+    display: grid;
+    grid-column-gap: 0.5em;
+    grid-template-columns: 1fr auto;
+    align-items: flex-end;
+    padding-bottom: 1em;
+
+    :focus {
+      outline: none;
+    }
+  }
+
+  .button--helper {
+    max-width: 2em;
+  }
+</style>