mirror of
https://github.com/Luzifer/ots.git
synced 2026-01-06 02:25:33 -05: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
593
src/app.vue
593
src/app.vue
|
|
@ -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"
|
||||
<app-navbar />
|
||||
|
||||
<div class="container mt-4">
|
||||
<div
|
||||
v-if="error"
|
||||
class="row justify-content-center"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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
|
||||
<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'
|
||||
},
|
||||
|
||||
// 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
|
||||
})
|
||||
this.$root.navigate({
|
||||
path: '/secret',
|
||||
query: {
|
||||
secretId,
|
||||
securePassword,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
// 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>
|
||||
|
|
|
|||
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 */
|
||||
/* 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
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: '';
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue