Make frontend credentials hidden by default and expandable.

This commit is contained in:
Buster Neece 2023-01-10 13:57:00 -06:00
parent 0bab9de01c
commit 85e075282b
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
2 changed files with 100 additions and 76 deletions

View File

@ -328,7 +328,7 @@ import Avatar from '~/components/Common/Avatar';
import PlayButton from "~/components/Common/PlayButton";
import AlbumArt from "~/components/Common/AlbumArt";
import {useAxios} from "~/vendor/axios";
import {useAsyncState, useIntervalFn, useStorage} from "@vueuse/core";
import {useAsyncState, useIntervalFn, useLocalStorage} from "@vueuse/core";
import {useTranslate} from "~/vendor/gettext";
import {computed} from "vue";
import useRefreshableAsyncState from "~/functions/useRefreshableAsyncState";
@ -376,7 +376,7 @@ const props = defineProps({
}
});
const chartsVisible = useStorage('dashboard_show_chart', true);
const chartsVisible = useLocalStorage('dashboard_show_chart', true);
const {$gettext} = useTranslate();

View File

@ -15,86 +15,98 @@
</div>
<template v-if="userCanManageBroadcasting">
<b-table-simple
striped
responsive
<b-collapse
id="frontendCredentials"
v-model="credentialsVisible"
>
<tbody>
<tr class="align-middle">
<td>
<a
:href="frontendAdminUri"
target="_blank"
>
{{ $gettext('Administration') }}
</a>
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">admin</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendAdminPassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendAdminPassword"
hide-text
/>
</td>
</tr>
<tr class="align-middle">
<td>
{{ $gettext('Source') }}
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">source</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendSourcePassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendSourcePassword"
hide-text
/>
</td>
</tr>
<tr class="align-middle">
<td>
{{ $gettext('Relay') }}
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">relay</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendRelayPassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendRelayPassword"
hide-text
/>
</td>
</tr>
</tbody>
</b-table-simple>
<b-table-simple
striped
responsive
>
<tbody>
<tr class="align-middle">
<td>
<a
:href="frontendAdminUri"
target="_blank"
>
{{ $gettext('Administration') }}
</a>
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">admin</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendAdminPassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendAdminPassword"
hide-text
/>
</td>
</tr>
<tr class="align-middle">
<td>
{{ $gettext('Source') }}
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">source</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendSourcePassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendSourcePassword"
hide-text
/>
</td>
</tr>
<tr class="align-middle">
<td>
{{ $gettext('Relay') }}
</td>
<td class="px-0">
<div>
{{ $gettext('Username:') }}
<span class="text-monospace">relay</span>
</div>
<div>
{{ $gettext('Password:') }}
<span class="text-monospace">{{ frontendRelayPassword }}</span>
</div>
</td>
<td class="px-0">
<copy-to-clipboard-button
:text="frontendRelayPassword"
hide-text
/>
</td>
</tr>
</tbody>
</b-table-simple>
</b-collapse>
<div
v-if="hasStarted"
class="card-actions"
>
<a
class="btn btn-outline-primary"
@click.prevent="credentialsVisible = !credentialsVisible"
>
<icon icon="unfold_more" />
{{ langShowHideCredentials }}
</a>
<a
class="api-call no-reload btn btn-outline-secondary"
:href="frontendRestartUri"
@ -130,6 +142,8 @@ import Icon from '~/components/Common/Icon';
import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";
import {computed} from "vue";
import frontendPanelProps from "~/components/Stations/Profile/frontendPanelProps";
import {useLocalStorage} from "@vueuse/core";
import {useTranslate} from "~/vendor/gettext";
const props = defineProps({
...frontendPanelProps,
@ -139,6 +153,16 @@ const props = defineProps({
}
});
const credentialsVisible = useLocalStorage('station_show_frontend_credentials', false);
const {$gettext} = useTranslate();
const langShowHideCredentials = computed(() => {
return (credentialsVisible.value)
? $gettext('Hide Credentials')
: $gettext('Show Credentials')
});
const frontendName = computed(() => {
if (props.frontendType === FRONTEND_ICECAST) {
return 'Icecast';