diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/pages/role.vue | 42 |
1 files changed, 39 insertions, 3 deletions
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue index f2645394a2..fe39c594ba 100644 --- a/packages/frontend/src/pages/role.vue +++ b/packages/frontend/src/pages/role.vue @@ -1,8 +1,16 @@ <template> <MkStickyContainer> <template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template> - - <MkSpacer v-if="tab === 'users'" :content-max="1200"> + <MKSpacer v-if="!(typeof error === 'undefined')" :content-max="1200"> + <div :class="$style.root"> + <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <p :class="$style.text"> + <i class="ti ti-alert-triangle"></i> + {{ error }} + </p> + </div> + </MKSpacer> + <MkSpacer v-else-if="tab === 'users'" :content-max="1200"> <div class="_gaps_s"> <div v-if="role">{{ role.description }}</div> <MkUserList :pagination="users" :extractor="(item) => item.user"/> @@ -13,7 +21,6 @@ </MkSpacer> </MkStickyContainer> </template> - <script lang="ts" setup> import { computed, watch } from 'vue'; import * as os from '@/os'; @@ -21,6 +28,7 @@ import MkUserList from '@/components/MkUserList.vue'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; import MkTimeline from '@/components/MkTimeline.vue'; +import { instanceName } from '@/config'; const props = withDefaults(defineProps<{ role: string; @@ -31,12 +39,21 @@ const props = withDefaults(defineProps<{ let tab = $ref(props.initialTab); let role = $ref(); +let error = $ref(); watch(() => props.role, () => { os.api('roles/show', { roleId: props.role, }).then(res => { role = res; + document.title = `${role?.name} | ${instanceName}`; + }).catch((err) => { + if (err.code === 'NO_SUCH_ROLE') { + error = i18n.ts.noRole; + } else { + error = i18n.ts.somethingHappened; + } + document.title = `${error} | ${instanceName}`; }); }, { immediate: true }); @@ -63,4 +80,23 @@ definePageMetadata(computed(() => ({ icon: 'ti ti-badge', }))); </script> +<style lang="scss" module> +.root { + padding: 32px; + text-align: center; + align-items: center; +} + +.text { + margin: 0 0 8px 0; +} + +.img { + vertical-align: bottom; + width: 128px; + height: 128px; + margin-bottom: 16px; + border-radius: 16px; +} +</style> |