feat: login & logout flow in Navbar

src/assets/Bank.json

@@ -215,5 +215,25 @@
       "stateMutability": "view",
       "type": "function",
       "constant": true
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        }
+      ],
+      "name": "getSBTNumber",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     }
   ]

src/components/PageNavbar.vue

@@ -1,11 +1,22 @@
 <script>
+import detectEthereumProvider from '@metamask/detect-provider'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import Web3 from 'web3'
+import Bank from '@/assets/Bank.json'
+
 export default {
+  components: { WarningModal, SuccessModal },
   name: 'PageNavbar',
   data() {
     return {
+      BankAddress: import.meta.env.VITE_BANK_ADDR,
       linked: false,
       address: '',
-      msg: "HELLO"
+      msg:'',
+      successModalStatus: false,
+      warningModalStatus: false,
+      web3: null,
     }
   },
   mounted() {
@@ -15,8 +26,52 @@ export default {
     } else {
       this.linked = true
       this.address = this.$cookies.get('address')
-      console.log(this.address)
-      console.log("Addr: "+this.address)
+    }
+  },
+  methods: {
+    async login() {
+      const provider = await detectEthereumProvider()
+      if (provider) {
+        const chainId = await window.ethereum.request({ method: 'eth_chainId' })
+        console.log(chainId)
+        if (chainId == import.meta.env.VITE_CHAIN_ID) {
+          const account = await window.ethereum.request({ method: 'eth_requestAccounts' })
+
+          // check from bank
+          this.web3 = new Web3(window.ethereum)
+          var token = new this.web3.eth.Contract(Bank, this.BankAddress)
+          var clientAddr = (await this.web3.eth.getAccounts())[0]
+          this.web3.eth.defaultAccount = clientAddr
+          var returnNumber = await token.methods.getSBTNumber(clientAddr).call({from: clientAddr})
+          if (returnNumber != 0){
+            this.$cookies.set('address', clientAddr)
+            this.$cookies.set('linked', true)
+            this.$cookies.set('SBTNumber', returnNumber)
+            this.linked = true
+            this.address = this.$cookies.get('address')
+            this.msg = '成功連接 MetaMask'
+            this.successModalStatus = true
+          } else {
+            this.msg = '您可能還沒有註冊過！'
+            this.warningModalStatus = true
+          }
+        } else {
+          this.msg = '你連接的不是 Sepolia 測試網路，目前只接受 Sepolia address'
+          this.warningModalStatus = true
+        }
+      } else {
+        this.msg = 'no Metamask'
+        this.warningModalStatus = true
+      }
+    },
+    logout () {
+      console.log('logout')
+      this.linked = false
+      this.address = ''
+      this.$cookies.remove('linked')
+      this.$cookies.remove('address')
+      this.$cookies.remove('SBTNumber')
+      this.$router.push('/')
     }
   }
 }
@@ -52,11 +107,12 @@ export default {
                 <template v-if="!linked">
                   <div class="buttons">
                     <RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
-                    <RouterLink to="/login" class="button is-info is-outlined">Log in</RouterLink>
+                    <a class="button is-info is-outlined" @click="login">Log in</a>
                   </div>
                 </template>
                 <template v-else>
-                  <button class="button is-info is-outlined is-small is-rounded">{{ 'Hello! ' + address }}</button>
+                  <RouterLink to="/client" class="button is-info is-outlined is-small is-rounded">{{ 'Hello! ' + address }}</RouterLink>
+                  <button class="button is-danger is-outlined is-small is-rounded" @click="logout">登出</button>
                 </template>
               </div>
             </div>
@@ -65,4 +121,7 @@ export default {
       </div>
     </div>
   </section>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus=false"></WarningModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus=false" link="/client" btnName="繼續"></SuccessModal>
+
 </template>