QR Codes with logos

2025-01-10 20:13:08 +01:00 · 2025-01-10 20:13:08 +01:00 · 581462d22a
commit 581462d22a
parent a9f763c649
8 changed files with 390 additions and 47 deletions
--- a/version.txt
+++ b/version.txt
@ -1 +1 @@
-1.0.4
+1.1.0
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -27,6 +27,7 @@
        "ngx-markdown": "^18.1.0",
        "primeicons": "^7.0.0",
        "primeng": "^17.18.12",
+        "qrcode-with-logos": "^1.1.1",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.14.10"
@ -6290,7 +6291,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -6300,7 +6300,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-convert": "^2.0.1"
@ -6859,6 +6858,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@ -7195,7 +7203,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-name": "~1.1.4"
@ -7208,7 +7215,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/colorette": {
@ -8279,6 +8285,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@ -8442,6 +8457,12 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -9764,7 +9785,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
      "license": "ISC",
      "engines": {
        "node": "6.* || 8.* || >= 10.*"
@ -13459,6 +13479,15 @@
        "node": ">= 4"
      }
    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/package-json-from-dist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@ -13616,7 +13645,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -13864,6 +13892,15 @@
        "pathe": "^1.1.2"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/points-on-curve": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
@ -14526,6 +14563,165 @@
        "node": ">=0.9"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode-with-logos": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/qrcode-with-logos/-/qrcode-with-logos-1.1.1.tgz",
+      "integrity": "sha512-vh0LWvwalp7471ODXd4rcXrbKgRpfwfdrjfb3pdr9+Zz/s27+5clRHFxzh5orTm1rusStfHGMACP7GWVAkzpKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "qrcode": "^1.4.4"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/qs": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@ -14792,7 +14988,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -14808,6 +15003,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/require-relative": {
      "version": "0.8.7",
      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
@ -15424,6 +15625,12 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@ -15964,7 +16171,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
@ -17880,6 +18086,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/wildcard": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
@ -17901,7 +18113,6 @@
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^4.0.0",
@ -17967,14 +18178,12 @@
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/wrap-ansi/node_modules/is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -17984,7 +18193,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "emoji-regex": "^8.0.0",
--- a/web/package.json
+++ b/web/package.json
@ -32,6 +32,7 @@
    "ngx-markdown": "^18.1.0",
    "primeicons": "^7.0.0",
    "primeng": "^17.18.12",
+    "qrcode-with-logos": "^1.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
--- a/web/src/app/modules/admin/short-urls/short-urls.page.html
+++ b/web/src/app/modules/admin/short-urls/short-urls.page.html
@ -23,39 +23,47 @@
                </span>
            </div>
        </div>
-        <div class="flex justify-end">
-            <p-button
-                    class="icon-btn btn"
-                    icon="pi pi-clone"
-                    (onClick)="copy(url.shortUrl)"></p-button>
-            <p-button
-                    class="icon-btn btn"
-                    icon="pi pi-external-link"
-                    (onClick)="open(url.shortUrl)"></p-button>
+        <div class="flex justify-between">
+            <div class="flex">
+                <p-button
+                        class="icon-btn btn"
+                        icon="pi pi-qrcode"
+                        (onClick)="qrDialog(url)"></p-button>
+            </div>
+            <div class="flex justify-end">
+                <p-button
+                        class="icon-btn btn"
+                        icon="pi pi-clone"
+                        (onClick)="copy(url.shortUrl)"></p-button>
+                <p-button
+                        class="icon-btn btn"
+                        icon="pi pi-external-link"
+                        (onClick)="open(url.shortUrl)"></p-button>

-            <p-button
-                    *ngIf="hasPermissions.update"
-                    class="icon-btn btn"
-                    icon="pi pi-pencil"
-                    tooltipPosition="left"
-                    pTooltip="{{ 'table.update' | translate }}"
-                    [disabled]="url?.deleted"
-                    routerLink="edit/{{ url.id }}"></p-button>
-            <p-button
-                    *ngIf="hasPermissions.delete"
-                    class="icon-btn btn danger-icon-btn"
-                    icon="pi pi-trash"
-                    tooltipPosition="left"
-                    pTooltip="{{ 'table.delete' | translate }}"
-                    [disabled]="url?.deleted"
-                    (click)="delete(url)"></p-button>
-            <p-button
-                    *ngIf="url?.deleted && hasPermissions.restore"
-                    class="icon-btn btn"
-                    icon="pi pi-undo"
-                    tooltipPosition="left"
-                    pTooltip="{{ 'table.restore' | translate }}"
-                    (click)="restore(url)"></p-button>
+                <p-button
+                        *ngIf="hasPermissions.update"
+                        class="icon-btn btn"
+                        icon="pi pi-pencil"
+                        tooltipPosition="left"
+                        pTooltip="{{ 'table.update' | translate }}"
+                        [disabled]="url?.deleted"
+                        routerLink="edit/{{ url.id }}"></p-button>
+                <p-button
+                        *ngIf="hasPermissions.delete"
+                        class="icon-btn btn danger-icon-btn"
+                        icon="pi pi-trash"
+                        tooltipPosition="left"
+                        pTooltip="{{ 'table.delete' | translate }}"
+                        [disabled]="url?.deleted"
+                        (click)="delete(url)"></p-button>
+                <p-button
+                        *ngIf="url?.deleted && hasPermissions.restore"
+                        class="icon-btn btn"
+                        icon="pi pi-undo"
+                        tooltipPosition="left"
+                        pTooltip="{{ 'table.restore' | translate }}"
+                        (click)="restore(url)"></p-button>
+            </div>
        </div>
    </div>
 </ng-template>
