<commit_before><template>
  <div id="setup-container">
    <div class="steps-container section">
      <!-- step 1: show recovery phrase -->
      <div v-if="current === 1">
        <h2 class="important">{{ $t("common.important") }}</h2>
        <p>{{ $t("setup.this_is_your_recovery_phrase") }}</p>
        <div class="phrase">
          {{ recoveryPhrase }}
        </div>
      </div>

      <!-- step 2: repeat recovery phrase -->
      <div v-else-if="current === 2">
        <h2>{{ $t("setup.enter_recovery_phrase") }}</h2>
        <p>{{ $t("setup.repeat_your_recovery_phrase") }}</p>
        <novo-phrase-validator
          :phrase="recoveryPhrase"
          :autofocus="true"
          @validated="onPhraseValidated"
        />
      </div>

      <!-- step 3: enter a password -->
      <div v-else-if="current === 3">
        <h2>{{ $t("setup.choose_password") }}</h2>
        <p>{{ $t("setup.choose_password_information") }}</p>
        <div class="password">
          <div class="password-row">
            <h4>{{ $t("setup.password") }}:</h4>
            <novo-input ref="password" type="password" v-model="password1" />
          </div>
          <div class="password-row">
            <h4>{{ $t("setup.repeat_password") }}:</h4>
            <novo-input
              type="password"
              v-model="password2"
              :status="password2Status"
              @keyup="onPassword2Keyup"
            />
          </div>
        </div>
      </div>

      <div class="button-wrapper">
        <novo-button
          v-if="current === 1"
          @click="nextStep"
          :disabled="isButtonDisabled()"
        >
          {{ $t("buttons.next") }}
        </novo-button>
        <novo-button
          v-else-if="current === 2"
          @click="previousStep"
          :disabled="isButtonDisabled()"
        >
          {{ $t("buttons.back") }}
        </novo-button>
        <novo-button
          v-else-if="current === 3"
          @click="nextStep"
          :disabled="isButtonDisabled()"
        >
          {{ $t("buttons.finish") }}
        </novo-button>
      </div>
    </div>
  </div>
</template>

<script>
import UnityBackend from "../unity/UnityBackend";

