Port frontend to Bootstrap 5.3, split components

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2023-09-30 19:40:11 +02:00
parent b8fd877654
commit 8c0807d486
No known key found for this signature in database
GPG Key ID: D91C3E91E4CAD6F5
14 changed files with 813 additions and 830 deletions

View File

@ -1,8 +1,7 @@
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="light">
<head>
<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">
{{ 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.refreshTheme = () => {
document.querySelector('html').setAttribute('mode', window.getTheme())
document.querySelector('html').setAttribute('data-bs-theme', window.getTheme())
}
window.setTheme = (theme) => {

250
package-lock.json generated
View File

@ -6,12 +6,11 @@
"": {
"name": "ots",
"dependencies": {
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
"bootswatch": "^4.6.2",
"bootstrap": "^5.3.2",
"qrcode": "^1.5.3",
"vue": "^2.7.14",
"vue-i18n": "^8.28.2"
"vue-i18n": "^8.28.2",
"vue-router": "^3.6.5"
},
"devDependencies": {
"@babel/eslint-parser": "^7.22.5",
@ -907,85 +906,14 @@
"node": ">= 8"
}
},
"node_modules/@nuxt/opencollective": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
"integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
"dependencies": {
"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"
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"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"
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@vue/compiler-sfc": {
@ -1285,9 +1213,9 @@
"dev": true
},
"node_modules/bootstrap": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
"funding": [
{
"type": "github",
@ -1299,28 +1227,9 @@
}
],
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.1"
"@popperjs/core": "^2.11.8"
}
},
"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": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -1531,11 +1440,6 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"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": {
"version": "0.15.1",
"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",
"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": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@ -1951,9 +1832,9 @@
}
},
"node_modules/eslint-plugin-vue/node_modules/semver": {
"version": "7.5.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
"integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@ -2789,12 +2670,6 @@
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
"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": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@ -2917,9 +2792,9 @@
}
},
"node_modules/less/node_modules/semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"optional": true,
"bin": {
@ -3125,25 +3000,6 @@
"dev": 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": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
@ -3351,24 +3207,6 @@
"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": {
"version": "8.4.24",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@ -3925,6 +3763,7 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"optional": true
},
"node_modules/sass": {
@ -3952,9 +3791,9 @@
"optional": true
},
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
@ -4176,11 +4015,6 @@
"dev": 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": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@ -4316,9 +4150,9 @@
}
},
"node_modules/vue-eslint-parser/node_modules/semver": {
"version": "7.5.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
"integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@ -4330,16 +4164,16 @@
"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": {
"version": "8.28.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
"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": {
"version": "2.7.14",
"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==",
"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": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -4407,9 +4227,9 @@
}
},
"node_modules/word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
"dev": true,
"engines": {
"node": ">=0.10.0"

View File

@ -2,20 +2,19 @@
"devDependencies": {
"@babel/eslint-parser": "^7.22.5",
"esbuild": "^0.17.17",
"esbuild-sass-plugin": "^2.9.0",
"esbuild-vue": "^1.2.2",
"eslint": "^8.42.0",
"esbuild-sass-plugin": "^2.9.0",
"eslint-plugin-vue": "^9.14.1",
"vue-template-compiler": "^2.7.14"
},
"name": "ots",
"private": true,
"dependencies": {
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
"bootswatch": "^4.6.2",
"bootstrap": "^5.3.2",
"qrcode": "^1.5.3",
"vue": "^2.7.14",
"vue-i18n": "^8.28.2"
"vue-i18n": "^8.28.2",
"vue-router": "^3.6.5"
}
}

View File

@ -1,487 +1,60 @@
<!-- eslint-disable vue/no-v-html -->
<template>
<div id="app">
<b-navbar
toggleable="lg"
type="dark"
variant="primary"
>
<b-navbar-brand
href="#"
@click="newSecret"
>
<i
v-if="!customize.appIcon"
class="fas fa-user-secret mr-1"
/>
<img
v-else
class="mr-1"
:src="customize.appIcon"
>
<span v-if="!customize.disableAppTitle">{{ customize.appTitle }}</span>
</b-navbar-brand>
<app-navbar />
<b-navbar-toggle target="nav-collapse" />
<b-collapse
id="nav-collapse"
is-nav
<div class="container mt-4">
<div
v-if="error"
class="row justify-content-center"
>
<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" />&ZeroWidthSpace;
</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
<div class="col-8">
<div
class="alert alert-danger"
role="alert"
v-html="error"
/>
</b-col>
</b-row>
</div>
</div>
<b-row>
<b-col>
<!-- Explanation -->
<b-card
v-if="explanationShown"
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>
<div class="row">
<div class="col">
<router-view @error="displayError" />
</div>
</div>
<!-- Creation dialog -->
<b-card
v-if="mode == 'create' && !secretId && canWrite"
border-variant="primary"
header-bg-variant="primary"
header-text-variant="white"
>
<span
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 class="row mt-4">
<div class="col form-text text-center">
{{ $t('text-powered-by') }}
<a href="https://github.com/Luzifer/ots"><i class="fab fa-github" /> OTS</a>
{{ $root.version }}
</div>
</div>
</div>
</div>
</template>
<script>
/* global maxSecretExpire */
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
import AppNavbar from './components/navbar.vue'
export default {
computed: {
hasClipboard() {
return Boolean(navigator.clipboard && navigator.clipboard.writeText)
components: {
AppNavbar,
},
secretUrl() {
return [
window.location.href,
encodeURIComponent([
this.secretId,
this.securePassword,
].join('|')),
].join('#')
},
created() {
this.$root.navigate('/')
},
data() {
return {
canWrite: null,
copyToClipboardSuccess: false,
customize: {},
darkTheme: false,
error: '',
explanationShown: false,
mode: 'create',
secret: '',
secretContentBlobURL: '',
secretContentQRDataURL: '',
secretExpiry: null,
secretId: '',
secretQRDataURL: '',
securePassword: '',
selectedExpiry: null,
showError: false,
}
},
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
})
},
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
displayError(error) {
this.error = error
},
// 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 secretId = parts[0]
let securePassword = null
if (parts.length === 2) {
this.securePassword = parts[1]
securePassword = parts[1]
}
this.secretId = parts[0]
this.mode = 'view'
this.$root.navigate({
path: '/secret',
query: {
secretId,
securePassword,
},
// newSecret removes the window hash and therefore returns to "new secret" mode
newSecret() {
location.href = location.href.split('#')[0]
},
// 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
mounted() {
this.checkWriteAccess()
this.customize = window.OTSCustomize
this.darkTheme = window.getTheme() === 'dark'
window.onhashchange = this.hashLoad
this.hashLoad()
},
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>

View 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
View 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>

View 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>

View 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
View 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>

View 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>

View 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>

View File

@ -1,17 +1,18 @@
/* eslint-disable sort-imports */
/* global version */
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import BootstrapVue from 'bootstrap-vue'
import VueRouter from 'vue-router'
import './style.scss'
import app from './app.vue'
import messages from './langs/langs.js'
import router from './router'
Vue.use(BootstrapVue)
Vue.use(VueI18n)
Vue.use(VueRouter)
const cookieSet = Object.fromEntries(document.cookie.split('; ')
.map(el => el.split('=')
@ -25,9 +26,41 @@ const i18n = new VueI18n({
new Vue({
components: { app },
data: { version },
data: {
customize: {},
darkTheme: false,
version,
},
el: '#app',
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'),
router,
watch: {
darkTheme(to) {
window.setTheme(to ? 'dark' : 'light')
},
},
})

45
src/router.js Normal file
View 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

View File

@ -2,61 +2,10 @@
$web-font-path: '';
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../node_modules/bootstrap-vue/dist/bootstrap-vue.css";
@import "lato";
: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 {
font-family: monospace !important;
}
.footer {
font-size: 0.9em;
text-align: center;
}
}