change lib for qr code, add logo

frontend/package.json

@@ -47,6 +47,7 @@
     "particles-bg-vue": "1.2.3",
     "portal-vue": "^2.1.7",
     "prettier": "^2.2.1",
+    "qrcanvas-vue": "^3.0.0",
     "qrcode": "^1.4.4",
     "regenerator-runtime": "^0.13.7",
     "vee-validate": "^3.4.5",
@@ -58,7 +59,6 @@
     "vue-jest": "^3.0.7",
     "vue-loading-overlay": "^3.4.2",
     "vue-moment": "^4.1.0",
-    "vue-qrcode": "^0.3.5",
     "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
     "vue2-transitions": "^0.2.3",

frontend/src/components/QrCode/FigureQrCode.vue

@@ -1,45 +1,51 @@
 <template>
   <div class="figure-qr-code">
-    <figure class="qrcode">
-      <vue-qrcode :value="text" type="image/png" class="qrbox"></vue-qrcode>
-      <img class="qrcode__image" src="img/gdd-coin.png" alt="GDD" />
-    </figure>
+    <div class="qrbox">
+      <q-r-canvas :options="options" class="canvas" />
+    </div>
   </div>
 </template>
 <script>
-import VueQrcode from 'vue-qrcode'
+import { QRCanvas } from 'qrcanvas-vue'
 
 export default {
   name: 'FigureQrCode',
   components: {
-    VueQrcode,
+    QRCanvas,
   },
   props: {
     text: { type: String, required: true },
   },
+  data() {
+    return {
+      options: {
+        cellSize: 8,
+        correctLevel: 'H',
+        data: this.text,
+      },
+    }
+  },
+  created() {
+    const image = new Image()
+    image.src = 'img/gdd-coin.png'
+    image.onload = () => {
+      this.options = {
+        ...this.options,
+        logo: {
+          image,
+        },
+      }
+    }
+  },
 }
 </script>
 <style scoped>
-.qrcode {
-  display: inline-block;
-  font-size: 0;
-  margin-bottom: 0;
-  position: relative;
-}
 .qrbox {
-  width: 400px;
-}
-.qrcode__image {
+  padding: 20px;
   background-color: #fff;
-  border: 0.25rem solid #fff;
-  border-radius: 0.25rem;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
-  height: 15%;
-  left: 50%;
-  overflow: hidden;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 15%;
+}
+.canvas {
+  width: 90%;
+  max-width: 350px;
 }
 </style>

frontend/yarn.lock

@@ -1726,6 +1726,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.16.0":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.14.0":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
@@ -12101,6 +12108,27 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qrcanvas-vue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/qrcanvas-vue/-/qrcanvas-vue-3.0.0.tgz#4bdba09b8050bcc0880d8859b5835cc4b2919248"
+  integrity sha512-B7LgAyOEJWf8Bz0y2J8M0OXE77uNWcH7PWr6q8ihyuQE5NP9zopY9wJGTZIT6Mu7oEOczPHMLDedZqFCT2Qxdw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    qrcanvas "^3.1.2"
+
+qrcanvas@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/qrcanvas/-/qrcanvas-3.1.2.tgz#81a25e91b2c27e9ace91da95591cbfb100d68702"
+  integrity sha512-lNcAyCHN0Eno/mJ5eBc7lHV/5ejAJxII0UELthG3bNnlLR+u8hCc7CR+hXBawbYUf96kNIosXfG2cJzx92ZWKg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    qrcode-generator "^1.4.4"
+
+qrcode-generator@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
+
 qrcode@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
@@ -14619,11 +14647,6 @@ vue-qrcode-reader@^2.3.16:
     vue "^2.6.11"
     webrtc-adapter "7.7.0"
 
-vue-qrcode@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/vue-qrcode/-/vue-qrcode-0.3.5.tgz#d95bd81fea0c7f007f4e69244203d0eee2d573a5"
-  integrity sha512-AZJ+HzhOFokHuMVVwUIjG1FCWT1vJqn/Ro8XnQbyNlZTlQ8l4040JawVqUvTql3AdjJnI9bXaCTPplN502SnFw==
-
 vue-router@^3.0.6:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"