export default {
  data() {
    return {
      current: 1,
      recoveryPhrase: "",
      password1: "",
      password2: "",
      isRecoveryPhraseCorrect: false,
      isBackDisabled: false
    };
  },
  async mounted() {
    this.recoveryPhrase = await UnityBackend.GenerateRecoveryMnemonicAsync();
  },
  computed: {
    recoveryPhraseWords() {
      return this.recoveryPhrase.split(" ");
    },
    password2Status() {
      if (this.password2.length === 0) return "";
      if (this.password2.length > this.password1.length) return "error";
      return this.password1.indexOf(this.password2) === 0 ? "" : "error";
    },
    passwordsValidated() {
      if (this.password1 === null || this.password1.length < 6) return false;
      if (
        this.password2 === null ||
        this.password2.length < this.password1.length
      )
        return false;

      return this.password1 === this.password2;
    }
  },
  watch: {
    isRecoveryPhraseCorrect() {
      if (this.isRecoveryPhraseCorrect) {
        this.nextStep();
      }
    }
  },
  methods: {
    isButtonDisabled() {
      switch (this.current) {
        case 1:
          return this.recoveryPhrase === null;
        case 2:
          return this.isBackDisabled;
        case 3:
          return this.passwordsValidated === false;
      }
      return true;
    },
    nextStep() {
      switch (this.current) {
        case 2:
          this.$nextTick(() => {
            this.$refs.password.$el.focus();
          });
          break;
        case 3:
          if (
            UnityBackend.InitWalletFromRecoveryPhrase(
              this.recoveryPhrase,
              this.password1
            )
          ) {
            this.$router.push({ name: "wallet" });
          }
          break;
      }
      this.current++;
    },
    previousStep() {
      if (this.current === 2) {
        this.current--;
      }
    },
    onPassword2Keyup() {
      if (event.keyCode === 13 && this.passwordsValidated) this.nextStep();
    },
    onPhraseValidated() {
      this.isBackDisabled = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isRecoveryPhraseCorrect = true;
        }, 1000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.button-wrapper {
  margin: 10px 0 0 0;
  float: right;
}

.phrase {
  padding: 10px;
  font-size: 1.05em;
  font-weight: 500;
  text-align: center;
  word-spacing: 4px;
  background-color: #f5f5f5;
}

.phrase,
.password,<commit_msg>move back button to the right<commit_after><template>
  <div id="setup-container">
    <div class="steps-container section">
      <!-- step 1: show recovery phrase -->
      <div v-if="current === 1">
        <h2 class="important">{{ $t("common.important") }}</h2>
        <p>{{ $t("setup.this_is_your_recovery_phrase") }}</p>
        <div class="phrase">
          {{ recoveryPhrase }}
        </div>
      </div>

      <!-- step 2: repeat recovery phrase -->
      <div v-else-if="current === 2">
        <h2>{{ $t("setup.enter_recovery_phrase") }}</h2>
        <p>{{ $t("setup.repeat_your_recovery_phrase") }}</p>
        <novo-phrase-validator
          :phrase="recoveryPhrase"
          :autofocus="true"
          @validated="onPhraseValidated"
        />
      </div>

      <!-- step 3: enter a password -->
      <div v-else-if="current === 3">
        <h2>{{ $t("setup.choose_password") }}</h2>
        <p>{{ $t("setup.choose_password_information") }}</p>
        <div class="password">
          <div class="password-row">
            <h4>{{ $t("setup.password") }}:</h4>
            <novo-input ref="password" type="password" v-model="password1" />
          </div>
          <div class="password-row">
            <h4>{{ $t("setup.repeat_password") }}:</h4>
            <novo-input
              type="password"
              v-model="password2"
              :status="password2Status"
              @keyup="onPassword2Keyup"
            />
          </div>
        </div>
      </div>

      <div class="button-wrapper">
        <div class="left">
          <novo-button
            v-if="current === 2"
            @click="previousStep"
            :disabled="isButtonDisabled()"
          >
            {{ $t("buttons.back") }}
          </novo-button>
        </div>

        <div class="right">
          <novo-button
            v-if="current === 1"
            @click="nextStep"
            :disabled="isButtonDisabled()"
          >
            {{ $t("buttons.next") }}
          </novo-button>

          <novo-button
            v-else-if="current === 3"
            @click="nextStep"
            :disabled="isButtonDisabled()"
          >
            {{ $t("buttons.finish") }}
          </novo-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UnityBackend from "../unity/UnityBackend";

export default {
  data() {
    return {
      current: 1,
      recoveryPhrase: "",
      password1: "",
      password2: "",
      isRecoveryPhraseCorrect: false,
      isBackDisabled: false
    };
  },
  async mounted() {
    this.recoveryPhrase = await UnityBackend.GenerateRecoveryMnemonicAsync();
  },
  computed: {
    recoveryPhraseWords() {
      return this.recoveryPhrase.split(" ");
    },
    password2Status() {
      if (this.password2.length === 0) return "";
      if (this.password2.length > this.password1.length) return "error";
      return this.password1.indexOf(this.password2) === 0 ? "" : "error";
    },
    passwordsValidated() {
      if (this.password1 === null || this.password1.length < 6) return false;
      if (
        this.password2 === null ||
        this.password2.length < this.password1.length
      )
        return false;

      return this.password1 === this.password2;
    }
  },
  watch: {
    isRecoveryPhraseCorrect() {
      if (this.isRecoveryPhraseCorrect) {
        this.nextStep();
      }
    }
  },
  methods: {
    isButtonDisabled() {
      switch (this.current) {
        case 1:
          return this.recoveryPhrase === null;
        case 2:
          return this.isBackDisabled;
        case 3:
          return this.passwordsValidated === false;
      }
      return true;
    },
    nextStep() {
      switch (this.current) {
        case 2:
          this.$nextTick(() => {
            this.$refs.password.$el.focus();
          });
          break;
        case 3:
          if (
            UnityBackend.InitWalletFromRecoveryPhrase(
              this.recoveryPhrase,
              this.password1
            )
          ) {
            this.$router.push({ name: "wallet" });
          }
          break;
      }
      this.current++;
    },
    previousStep() {
      if (this.current === 2) {
        this.current--;
      }
    },
    onPassword2Keyup() {
      if (event.keyCode === 13 && this.passwordsValidated) this.nextStep();
    },
    onPhraseValidated() {
      this.isBackDisabled = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isRecoveryPhraseCorrect = true;
        }, 1000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.button-wrapper {
  margin: 10px 0 0 0;

  & .left {
    float: left;
  }

  & .right {
    float: right;
  }
}

.phrase {
  padding: 10px;
  font-size: 1.05em;
  font-weight: 500;
  text-align: center;
  word-spacing: 4px;
  background-color: #f5f5f5;
}

.phrase,
.password,
{'fraction_non_alphanumeric': 0.16310943712073656, 'fraction_numerical': 0.015275162167817534, 'mean_word_length': 1.789320105048147, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, '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': '2003335', 'n_tokens_mistral': 3116, 'n_tokens_neox': 2967, 'n_words': 534}