mirror of
https://github.com/Luzifer/ots.git
synced 2025-08-03 03:36:33 -04:00
Port frontend to Bootstrap 5.3, split components
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers
parent
b8fd877654
commit
8c0807d486
14 changed files with 813 additions and 830 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue