4
0
mirror of https://github.com/AzuraCast/AzuraCast.git synced 2024-06-13 12:46:41 +00:00

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 PlayButton from "~/components/Common/PlayButton";
import AlbumArt from "~/components/Common/AlbumArt"; import AlbumArt from "~/components/Common/AlbumArt";
import {useAxios} from "~/vendor/axios"; 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 {useTranslate} from "~/vendor/gettext";
import {computed} from "vue"; import {computed} from "vue";
import useRefreshableAsyncState from "~/functions/useRefreshableAsyncState"; 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(); const {$gettext} = useTranslate();

View File

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