cphipps/watchstate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor how to we handle some sensitive env variables.

Browse Source
This commit is contained in:
arabcoders
2025-05-14 22:54:18 +03:00
parent 4a4c9ddb54
commit 870fc607a9
7 changed files with 76 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/pages/env.vue
View File

@@ -10,19 +10,19 @@
<div class="field is-grouped">
<div class="control has-icons-left" v-if="toggleFilter || query">
<input type="search" v-model.lazy="query" class="input" id="filter"
placeholder="Filter displayed content">
<span class="icon is-left"><i class="fas fa-filter" /></span>
placeholder="Filter displayed content">
<span class="icon is-left"><i class="fas fa-filter"/></span>
</div>
<div class="control">
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
<span class="icon"><i class="fas fa-filter" /></span>
<span class="icon"><i class="fas fa-filter"/></span>
</button>
</div>
<p class="control">
<button class="button is-primary" v-tooltip.bottom="'Add new variable'" @click="toggleForm = !toggleForm"
:disabled="isLoading">
:disabled="isLoading">
<span class="icon">
<i class="fas fa-add"></i>
</span>
@@ -30,7 +30,7 @@
</p>
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading || toggleForm"
:class="{ 'is-loading': isLoading }">
:class="{ 'is-loading': isLoading }">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -45,9 +45,9 @@
<div class="column is-12" v-if="!toggleForm && filteredRows.length < 1">
<Message v-if="isLoading" message_class="has-background-info-90 has-text-dark" title="Loading"
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..." />
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
<Message v-else message_class="has-background-warning-90 has-text-dark"
:title="query ? 'No results' : 'Information'" icon="fas fa-info-circle">
:title="query ? 'No results' : 'Information'" icon="fas fa-info-circle">
<p v-if="query">
No environment variables found matching <strong>{{ query }}</strong>. Please try a different filter.
</p>
@@ -88,25 +88,25 @@
<div class="field">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" id="api_token" v-model="form_value" required placeholder="Masked value"
:type="false === form_expose ? 'password' : 'text'">
<input class="input" id="form_value" v-model="form_value" required placeholder="Masked value"
:type="false === form_expose ? 'password' : 'text'">
</div>
<div class="control">
<button type="button" class="button is-primary" @click="form_expose = !form_expose">
<span class="icon" v-if="!form_expose"><i class="fas fa-eye" /></span>
<span class="icon" v-else><i class="fas fa-eye-slash" /></span>
<span class="icon" v-if="!form_expose"><i class="fas fa-eye"/></span>
<span class="icon" v-else><i class="fas fa-eye-slash"/></span>
</button>
</div>
</div>
<div>
<p class="help" v-html="getHelp(form_key)" />
<p class="help title is-6" v-html="getHelp(form_key)"/>
</div>
</div>
</div>
<div v-else class="control has-icons-left">
<template v-if="'bool' === form_type">
<input id="form_value" type="checkbox" class="switch is-success" :checked="fixBool(form_value)"
@change="form_value = !fixBool(form_value)">
@change="form_value = !fixBool(form_value)">
<label for="form_value">
<template v-if="fixBool(form_value)">On (True)</template>
<template v-else>Off (False)</template>
@@ -114,7 +114,7 @@
</template>
<template v-else-if="'int' === form_type">
<input class="input" id="form_value" type="number" placeholder="Value" v-model="form_value"
pattern="[0-9]*" inputmode="numeric">
pattern="[0-9]*" inputmode="numeric">
<div class="icon is-small is-left">
<i class="fas fa-font"></i>
</div>
@@ -124,7 +124,7 @@
<div class="icon is-small is-left"><i class="fas fa-font"></i></div>
</template>
<div>
<p class="help" v-html="getHelp(form_key)"></p>
<p class="help title is-6" v-html="getHelp(form_key)"></p>
</div>
</div>
</div>
@@ -150,10 +150,11 @@
</div>
</form>
</div>
<div v-else class="column is-12" v-if="filteredRows">
<div class="columns is-multiline">
<div class="column" v-for="item in filteredRows" :key="item.key"
:class="{ 'is-4': !item?.danger, 'is-12': item.danger }">
:class="{ 'is-4': !item?.danger, 'is-12': item.danger }">
<div class="card" :class="{ 'is-danger': item?.danger }">
<header class="card-header">
<p class="card-header-title is-unselectable">
@@ -171,7 +172,7 @@
</template>
</p>
<span class="card-header-icon" v-if="item.mask" @click="item.mask = false"
v-tooltip="'Unmask the value'">
v-tooltip="'Unmask the value'">
<span class="icon"><i class="fas fa-unlock"></i></span>
</span>
</header>
@@ -187,9 +188,10 @@
</span>
</p>
<p v-else class="is-text-overflow is-clickable is-unselectable"
:class="{ 'is-masked': item.mask, 'is-unselectable': item.mask }"
@click="(e) => e.target.classList.toggle('is-text-overflow')">
{{ item.value }}</p>
:class="{ 'is-masked': item.mask, 'is-unselectable': item.mask }"
@click="(e) => e.target.classList.toggle('is-text-overflow')">
{{ item.value }}
</p>
<p v-if="item?.danger" class="title is-5 has-text-danger">
{{ item.description }}
@@ -229,7 +231,7 @@
<div class="column is-12">
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
<ul>
<li>Some variables values are masked, to unmask them click on icon <i class="fa fa-unlock"></i>.</li>
<li>Some values are too large to fit into the view, clicking on the value will show the full value.</li>
@@ -250,13 +252,13 @@
<script setup>
import 'assets/css/bulma-switch.css'
import request from '~/utils/request'
import { awaitElement, copyText, notification } from '~/utils/index'
import { useStorage } from '@vueuse/core'
import {awaitElement, copyText, notification} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import Message from '~/components/Message'
const route = useRoute()
useHead({ title: 'Environment Variables' })
useHead({title: 'Environment Variables'})
const items = ref([])
const toggleForm = ref(false)
@@ -292,10 +294,15 @@ const loadContent = async () => {
if (item && route.query?.value && !item?.value) {
item.value = route.query.value
}
editEnv(item)
if (!item) {
notification('error', 'Error', `Invalid key '${route.query.edit}'.`, 2000)
await cancelForm()
} else {
editEnv(item);
}
}
} catch (e) {
notification('error', 'Error', e.message, 5000)
notification('error', 'Error', `Error. ${e.message}`, 5000)
} finally {
isLoading.value = false
}
@@ -307,10 +314,10 @@ const deleteEnv = async env => {
}
try {
const response = await request(`/system/env/${env.key}`, { method: 'DELETE' })
const response = await request(`/system/env/${env.key}`, {method: 'DELETE'})
if (200 !== response.status) {
json = await parse_api_response(response)
const json = await parse_api_response(response)
notification('error', 'Error', `${json.error.code}: ${json.error.message}`, 5000)
return
}
@@ -345,7 +352,7 @@ const addVariable = async () => {
try {
const response = await request(`/system/env/${key}`, {
method: 'POST',
body: JSON.stringify({ value: form_value.value })
body: JSON.stringify({value: form_value.value})
})
if (304 === response.status) {
@@ -383,7 +390,7 @@ const editEnv = env => {
form_mask.value = env.mask
toggleForm.value = true
if (!useRoute().query.edit) {
useRouter().push({ 'path': '/env', query: { 'edit': env.key } })
useRouter().push({'path': '/env', query: {'edit': env.key}})
}
}
@@ -395,12 +402,12 @@ const cancelForm = async () => {
form_mask.value = false
toggleForm.value = false
if (route.query?.callback) {
await navigateTo({ path: route.query.callback })
await navigateTo({path: route.query.callback})
return
}
if (route.query?.edit || route.query?.value) {
await useRouter().push({ path: '/env' })
await useRouter().push({path: '/env'})
}
}
@@ -408,7 +415,7 @@ watch(toggleForm, async value => {
if (!value) {
await cancelForm()
} else {
awaitElement('#env_page_title', (_, el) => el.scrollIntoView({ behavior: 'smooth' }))
awaitElement('#env_page_title', (_, el) => el.scrollIntoView({behavior: 'smooth'}))
}
})
@@ -426,7 +433,7 @@ const keyChanged = () => {
form_value.value = false
}
});
useRouter().push({ 'path': '/env', query: { 'edit': form_key.value } })
useRouter().push({'path': '/env', query: {'edit': form_key.value}})
}
const getHelp = key => {