update the icon retrival logic

diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index 2c0beed..cf229c4 100644 (file)
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -142,11 +142,11 @@ const cn = {
     confirmSignature:'确认签名'
   },
   enable:{
-    title:'请求授权',
+    title:'应用授权',
     domain: '域名',
-    message: '请求获取你的钱包地址，是否同意？',
-    cancel:'取消',
-    confirm:'确认授权'
+    message: '正在尝试连接到您的 Byone 上并调用相关 API，请仔细检查此站点的安全性并确认是否连接。',
+    cancel:'拒绝',
+    confirm:'连接'
   },
   receive:{
     address: '地址',
@@ -156,9 +156,9 @@ const cn = {
   main: {
     bytom:'主链',
     vapor:'侧链',
-    mainNet: '主网络',
-    testNet: '测试网络',
-    soloNet: '单机网络',
+    mainnet: '主网络',
+    testnet: '测试网络',
+    solonet: '单机网络',
     mainNetShort: 'Bytom主网络',
     testNetShort: 'Bytom测试网络',
     soloNetShort: 'Bytom单机网络',

diff --git a/src/assets/language/en.js b/src/assets/language/en.js
index 3e5a667..c6ae197 100644 (file)
--- a/src/assets/language/en.js
+++ b/src/assets/language/en.js
@@ -115,8 +115,8 @@ const en = {
   },
   enable:{
     title:'Connect Request',
-    domain: 'Domain',
-    message: 'would like to connect your account',
+    domain: 'Domain:',
+    message: ' is trying to connect to your byone and use the relevant API request, please make sure the site is secure. Would you like to connect?',
     cancel:'Cancel',
     confirm:'Connect'
   },
@@ -126,11 +126,11 @@ const en = {
     vpWarning:'Please don\'t use Vapor address in the real transaction.'
   },
   main: {
-    mainNet: 'Mainnet',
-    testNet: 'Testnet',
+    mainnet: 'Mainnet',
+    testnet: 'Testnet',
     vapor: 'Vapor',
     bytom: 'Bytom',
-    soloNet: 'Solonet',
+    solonet: 'Solonet',
     mainNetShort: 'Mainnet',
     testNetShort: 'Testnet',
     vaporTestNetShort: 'Vapor Testnet',

diff --git a/src/background.js b/src/background.js
index 1d9329e..b328919 100644 (file)
--- a/src/background.js
+++ b/src/background.js
@@ -128,7 +128,7 @@ export default class Background {
       {
         url: `${promptURL}#transfer?${queryString}`,
         type: 'popup',
-        width: 360,
+        width: 420,
         height: 623,
         top: 0,
         left: 0
@@ -323,7 +323,7 @@ export default class Background {
       if(bytom.settings.domains.find(_domain => _domain === domain)) {
         sendResponse(account);
       } else{
-        NotificationService.open(new Prompt(PromptTypes.REQUEST_AUTH, payload.domain, {}, approved => {
+        NotificationService.open(new Prompt(PromptTypes.REQUEST_AUTH, payload.domain, payload, approved => {
           if(approved === false || approved.hasOwnProperty('isError')) sendResponse(approved);
           else {
             bytom.settings.domains.unshift(domain);

diff --git a/src/components/MenubarComponent.vue b/src/components/MenubarComponent.vue
index 6440ed0..c1ff70a 100644 (file)
--- a/src/components/MenubarComponent.vue
+++ b/src/components/MenubarComponent.vue
@@ -105,6 +105,7 @@
                   case RouteNames.VERIFY_MNEMONIC:
                   case RouteNames.RESTORE_ACCOUNT:
                   case RouteNames.SETTING_PASSWORD:
+                  case RouteNames.ENABLE:
                   case RouteNames.PROTOCOL: return false;
                   default: return true;
               }                

diff --git a/src/content.js b/src/content.js
index 241bda4..7bfea36 100644 (file)
--- a/src/content.js
+++ b/src/content.js
@@ -4,7 +4,7 @@ import NetworkMessage from '@/messages/network'
 import InternalMessage from '@/messages/internal'
 import * as MsgTypes from './messages/types'
 import * as EventNames from '@/messages/event'
-import {strippedHost} from '@/utils/GenericTools'
+import { strippedHost, strippedFavicon } from '@/utils/GenericTools'
 import _ from 'lodash';
 
 
@@ -161,7 +161,9 @@ class Content {
 
   enable(type, networkMessage) {
     networkMessage.payload ={
-      domain: strippedHost()
+      domain: strippedHost(),
+      title: document.title,
+      icon: strippedFavicon()
     }
 
     this.transfer(type, networkMessage)

diff --git a/src/prompt.js b/src/prompt.js
index dfc5f5d..9525d59 100644 (file)
--- a/src/prompt.js
+++ b/src/prompt.js
@@ -15,7 +15,11 @@ import Dialog from '@/components/dialog'
 import Header from '@/components/header'
 import Footer from '@/components/footer'
 import vSelect from '@/components/select'
+import SelectionPage from '@/components/selection-page'
 import BackButton from '@/components/backButton'
+import Success from '@/components/Success.vue'
+import Menubar from '@/components/MenubarComponent.vue'
+import ModalPasswd from '@/components/modal-passwd.vue'
 import Toast from '@/components/toast'
 import messages, { getLanguage } from '@/assets/language'
 import '@/assets/style.css'
@@ -28,19 +32,23 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
     locale: getLanguage(store.getters.language),
     messages
   })
+  Vue.use(Vuelidate)
   Vue.use(i18n)
   Vue.use(vuescroll)
   Vue.use(VueRouter)
-  Vue.use(Loading)
-  Vue.use(Dialog, i18n)
-  Vue.use(Vuelidate)
+  Vue.use(SelectionPage)
   Vue.use(Header)
   Vue.use(Footer)
+  Vue.use(Loading)
   Vue.use(BackButton)
+  Vue.use(Dialog, i18n)
   Vue.use(Toast, i18n)
+  Vue.component('success', Success)
+  Vue.component('menu-bar', Menubar)
+  Vue.component('v-select', vSelect)
+  Vue.component('modal-passwd', ModalPasswd)
 
 
-  Vue.component('v-select', vSelect)
   Vue.filter('moment', function(value, formatString) {
     formatString = formatString || 'YYYY-MM-DD HH:mm:ss'
     return moment(value * 1000).format(formatString)

diff --git a/src/router.js b/src/router.js
index 1cc1bb3..9ae480e 100644 (file)
--- a/src/router.js
+++ b/src/router.js
@@ -36,7 +36,7 @@ export const RouteNames = {
   //
   // NETWORKS:'networks',
   // NETWORK:'network',
-  // CHANGE_PASSWORD:'changePassword',
+  ENABLE:'enable',
   BACKUP:'backup',
   BACKUP_MNEMONIC:'backup-mnemonic',
   WALLETS:'wallets',
@@ -182,14 +182,7 @@ const routers = [
           require(['@/views/sendTransaction/signTransaction.vue'], resolve)
         }
       },
-      {
-        path: '/enable',
-        name: 'enable',
-        meta: { title: '授权' },
-        component: resolve => {
-          require(['@/views/prompts/authentication.vue'], resolve)
-        }
-      },
+      
       {
         path: '/transfer/info',
         name: 'transfer-info',
@@ -229,6 +222,14 @@ const routers = [
     ]
   },
   {
+        path: '/enable',
+        name: RouteNames.ENABLE,
+        meta: { title: '授权' },
+        component: resolve => {
+          require(['@/views/prompts/authentication.vue'], resolve)
+        }
+      },
+  {
     path: '/wallets',
     name: RouteNames.WALLETS,
     meta: { title: '钱包' },

diff --git a/src/services/NotificationService.js b/src/services/NotificationService.js
index 98169b2..48a098d 100644 (file)
--- a/src/services/NotificationService.js
+++ b/src/services/NotificationService.js
@@ -31,7 +31,7 @@ export default class NotificationService {
 
 
         const height = 623;
-        const width = 360;
+        const width = 420;
         let middleX = window.screen.availWidth/2 - (width/2);
         let middleY = window.screen.availHeight/2 - (height/2);
 

diff --git a/src/utils/GenericTools.js b/src/utils/GenericTools.js
index 38eda48..cf91608 100644 (file)
--- a/src/utils/GenericTools.js
+++ b/src/utils/GenericTools.js
@@ -7,3 +7,32 @@ export const strippedHost = () => {
 
     return host;
 };
+
+export const strippedFavicon = () => {
+    let favicon = undefined;
+    let size = 0
+    let nodeList = document.getElementsByTagName("link");
+    for (let i = 0; i < nodeList.length; i++)
+    {
+      if((nodeList[i].getAttribute("rel") == "icon")||(nodeList[i].getAttribute("rel") == "shortcut icon"))
+      {
+        if(nodeList[i].sizes[0]){
+          const newSize = nodeList[i].sizes[0].split('x')[1]
+          if(newSize && newSize> size){
+            size = newSize
+            favicon = nodeList[i].getAttribute("href");
+          }else if(!favicon){
+            favicon = nodeList[i].getAttribute("href");
+          }
+        }else if(!favicon){
+          favicon = nodeList[i].getAttribute("href");
+        }
+      }
+    }
+
+    if(favicon && favicon.substring(0,1) === '/'){
+      favicon = location.origin + favicon;
+    }
+
+    return favicon;
+};

diff --git a/src/views/prompts/authentication.vue b/src/views/prompts/authentication.vue
index adb743b..6d8be5f 100644 (file)
--- a/src/views/prompts/authentication.vue
+++ b/src/views/prompts/authentication.vue
@@ -1,28 +1,14 @@
-<style lang="" scoped>
-  .warp {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 600px;
-    z-index: 2;
-    overflow: scroll;
-  }
-  .header {
-    display: flex;
-  }
-  .header p{
+<style lang="scss" scoped>
+  .header{
     text-align: center;
-    width: 280px;
-    padding-top: 17px;
+    margin: 60px 0 20px;
   }
+  .header h1{
+    font-weight: 600;
+    font-size: 28px;
+    /* Text / Dark-Major */
 
-  .content {
-    margin: 20px;
-    padding: 20px;
-    overflow: hidden;
-    border-radius:4px;
-    width: 280px;
+    color: rgba(0, 0, 0, 0.88);
   }
 
   .btn-inline .btn {
@@ -39,8 +25,13 @@
     color: #7B7B7B;
   }
   .message{
-    font-size: 14px;
-    color: #7B7B7B;
+    font-size: 13px;
+    text-align: center;
+    letter-spacing: 0.2px;
+    color: rgba(0, 0, 0, 0.36);
+    width: 260px;
+    margin-left: auto;
+    margin-right: auto;
   }
   .value{
     color: #282828;
@@ -55,47 +46,119 @@
     margin-bottom: 10px;
   }
   .btn-container .btn{
-    margin-top: 20px;
+    margin-top: 12px;
     height: 48px;
-    width: 320px;
+    width: 126px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .network{
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 114px;
+    border-radius: 12px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 7px;
+    i{
+      width: 3px;
+      height: 3px;
+      border: 2px solid #333333;
+      border-radius: 4px;
+      margin-right: 6px;
+    }
+  }
+
+  .light-tag{
+    font-size: 12px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.64);
+    background: #FAFAFA;
+    border-radius: 12px;
+    padding: 2px 13px;
+  }
+
+  .logo{
+    width: 62px;
+    border-radius: 36px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
+    height: 62px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    text-transform: uppercase;
+    padding: 5px;
+  }
+
+  .logo-container{
+    display: flex;
+    color: #333333;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    i{
+          margin: 0 15px;
+    }
+  }
+
+  .btn-container{
+    margin-top: 8px;
   }
 </style>
 
 <template>
-  <div class="warp bg-gray">
-    <section class="header bg-header">
-      <i class="iconfont icon_arrow_left" @click="denied"></i>
-      <p>{{$t('enable.title')}}</p>
-    </section>
-
-    <section class="content bg-white">
-      <table>
-        <tbody>
-          <tr class="row">
-            <td class="col label">{{$t('enable.domain')}}</td>
-            <td  class="col value">{{prompt.domain}}</td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section class="content bg-white">
-      <div class="message">{{$t('enable.message')}}</div>
-    </section>
-
-    <div class="row btn-container" style="bottom: 20px; left: 20px; position: absolute;">
-      <div class="btn" @click="denied">{{$t('enable.cancel')}}</div>
-      <div class="btn bg-green" @click="accepted">{{$t('enable.confirm')}}</div>
+  <div>
+    <div class="warp bg-white">
+      <section class="header">
+        <h1>{{$t('enable.title')}}</h1>
+        <div class="network light-tag">
+          <i></i>
+          <div>{{netType}} {{$t(`main.${net}`)}}</div>
+        </div>
+      </section>
+
+      <section>
+        <div class="logo-container">
+          <img v-if="prompt.data && prompt.data.icon" :src="prompt.data.icon" class="logo" alt="">
+          <div v-else class="logo" >{{initial}}</div>
+          <i class="iconfont icon_connect"></i>
+          <img class="logo" src="@/assets/logo.png" alt="">
+        </div>
+
+      </section>
+
+      <section >
+        <div class="message"><span class="color-black">{{prompt.data ? prompt.data.title : prompt.domain}}</span>{{$t('enable.message')}}</div>
+        <div class="center-text">
+          <span class="light-tag">
+            {{$t('enable.domain')}} {{prompt.domain}}
+          </span>
+
+        </div>
+        <div class="row btn-container">
+          <div class="btn btn-primary" @click="accepted">{{$t('enable.confirm')}}</div>
+          <div class="btn btn-outlined color-black" @click="denied">{{$t('enable.cancel')}}</div>
+        </div>
+      </section>
     </div>
+    <Footer/>
 
   </div>
+
 </template>
 
 <script>
 import { BTM } from "@/utils/constants";
 import {apis} from '@/utils/BrowserApis';
 import NotificationService from '../../services/NotificationService'
-
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 export default {
     data() {
@@ -104,6 +167,17 @@ export default {
         };
     },
     computed: {
+      initial(){
+        if(this.prompt && this.prompt.data && this.prompt.data.title){
+          return this.prompt.data.title.substring(0,1)
+        }else if(this.prompt && this.prompt.domain){
+          return this.prompt.domain.substring(0,1)
+        }
+      },
+      ...mapGetters([
+        'net',
+        'netType',
+      ])
     },
     watch: {
     },