Merge branch 'test'

src/components/header.vue

@@ -2,7 +2,11 @@
     <div class="header">
         <img class="logo" src="../static/img/logo.svg" alt="DeNet" />
         <div class="operation">
-            <div class="login" @click="login">
+            <div class="login" @click="login" v-if="loginStatus">
+                <img class="add" src="../static/img/header-add.svg" alt="" />
+                <span>Create NFTs</span>
+            </div>
+            <div class="login disabled" v-else>
                 <img class="add" src="../static/img/header-add.svg" alt="" />
                 <span>Create NFTs</span>
             </div>
@@ -26,6 +30,7 @@ import { Report } from '../static/report'
 import { businessType, pageSource, objectType } from '../static/report/enum'
 
 const timer = ref(0)
+const loginStatus = ref(true)
 
 const install =  () => {
     window.open(`https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja`);
@@ -56,6 +61,7 @@ const checkInstall = () => {
 }
 
 const login = () => {
+    loginStatus.value = false;
     checkInstall().then(() => {
         let userInfo = getStorage(storageKey.userInfo);
         if (userInfo) {
@@ -64,6 +70,7 @@ const login = () => {
             twitterAuth()
         }
     }).catch(() => {
+        loginStatus.value = true;
         install()
     })
     // Report
@@ -102,6 +109,7 @@ const twitterAuth = () => {
                 type: 'error',
                 message: msg,
             })
+            loginStatus.value = true;
         }
     })
 }
@@ -121,7 +129,6 @@ const twitterLogin = (data: { authToken: string, consumerKey: string }) => {
             let { code, data, msg } = res;
             if ( code === 0 ) {
                 setStorage(storageKey.userInfo, data);
-                storage.remove(storageKey.verifier);
                 location.href = `/nft/list`
             } else {
                 ElMessage({
@@ -129,7 +136,13 @@ const twitterLogin = (data: { authToken: string, consumerKey: string }) => {
                     message: msg,
                 })
             }
+        }).finally(() => {
+            loginStatus.value = true;
+            storage.remove(storageKey.verifier);
+            clearInterval(timer.value);
         })
+    } else {
+        loginStatus.value = true;
     }
 }
 </script>
@@ -173,6 +186,10 @@ const twitterLogin = (data: { authToken: string, consumerKey: string }) => {
             width: 20px;
             margin-right: 4px;
         }
+        &.disabled {
+            opacity: .5;
+            border: solid 1px #eee;
+        }
     }
     .down {
         display: flex;