src/views/welcome/creation.vue

   1 <style scoped>
   2 /*.content {*/
   3     /*margin-left: 135px;*/
   4 /*}*/
   5 /*.content-cn {*/
   6     /*margin-left: 85px;*/
   7 /*}*/
   8 /*.form-item-label {*/
   9     /*width: 135px;*/
  10 /*}*/
  11 /*.form-item-label-cn {*/
  12     /*width: 85px;*/
  13 /*}*/
  14   .bg-image{
  15     height: 420px;
  16     width: 360px;
  17     background-size: contain;
  18     -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  19     clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  20     position: absolute;
  21   }
  22   .header {
  23     position: relative;
  24     text-align: center;
  25     margin:15px 20px 25px;
  26   }
  27   .header p{
  28     font-size: 16px;
  29     color: rgba(255,255,255,0.5);
  30     padding-top: 5px;
  31   }
  32   .panel{
  33     position: relative;
  34     padding: 10px;
  35     margin-bottom : 15px;
  36   }
  37   .container{
  38     position: relative;
  39   }
  40   .form-item{
  41     margin: 10px 0;
  42   }
  43   .btn-group{
  44     padding: 0 20px;
  45   }
  46   .topbar{
  47     height: 45px;
  48     padding-top: 10px;
  49   }
  50 .topbar .topbar-middle {
  51   text-align: center;
  52 }
  53
  54 /*.topbar img{*/
  55   /*position: relative;*/
  56   /*bottom: 23px;*/
  57   /*right: 65px*/
  58 /*}*/
  59
  60   .v-select{
  61     height: 32px;
  62     width: 100%;
  63     background: rgba(247,247,247,1);
  64     font-size: 14px;
  65     margin: auto;
  66     border-bottom: 1px solid #E0E0E0;
  67     /*padding-left: 20px;*/
  68   }
  69
  70   .tabs{
  71     color: rgba(255,255,255, 0.4);
  72     text-align: center;
  73   }
  74   .tabs a{
  75     margin: 0px 20px;
  76   }
  77   .tabs .active{
  78     color: rgba(255,255,255, 1);
  79   }
  80   .form-checkbox{
  81     font-size: 14px;
  82     padding: 5px;
  83   }
  84   .topbar a{
  85     position: fixed;
  86     top: 10px;
  87     right: 20px;
  88   }
  89   .topbar a i{
  90     font-size: 25px;
  91     color: white;
  92   }
  93   .file-selection{
  94     height: 50px;
  95     vertical-align: middle;
  96     display: flex;
  97     align-items: center;
  98     border: 1px dashed #E0E0E0;
  99     margin-top: 10px;
 100     padding: 20px;
 101     background: #F7F7F7;
 102   }
 103   .recovery-btn{
 104     position: fixed;
 105     bottom: 20px;
 106     width: 320px;
 107   }
 108 </style>
 109
 110 <template>
 111     <div class="warp bg-gray">
 112       <Header :title="$t('welcome.register')"></Header>
 113
 114           <div class="form panel">
 115             <div class="form-item">
 116                   <label :class="formItemLabel">{{ $t('createAccount.accountAlias') }}</label>
 117                   <div :class="formItemContent">
 118                       <input type="text" v-model="formItem.accAlias" autofocus>
 119                   </div>
 120               </div>
 121               <div class="form-item">
 122                   <label :class="formItemLabel">{{ $t('createAccount.keyPassword') }}</label>
 123                   <div :class="formItemContent">
 124                       <input type="password" v-model="formItem.passwd1">
 125                   </div>
 126               </div>
 127               <div class="form-item">
 128                   <label :class="formItemLabel">{{ $t('createAccount.confirmPassword') }}</label>
 129                   <div :class="formItemContent">
 130                       <input type="password" v-model="formItem.passwd2">
 131                   </div>
 132               </div>
 133             <div class="form-checkbox">
 134               <input type="checkbox" id="checkbox1" v-model="formItem.checked">
 135               <label for="checkbox1">
 136                 {{ $t('welcome.term1') }}<a class="color-green" @click="$router.push({ name: 'welcome-protocol' })">{{  $t('welcome.term2')}}</a>
 137               </label>
 138             </div>
 139           </div>
 140           <div class="btn-group">
 141               <div class="btn btn-primary" @click="create">{{ $t('createAccount.create') }}</div>
 142           </div>
 143       <Footer/>
 144     </div>
 145 </template>
 146
 147 <script>
 148 import account from "../../models/account";
 149 import { getLanguage } from '@/assets/language'
 150 import getLang from "../../assets/language/sdk";
 151 import { mapActions, mapGetters, mapState } from 'vuex'
 152 import * as Actions from '@/store/constants';
 153
 154 let mainNet = null;
 155 export default {
 156     name: "",
 157     data() {
 158         return {
 159             nets: [],
 160             selected: mainNet,
 161             formItem: {
 162                 accAlias: "",
 163                 // keyAlias: "",
 164                 passwd1: "",
 165                 passwd2: "",
 166                 checked: false
 167             },
 168             restore:{
 169                 fileTxt:"",
 170                 checked: false
 171             },
 172             activeTab: 'register'
 173         };
 174     },
 175     computed: {
 176         formItemLabel: function () {
 177             if (this.i18n == "cn") {
 178                 return "form-item-label form-item-label-cn";
 179             } else if (this.i18n == "en") {
 180                 return "form-item-label";
 181             }
 182             return "form-item-label form-item-label-cn";
 183         },
 184         formItemContent: function () {
 185             if (this.i18n == "cn") {
 186                 return "form-item-content content-cn";
 187             } else if (this.i18n == "en") {
 188                 return "form-item-content content";
 189             }
 190             return "form-item-label form-item-label-cn";
 191         },
 192       ...mapState([
 193         'bytom'
 194       ]),
 195       ...mapGetters([
 196         'net',
 197         'language',
 198         'netType'
 199       ])
 200     },
 201     props: {
 202         i18n: {
 203             type: String,
 204             default: 'cn',
 205         }
 206     },
 207     methods: {
 208         create: function () {
 209             if (this.formItem.accAlias == "") {
 210                 this.$dialog.show({
 211                     body: this.$t("createAccount.inputAlias")
 212                 });
 213                 return;
 214             }
 215             if (this.formItem.passwd1 == "") {
 216                 this.$dialog.show({
 217                     body: this.$t("createAccount.inputPass")
 218                 });
 219                 return;
 220             }
 221             if (this.formItem.passwd1 != this.formItem.passwd2) {
 222                 this.$dialog.show({
 223                     body: this.$t('createAccount.passwordAgain'),
 224                 });
 225                 return;
 226             }
 227             if (!this.formItem.checked) {
 228                 this.$dialog.show({
 229                     body: this.$t('createAccount.agreeService'),
 230                 });
 231                 return;
 232             }
 233             let loader = this.$loading.show({
 234                 container: null,
 235                 canCancel: true,
 236                 onCancel: this.onCancel
 237             });
 238             account.create(this.formItem.accAlias, null, this.formItem.passwd1).then(currentAccount => {
 239               this[Actions.CREATE_NEW_BYTOM](this.selected.value).then(() =>{
 240                 loader.hide();
 241                 this.formItem = {};
 242                 this.$router.push('/');
 243               });
 244             }).catch(err => {
 245                 loader.hide();
 246                 this.$dialog.show({
 247                     body: err.message,
 248                 });
 249             });
 250         },
 251         tirggerFile: function (event) {
 252           var reader = new FileReader();
 253           reader.onload = e => {
 254             this.restore.fileTxt = e.target.result;
 255           };
 256
 257           var file = event.target.files[0];
 258           reader.readAsText(file);
 259         },
 260         recovery: function () {
 261           if (!this.restore.checked) {
 262             this.$dialog.show({
 263               body: this.$t('createAccount.agreeService'),
 264             });
 265             return;
 266           }
 267           account.restore(this.restore.fileTxt).then(res => {
 268             this[Actions.IMPORT_BYTOM]().then(() =>{
 269               this.$router.push('/');
 270             });
 271           }).catch(error => {
 272             this.$dialog.show({
 273               body: getLang(error.message, this.language)
 274             });
 275           });
 276         },
 277         ...mapActions([
 278           Actions.CREATE_NEW_BYTOM,
 279           Actions.IMPORT_BYTOM,
 280         ])
 281     },
 282     watch: {
 283         selected: function (value) {
 284             account.setupNet(`${value.value}`);
 285         }
 286     },
 287     mounted() {
 288         mainNet = { label: this.$t('main.mainNet'), value: "mainnet" };
 289         this.nets = [mainNet];
 290         if (this.net != undefined) {
 291             if (this.net == "mainnet") {
 292                 this.selected = mainNet;
 293             }
 294         } else {
 295             this.selected = mainNet;
 296         }
 297         account.setupNet(`${this.selected.value}`);
 298         this.i18n = getLanguage(this.language);
 299     }
 300 };
 301 </script>