Port frontend to Bootstrap 5.3, split components
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
b8fd877654
commit
8c0807d486
GPG key ID:
D91C3E91E4CAD6F5
14 changed files with 813 additions and 830 deletions
|
|
@ -1,8 +1,7 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" data-bs-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
{{ range (list "webfonts/fa-solid-900.woff2" "webfonts/fa-brands-400.woff2" "lato-v20-latin-ext_latin-regular.woff2" "lato-v20-latin-ext_latin-700.woff2") }}
|
{{ range (list "webfonts/fa-solid-900.woff2" "webfonts/fa-brands-400.woff2" "lato-v20-latin-ext_latin-regular.woff2" "lato-v20-latin-ext_latin-700.woff2") }}
|
||||||
|
|
@ -35,7 +34,7 @@
|
||||||
window.getTheme = () => localStorage.getItem('set-color-scheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
|
window.getTheme = () => localStorage.getItem('set-color-scheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
|
||||||
|
|
||||||
window.refreshTheme = () => {
|
window.refreshTheme = () => {
|
||||||
document.querySelector('html').setAttribute('mode', window.getTheme())
|
document.querySelector('html').setAttribute('data-bs-theme', window.getTheme())
|
||||||
}
|
}
|
||||||
|
|
||||||
window.setTheme = (theme) => {
|
window.setTheme = (theme) => {
|
||||||
|
|
|
||||||
250
package-lock.json
generated
250
package-lock.json
generated
|
|
@ -6,12 +6,11 @@
|
||||||
"": {
|
"": {
|
||||||
"name": "ots",
|
"name": "ots",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.6.2",
|
"bootstrap": "^5.3.2",
|
||||||
"bootstrap-vue": "^2.23.1",
|
|
||||||
"bootswatch": "^4.6.2",
|
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
"vue": "^2.7.14",
|
"vue": "^2.7.14",
|
||||||
"vue-i18n": "^8.28.2"
|
"vue-i18n": "^8.28.2",
|
||||||
|
"vue-router": "^3.6.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/eslint-parser": "^7.22.5",
|
"@babel/eslint-parser": "^7.22.5",
|
||||||
|
|
@ -907,85 +906,14 @@
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@nuxt/opencollective": {
|
"node_modules/@popperjs/core": {
|
||||||
"version": "0.3.2",
|
"version": "2.11.8",
|
||||||
"resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
"integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
"dependencies": {
|
"peer": true,
|
||||||
"chalk": "^4.1.0",
|
|
||||||
"consola": "^2.15.0",
|
|
||||||
"node-fetch": "^2.6.1"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"opencollective": "bin/opencollective.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.0.0",
|
|
||||||
"npm": ">=5.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/ansi-styles": {
|
|
||||||
"version": "4.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
|
||||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
|
||||||
"dependencies": {
|
|
||||||
"color-convert": "^2.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8"
|
|
||||||
},
|
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"type": "opencollective",
|
||||||
}
|
"url": "https://opencollective.com/popperjs"
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dependencies": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/color-convert": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"color-name": "~1.1.4"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=7.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/color-name": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/has-flag": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@nuxt/opencollective/node_modules/supports-color": {
|
|
||||||
"version": "7.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
|
||||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
|
||||||
"dependencies": {
|
|
||||||
"has-flag": "^4.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/compiler-sfc": {
|
"node_modules/@vue/compiler-sfc": {
|
||||||
|
|
@ -1285,9 +1213,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/bootstrap": {
|
"node_modules/bootstrap": {
|
||||||
"version": "4.6.2",
|
"version": "5.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
|
||||||
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
|
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
"type": "github",
|
"type": "github",
|
||||||
|
|
@ -1299,28 +1227,9 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"jquery": "1.9.1 - 3",
|
"@popperjs/core": "^2.11.8"
|
||||||
"popper.js": "^1.16.1"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/bootstrap-vue": {
|
|
||||||
"version": "2.23.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
|
|
||||||
"integrity": "sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==",
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@nuxt/opencollective": "^0.3.2",
|
|
||||||
"bootstrap": "^4.6.1",
|
|
||||||
"popper.js": "^1.16.1",
|
|
||||||
"portal-vue": "^2.1.7",
|
|
||||||
"vue-functional-data-merge": "^3.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/bootswatch": {
|
|
||||||
"version": "4.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.6.2.tgz",
|
|
||||||
"integrity": "sha512-pHOS3d2yM/x9Y7/zwVzfGhGIIBdIa/rPwipghh756PaSNJS3ott/29d9uehakgze3pDvbH4FoQVjbho8wsLm6A=="
|
|
||||||
},
|
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||||
|
|
@ -1531,11 +1440,6 @@
|
||||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/consola": {
|
|
||||||
"version": "2.15.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
|
|
||||||
"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
|
|
||||||
},
|
|
||||||
"node_modules/consolidate": {
|
"node_modules/consolidate": {
|
||||||
"version": "0.15.1",
|
"version": "0.15.1",
|
||||||
"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
|
"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
|
||||||
|
|
@ -1753,29 +1657,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
|
||||||
"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
|
"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
|
||||||
},
|
},
|
||||||
"node_modules/encoding": {
|
|
||||||
"version": "0.1.13",
|
|
||||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
|
|
||||||
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"iconv-lite": "^0.6.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/encoding/node_modules/iconv-lite": {
|
|
||||||
"version": "0.6.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
|
||||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/errno": {
|
"node_modules/errno": {
|
||||||
"version": "0.1.8",
|
"version": "0.1.8",
|
||||||
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
|
||||||
|
|
@ -1951,9 +1832,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eslint-plugin-vue/node_modules/semver": {
|
"node_modules/eslint-plugin-vue/node_modules/semver": {
|
||||||
"version": "7.5.1",
|
"version": "7.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
|
||||||
"integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
|
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lru-cache": "^6.0.0"
|
"lru-cache": "^6.0.0"
|
||||||
|
|
@ -2789,12 +2670,6 @@
|
||||||
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
|
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/jquery": {
|
|
||||||
"version": "3.6.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
|
|
||||||
"integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/js-base64": {
|
"node_modules/js-base64": {
|
||||||
"version": "2.6.4",
|
"version": "2.6.4",
|
||||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
|
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
|
||||||
|
|
@ -2917,9 +2792,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/less/node_modules/semver": {
|
"node_modules/less/node_modules/semver": {
|
||||||
"version": "5.7.1",
|
"version": "5.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
|
||||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
@ -3125,25 +3000,6 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/node-fetch": {
|
|
||||||
"version": "2.6.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
|
|
||||||
"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"whatwg-url": "^5.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "4.x || >=6.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"encoding": "^0.1.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"encoding": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/node-gyp-build": {
|
"node_modules/node-gyp-build": {
|
||||||
"version": "4.6.0",
|
"version": "4.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
|
||||||
|
|
@ -3351,24 +3207,6 @@
|
||||||
"node": ">=10.13.0"
|
"node": ">=10.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/popper.js": {
|
|
||||||
"version": "1.16.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
|
||||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
|
||||||
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/popperjs"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/portal-vue": {
|
|
||||||
"version": "2.1.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
|
|
||||||
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
|
|
||||||
"peerDependencies": {
|
|
||||||
"vue": "^2.5.18"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/postcss": {
|
"node_modules/postcss": {
|
||||||
"version": "8.4.24",
|
"version": "8.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
|
||||||
|
|
@ -3925,6 +3763,7 @@
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/sass": {
|
"node_modules/sass": {
|
||||||
|
|
@ -3952,9 +3791,9 @@
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/semver": {
|
"node_modules/semver": {
|
||||||
"version": "6.3.0",
|
"version": "6.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"semver": "bin/semver.js"
|
"semver": "bin/semver.js"
|
||||||
|
|
@ -4176,11 +4015,6 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/tr46": {
|
|
||||||
"version": "0.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
|
|
||||||
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
|
|
||||||
},
|
|
||||||
"node_modules/tslib": {
|
"node_modules/tslib": {
|
||||||
"version": "1.14.1",
|
"version": "1.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||||
|
|
@ -4316,9 +4150,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vue-eslint-parser/node_modules/semver": {
|
"node_modules/vue-eslint-parser/node_modules/semver": {
|
||||||
"version": "7.5.1",
|
"version": "7.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
|
||||||
"integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
|
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lru-cache": "^6.0.0"
|
"lru-cache": "^6.0.0"
|
||||||
|
|
@ -4330,16 +4164,16 @@
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vue-functional-data-merge": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
|
|
||||||
},
|
|
||||||
"node_modules/vue-i18n": {
|
"node_modules/vue-i18n": {
|
||||||
"version": "8.28.2",
|
"version": "8.28.2",
|
||||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
|
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
|
||||||
"integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
|
"integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-router": {
|
||||||
|
"version": "3.6.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
|
||||||
|
"integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
|
||||||
|
},
|
||||||
"node_modules/vue-template-compiler": {
|
"node_modules/vue-template-compiler": {
|
||||||
"version": "2.7.14",
|
"version": "2.7.14",
|
||||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
|
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
|
||||||
|
|
@ -4356,20 +4190,6 @@
|
||||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/webidl-conversions": {
|
|
||||||
"version": "3.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
|
||||||
"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
|
|
||||||
},
|
|
||||||
"node_modules/whatwg-url": {
|
|
||||||
"version": "5.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
|
|
||||||
"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
|
|
||||||
"dependencies": {
|
|
||||||
"tr46": "~0.0.3",
|
|
||||||
"webidl-conversions": "^3.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/which": {
|
"node_modules/which": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||||
|
|
@ -4407,9 +4227,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/word-wrap": {
|
"node_modules/word-wrap": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
||||||
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
|
"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,19 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/eslint-parser": "^7.22.5",
|
"@babel/eslint-parser": "^7.22.5",
|
||||||
"esbuild": "^0.17.17",
|
"esbuild": "^0.17.17",
|
||||||
|
"esbuild-sass-plugin": "^2.9.0",
|
||||||
"esbuild-vue": "^1.2.2",
|
"esbuild-vue": "^1.2.2",
|
||||||
"eslint": "^8.42.0",
|
"eslint": "^8.42.0",
|
||||||
"esbuild-sass-plugin": "^2.9.0",
|
|
||||||
"eslint-plugin-vue": "^9.14.1",
|
"eslint-plugin-vue": "^9.14.1",
|
||||||
"vue-template-compiler": "^2.7.14"
|
"vue-template-compiler": "^2.7.14"
|
||||||
},
|
},
|
||||||
"name": "ots",
|
"name": "ots",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.6.2",
|
"bootstrap": "^5.3.2",
|
||||||
"bootstrap-vue": "^2.23.1",
|
|
||||||
"bootswatch": "^4.6.2",
|
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
"vue": "^2.7.14",
|
"vue": "^2.7.14",
|
||||||
"vue-i18n": "^8.28.2"
|
"vue-i18n": "^8.28.2",
|
||||||
|
"vue-router": "^3.6.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
593
src/app.vue
593
src/app.vue
|
|
@ -1,487 +1,60 @@
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<b-navbar
|
<app-navbar />
|
||||||
toggleable="lg"
|
|
||||||
type="dark"
|
<div class="container mt-4">
|
||||||
variant="primary"
|
<div
|
||||||
>
|
v-if="error"
|
||||||
<b-navbar-brand
|
class="row justify-content-center"
|
||||||
href="#"
|
|
||||||
@click="newSecret"
|
|
||||||
>
|
>
|
||||||
<i
|
<div class="col-8">
|
||||||
v-if="!customize.appIcon"
|
<div
|
||||||
class="fas fa-user-secret mr-1"
|
class="alert alert-danger"
|
||||||
/>
|
role="alert"
|
||||||
<img
|
|
||||||
v-else
|
|
||||||
class="mr-1"
|
|
||||||
:src="customize.appIcon"
|
|
||||||
>
|
|
||||||
<span v-if="!customize.disableAppTitle">{{ customize.appTitle }}</span>
|
|
||||||
</b-navbar-brand>
|
|
||||||
|
|
||||||
<b-navbar-toggle target="nav-collapse" />
|
|
||||||
|
|
||||||
<b-collapse
|
|
||||||
id="nav-collapse"
|
|
||||||
is-nav
|
|
||||||
>
|
|
||||||
<b-navbar-nav class="ml-auto">
|
|
||||||
<b-nav-item @click="explanationShown = !explanationShown">
|
|
||||||
<i class="fas fa-question" /> {{ $t('btn-show-explanation') }}
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item @click="newSecret">
|
|
||||||
<i class="fas fa-plus" /> {{ $t('btn-new-secret') }}
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-form
|
|
||||||
v-if="!customize.disableThemeSwitcher"
|
|
||||||
class="ml-2"
|
|
||||||
>
|
|
||||||
<b-form-checkbox
|
|
||||||
v-model="darkTheme"
|
|
||||||
switch
|
|
||||||
>
|
|
||||||
<i class="fas fa-moon" />​
|
|
||||||
</b-form-checkbox>
|
|
||||||
</b-nav-form>
|
|
||||||
</b-navbar-nav>
|
|
||||||
</b-collapse>
|
|
||||||
</b-navbar>
|
|
||||||
|
|
||||||
<b-container class="mt-4">
|
|
||||||
<b-row class="justify-content-center">
|
|
||||||
<b-col md="8">
|
|
||||||
<b-alert
|
|
||||||
v-model="showError"
|
|
||||||
variant="danger"
|
|
||||||
dismissible
|
|
||||||
v-html="error"
|
v-html="error"
|
||||||
/>
|
/>
|
||||||
</b-col>
|
</div>
|
||||||
</b-row>
|
</div>
|
||||||
|
|
||||||
<b-row>
|
<div class="row">
|
||||||
<b-col>
|
<div class="col">
|
||||||
<!-- Explanation -->
|
<router-view @error="displayError" />
|
||||||
<b-card
|
</div>
|
||||||
v-if="explanationShown"
|
</div>
|
||||||
class="mb-3"
|
|
||||||
border-variant="primary"
|
|
||||||
header-bg-variant="primary"
|
|
||||||
header-text-variant="white"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
slot="header"
|
|
||||||
v-html="$t('title-explanation')"
|
|
||||||
/>
|
|
||||||
<ul>
|
|
||||||
<li
|
|
||||||
v-for="(explanation, idx) in $t('items-explanation')"
|
|
||||||
:key="`idx${idx}`"
|
|
||||||
>
|
|
||||||
{{ explanation }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</b-card>
|
|
||||||
|
|
||||||
<!-- Creation dialog -->
|
<div class="row mt-4">
|
||||||
<b-card
|
<div class="col form-text text-center">
|
||||||
v-if="mode == 'create' && !secretId && canWrite"
|
{{ $t('text-powered-by') }}
|
||||||
border-variant="primary"
|
<a href="https://github.com/Luzifer/ots"><i class="fab fa-github" /> OTS</a>
|
||||||
header-bg-variant="primary"
|
{{ $root.version }}
|
||||||
header-text-variant="white"
|
</div>
|
||||||
>
|
</div>
|
||||||
<span
|
</div>
|
||||||
slot="header"
|
|
||||||
v-html="$t('title-new-secret')"
|
|
||||||
/>
|
|
||||||
<b-form-group :label="$t('label-secret-data')">
|
|
||||||
<b-form-textarea
|
|
||||||
id="secret"
|
|
||||||
v-model="secret"
|
|
||||||
max-rows="25"
|
|
||||||
rows="5"
|
|
||||||
/>
|
|
||||||
</b-form-group>
|
|
||||||
<b-row>
|
|
||||||
<b-col
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
order="2"
|
|
||||||
order-md="1"
|
|
||||||
>
|
|
||||||
<b-button
|
|
||||||
:disabled="secret.trim().length < 1"
|
|
||||||
variant="success"
|
|
||||||
@click="createSecret"
|
|
||||||
>
|
|
||||||
{{ $t('btn-create-secret') }}
|
|
||||||
</b-button>
|
|
||||||
</b-col>
|
|
||||||
<b-col
|
|
||||||
v-if="!customize.disableExpiryOverride"
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
order="1"
|
|
||||||
order-md="2"
|
|
||||||
>
|
|
||||||
<b-form-group
|
|
||||||
:label="$t('label-expiry')"
|
|
||||||
label-for="expiry"
|
|
||||||
label-align-md="right"
|
|
||||||
label-cols-md
|
|
||||||
>
|
|
||||||
<b-form-select
|
|
||||||
id="expiry"
|
|
||||||
v-model="selectedExpiry"
|
|
||||||
:options="expiryChoices()"
|
|
||||||
/>
|
|
||||||
</b-form-group>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-card>
|
|
||||||
|
|
||||||
<!-- Creation disabled -->
|
|
||||||
<b-card
|
|
||||||
v-if="mode == 'create' && !secretId && canWrite === false"
|
|
||||||
border-variant="info"
|
|
||||||
header-bg-variant="info"
|
|
||||||
header-text-variant="white"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
slot="header"
|
|
||||||
v-html="$t('title-secret-create-disabled')"
|
|
||||||
/>
|
|
||||||
<p v-html="$t('text-secret-create-disabled')" />
|
|
||||||
</b-card>
|
|
||||||
|
|
||||||
<!-- Secret created, show secret URL -->
|
|
||||||
<b-card
|
|
||||||
v-if="mode == 'create' && secretId"
|
|
||||||
border-variant="success"
|
|
||||||
header-bg-variant="success"
|
|
||||||
header-text-variant="white"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
slot="header"
|
|
||||||
v-html="$t('title-secret-created')"
|
|
||||||
/>
|
|
||||||
<p v-html="$t('text-pre-url')" />
|
|
||||||
<b-form-group>
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-input
|
|
||||||
ref="secretUrl"
|
|
||||||
:value="secretUrl"
|
|
||||||
readonly
|
|
||||||
@focus="$refs.secretUrl.select()"
|
|
||||||
/>
|
|
||||||
<b-input-group-append>
|
|
||||||
<b-button
|
|
||||||
v-if="hasClipboard"
|
|
||||||
:disabled="!secretUrl"
|
|
||||||
:variant="copyToClipboardSuccess ? 'success' : 'primary'"
|
|
||||||
@click="copySecretUrl"
|
|
||||||
>
|
|
||||||
<i class="fas fa-clipboard" />
|
|
||||||
</b-button>
|
|
||||||
<b-button
|
|
||||||
v-if="!customize.disableQRSupport"
|
|
||||||
id="secret-url-qrcode"
|
|
||||||
:disabled="!secretQRDataURL"
|
|
||||||
variant="secondary"
|
|
||||||
>
|
|
||||||
<i class="fas fa-qrcode" />
|
|
||||||
</b-button>
|
|
||||||
</b-input-group-append>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<p v-html="$t('text-burn-hint')" />
|
|
||||||
<p v-if="secretExpiry">
|
|
||||||
{{ $t('text-burn-time') }}
|
|
||||||
<strong>{{ secretExpiry.toLocaleString() }}</strong>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<b-popover
|
|
||||||
v-id="!customize.disableQRSupport"
|
|
||||||
target="secret-url-qrcode"
|
|
||||||
triggers="focus"
|
|
||||||
placement="leftbottom"
|
|
||||||
>
|
|
||||||
<b-img
|
|
||||||
height="200"
|
|
||||||
:src="secretQRDataURL"
|
|
||||||
width="200"
|
|
||||||
/>
|
|
||||||
</b-popover>
|
|
||||||
</b-card>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Display secret -->
|
|
||||||
<b-card
|
|
||||||
v-if="mode == 'view'"
|
|
||||||
border-variant="primary"
|
|
||||||
header-bg-variant="primary"
|
|
||||||
header-text-variant="white"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
slot="header"
|
|
||||||
v-html="$t('title-reading-secret')"
|
|
||||||
/>
|
|
||||||
<template v-if="!secret">
|
|
||||||
<p v-html="$t('text-pre-reveal-hint')" />
|
|
||||||
<b-button
|
|
||||||
variant="success"
|
|
||||||
@click="requestSecret"
|
|
||||||
>
|
|
||||||
{{ $t('btn-reveal-secret') }}
|
|
||||||
</b-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<b-form-group>
|
|
||||||
<b-input-group>
|
|
||||||
<b-form-textarea
|
|
||||||
max-rows="25"
|
|
||||||
readonly
|
|
||||||
rows="4"
|
|
||||||
:value="secret"
|
|
||||||
/>
|
|
||||||
<b-input-group-text class="d-flex align-items-start p-0">
|
|
||||||
<b-button-group vertical>
|
|
||||||
<b-button
|
|
||||||
v-if="hasClipboard"
|
|
||||||
:disabled="!secretUrl"
|
|
||||||
:variant="copyToClipboardSuccess ? 'success' : 'primary'"
|
|
||||||
title="Copy Secret to Clipboard"
|
|
||||||
@click="copySecret"
|
|
||||||
>
|
|
||||||
<i class="fas fa-fw fa-clipboard" />
|
|
||||||
</b-button>
|
|
||||||
<b-button
|
|
||||||
:href="secretContentBlobURL"
|
|
||||||
download
|
|
||||||
title="Download Secret as Text File"
|
|
||||||
>
|
|
||||||
<i class="fas fa-fw fa-download" />
|
|
||||||
</b-button>
|
|
||||||
<b-button
|
|
||||||
v-if="!customize.disableQRSupport && secretContentQRDataURL"
|
|
||||||
id="secret-data-qrcode"
|
|
||||||
variant="secondary"
|
|
||||||
title="Display Content as QR-Code"
|
|
||||||
>
|
|
||||||
<i class="fas fa-fw fa-qrcode" />
|
|
||||||
</b-button>
|
|
||||||
</b-button-group>
|
|
||||||
</b-input-group-text>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
<p v-html="$t('text-hint-burned')" />
|
|
||||||
|
|
||||||
<b-popover
|
|
||||||
v-id="!customize.disableQRSupport"
|
|
||||||
target="secret-data-qrcode"
|
|
||||||
triggers="focus"
|
|
||||||
placement="leftbottom"
|
|
||||||
>
|
|
||||||
<b-img
|
|
||||||
height="200"
|
|
||||||
:src="secretContentQRDataURL"
|
|
||||||
width="200"
|
|
||||||
/>
|
|
||||||
</b-popover>
|
|
||||||
</template>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
|
|
||||||
<b-row
|
|
||||||
v-if="!customize.disablePoweredBy"
|
|
||||||
class="mt-5"
|
|
||||||
>
|
|
||||||
<b-col class="footer">
|
|
||||||
{{ $t('text-powered-by') }} <a href="https://github.com/Luzifer/ots"><i class="fab fa-github" /> OTS</a> {{ $root.version }}
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* global maxSecretExpire */
|
import AppNavbar from './components/navbar.vue'
|
||||||
|
|
||||||
import crypto from './crypto.js'
|
|
||||||
import qrcode from 'qrcode'
|
|
||||||
|
|
||||||
const defaultExpiryChoices = [
|
|
||||||
90 * 86400, // 90 days
|
|
||||||
30 * 86400, // 30 days
|
|
||||||
7 * 86400, // 7 days
|
|
||||||
3 * 86400, // 3 days
|
|
||||||
24 * 3600, // 1 day
|
|
||||||
12 * 3600, // 12 hours
|
|
||||||
4 * 3600, // 4 hours
|
|
||||||
60 * 60, // 1 hour
|
|
||||||
30 * 60, // 30 minutes
|
|
||||||
5 * 60, // 5 minutes
|
|
||||||
]
|
|
||||||
|
|
||||||
const passwordCharset = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
|
||||||
const passwordLength = 20
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: {
|
components: {
|
||||||
hasClipboard() {
|
AppNavbar,
|
||||||
return Boolean(navigator.clipboard && navigator.clipboard.writeText)
|
},
|
||||||
},
|
|
||||||
|
|
||||||
secretUrl() {
|
created() {
|
||||||
return [
|
this.$root.navigate('/')
|
||||||
window.location.href,
|
|
||||||
encodeURIComponent([
|
|
||||||
this.secretId,
|
|
||||||
this.securePassword,
|
|
||||||
].join('|')),
|
|
||||||
].join('#')
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
canWrite: null,
|
|
||||||
copyToClipboardSuccess: false,
|
|
||||||
customize: {},
|
|
||||||
darkTheme: false,
|
|
||||||
error: '',
|
error: '',
|
||||||
explanationShown: false,
|
|
||||||
mode: 'create',
|
|
||||||
secret: '',
|
|
||||||
secretContentBlobURL: '',
|
|
||||||
secretContentQRDataURL: '',
|
|
||||||
secretExpiry: null,
|
|
||||||
secretId: '',
|
|
||||||
secretQRDataURL: '',
|
|
||||||
securePassword: '',
|
|
||||||
selectedExpiry: null,
|
|
||||||
showError: false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
checkWriteAccess() {
|
displayError(error) {
|
||||||
fetch('api/isWritable', {
|
this.error = error
|
||||||
credentials: 'same-origin',
|
|
||||||
method: 'GET',
|
|
||||||
redirect: 'error',
|
|
||||||
})
|
|
||||||
.then(resp => {
|
|
||||||
if (resp.status !== 204) {
|
|
||||||
throw new Error(`unexpected status: ${resp.status}`)
|
|
||||||
}
|
|
||||||
this.canWrite = true
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.canWrite = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
copySecret() {
|
|
||||||
navigator.clipboard.writeText(this.secret)
|
|
||||||
.then(() => {
|
|
||||||
this.copyToClipboardSuccess = true
|
|
||||||
window.setTimeout(() => {
|
|
||||||
this.copyToClipboardSuccess = false
|
|
||||||
}, 500)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
copySecretUrl() {
|
|
||||||
navigator.clipboard.writeText(this.secretUrl)
|
|
||||||
.then(() => {
|
|
||||||
this.copyToClipboardSuccess = true
|
|
||||||
window.setTimeout(() => {
|
|
||||||
this.copyToClipboardSuccess = false
|
|
||||||
}, 500)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// createSecret executes the secret creation after encrypting the secret
|
|
||||||
createSecret() {
|
|
||||||
if (this.secret.trim().length < 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
this.securePassword = [...window.crypto.getRandomValues(new Uint8Array(passwordLength))]
|
|
||||||
.map(n => passwordCharset[n % passwordCharset.length])
|
|
||||||
.join('')
|
|
||||||
crypto.enc(this.secret, this.securePassword)
|
|
||||||
.then(secret => {
|
|
||||||
let reqURL = 'api/create'
|
|
||||||
if (this.selectedExpiry !== null) {
|
|
||||||
reqURL = `api/create?expire=${this.selectedExpiry}`
|
|
||||||
}
|
|
||||||
|
|
||||||
return fetch(reqURL, {
|
|
||||||
body: JSON.stringify({ secret }),
|
|
||||||
headers: {
|
|
||||||
'content-type': 'application/json',
|
|
||||||
},
|
|
||||||
method: 'POST',
|
|
||||||
})
|
|
||||||
.then(resp => {
|
|
||||||
if (resp.status !== 201) {
|
|
||||||
// Server says "no"
|
|
||||||
this.error = this.$t('alert-something-went-wrong')
|
|
||||||
this.showError = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
resp.json()
|
|
||||||
.then(data => {
|
|
||||||
this.secretId = data.secret_id
|
|
||||||
this.secret = ''
|
|
||||||
|
|
||||||
if (data.expires_at) {
|
|
||||||
this.secretExpiry = new Date(data.expires_at)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Give the interface a moment to transistion and focus
|
|
||||||
window.setTimeout(() => this.$refs.secretUrl.focus(), 100)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
// Network error
|
|
||||||
this.error = this.$t('alert-something-went-wrong')
|
|
||||||
this.showError = true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
expiryChoices() {
|
|
||||||
const choices = [{ text: this.$t('expire-default'), value: null }]
|
|
||||||
for (const choice of this.customize.expiryChoices || defaultExpiryChoices) {
|
|
||||||
if (maxSecretExpire > 0 && choice > maxSecretExpire) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const option = { value: choice }
|
|
||||||
if (choice >= 86400) {
|
|
||||||
option.text = this.$tc('expire-n-days', Math.round(choice / 86400))
|
|
||||||
} else if (choice >= 3600) {
|
|
||||||
option.text = this.$tc('expire-n-hours', Math.round(choice / 3600))
|
|
||||||
} else if (choice >= 60) {
|
|
||||||
option.text = this.$tc('expire-n-minutes', Math.round(choice / 60))
|
|
||||||
} else {
|
|
||||||
option.text = this.$tc('expire-n-seconds', choice)
|
|
||||||
}
|
|
||||||
|
|
||||||
choices.push(option)
|
|
||||||
}
|
|
||||||
|
|
||||||
return choices
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// hashLoad reacts on a changed window hash an starts the diplaying of the secret
|
// hashLoad reacts on a changed window hash an starts the diplaying of the secret
|
||||||
|
|
@ -492,107 +65,29 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
const parts = hash.substring(1).split('|')
|
const parts = hash.substring(1).split('|')
|
||||||
|
const secretId = parts[0]
|
||||||
|
let securePassword = null
|
||||||
|
|
||||||
if (parts.length === 2) {
|
if (parts.length === 2) {
|
||||||
this.securePassword = parts[1]
|
securePassword = parts[1]
|
||||||
}
|
}
|
||||||
this.secretId = parts[0]
|
|
||||||
this.mode = 'view'
|
|
||||||
},
|
|
||||||
|
|
||||||
// newSecret removes the window hash and therefore returns to "new secret" mode
|
this.$root.navigate({
|
||||||
newSecret() {
|
path: '/secret',
|
||||||
location.href = location.href.split('#')[0]
|
query: {
|
||||||
},
|
secretId,
|
||||||
|
securePassword,
|
||||||
// requestSecret requests the encrypted secret from the backend
|
},
|
||||||
requestSecret() {
|
})
|
||||||
fetch(`api/get/${this.secretId}`)
|
|
||||||
.then(resp => {
|
|
||||||
if (resp.status === 404) {
|
|
||||||
// Secret has already been consumed
|
|
||||||
this.error = this.$t('alert-secret-not-found')
|
|
||||||
this.showError = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resp.status !== 200) {
|
|
||||||
// Some other non-200: Something(tm) was wrong
|
|
||||||
this.error = this.$t('alert-something-went-wrong')
|
|
||||||
this.showError = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
resp.json()
|
|
||||||
.then(data => {
|
|
||||||
const secret = data.secret
|
|
||||||
if (!this.securePassword) {
|
|
||||||
this.secret = secret
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
crypto.dec(secret, this.securePassword)
|
|
||||||
.then(secret => {
|
|
||||||
this.secret = secret
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.error = this.$t('alert-something-went-wrong')
|
|
||||||
this.showError = true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
// Network error
|
|
||||||
this.error = this.$t('alert-something-went-wrong')
|
|
||||||
this.showError = true
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// Trigger initialization functions
|
// Trigger initialization functions
|
||||||
mounted() {
|
mounted() {
|
||||||
this.checkWriteAccess()
|
|
||||||
this.customize = window.OTSCustomize
|
|
||||||
this.darkTheme = window.getTheme() === 'dark'
|
|
||||||
window.onhashchange = this.hashLoad
|
window.onhashchange = this.hashLoad
|
||||||
this.hashLoad()
|
this.hashLoad()
|
||||||
},
|
},
|
||||||
|
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
|
||||||
watch: {
|
|
||||||
darkTheme(to) {
|
|
||||||
window.setTheme(to ? 'dark' : 'light')
|
|
||||||
},
|
|
||||||
|
|
||||||
secret(to) {
|
|
||||||
if (this.secretContentBlobURL) {
|
|
||||||
window.URL.revokeObjectURL(this.secretContentBlobURL)
|
|
||||||
}
|
|
||||||
this.secretContentBlobURL = window.URL.createObjectURL(new Blob([to], { type: 'text/plain' }))
|
|
||||||
|
|
||||||
if (this.customize.disableQRSupport || !to) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
qrcode.toDataURL(to, { width: 200 })
|
|
||||||
.then(url => {
|
|
||||||
this.secretContentQRDataURL = url
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.secretContentQRDataURL = null
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
secretUrl(to) {
|
|
||||||
if (this.customize.disableQRSupport) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
qrcode.toDataURL(to, { width: 200 })
|
|
||||||
.then(url => {
|
|
||||||
this.secretQRDataURL = url
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
47
src/components/clipboard-button.vue
Normal file
47
src/components/clipboard-button.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
v-if="hasClipboard"
|
||||||
|
:class="{'btn': true, 'btn-primary': !copyToClipboardSuccess, 'btn-success': copyToClipboardSuccess}"
|
||||||
|
:disabled="!content"
|
||||||
|
@click="copy"
|
||||||
|
>
|
||||||
|
<i class="fas fa-clipboard" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
hasClipboard() {
|
||||||
|
return Boolean(navigator.clipboard && navigator.clipboard.writeText)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
copyToClipboardSuccess: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
copy() {
|
||||||
|
navigator.clipboard.writeText(this.content)
|
||||||
|
.then(() => {
|
||||||
|
this.copyToClipboardSuccess = true
|
||||||
|
window.setTimeout(() => {
|
||||||
|
this.copyToClipboardSuccess = false
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'AppClipboardButton',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
content: {
|
||||||
|
default: null,
|
||||||
|
required: false,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
212
src/components/create.vue
Normal file
212
src/components/create.vue
Normal file
|
|
@ -0,0 +1,212 @@
|
||||||
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
|
<template>
|
||||||
|
<!-- Creation disabled -->
|
||||||
|
<div
|
||||||
|
v-if="!canWrite"
|
||||||
|
class="card border-info-subtle mb-3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="card-header bg-info-subtle"
|
||||||
|
v-html="$t('title-secret-create-disabled')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="card-body"
|
||||||
|
v-html="$t('text-secret-create-disabled')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Creation possible -->
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="card border-primary-subtle mb-3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="card-header bg-primary-subtle"
|
||||||
|
v-html="$t('title-new-secret')"
|
||||||
|
/>
|
||||||
|
<div class="card-body">
|
||||||
|
<form
|
||||||
|
class="row"
|
||||||
|
@submit.prevent="createSecret"
|
||||||
|
>
|
||||||
|
<div class="col-12 mb-3 order-0">
|
||||||
|
<label for="createSecretData">{{ $t('label-secret-data') }}</label>
|
||||||
|
<textarea
|
||||||
|
id="createSecretData"
|
||||||
|
v-model="secret"
|
||||||
|
class="form-control"
|
||||||
|
rows="5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-12 order-2 order-md-1">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-success"
|
||||||
|
:disabled="secret.trim().length < 1"
|
||||||
|
>
|
||||||
|
{{ $t('btn-create-secret') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="!$root.customize.disableExpiryOverride"
|
||||||
|
class="col-md-6 col-12 order-1 order-md-2"
|
||||||
|
>
|
||||||
|
<div class="row mb-3 justify-content-end">
|
||||||
|
<label
|
||||||
|
class="col-md-6 col-form-label text-md-end"
|
||||||
|
for="createSecretExpiry"
|
||||||
|
>{{ $t('label-expiry') }}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<select
|
||||||
|
v-model="selectedExpiry"
|
||||||
|
class="form-select"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="opt in expiryChoices"
|
||||||
|
:key="opt.value"
|
||||||
|
:value="opt.value"
|
||||||
|
>
|
||||||
|
{{ opt.text }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/* global maxSecretExpire */
|
||||||
|
|
||||||
|
import appCrypto from '../crypto.js'
|
||||||
|
|
||||||
|
const defaultExpiryChoices = [
|
||||||
|
90 * 86400, // 90 days
|
||||||
|
30 * 86400, // 30 days
|
||||||
|
7 * 86400, // 7 days
|
||||||
|
3 * 86400, // 3 days
|
||||||
|
24 * 3600, // 1 day
|
||||||
|
12 * 3600, // 12 hours
|
||||||
|
4 * 3600, // 4 hours
|
||||||
|
60 * 60, // 1 hour
|
||||||
|
30 * 60, // 30 minutes
|
||||||
|
5 * 60, // 5 minutes
|
||||||
|
]
|
||||||
|
|
||||||
|
const passwordCharset = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||||
|
const passwordLength = 20
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
expiryChoices() {
|
||||||
|
const choices = [{ text: this.$t('expire-default'), value: null }]
|
||||||
|
for (const choice of this.$root.customize.expiryChoices || defaultExpiryChoices) {
|
||||||
|
if (maxSecretExpire > 0 && choice > maxSecretExpire) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
const option = { value: choice }
|
||||||
|
if (choice >= 86400) {
|
||||||
|
option.text = this.$tc('expire-n-days', Math.round(choice / 86400))
|
||||||
|
} else if (choice >= 3600) {
|
||||||
|
option.text = this.$tc('expire-n-hours', Math.round(choice / 3600))
|
||||||
|
} else if (choice >= 60) {
|
||||||
|
option.text = this.$tc('expire-n-minutes', Math.round(choice / 60))
|
||||||
|
} else {
|
||||||
|
option.text = this.$tc('expire-n-seconds', choice)
|
||||||
|
}
|
||||||
|
|
||||||
|
choices.push(option)
|
||||||
|
}
|
||||||
|
|
||||||
|
return choices
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.checkWriteAccess()
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
canWrite: null,
|
||||||
|
secret: '',
|
||||||
|
securePassword: null,
|
||||||
|
selectedExpiry: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
checkWriteAccess() {
|
||||||
|
fetch('api/isWritable', {
|
||||||
|
credentials: 'same-origin',
|
||||||
|
method: 'GET',
|
||||||
|
redirect: 'error',
|
||||||
|
})
|
||||||
|
.then(resp => {
|
||||||
|
if (resp.status !== 204) {
|
||||||
|
throw new Error(`unexpected status: ${resp.status}`)
|
||||||
|
}
|
||||||
|
this.canWrite = true
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.canWrite = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// createSecret executes the secret creation after encrypting the secret
|
||||||
|
createSecret() {
|
||||||
|
if (this.secret.trim().length < 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.securePassword = [...window.crypto.getRandomValues(new Uint8Array(passwordLength))]
|
||||||
|
.map(n => passwordCharset[n % passwordCharset.length])
|
||||||
|
.join('')
|
||||||
|
appCrypto.enc(this.secret, this.securePassword)
|
||||||
|
.then(secret => {
|
||||||
|
let reqURL = 'api/create'
|
||||||
|
if (this.selectedExpiry !== null) {
|
||||||
|
reqURL = `api/create?expire=${this.selectedExpiry}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(reqURL, {
|
||||||
|
body: JSON.stringify({ secret }),
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/json',
|
||||||
|
},
|
||||||
|
method: 'POST',
|
||||||
|
})
|
||||||
|
.then(resp => {
|
||||||
|
if (resp.status !== 201) {
|
||||||
|
// Server says "no"
|
||||||
|
this.$emit('error', this.$t('alert-something-went-wrong'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
resp.json()
|
||||||
|
.then(data => {
|
||||||
|
this.$root.navigate({
|
||||||
|
path: '/display-secret-url',
|
||||||
|
query: {
|
||||||
|
expiresAt: data.expires_at,
|
||||||
|
secretId: data.secret_id,
|
||||||
|
securePassword: this.securePassword,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// Network error
|
||||||
|
this.$emit('error', this.$t('alert-something-went-wrong'))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'AppCreate',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
78
src/components/display-url.vue
Normal file
78
src/components/display-url.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
|
<template>
|
||||||
|
<div class="card border-success-subtle mb-3">
|
||||||
|
<div
|
||||||
|
class="card-header bg-success-subtle"
|
||||||
|
v-html="$t('title-secret-created')"
|
||||||
|
/>
|
||||||
|
<div class="card-body">
|
||||||
|
<p v-html="$t('text-pre-url')" />
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<input
|
||||||
|
ref="secretUrl"
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
readonly
|
||||||
|
:value="secretUrl"
|
||||||
|
@focus="$refs.secretUrl.select()"
|
||||||
|
>
|
||||||
|
<app-clipboard-button :content="secretUrl" />
|
||||||
|
<app-qr-button :qr-content="secretUrl" />
|
||||||
|
</div>
|
||||||
|
<p v-html="$t('text-burn-hint')" />
|
||||||
|
<p v-if="expiresAt">
|
||||||
|
{{ $t('text-burn-time') }}
|
||||||
|
<strong>{{ expiresAt.toLocaleString() }}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import appClipboardButton from './clipboard-button.vue'
|
||||||
|
import appQrButton from './qr-button.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { appClipboardButton, appQrButton },
|
||||||
|
computed: {
|
||||||
|
secretUrl() {
|
||||||
|
return [
|
||||||
|
window.location.href.split('#')[0],
|
||||||
|
encodeURIComponent([
|
||||||
|
this.secretId,
|
||||||
|
this.securePassword,
|
||||||
|
].join('|')),
|
||||||
|
].join('#')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
popover: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// Give the interface a moment to transistion and focus
|
||||||
|
window.setTimeout(() => this.$refs.secretUrl.focus(), 100)
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'AppDisplayURL',
|
||||||
|
props: {
|
||||||
|
expiresAt: {
|
||||||
|
default: null,
|
||||||
|
required: false,
|
||||||
|
type: Date,
|
||||||
|
},
|
||||||
|
|
||||||
|
secretId: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
|
||||||
|
securePassword: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
22
src/components/explanation.vue
Normal file
22
src/components/explanation.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
|
<template>
|
||||||
|
<div class="card border-primary-subtle mb-3">
|
||||||
|
<div
|
||||||
|
class="card-header bg-primary-subtle"
|
||||||
|
v-html="$t('title-explanation')"
|
||||||
|
/>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
v-for="(explanation, idx) in $t('items-explanation')"
|
||||||
|
:key="`idx${idx}`"
|
||||||
|
>
|
||||||
|
{{ explanation }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default { name: 'AppExplanation' }
|
||||||
|
</script>
|
||||||
82
src/components/navbar.vue
Normal file
82
src/components/navbar.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<nav class="navbar navbar-expand-lg bg-primary-subtle">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a
|
||||||
|
class="navbar-brand"
|
||||||
|
href="#"
|
||||||
|
@click.prevent="$root.navigate('/')"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
v-if="!$root.customize.appIcon"
|
||||||
|
class="fas fa-user-secret mr-1"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
class="mr-1"
|
||||||
|
:src="$root.customize.appIcon"
|
||||||
|
>
|
||||||
|
<span v-if="!$root.customize.disableAppTitle">{{ $root.customize.appTitle }}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarSupportedContent"
|
||||||
|
aria-controls="navbarSupportedContent"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="navbar-toggler-icon" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="navbarSupportedContent"
|
||||||
|
class="collapse navbar-collapse"
|
||||||
|
>
|
||||||
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
class="nav-link"
|
||||||
|
href="#"
|
||||||
|
@click.prevent="$root.navigate('/explanation')"
|
||||||
|
>
|
||||||
|
<i class="fas fa-circle-info" /> {{ $t('btn-show-explanation') }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
class="nav-link"
|
||||||
|
href="#"
|
||||||
|
@click.prevent="$root.navigate('/')"
|
||||||
|
>
|
||||||
|
<i class="fas fa-plus" /> {{ $t('btn-new-secret') }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form
|
||||||
|
v-if="!$root.customize.disableThemeSwitcher"
|
||||||
|
class="d-flex align-items-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-sun me-2" />
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
id="themeswitch"
|
||||||
|
v-model="$root.darkTheme"
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<i class="fas fa-moon" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppNavbar',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
73
src/components/qr-button.vue
Normal file
73
src/components/qr-button.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
v-if="!$root.customize.disableQRSupport"
|
||||||
|
id="secret-url-qrcode"
|
||||||
|
ref="qrButton"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!qrDataURL"
|
||||||
|
>
|
||||||
|
<i class="fas fa-qrcode" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Popover } from 'bootstrap'
|
||||||
|
import qrcode from 'qrcode'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
qrDataURL: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
generateQR() {
|
||||||
|
if (this.$root.customize.disableQRSupport) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
qrcode.toDataURL(this.qrContent, { width: 200 })
|
||||||
|
.then(url => {
|
||||||
|
this.qrDataURL = url
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.generateQR()
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'AppQRButton',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
qrContent: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
qrContent() {
|
||||||
|
this.generateQR()
|
||||||
|
},
|
||||||
|
|
||||||
|
qrDataURL(to) {
|
||||||
|
if (this.popover) {
|
||||||
|
this.popover.dispose()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.popover = new Popover(this.$refs.qrButton, {
|
||||||
|
content: () => {
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.src = to
|
||||||
|
return img
|
||||||
|
},
|
||||||
|
|
||||||
|
html: true,
|
||||||
|
placement: 'left',
|
||||||
|
trigger: 'focus',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
129
src/components/secret-display.vue
Normal file
129
src/components/secret-display.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
<!-- eslint-disable vue/no-v-html -->
|
||||||
|
<template>
|
||||||
|
<div class="card border-primary-subtle mb-3">
|
||||||
|
<div
|
||||||
|
class="card-header bg-primary-subtle"
|
||||||
|
v-html="$t('title-reading-secret')"
|
||||||
|
/>
|
||||||
|
<div class="card-body">
|
||||||
|
<template v-if="!secret">
|
||||||
|
<p v-html="$t('text-pre-reveal-hint')" />
|
||||||
|
<button
|
||||||
|
class="btn btn-success"
|
||||||
|
@click="requestSecret"
|
||||||
|
>
|
||||||
|
{{ $t('btn-reveal-secret') }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
readonly
|
||||||
|
:value="secret"
|
||||||
|
rows="4"
|
||||||
|
/>
|
||||||
|
<div class="d-flex align-items-start p-0">
|
||||||
|
<div
|
||||||
|
class="btn-group-vertical"
|
||||||
|
role="group"
|
||||||
|
>
|
||||||
|
<app-clipboard-button :content="secret" />
|
||||||
|
<a
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:href="secretContentBlobURL"
|
||||||
|
download
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-download" />
|
||||||
|
</a>
|
||||||
|
<app-qr-button :qr-content="secret" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p v-html="$t('text-hint-burned')" />
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import appClipboardButton from './clipboard-button.vue'
|
||||||
|
import appCrypto from '../crypto.js'
|
||||||
|
import appQrButton from './qr-button.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { appClipboardButton, appQrButton },
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
popover: null,
|
||||||
|
secret: null,
|
||||||
|
secretContentBlobURL: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// requestSecret requests the encrypted secret from the backend
|
||||||
|
requestSecret() {
|
||||||
|
window.history.replaceState({}, '', window.location.href.split('#')[0])
|
||||||
|
fetch(`api/get/${this.secretId}`)
|
||||||
|
.then(resp => {
|
||||||
|
if (resp.status === 404) {
|
||||||
|
// Secret has already been consumed
|
||||||
|
this.$emit('error', this.$t('alert-secret-not-found'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (resp.status !== 200) {
|
||||||
|
// Some other non-200: Something(tm) was wrong
|
||||||
|
this.$emit('error', this.$t('alert-something-went-wrong'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
resp.json()
|
||||||
|
.then(data => {
|
||||||
|
const secret = data.secret
|
||||||
|
if (!this.securePassword) {
|
||||||
|
this.secret = secret
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
appCrypto.dec(secret, this.securePassword)
|
||||||
|
.then(secret => {
|
||||||
|
this.secret = secret
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$emit('error', this.$t('alert-something-went-wrong'))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// Network error
|
||||||
|
this.$emit('error', this.$t('alert-something-went-wrong'))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'AppSecretDisplay',
|
||||||
|
props: {
|
||||||
|
secretId: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
|
||||||
|
securePassword: {
|
||||||
|
default: null,
|
||||||
|
required: false,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
secret(to) {
|
||||||
|
if (this.secretContentBlobURL) {
|
||||||
|
window.URL.revokeObjectURL(this.secretContentBlobURL)
|
||||||
|
}
|
||||||
|
this.secretContentBlobURL = window.URL.createObjectURL(new Blob([to], { type: 'text/plain' }))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
43
src/main.js
43
src/main.js
|
|
@ -1,17 +1,18 @@
|
||||||
/* eslint-disable sort-imports */
|
/* eslint-disable sort-imports */
|
||||||
/* global version */
|
/* global version */
|
||||||
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueI18n from 'vue-i18n'
|
import VueI18n from 'vue-i18n'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
import BootstrapVue from 'bootstrap-vue'
|
|
||||||
|
|
||||||
import './style.scss'
|
import './style.scss'
|
||||||
|
|
||||||
import app from './app.vue'
|
import app from './app.vue'
|
||||||
import messages from './langs/langs.js'
|
import messages from './langs/langs.js'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
|
||||||
Vue.use(VueI18n)
|
Vue.use(VueI18n)
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const cookieSet = Object.fromEntries(document.cookie.split('; ')
|
const cookieSet = Object.fromEntries(document.cookie.split('; ')
|
||||||
.map(el => el.split('=')
|
.map(el => el.split('=')
|
||||||
|
|
@ -25,9 +26,41 @@ const i18n = new VueI18n({
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
components: { app },
|
components: { app },
|
||||||
data: { version },
|
|
||||||
|
data: {
|
||||||
|
customize: {},
|
||||||
|
darkTheme: false,
|
||||||
|
version,
|
||||||
|
},
|
||||||
|
|
||||||
el: '#app',
|
el: '#app',
|
||||||
i18n,
|
i18n,
|
||||||
name: 'OTSAppInterface',
|
|
||||||
|
methods: {
|
||||||
|
navigate(to) {
|
||||||
|
this.$router.replace(to)
|
||||||
|
.catch(err => {
|
||||||
|
if (VueRouter.isNavigationFailure(err, VueRouter.NavigationFailureType.duplicated)) {
|
||||||
|
// Hide duplicate nav errors
|
||||||
|
return
|
||||||
|
}
|
||||||
|
throw err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.customize = window.OTSCustomize
|
||||||
|
this.darkTheme = window.getTheme() === 'dark'
|
||||||
|
},
|
||||||
|
|
||||||
|
name: 'OTS',
|
||||||
render: createElement => createElement('app'),
|
render: createElement => createElement('app'),
|
||||||
|
router,
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
darkTheme(to) {
|
||||||
|
window.setTheme(to ? 'dark' : 'light')
|
||||||
|
},
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
45
src/router.js
Normal file
45
src/router.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import AppCreate from './components/create.vue'
|
||||||
|
import AppDisplayURL from './components/display-url.vue'
|
||||||
|
import AppExplanation from './components/explanation.vue'
|
||||||
|
import AppSecretDisplay from './components/secret-display.vue'
|
||||||
|
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
component: AppCreate,
|
||||||
|
name: 'create',
|
||||||
|
path: '/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: AppDisplayURL,
|
||||||
|
name: 'display-secret-url',
|
||||||
|
path: '/display-secret-url',
|
||||||
|
props: route => ({
|
||||||
|
expiresAt: route.query.expiresAt ? new Date(route.query.expiresAt) : null,
|
||||||
|
secretId: route.query.secretId,
|
||||||
|
securePassword: route.query.securePassword,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: AppExplanation,
|
||||||
|
name: 'explanation',
|
||||||
|
path: '/explanation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: AppSecretDisplay,
|
||||||
|
name: 'secret',
|
||||||
|
path: '/secret',
|
||||||
|
props: route => ({
|
||||||
|
secretId: route.query.secretId,
|
||||||
|
securePassword: route.query.securePassword,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'abstract',
|
||||||
|
routes,
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -2,61 +2,10 @@
|
||||||
$web-font-path: '';
|
$web-font-path: '';
|
||||||
|
|
||||||
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
|
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
|
||||||
@import "../node_modules/bootstrap-vue/dist/bootstrap-vue.css";
|
|
||||||
|
|
||||||
@import "lato";
|
@import "lato";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
||||||
&[mode="dark"] {
|
|
||||||
@import "../node_modules/bootswatch/dist/darkly/_variables";
|
|
||||||
@import "../node_modules/bootstrap/scss/bootstrap";
|
|
||||||
@import "../node_modules/bootswatch/dist/darkly/_bootswatch";
|
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-label::before {
|
|
||||||
border-color: #333;
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
color: #d1d1d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control, .custom-select {
|
|
||||||
/* Force overwrite bright textareas */
|
|
||||||
background-color: rgb(24, 26, 27);
|
|
||||||
border-color: rgb(129, 120, 106);
|
|
||||||
color: rgb(189, 183, 175);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: rgb(24, 26, 27);
|
|
||||||
border-color: rgb(49, 81, 113);
|
|
||||||
color: rgb(189, 183, 175);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[readonly] {
|
|
||||||
background-color: rgb(24, 26, 27);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[mode="light"] {
|
|
||||||
@import "../node_modules/bootswatch/dist/flatly/_variables";
|
|
||||||
@import "../node_modules/bootstrap/scss/bootstrap";
|
|
||||||
@import "../node_modules/bootswatch/dist/flatly/_bootswatch";
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
color: #2f2f2f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
font-family: monospace !important;
|
font-family: monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
|
||||||
font-size: 0.9em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue