mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleanup admin user UI

Browse source 
* hide inaccessible controls
* hide irrelevant controls
* remove duplicate components
* collapse details behind sections
* group all buttons
* apply semantic "warning" styles to buttons
* add follow stats
* translate untranslated strings
* group related controls
* resolve some lint errors
This commit is contained in:
Hazelnoot 2025-05-10 12:15:01 -04:00
parent 228e522081
commit d717df938b
3 changed files with 151 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
locales/index.d.ts vendored
View file

@ -2447,7 +2447,7 @@ export interface Locale extends ILocale {
*/ */
"disablePagesScript": string; "disablePagesScript": string;
/** /**
* リモートユーザー情報の更新 * Refresh remote data
*/ */
"updateRemoteUser": string; "updateRemoteUser": string;
/** /**
@ -13089,6 +13089,46 @@ export interface Locale extends ILocale {
* Users popular on {name} * Users popular on {name}
*/ */
"popularUsersLocal": ParameterizedString<"name">; "popularUsersLocal": ParameterizedString<"name">;
/**
* Silenced
*/
"silenced": string;
/**
* Total followers
*/
"totalFollowers": string;
/**
* Total following
*/
"totalFollowing": string;
/**
* Local followers
*/
"localFollowers": string;
/**
* Local following
*/
"localFollowing": string;
/**
* Remote followers
*/
"remoteFollowers": string;
/**
* Remote following
*/
"remoteFollowing": string;
/**
* Activity Pub
*/
"activityPub": string;
/**
* IP
*/
"ip": string;
/**
* The date is the IP address was first acknowledged.
*/
"ipTip": string;
/** /**
* Translation timeout * Translation timeout
*/ */

157
packages/frontend/src/pages/admin-user.vue
View file

@ -7,38 +7,49 @@ SPDX-License-Identifier: AGPL-3.0-only
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"> <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;"> <div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init"> <FormSuspense :p="init">
<div v-if="tab === 'overview'" class="_gaps_m"> <div v-if="tab === 'overview'" class="_gaps">
<div class="aeakzknw"> <div v-if="user" class="aeakzknw">
<MkAvatar class="avatar" :user="user" indicator link preview/> <MkAvatar class="avatar" :user="user" indicator link preview/>
<div class="body"> <div class="body">
<span class="name"><MkUserName class="name" :user="user"/></span> <span class="name"><MkUserName class="name" :user="user"/></span>
<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> <span class="sub">
<span class="acct _monospace">@{{ acct(user) }}</span>
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard('@' + acct(user))"><i class="ti ti-copy"></i></button>
</span>
<span class="sub">
<span class="_monospace">{{ user.id }}</span>
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(user.id)"><i class="ti ti-copy"></i></button>
</span>
<span class="state"> <span class="state">
<span v-if="!approved" class="silenced">{{ i18n.ts.notApproved }}</span> <span v-if="!approved" class="silenced">{{ i18n.ts.notApproved }}</span>
<span v-if="approved && !user.host" class="moderator">{{ i18n.ts.approved }}</span> <span v-if="approved && !user.host" class="moderator">{{ i18n.ts.approved }}</span>
<span v-if="suspended" class="suspended">Suspended</span> <span v-if="suspended" class="suspended">{{ i18n.ts.suspended }}</span>
<span v-if="silenced" class="silenced">Silenced</span> <span v-if="silenced" class="silenced">{{ i18n.ts.silenced }}</span>
<span v-if="moderator" class="moderator">Moderator</span> <span v-if="moderator" class="moderator">{{ i18n.ts.moderator }}</span>
</span> </span>
</div> </div>
</div> </div>
<MkInfo v-if="isSystem">{{ i18n.ts.isSystemAccount }}</MkInfo> <MkInfo v-if="isSystem">{{ i18n.ts.isSystemAccount }}</MkInfo>
<FormLink v-if="user.host" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink> <MkFolder v-if="!isSystem">
<template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template>
<div style="display: flex; flex-direction: column; gap: 1em;"> <template #label>{{ i18n.ts.details }}</template>
<MkKeyValue :copy="user.id" oneline> <div style="display: flex; flex-direction: column; gap: 1em;">
<template #key>ID</template> <MkKeyValue v-if="user" :copy="user.id" oneline>
<template #value><span class="_monospace">{{ user.id }}</span></template> <template #key>{{ i18n.ts.id }}</template>
</MkKeyValue> <template #value><span class="_monospace">{{ user.id }}</span></template>
<!-- 要る？ </MkKeyValue>
<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline> <MkKeyValue v-if="user" :copy="'@' + acct(user)" oneline>
<template #key>IP (recent)</template> <template #key>{{ i18n.ts.username }}</template>
<template #value><span class="_monospace">{{ ips[0].ip }}</span></template> <template #value><span class="_monospace">@{{ acct(user) }}</span></template>
</MkKeyValue> </MkKeyValue>
--> <!-- 要る？
<template v-if="!isSystem"> <MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline>
<template #key>IP (recent)</template>
<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
</MkKeyValue>
-->
<MkKeyValue oneline> <MkKeyValue oneline>
<template #key>{{ i18n.ts.createdAt }}</template> <template #key>{{ i18n.ts.createdAt }}</template>
<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template> <template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
@ -51,16 +62,62 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #key>{{ i18n.ts.email }}</template> <template #key>{{ i18n.ts.email }}</template>
<template #value><span class="_monospace">{{ info.email }}</span></template> <template #value><span class="_monospace">{{ info.email }}</span></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.totalFollowers }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.totalFollowers"></MkNumber></span></template>
</MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.totalFollowing }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.totalFollowing"></MkNumber></span></template>
</MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.remoteFollowers }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.remoteFollowers"></MkNumber></span></template>
</MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.remoteFollowing }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.remoteFollowing"></MkNumber></span></template>
</MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.localFollowers }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.localFollowers"></MkNumber></span></template>
</MkKeyValue>
<MkKeyValue v-if="info" oneline>
<template #key>{{ i18n.ts.localFollowing }}</template>
<template #value><span class="_monospace"><MkNumber :value="info.followStats.localFollowing"></MkNumber></span></template>
</MkKeyValue>
</div>
</MkFolder>
<MkFolder v-if="info">
<template #icon><i class="ph-scroll ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts._role.policies }}</template>
<div class="_gaps">
<div v-for="policy in Object.keys(info.policies)" :key="policy">
{{ policy }} ... {{ info.policies[policy] }}
</div>
</div>
</MkFolder>
<MkFolder v-if="iAmAdmin && ips && ips.length > 0">
<template #icon><i class="ph-network ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.ip }}</template>
<MkInfo>{{ i18n.ts.ipTip }}</MkInfo>
<template>
<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
<span class="date">{{ record.createdAt }}</span>
<span class="ip">{{ record.ip }}</span>
</div>
</template> </template>
</div> </MkFolder>
<MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged"> <MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged">
<template #label>{{ i18n.ts.moderationNote }}</template> <template #label>{{ i18n.ts.moderationNote }}</template>
<template #caption>{{ i18n.ts.moderationNoteDescription }}</template> <template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
</MkTextarea> </MkTextarea>
<FormSection v-if="user.host"> <FormSection v-if="user?.host">
<template #label>ActivityPub</template> <template #label>{{ i18n.ts.activityPub }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
<div style="display: flex; flex-direction: column; gap: 1em;"> <div style="display: flex; flex-direction: column; gap: 1em;">
@ -73,12 +130,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #value><MkTime mode="detail" :time="user.lastFetchedAt"/></template> <template #value><MkTime mode="detail" :time="user.lastFetchedAt"/></template>
</MkKeyValue> </MkKeyValue>
</div> </div>
<MkButton @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
</div> </div>
</FormSection> </FormSection>
<FormSection v-if="!isSystem"> <FormSection v-if="!isSystem && user && iAmModerator">
<div class="_gaps"> <div class="_gaps">
<MkSwitch v-model="silenced" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</MkSwitch> <MkSwitch v-model="silenced" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</MkSwitch>
<MkSwitch v-if="!isSystem" v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch> <MkSwitch v-if="!isSystem" v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
@ -90,40 +145,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>{{ i18n.ts.mandatoryCWDescription }}</template> <template #caption>{{ i18n.ts.mandatoryCWDescription }}</template>
</MkInput> </MkInput>
<div> <div :class="$style.buttonStrip">
<MkButton v-if="user.host == null && !isSystem" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton> <MkButton v-if="user.host != null" inline @click="updateRemoteUser"><i class="ph-cloud-arrow-down ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
<MkButton v-if="user.host == null" accent @click="resetPassword"><i class="ph-password ph-bold ph-lg"></i> {{ i18n.ts.resetPassword }}</MkButton>
<MkButton inline accent @click="unsetUserAvatar"><i class="ph-camera-slash ph-bold ph-lg"></i> {{ i18n.ts.unsetUserAvatar }}</MkButton>
<MkButton inline accent @click="unsetUserBanner"><i class="ph-image-broken ph-bold ph-lg"></i> {{ i18n.ts.unsetUserBanner }}</MkButton>
<MkButton inline danger @click="deleteAllFiles"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
<MkButton v-if="iAmAdmin" inline danger @click="deleteAccount"><i class="ph-skull ph-bold ph-lg"></i> {{ i18n.ts.deleteAccount }}</MkButton>
</div> </div>
<MkFolder>
<template #icon><i class="ph-scroll ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts._role.policies }}</template>
<div class="_gaps">
<div v-for="policy in Object.keys(info.policies)" :key="policy">
{{ policy }} ... {{ info.policies[policy] }}
</div>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-password"></i></template>
<template #label>IP</template>
<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
<!-- TODO translate -->
<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
<template v-if="iAmAdmin && ips">
<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
<span class="date">{{ record.createdAt }}</span>
<span class="ip">{{ record.ip }}</span>
</div>
</template>
</MkFolder>
<div>
<MkButton v-if="iAmModerator" inline danger style="margin-right: 8px;" @click="unsetUserAvatar"><i class="ti ti-user-circle"></i> {{ i18n.ts.unsetUserAvatar }}</MkButton>
<MkButton v-if="iAmModerator" inline danger style="margin-right: 8px;" @click="unsetUserBanner"><i class="ti ti-photo"></i> {{ i18n.ts.unsetUserBanner }}</MkButton>
<MkButton v-if="iAmModerator" inline danger @click="deleteAllFiles"><i class="ph-cloud ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
</div>
<MkButton v-if="$i.isAdmin && !isSystem" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
</div> </div>
</FormSection> </FormSection>
</div> </div>
@ -231,6 +260,8 @@ import { iAmAdmin, $i, iAmModerator } from '@/i.js';
import MkRolePreview from '@/components/MkRolePreview.vue'; import MkRolePreview from '@/components/MkRolePreview.vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkNumber from '@/components/MkNumber.vue';
import { copyToClipboard } from '@/utility/copy-to-clipboard';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
userId: string; userId: string;
@ -740,4 +771,12 @@ definePage(() => ({
border-radius: var(--MI-radius-sm); border-radius: var(--MI-radius-sm);
cursor: pointer; cursor: pointer;
} }
.buttonStrip {
margin: calc(var(--MI-margin) / 2 * -1);
>* {
margin: calc(var(--MI-margin) / 2);
}
}
</style> </style>

12
sharkey-locales/en-US.yml
View file

@ -569,5 +569,17 @@ bubbleTimelineMustBeEnabled: "Note: the bubble timeline is hidden by default, an
popularUsersGlobal: "Users popular on the global network" popularUsersGlobal: "Users popular on the global network"
popularUsersLocal: "Users popular on {name}" popularUsersLocal: "Users popular on {name}"
silenced: "Silenced"
totalFollowers: "Total followers"
totalFollowing: "Total following"
localFollowers: "Local followers"
localFollowing: "Local following"
remoteFollowers: "Remote followers"
remoteFollowing: "Remote following"
updateRemoteUser: "Refresh remote data"
activityPub: "Activity Pub"
ip: "IP"
ipTip: "The date is the IP address was first acknowledged."
translationTimeoutLabel: "Translation timeout" translationTimeoutLabel: "Translation timeout"
translationTimeoutCaption: "Timeout in milliseconds for translation API requests." translationTimeoutCaption: "Timeout in milliseconds for translation API requests."