Added obscure text button.
This commit is contained in:
Abdulmhsen B. A. A
@@ -46,9 +46,9 @@ hr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-masked {
|
||||
.is-masked, .is-full-mask, .is-full-mask :not(marquee) {
|
||||
color: transparent !important;
|
||||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -100,8 +100,8 @@ hr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-masked {
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
|
||||
.is-masked, .is-full-mask, .is-full-mask :not(marquee) {
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -69,6 +69,11 @@
|
||||
|
||||
</div>
|
||||
<div class="navbar-end pr-3">
|
||||
<div class="navbar-item">
|
||||
<button class="button is-dark" @click="maskAll = !maskAll" v-tooltip="'Toggle Text Obscure'">
|
||||
<span class="icon"><i class="fas fa-mask"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<button class="button is-dark" @click="selectedTheme = 'light'" v-if="'dark' === selectedTheme"
|
||||
v-tooltip="'Switch to light theme'">
|
||||
@@ -87,157 +92,161 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div :class="{'is-full-mask':maskAll}">
|
||||
|
||||
<div class="columns is-multiline" v-if="showConnection">
|
||||
<div class="column is-12 mt-2">
|
||||
<div class="box">
|
||||
<div class="columns is-multiline" v-if="showConnection">
|
||||
<div class="column is-12 mt-2">
|
||||
<div class="box">
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="api_token">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-key"></i></span>
|
||||
<span>API Token</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" id="api_token" v-model="api_token" required placeholder="API Token..."
|
||||
@keyup="api_status = false; api_response = ''"
|
||||
:type="false === exposeToken ? 'password' : 'text'">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary" @click="exposeToken = !exposeToken" v-tooltip="'Show/Hide token'">
|
||||
<span class="icon" v-if="!exposeToken"><i class="fas fa-eye"></i></span>
|
||||
<span class="icon" v-else><i class="fas fa-eye-slash"></i></span>
|
||||
</button>
|
||||
<div class="field">
|
||||
<label class="label" for="api_token">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-key"></i></span>
|
||||
<span>API Token</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" id="api_token" v-model="api_token" required placeholder="API Token..."
|
||||
@keyup="api_status = false; api_response = ''"
|
||||
:type="false === exposeToken ? 'password' : 'text'">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary" @click="exposeToken = !exposeToken"
|
||||
v-tooltip="'Show/Hide token'">
|
||||
<span class="icon" v-if="!exposeToken"><i class="fas fa-eye"></i></span>
|
||||
<span class="icon" v-else><i class="fas fa-eye-slash"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
You can obtain the <code>API TOKEN</code> by using the <code>system:apikey</code> command or by
|
||||
viewing the <code>/config/.env</code> inside <code>WS_DATA_PATH</code> variable and looking for the
|
||||
<code>WS_API_KEY=</code> key.
|
||||
</p>
|
||||
</div>
|
||||
<p class="help">
|
||||
You can obtain the <code>API TOKEN</code> by using the <code>system:apikey</code> command or by
|
||||
viewing the <code>/config/.env</code> inside <code>WS_DATA_PATH</code> variable and looking for the
|
||||
<code>WS_API_KEY=</code> key.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="api_url">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-link"></i></span>
|
||||
<span>API URL</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" id="api_url" type="url" v-model="api_url" required
|
||||
placeholder="API URL... http://localhost:8081"
|
||||
@keyup="api_status = false; api_response = ''">
|
||||
<div class="field">
|
||||
<label class="label" for="api_url">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-link"></i></span>
|
||||
<span>API URL</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" id="api_url" type="url" v-model="api_url" required
|
||||
placeholder="API URL... http://localhost:8081"
|
||||
@keyup="api_status = false; api_response = ''">
|
||||
<p class="help">
|
||||
Use <a href="javascript:void(0)" @click="setOrigin">current page URL</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="api_path">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-folder"></i></span>
|
||||
<span>API Path</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" id="api_path" type="text" v-model="api_path" required
|
||||
placeholder="API Path... /v1/api"
|
||||
@keyup="api_status = false; api_response = ''">
|
||||
<p class="help">
|
||||
Use <a href="javascript:void(0)" @click="api_path = '/v1/api'">Set default API Path</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" v-model="api_response" readonly disabled
|
||||
:class="{'has-background-success': true===api_status}">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary" :disabled="!api_url || !api_token"
|
||||
@click="testApi">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-save"></i></span>
|
||||
<span>Save</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
Use <a href="javascript:void(0)" @click="setOrigin">current page URL</a>.
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-danger"><i class="fas fa-info"></i></span>
|
||||
<span>These settings are stored locally in your browser. You need to re-add them if you access the
|
||||
<code>WebUI</code> from different browser.</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="api_path">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-folder"></i></span>
|
||||
<span>API Path</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" id="api_path" type="text" v-model="api_path" required
|
||||
placeholder="API Path... /v1/api"
|
||||
@keyup="api_status = false; api_response = ''">
|
||||
<p class="help">
|
||||
Use <a href="javascript:void(0)" @click="api_path = '/v1/api'">Set default API Path</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" v-model="api_response" readonly disabled
|
||||
:class="{'has-background-success': true===api_status}">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary" :disabled="!api_url || !api_token" @click="testApi">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-save"></i></span>
|
||||
<span>Save</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-danger"><i class="fas fa-info"></i></span>
|
||||
<span>These settings are stored locally in your browser. You need to re-add them if you access the
|
||||
<code>WebUI</code> from different browser.</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!api_url || !api_token">
|
||||
<no-api/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot/>
|
||||
</template>
|
||||
<template v-if="!api_url || !api_token">
|
||||
<no-api/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot/>
|
||||
</template>
|
||||
|
||||
<div class="columns is-multiline mt-3">
|
||||
<div class="column is-12 is-hidden-mobile">
|
||||
<div class="content">
|
||||
<Message v-if="show_page_info" title="Information">
|
||||
<button class="delete" @click="show_page_info = false"></button>
|
||||
If you have question, or want clarification on something, or just want to chat with other users, you are
|
||||
welcome to join our
|
||||
<NuxtLink href="https://discord.gg/haUXHJyj6Y" target="_blank">
|
||||
<span class="icon-text is-underlined">
|
||||
<span class="icon"><i class="fas fa-brands fa-discord"></i></span>
|
||||
<span>Discord server</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
. For real bug reports, feature requests, or contributions, please visit the
|
||||
<NuxtLink href="https://github.com/arabcoders/watchstate/issues/new/choose" target="_blank">
|
||||
<span class="icon-text is-underlined">
|
||||
<span class="icon"><i class="fas fa-brands fa-github"></i></span>
|
||||
<span>GitHub repository</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
.
|
||||
</Message>
|
||||
<div class="columns is-multiline mt-3">
|
||||
<div class="column is-12 is-hidden-mobile">
|
||||
<div class="content">
|
||||
<Message v-if="show_page_info" title="Information">
|
||||
<button class="delete" @click="show_page_info = false"></button>
|
||||
If you have question, or want clarification on something, or just want to chat with other users, you are
|
||||
welcome to join our
|
||||
<NuxtLink href="https://discord.gg/haUXHJyj6Y" target="_blank">
|
||||
<span class="icon-text is-underlined">
|
||||
<span class="icon"><i class="fas fa-brands fa-discord"></i></span>
|
||||
<span>Discord server</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
. For real bug reports, feature requests, or contributions, please visit the
|
||||
<NuxtLink href="https://github.com/arabcoders/watchstate/issues/new/choose" target="_blank">
|
||||
<span class="icon-text is-underlined">
|
||||
<span class="icon"><i class="fas fa-brands fa-github"></i></span>
|
||||
<span>GitHub repository</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
.
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile has-text-left">
|
||||
{{ api_version }} - <a href="https://github.com/arabcoders/watchstate" target="_blank">WatchState</a>
|
||||
<template v-if="!show_page_info">
|
||||
<span class="is-hidden-mobile">
|
||||
- <a href="javascript:void(0)" @click="show_page_info=true">Show Info</a>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile has-text-left">
|
||||
{{ api_version }} - <a href="https://github.com/arabcoders/watchstate" target="_blank">WatchState</a>
|
||||
<template v-if="!show_page_info">
|
||||
<span class="is-hidden-mobile">
|
||||
- <a href="javascript:void(0)" @click="show_page_info=true">Show Info</a>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NuxtNotifications position="top right" :speed="800" :ignoreDuplicates="true" :width="340" :pauseOnHover="true"/>
|
||||
<NuxtNotifications position="top right" :speed="800" :ignoreDuplicates="true" :width="340" :pauseOnHover="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -256,6 +265,8 @@ const api_url = useStorage('api_url', window.location.origin)
|
||||
const api_path = useStorage('api_path', '/v1/api')
|
||||
const api_token = useStorage('api_token', '')
|
||||
const show_page_info = useStorage('show_page_info', true)
|
||||
const maskAll = useStorage('page_mask', false)
|
||||
|
||||
const api_status = ref(false)
|
||||
const api_response = ref('Status: Unknown')
|
||||
const api_version = ref()
|
||||
|
||||
Reference in New Issue
Block a user