<commit_before><template>
  <div class="send-novo flex-col">
    <portal to="sidebar-right-title">
      {{ $t("buttons.send") }}
    </portal>

    <div class="main">
      <input
        v-model="amount"
        ref="amount"
        type="number"
        step="0.01"
        placeholder="0.00"
        :class="amountClass"
        min="0"
        :max="account.spendable"
        @change="isAmountInvalid = false"
      />
      <novo-form-field :title="$t('send_novo.target_account')">
        <div class="selectfunding">
          <select v-model="fundingAccount">
            <option
              v-for="account in fundingAccounts"
              :key="account.UUID"
              :value="account"
              >{{ account.label }}</option
            >
          </select>
          <span class="selectarrow">
            <fa-icon :icon="['fal', 'chevron-down']" />
          </span>
        </div>
      </novo-form-field>

      <input
        v-model="password"
        type="password"
        v-show="walletPassword === null"
        :placeholder="$t('common.enter_your_password')"
        :class="passwordClass"
        @keydown="onPasswordKeydown"
      />
    </div>
    <button @click="trySend" :disabled="disableSendButton">
      {{ $t("buttons.send") }}
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  LibraryController,
  AccountsController
} from "../../../unity/Controllers";

export default {
  name: "SendNovo",
  data() {
    return {
      amount: null,
      address: null,
      password: null,
      fundingAccount: null,
      isAmountInvalid: false,
      isPasswordInvalid: false
    };
  },
  computed: {
    ...mapState("wallet", ["walletPassword"]),
    ...mapGetters("wallet", ["accounts", "account"]),
    computedPassword() {
      return this.walletPassword ? this.walletPassword : this.password || "";
    },
    amountClass() {
      return this.isAmountInvalid ? "error" : "";
    },
    passwordClass() {
      return this.isPasswordInvalid ? "error" : "";
    },
    fundingAccounts() {
      return this.accounts.filter(
        x => x.state === "Normal" && ["Desktop"].indexOf(x.type) !== -1
      );
    },
    hasErrors() {
      return this.isAmountInvalid || this.isPasswordInvalid;
    },
    disableSendButton() {
      if (isNaN(parseFloat(this.amount))) return true;
      if (this.computedPassword.trim().length === 0) return true;
      return false;
    }
  },
  mounted() {
    this.$refs.amount.focus();
    if (this.fundingAccounts.length) {
      this.fundingAccount = this.fundingAccounts[0];
    }

    this.amount = this.account.spendable;
  },
  methods: {
    onPasswordKeydown() {
      this.isPasswordInvalid = false;
    },
    trySend() {
      /*
       todo:
        - replace amount input by custom amount input (this one is too basic)
        - improve notifications / messages on success and error
       */

      // validate amount
      if (this.account.spendable < this.amount) {
        this.isAmountInvalid = true;
      }

      // wallet needs to be unlocked to make a payment
      if (LibraryController.UnlockWallet(this.computedPassword) === false) {
        this.isPasswordInvalid = true;
      }

      if (this.hasErrors) return;

      // create payment request
      var request = {
        valid: true,
        address: AccountsController.GetReceiveAddress(this.fundingAccount.UUID),
        label: "",
        desc: "",
        amount: this.amount * 100000000
      };

      // try to make the payment
      let result = LibraryController.PerformPaymentToRecipient(request, true);
      if (result === 0) {
        // payment succeeded
        this.amount = null;
        this.address = null;
        this.password = null;
      } else {
        // payment failed
        console.log("someting went wrong, but don't exactly know what.");
      }
      // lock the wallet again
      LibraryController.LockWallet();
    }
  }
};
</script>

<style lang="less" scoped>
.selectfunding {
  position: relative;
  float: left;
  width: 100%;
}
.selectfunding select {
  background-color: rgba(255, 255, 255, 0);
  z-index: 999;
}
.selectarrow {
  position: absolute;
  top: 0;
  right: 10px;
  line-height: 40px;
  font-size: 12px;
  z-index: -1;
}

.send-novo {
  height: 100%;

  .main {
    flex: 1;
  }
}

input {
  border: 0;
  margin: 0 0 10px 0;
  font-style: normal;
  font-size: 14px;
}

