src/views/welcome/verifyMnemonic.vue

   1 <style scoped>
   2
   3 .header {
   4   position: relative;
   5   margin:40px 0px 20px;
   6   line-height: 37px;
   7 }
   8 .header p{
   9   font-size: 16px;
  10   color: rgba(255,255,255,0.5);
  11   padding-top: 5px;
  12 }
  13 .container{
  14   position: relative;
  15   margin-top: 24px;
  16 }
  17
  18   .container{
  19     position: relative;
  20   }
  21   .form-item{
  22     margin: 10px 0;
  23   }
  24   .topbar a{
  25     position: fixed;
  26     top: 10px;
  27     right: 20px;
  28   }
  29   .topbar a i{
  30     font-size: 25px;
  31     color: white;
  32   }
  33   .welcome-title{
  34     margin-top: 20px;
  35   }
  36   .btn-round{
  37     padding: 15px 2px;
  38   }
  39
  40   .textarea{
  41     width: calc(100% - 40px);
  42     min-height: 213px;
  43     background: #FAFAFA;
  44     border-radius: 8px;
  45     border: none;
  46     padding: 20px;
  47   }
  48 </style>
  49
  50 <template>
  51   <div>
  52     <div class="warp bg-white">
  53       <div class="header color-black">
  54         <BackButton/>
  55         <h1>
  56           <div class="welcome-title">{{ $t('verifyMnemonic.title')}}</div>
  57         </h1>
  58       </div>
  59       <div class="divider"></div>
  60       <div class="container">
  61           <div class="form">
  62             <div class="form-item">
  63                   <div :class="[formItemContent, { 'error': $v.inputMnemonic.$error }]">
  64                       <textarea type="text"
  65                                 class="textarea"
  66                              :placeholder="$t('verifyMnemonic.hint')"
  67                              id="inputMnemonic"
  68                              name="inputMnemonic"
  69                              ref="inputMnemonic"
  70                              v-model="$v.inputMnemonic.$model"
  71                              autofocus />
  72                   </div>
  73               </div>
  74           </div>
  75           <div>
  76             <div class="btn btn-primary btn-round float-right" @click="verify"><i class="iconfont icon-right-arrow"></i></div>
  77           </div>
  78         </div>
  79      </div>
  80       <Footer/>
  81   </div>
  82 </template>
  83
  84 <script>
  85 import account from "../../models/account";
  86 import { getLanguage } from '@/assets/language'
  87 import { mapActions, mapGetters, mapState } from 'vuex'
  88 import * as Actions from '@/store/constants';
  89 import { required } from "vuelidate/lib/validators";
  90
  91
  92 export default {
  93     name: "",
  94     data() {
  95         return {
  96             inputMnemonic:''
  97         };
  98     },
  99   validations: {
 100     inputMnemonic: {
 101         required,
 102     }
 103   },
 104     computed: {
 105         formItemLabel: function () {
 106             if (this.i18n == "cn") {
 107                 return "form-item-label form-item-label-cn";
 108             } else if (this.i18n == "en") {
 109                 return "form-item-label";
 110             }
 111             return "form-item-label form-item-label-cn";
 112         },
 113         formItemContent: function () {
 114             if (this.i18n == "cn") {
 115                 return "form-item-content content-cn";
 116             } else if (this.i18n == "en") {
 117                 return "form-item-content content";
 118             }
 119             return "form-item-label form-item-label-cn";
 120         },
 121       ...mapState([
 122         'bytom'
 123       ]),
 124       ...mapGetters([
 125         'currentAccount'
 126       ])
 127     },
 128     props: {
 129         i18n: {
 130             type: String,
 131             default: 'cn',
 132         }
 133     },
 134     methods: {
 135         verify: function () {
 136           this.$v.$touch();
 137           if (this.$v.$invalid) {
 138             const inputMnemonic = this.$v.inputMnemonic
 139               if (inputMnemonic.$error) {
 140
 141                 this.$toast.error(
 142                   this.$t("error.BTM0001")
 143                 );
 144                 this.$refs['inputMnemonic'].focus();
 145               }
 146           } else {
 147             const formMnemonic = this.inputMnemonic.trim()
 148
 149             if (formMnemonic !== this.currentAccount.mnemonic) {
 150               this.$toast.error(
 151                 this.$t("error.BTM0002")
 152               );
 153               return;
 154             }
 155
 156             this.$router.push('/');
 157           }
 158         },
 159         ...mapActions([
 160           Actions.CREATE_NEW_BYTOM,
 161           Actions.IMPORT_BYTOM,
 162           Actions.UPDATE_STORED_BYTOM
 163         ])
 164     }
 165 };
 166 </script>