src/views/welcome/verifyMnemonic.vue

   1 <style lang="scss" 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
  49
  50   .mnemonic-panel, .target-mnemonic-panel {
  51     padding: 0 16px;
  52     &>div{
  53       width: 25%;
  54       display: inline-block;
  55       text-align: center;
  56       div{
  57         background: #FFFFFF;
  58         border: 1px solid #EBEBEB;
  59         box-sizing: border-box;
  60         border-radius: 4px;
  61         color: rgba(0, 0, 0, 0.88);
  62         font-weight: 500;
  63         font-size: 16px;
  64         margin: 6px;
  65         cursor: pointer;
  66         padding: 5px 0;
  67
  68         &.active{
  69           background: #004EE4;
  70           color: white;
  71           border: 0px;
  72         }
  73       }
  74     }
  75   }
  76
  77   .mnemonic-panel{
  78     margin-bottom: 10px;
  79   }
  80
  81   .target-mnemonic-panel {
  82     background: #FAFAFA;
  83     border-radius: 4px;
  84     padding: 10px;
  85     margin-bottom: 18px;
  86     min-height: 148px;
  87
  88     div{
  89       cursor: auto !important;
  90     }
  91   }
  92 </style>
  93
  94 <template>
  95    <div>
  96     <div class="warp bg-white">
  97       <div class="header color-black">
  98         <BackButton :des="'welcome-mnemonic'"/>
  99         <h1>
 100           <div class="welcome-title">{{ $t('verifyMnemonic.title')}}</div>
 101         </h1>
 102       </div>
 103       <div class="divider"></div>
 104       <div class="container">
 105         <div class="target-mnemonic-panel">
 106           <div v-for="index in inputMnemonicIndex">
 107             <div> {{ mnemonicList[index] }}</div>
 108           </div>
 109         </div>
 110           <div class="mnemonic-panel">
 111             <div v-for="(word, index) in mnemonicList">
 112               <div :class="activeWord(index)" @click="updateMnemonicList(index)"> {{ word }}</div>
 113             </div>
 114           </div>
 115           <div>
 116             <button :class="['btn btn-primary btn-round float-right',{disable: disableBtn}]" @click="verify" :disabled="disableBtn"><i class="iconfont icon-right-arrow"></i></button>
 117           </div>
 118         </div>
 119      </div>
 120       <Footer/>
 121   </div>
 122 </template>
 123
 124 <script>
 125 import account from "../../models/account";
 126 import { getLanguage } from '@/assets/language'
 127 import { mapActions, mapGetters, mapState } from 'vuex'
 128 import * as Actions from '@/store/constants';
 129 import {RouteNames} from '@/router'
 130
 131
 132 export default {
 133     name: "",
 134     data() {
 135         return {
 136             inputMnemonicIndex:[]
 137         };
 138     },
 139     computed: {
 140       mnemonicList(){
 141         if(this.mnemonic){
 142           const a = this.mnemonic.split(' ')
 143
 144           for (let i = a.length - 1; i > 0; i--) {
 145             const j = Math.floor(Math.random() * (i + 1));
 146             [a[i], a[j]] = [a[j], a[i]];
 147           }
 148
 149           return a;
 150         } else{
 151           return []
 152         }
 153       },
 154       disableBtn(){
 155         const formMnemonic = this.inputMnemonicIndex.map(i => this.mnemonicList[i]).join(" ")
 156         return this.inputMnemonicIndex.length !==12 || formMnemonic !==this.mnemonic;
 157       },
 158       ...mapState([
 159         'bytom',
 160         'mnemonic'
 161       ]),
 162       ...mapGetters([
 163         'currentAccount',
 164         'net',
 165         'language',
 166         'netType'
 167       ])
 168     },
 169     props: {
 170         i18n: {
 171             type: String,
 172             default: 'cn',
 173         }
 174     },
 175     methods: {
 176         verify: function () {
 177           const formMnemonic = this.inputMnemonicIndex.map(i => this.mnemonicList[i]).join(" ")
 178
 179           if (formMnemonic !== this.mnemonic) {
 180             this.$toast.error(
 181               this.$t("error.BTM0002")
 182             );
 183             return;
 184           }
 185
 186           let loader = this.$loading.show({
 187             container: null,
 188             canCancel: true,
 189             onCancel: this.onCancel
 190           });
 191
 192           account.createAccount(this).then(() => {
 193             loader.hide();
 194             this[Actions.PUSH_ALERT](this.$t("successMsg.createWallet"))
 195           }).catch(err => {
 196             loader.hide();
 197             this.$toast.error(
 198               err.message || err
 199             )
 200           });
 201         },
 202         updateMnemonicList(index){
 203           const i = this.inputMnemonicIndex.indexOf(index)
 204           if(i !== -1){
 205             this.inputMnemonicIndex.splice(i, 1)
 206           }else{
 207             this.inputMnemonicIndex.push(index)
 208           }
 209         },
 210         activeWord(index){
 211           return this.inputMnemonicIndex.includes(index)?  "active": "";
 212         },
 213         ...mapActions([
 214           Actions.UPDATE_STORED_BYTOM,
 215           Actions.PUSH_ALERT
 216         ])
 217     },
 218     mounted() {
 219       if (!this.mnemonic){
 220         this.$router.push({ name: RouteNames.MNEMONIC })
 221       }
 222     }
 223 };
 224 </script>