button {
  width: 100%;
}
</style><commit_msg>make amount input readonly and close the sidebar after successful payment<commit_after><template>
  <div class="send-novo flex-col">
    <portal to="sidebar-right-title">
      {{ $t("buttons.send") }}
    </portal>

    <div class="main">
      <input
        class="amount"
        v-model="amount"
        ref="amount"
        type="text"
        readonly
      />
      <novo-form-field :title="$t('send_novo.target_account')">
        <div class="selectfunding">
          <select v-model="fundingAccount">
            <option
              v-for="account in fundingAccounts"
              :key="account.UUID"
              :value="account"
              >{{ account.label }}</option
            >
          </select>
          <span class="selectarrow">
            <fa-icon :icon="['fal', 'chevron-down']" />
          </span>
        </div>
      </novo-form-field>

      <input
        v-model="password"
        type="password"
        v-show="walletPassword === null"
        :placeholder="$t('common.enter_your_password')"
        :class="passwordClass"
        @keydown="onPasswordKeydown"
      />
    </div>
    <button @click="trySend" :disabled="disableSendButton">
      {{ $t("buttons.send") }}
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  LibraryController,
  AccountsController
} from "../../../unity/Controllers";
import EventBus from "../../../EventBus";

export default {
  name: "SendNovo",
  data() {
    return {
      amount: null,
      address: null,
      password: null,
      fundingAccount: null,
      isPasswordInvalid: false
    };
  },
  computed: {
    ...mapState("wallet", ["walletPassword"]),
    ...mapGetters("wallet", ["accounts", "account"]),
    computedPassword() {
      return this.walletPassword ? this.walletPassword : this.password || "";
    },
    passwordClass() {
      return this.isPasswordInvalid ? "error" : "";
    },
    fundingAccounts() {
      return this.accounts.filter(
        x => x.state === "Normal" && ["Desktop"].indexOf(x.type) !== -1
      );
    },
    hasErrors() {
      return this.isPasswordInvalid;
    },
    disableSendButton() {
      if (isNaN(parseFloat(this.amount))) return true;
      if (this.computedPassword.trim().length === 0) return true;
      return false;
    }
  },
  mounted() {
    this.$refs.amount.focus();
    if (this.fundingAccounts.length) {
      this.fundingAccount = this.fundingAccounts[0];
    }

    this.amount = this.account.spendable.toFixed(2);
  },
  methods: {
    onPasswordKeydown() {
      this.isPasswordInvalid = false;
    },
    trySend() {
      /*
       todo:
        - improve notifications / messages on success and error
       */

      // wallet needs to be unlocked to make a payment
      if (LibraryController.UnlockWallet(this.computedPassword) === false) {
        this.isPasswordInvalid = true;
      }

      if (this.hasErrors) return;

      // create payment request
      var request = {
        valid: true,
        address: AccountsController.GetReceiveAddress(this.fundingAccount.UUID),
        label: "",
        desc: "",
        amount: this.amount * 100000000
      };

      // try to make the payment
      let result = LibraryController.PerformPaymentToRecipient(request, true);
      if (result === 0) {
        // payment succeeded
        EventBus.$emit("close-right-sidebar");
      } else {
        // payment failed
        console.log("someting went wrong, but don't exactly know what.");
      }
      // lock the wallet again
      LibraryController.LockWallet();
    }
  }
};
</script>

<style lang="less" scoped>
.selectfunding {
  position: relative;
  float: left;
  width: 100%;
}
.selectfunding select {
  background-color: rgba(255, 255, 255, 0);
  z-index: 999;
}
.selectarrow {
  position: absolute;
  top: 0;
  right: 10px;
  line-height: 40px;
  font-size: 12px;
  z-index: -1;
}

.send-novo {
  height: 100%;

  .main {
    flex: 1;
  }
}

input {
  border: 0;
  margin: 0 0 10px 0;
  font-style: normal;
  font-size: 14px;
}

.amount {
  cursor: default;
}

button {
  width: 100%;
}
</style>
{'fraction_non_alphanumeric': 0.14819976771196283, 'fraction_numerical': 0.013008130081300813, 'mean_word_length': 2.1975492016338656, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1374347', 'n_tokens_mistral': 2757, 'n_tokens_neox': 2657, 'n_words': 568}