feat: add cookie after registering

import vue-cookie to log whether the user logined.

package-lock.json

@@ -9,8 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@metamask/detect-provider": "^2.0.0",
+        "html5-qrcode": "^2.3.8",
         "pinia": "^2.0.36",
         "vue": "^3.3.2",
+        "vue-cookies": "^1.8.3",
         "vue-router": "^4.2.0",
         "web3": "^1.8.2"
       },
@@ -3350,6 +3352,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -5825,6 +5832,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-cookies": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz",
@@ -8823,6 +8835,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
+    },
     "http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -10593,6 +10610,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "vue-cookies": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
+    },
     "vue-eslint-parser": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz",

package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
+    "html5-qrcode": "^2.3.8",
     "pinia": "^2.0.36",
     "vue": "^3.3.2",
+    "vue-cookies": "^1.8.3",
     "vue-router": "^4.2.0",
     "web3": "^1.8.2"
   },

src/components/PageNavbar.vue

@@ -1,6 +1,24 @@
 <script>
 export default {
-  name: 'PageNavbar'
+  name: 'PageNavbar',
+  data() {
+    return {
+      linked: false,
+      address: '',
+      msg: "HELLO"
+    }
+  },
+  mounted() {
+    console.log(this.$cookies.isKey('linked'))
+    if (!this.$cookies.isKey('linked')) {
+      this.linked = false
+    } else {
+      this.linked = true
+      this.address = this.$cookies.get('address')
+      console.log(this.address)
+      console.log("Addr: "+this.address)
+    }
+  }
 }
 
 </script>
@@ -31,10 +49,15 @@ export default {
 
             <div class="navbar-end">
               <div class="navbar-item">
-                <div class="buttons">
+                <template v-if="!linked">
-                  <RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
+                  <div class="buttons">
-                  <RouterLink to="/login" class="button is-info is-outlined">Log in</RouterLink>
+                    <RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
-                </div>
+                    <RouterLink to="/login" class="button is-info is-outlined">Log in</RouterLink>
+                  </div>
+                </template>
+                <template v-else>
+                  <button class="button is-info is-outlined is-small is-rounded">{{ 'Hello! ' + address }}</button>
+                </template>
               </div>
             </div>
           </div>

src/main.js

@@ -3,10 +3,12 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import VueCookies from 'vue-cookies'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(VueCookies, { expires: '7d'})
 
 app.mount('#app')

src/views/LinkSBTView.vue

@@ -42,6 +42,10 @@ export default {
         try {
           await this.bank.methods.register(this.number).send({ from: this.clientAddr })
           this.successModalStatus = true
+          this.$cookies.set('linked', true)
+          this.$cookies.set('SBTNumber', returnNumber)
+          this.$cookies.set('address', this.clientAddr)
+          
           this.link = '/signup/credit'
           this.msg = '註冊成功！'
         } catch (error) {