feat: login & logout flow in Navbar
This commit is contained in:
parent
0e2a08daf3
commit
8cb4a14b94
GPG Key ID:
569349933C77A854
@ -1,219 +1,239 @@
|
||||
[
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "SBT_addr",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "SBT_addr",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "owner",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
"inputs": [],
|
||||
"name": "owner",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "recv",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
"inputs": [],
|
||||
"name": "recv",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "sbt",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "contract SoulboundToken",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
"inputs": [],
|
||||
"name": "sbt",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "contract SoulboundToken",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"stateMutability": "payable",
|
||||
"type": "receive",
|
||||
"payable": true
|
||||
"stateMutability": "payable",
|
||||
"type": "receive",
|
||||
"payable": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "setCredit",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "number",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "register",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "shop",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "pay",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "repay",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "payable",
|
||||
"type": "function",
|
||||
"payable": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "start_recv",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "stop_recv",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getCredit",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getArrear",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getClientOrders",
|
||||
"outputs": [
|
||||
{
|
||||
"components": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
"internalType": "bool",
|
||||
"name": "isFinished",
|
||||
"type": "bool"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "setCredit",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "number",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "register",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "shop",
|
||||
"type": "address"
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
"internalType": "address",
|
||||
"name": "shop",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "pay",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
],
|
||||
"internalType": "struct Order[]",
|
||||
"name": "",
|
||||
"type": "tuple[]"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "repay",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "payable",
|
||||
"type": "function",
|
||||
"payable": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "start_recv",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "stop_recv",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getCredit",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getArrear",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "client",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getClientOrders",
|
||||
"outputs": [
|
||||
{
|
||||
"components": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "isFinished",
|
||||
"type": "bool"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "shop",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"internalType": "struct Order[]",
|
||||
"name": "",
|
||||
"type": "tuple[]"
|
||||
}
|
||||
],
|
||||
"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
|
||||
}
|
||||
]
|
||||
]
|
||||
@ -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>
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
console.log(`Code matched = ${decodedText}`, decodedResult);
|
||||
this.scanner.clear()
|
||||
},
|
||||
scan() {
|
||||
scan () {
|
||||
this.scanner = new Html5QrcodeScanner(
|
||||
"reader",
|
||||
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user