feat: login & logout flow in Navbar
This commit is contained in:
parent
0e2a08daf3
commit
8cb4a14b94
GPG Key ID:
569349933C77A854
@ -1,219 +1,239 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"inputs": [
|
"inputs": [
|
||||||
{
|
{
|
||||||
"internalType": "address",
|
"internalType": "address",
|
||||||
"name": "SBT_addr",
|
"name": "SBT_addr",
|
||||||
"type": "address"
|
"type": "address"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"stateMutability": "nonpayable",
|
"stateMutability": "nonpayable",
|
||||||
"type": "constructor"
|
"type": "constructor"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"inputs": [],
|
"inputs": [],
|
||||||
"name": "owner",
|
"name": "owner",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
{
|
{
|
||||||
"internalType": "address",
|
"internalType": "address",
|
||||||
"name": "",
|
"name": "",
|
||||||
"type": "address"
|
"type": "address"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"stateMutability": "view",
|
"stateMutability": "view",
|
||||||
"type": "function",
|
"type": "function",
|
||||||
"constant": true
|
"constant": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"inputs": [],
|
"inputs": [],
|
||||||
"name": "recv",
|
"name": "recv",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
{
|
{
|
||||||
"internalType": "bool",
|
"internalType": "bool",
|
||||||
"name": "",
|
"name": "",
|
||||||
"type": "bool"
|
"type": "bool"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"stateMutability": "view",
|
"stateMutability": "view",
|
||||||
"type": "function",
|
"type": "function",
|
||||||
"constant": true
|
"constant": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"inputs": [],
|
"inputs": [],
|
||||||
"name": "sbt",
|
"name": "sbt",
|
||||||
"outputs": [
|
"outputs": [
|
||||||
{
|
{
|
||||||
"internalType": "contract SoulboundToken",
|
"internalType": "contract SoulboundToken",
|
||||||
"name": "",
|
"name": "",
|
||||||
"type": "address"
|
"type": "address"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"stateMutability": "view",
|
"stateMutability": "view",
|
||||||
"type": "function",
|
"type": "function",
|
||||||
"constant": true
|
"constant": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"stateMutability": "payable",
|
"stateMutability": "payable",
|
||||||
"type": "receive",
|
"type": "receive",
|
||||||
"payable": true
|
"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",
|
"internalType": "bool",
|
||||||
"name": "client",
|
"name": "isFinished",
|
||||||
"type": "address"
|
"type": "bool"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"internalType": "uint256",
|
"internalType": "uint256",
|
||||||
"name": "amount",
|
"name": "amount",
|
||||||
"type": "uint256"
|
"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",
|
"internalType": "address",
|
||||||
"name": "amount",
|
"name": "shop",
|
||||||
"type": "uint256"
|
"type": "address"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"name": "pay",
|
"internalType": "struct Order[]",
|
||||||
"outputs": [],
|
"name": "",
|
||||||
"stateMutability": "nonpayable",
|
"type": "tuple[]"
|
||||||
"type": "function"
|
}
|
||||||
|
],
|
||||||
|
"stateMutability": "view",
|
||||||
|
"type": "function",
|
||||||
|
"constant": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"inputs": [],
|
"inputs": [
|
||||||
"name": "repay",
|
{
|
||||||
"outputs": [
|
"internalType": "address",
|
||||||
{
|
"name": "client",
|
||||||
"internalType": "uint256",
|
"type": "address"
|
||||||
"name": "",
|
}
|
||||||
"type": "uint256"
|
],
|
||||||
},
|
"name": "getSBTNumber",
|
||||||
{
|
"outputs": [
|
||||||
"internalType": "uint256",
|
{
|
||||||
"name": "",
|
"internalType": "uint256",
|
||||||
"type": "uint256"
|
"name": "",
|
||||||
}
|
"type": "uint256"
|
||||||
],
|
}
|
||||||
"stateMutability": "payable",
|
],
|
||||||
"type": "function",
|
"stateMutability": "view",
|
||||||
"payable": true
|
"type": "function",
|
||||||
},
|
"constant": 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
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -1,11 +1,22 @@
|
|||||||
<script>
|
<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 {
|
export default {
|
||||||
|
components: { WarningModal, SuccessModal },
|
||||||
name: 'PageNavbar',
|
name: 'PageNavbar',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
BankAddress: import.meta.env.VITE_BANK_ADDR,
|
||||||
linked: false,
|
linked: false,
|
||||||
address: '',
|
address: '',
|
||||||
msg: "HELLO"
|
msg:'',
|
||||||
|
successModalStatus: false,
|
||||||
|
warningModalStatus: false,
|
||||||
|
web3: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -15,8 +26,52 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.linked = true
|
this.linked = true
|
||||||
this.address = this.$cookies.get('address')
|
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">
|
<template v-if="!linked">
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -65,4 +121,7 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus=false"></WarningModal>
|
||||||
|
<SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus=false" link="/client" btnName="繼續"></SuccessModal>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -44,7 +44,7 @@ export default {
|
|||||||
console.log(`Code matched = ${decodedText}`, decodedResult);
|
console.log(`Code matched = ${decodedText}`, decodedResult);
|
||||||
this.scanner.clear()
|
this.scanner.clear()
|
||||||
},
|
},
|
||||||
scan() {
|
scan () {
|
||||||
this.scanner = new Html5QrcodeScanner(
|
this.scanner = new Html5QrcodeScanner(
|
||||||
"reader",
|
"reader",
|
||||||
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user