@ -111,4 +119,47 @@
                         [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
        </div>
    </div>
-</div>
+</div>
+
+<p-dialog header="QR Code" [(visible)]="qrCodeDialog.visible" [modal]="true" [closable]="true"
+          (onHide)="qrDialogClose()"
+          [style]="{width: '320px'}">
+    <div class="flex flex-col gap-5">
+        <div class="flex flex-col gap-3">
+            <div class="flex gap-1 justify-center items-center">
+                <input pInputText type="number" class="w-20"
+                       [(ngModel)]="qrCodeDialog.width"/>px
+            </div>
+            <p-slider [(ngModel)]="qrCodeDialog.width" [min]="32" [max]="8192" (onChange)="qr()"></p-slider>
+        </div>
+        <div>
+            <p-fileUpload
+                #imageUpload
+                maxFileSize="1000000"
+                customUpload="true"
+                chooseLabel="{{ 'common.choose' | translate }}"
+                uploadLabel="{{ 'common.upload' | translate }}"
+                cancelLabel="{{ 'common.cancel' | translate }}"
+                name="logo"
+                class="icon-btn btn"
+                mode="basic"
+                chooseIcon="pi pi-image"
+                accept="image/*"
+                [maxFileSize]="1000000000"
+                [customUpload]="true"
+                (uploadHandler)="logoUpload($event)"
+                [auto]="true"
+            ></p-fileUpload>
+        </div>
+        <div>
+            <img id="qrCode" alt="QR Code"/>
+        </div>
+
+        <div class="flex justify-end">
+            <p-button class="btn"
+                      label="{{ 'common.download' | translate }}"
+                      icon="pi pi-save"
+                      (onClick)="downloadQr()"></p-button>
+        </div>
+    </div>
+</p-dialog>
--- a/web/src/app/modules/admin/short-urls/short-urls.page.ts
+++ b/web/src/app/modules/admin/short-urls/short-urls.page.ts
@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { PageBase } from 'src/app/core/base/page-base';
 import { ToastService } from 'src/app/service/toast.service';
 import { ConfirmationDialogService } from 'src/app/service/confirmation-dialog.service';
@ -9,6 +9,8 @@ import { ShortUrlsColumns } from 'src/app/modules/admin/short-urls/short-urls.co
 import { AuthService } from 'src/app/service/auth.service';
 import { Filter } from 'src/app/model/graphql/filter/filter.model';
 import { SettingsService } from 'src/app/service/settings.service';
+import QrCodeWithLogo from 'qrcode-with-logos';
+import { FileUpload, FileUploadHandlerEvent } from 'primeng/fileupload';

@Component({
  selector: 'app-short-urls',
@ -19,14 +21,31 @@ export class ShortUrlsPage
  extends PageBase<ShortUrl, ShortUrlsDataService, ShortUrlsColumns>
  implements OnInit
 {
+  @ViewChild('imageUpload') imageUpload!: FileUpload;
+
  shortUrlsWithoutGroup: ShortUrl[] = [];
  groupedShortUrls: { [key: string]: ShortUrl[] } = {};

+  qrCodeDialog: {
+    visible: boolean;
+    width: number;
+    shortUrl: ShortUrl | undefined;
+    qrCode: QrCodeWithLogo | undefined;
+    logo: string | undefined;
+  } = {
+    visible: false,
+    width: 512,
+    shortUrl: undefined,
+    qrCode: undefined,
+    logo: undefined,
+  };
+
  get groupsFromGroupedShortUrls() {
    return Object.keys(this.groupedShortUrls);
  }

  private hide_deleted_filter: Filter = { deleted: { equal: false } };
+
  get showDeleted() {
    return !this.filter.some(
      f => JSON.stringify(f) === JSON.stringify(this.hide_deleted_filter)
@ -138,6 +157,54 @@ export class ShortUrlsPage
    this.load();
  }

+  qrDialog(shortUrl: ShortUrl) {
+    this.qrCodeDialog.visible = true;
+    this.qrCodeDialog.shortUrl = shortUrl;
+    this.qrCodeDialog.width = 512;
+    setTimeout(() => this.qr(), 100);
+  }
+
+  qrDialogClose() {
+    this.qrCodeDialog.visible = false;
+    this.qrCodeDialog.shortUrl = undefined;
+    this.qrCodeDialog.qrCode = undefined;
+  }
+
+  qr() {
+    if (!this.qrCodeDialog.shortUrl) return;
+
+    const shortUrl = this.qrCodeDialog.shortUrl.shortUrl;
+    const targetUrl = `${this.settings.settings.api.redirector}/${shortUrl}`;
+
+    this.qrCodeDialog.qrCode = new QrCodeWithLogo({
+      content: targetUrl,
+      width: this.qrCodeDialog.width,
+      image: document.getElementById('qrCode') as HTMLImageElement,
+      logo: this.qrCodeDialog.logo
+        ? {
+            src: this.qrCodeDialog.logo,
+          }
+        : undefined,
+    });
+  }
+
+  async downloadQr() {
+    if (!this.qrCodeDialog.qrCode || !this.qrCodeDialog.shortUrl) return;
+    await this.qrCodeDialog.qrCode.downloadImage(
+      `${this.qrCodeDialog.shortUrl?.shortUrl}.png`
+    );
+    this.qrCodeDialog.visible = false;
+    this.qrCodeDialog.shortUrl = undefined;
+  }
+
+  logoUpload(event: FileUploadHandlerEvent) {
+    if (!event.files || event.files.length === 0) return;
+
+    this.qrCodeDialog.logo = URL.createObjectURL(event.files[0]);
+    this.qr();
+    this.imageUpload.clear();
+  }
+
  open(url: string) {
    window.open(`${this.settings.settings.api.redirector}/${url}`, '_blank');
  }
--- a/web/src/app/modules/shared/shared.module.ts
+++ b/web/src/app/modules/shared/shared.module.ts
@ -61,6 +61,7 @@ import { InMemoryCache } from '@apollo/client/core';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { tokenInterceptor } from 'src/app/core/token.interceptor';
 import { SettingsService } from 'src/app/service/settings.service';
+import { SliderModule } from 'primeng/slider';

 const sharedModules = [
  StepsModule,
@ -107,6 +108,7 @@ const sharedModules = [
  TriStateCheckboxModule,
  InputTextareaModule,
  TranslateModule,
+  SliderModule,
 ];

 const sharedComponents = [
--- a/web/src/assets/i18n/de.json
+++ b/web/src/assets/i18n/de.json
@ -17,12 +17,15 @@
    "api_error": "API Fehler",
    "api_key": "API Key",
    "by": "von",
+    "cancel": "Abbrechen",
+    "choose": "Auswählen",
    "close": "Schließen",
    "copied": "Kopiert!",
    "copied_to_clipboard": "In zwischenablage kopiert",
    "created": "Erstellt",
    "deleted": "Gelöscht",
    "description": "Beschreibung",
+    "download": "Herunterladen",
    "edited_at": "Bearbeitet am",
    "editor": "Bearbeiter",
    "error": "Fehler",
@ -36,6 +39,7 @@
    "role": "Rolle",
    "save": "Speichern",
    "updated": "Bearbeitet",
+    "upload": "Hochladen",
    "urls": "URLs",
    "warning": "Warnung"
  },
@ -102,6 +106,9 @@
    "users.delete": "Löschen",
    "users.update": "Bearbeiten"
  },
+  "qr": {
+    "width": "Breite"
+  },
  "role": {
    "count_header": "Rolle(n)"
  },
--- a/web/src/assets/i18n/en.json
+++ b/web/src/assets/i18n/en.json
@ -17,12 +17,15 @@
    "api_error": "API error",
    "api_key": "API Key",
    "by": "by",
+    "cancel": "Cancel",
+    "choose": "Choose",
    "close": "Close",
    "copied": "Copied!",
    "copied_to_clipboard": "Copied to clipboard",
    "created": "Created",
    "deleted": "Deleted",
    "description": "Description",
+    "download": "Download",
    "edited_at": "Edited at",
    "editor": "Editor",
    "error": "Fehler",
@ -36,6 +39,7 @@
    "role": "Role",
    "save": "Save",
    "updated": "Updated",
+    "upload": "Upload",
    "urls": "URLs",
    "warning": "Warning"
  },
@ -102,6 +106,9 @@
    "users.delete": "Delete",
    "users.update": "Update"
  },
+  "qr": {
+    "width": "Width"
+  },
  "role": {
    "count_header": "Role(s)"
  },
 @ -1 +1 @@
 .0.4
 .1.0