Add UserButton, update Header & deps
Add a new src/components/UserButton.vue and update src/components/Header.astro to integrate UI changes. Add @halo-dev/api-client and ky to package.json and update editor settings to use Prettier for .vue and .astro files. Regenerate pnpm lockfile.
This commit is contained in:
Ryan Wang
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import ThemeSwitcher from "./ThemeSwitcher.vue";
|
||||
import UserButton from "./UserButton.vue";
|
||||
---
|
||||
|
||||
<header>
|
||||
@@ -17,7 +18,15 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
|
||||
>
|
||||
</a>
|
||||
</nav>
|
||||
<ThemeSwitcher client:load />
|
||||
<div class="header-actions">
|
||||
<ThemeSwitcher client:load />
|
||||
<UserButton client:load>
|
||||
<div slot="fallback" class="user-button-fallback" aria-hidden="true">
|
||||
<span class="user-button-fallback__avatar"></span>
|
||||
<span class="user-button-fallback__text"></span>
|
||||
</div>
|
||||
</UserButton>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -58,6 +67,53 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.user-button-fallback {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 112px;
|
||||
height: 34px;
|
||||
padding: 0 0.7rem;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.user-button-fallback__avatar,
|
||||
.user-button-fallback__text {
|
||||
display: block;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--bg-raised) 0%,
|
||||
color-mix(in srgb, var(--bg-raised) 78%, var(--ink) 22%) 50%,
|
||||
var(--bg-raised) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: user-button-fallback-shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.user-button-fallback__avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-button-fallback__text {
|
||||
width: 100%;
|
||||
height: 0.72rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
nav :global(a) {
|
||||
@@ -96,6 +152,21 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
|
||||
flex-wrap: wrap;
|
||||
gap: 0.1rem;
|
||||
margin-left: -0.65rem;
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes user-button-fallback-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DetailedUser } from "@halo-dev/api-client";
|
||||
import ky from "ky";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
const user = ref<DetailedUser | null>(null);
|
||||
const isLoading = ref(true);
|
||||
|
||||
const isAnonymous = computed(() => {
|
||||
return user.value?.user.metadata.name === "anonymousUser";
|
||||
});
|
||||
|
||||
const displayName = computed(() => {
|
||||
return (
|
||||
user.value?.user.spec.displayName ||
|
||||
user.value?.user.metadata.name ||
|
||||
"Account"
|
||||
);
|
||||
});
|
||||
|
||||
const avatarSrc = computed(() => {
|
||||
return user.value?.user.spec.avatar || "";
|
||||
});
|
||||
|
||||
const avatarLabel = computed(() => {
|
||||
if (isAnonymous.value) {
|
||||
return "?";
|
||||
}
|
||||
|
||||
return displayName.value.charAt(0).toUpperCase();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
user.value = await ky
|
||||
.get<DetailedUser>(`/apis/api.console.halo.run/v1alpha1/users/-`)
|
||||
.json();
|
||||
} catch {
|
||||
user.value = null;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="user-button-shell user-button-shell--loading"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span
|
||||
class="user-button-avatar user-button-avatar--skeleton"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="user-button-text-skeleton" aria-hidden="true"></span>
|
||||
<span class="sr-only">Loading user state</span>
|
||||
</div>
|
||||
<a
|
||||
href="/uc"
|
||||
v-else-if="user && !isAnonymous"
|
||||
class="user-button-shell"
|
||||
:title="displayName"
|
||||
>
|
||||
<span class="user-button-avatar" aria-hidden="true">
|
||||
<img
|
||||
v-if="avatarSrc"
|
||||
class="user-button-avatar__image"
|
||||
:src="avatarSrc"
|
||||
:alt="displayName"
|
||||
/>
|
||||
<span v-else>{{ avatarLabel }}</span>
|
||||
</span>
|
||||
<span class="user-button-text">{{ displayName }}</span>
|
||||
</a>
|
||||
<a v-else class="user-button-shell user-button-shell--link" href="/login">
|
||||
<span class="user-button-avatar" aria-hidden="true">{{ avatarLabel }}</span>
|
||||
<span class="user-button-text">Login</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-button-shell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 112px;
|
||||
height: 34px;
|
||||
padding: 0 0.7rem;
|
||||
border-radius: 8px;
|
||||
color: var(--ink-2);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.user-button-shell--link {
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
.user-button-shell--link:hover {
|
||||
background: var(--bg-raised);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.user-button-shell--loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.user-button-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-raised);
|
||||
color: var(--ink);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-button-avatar__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-button-avatar--skeleton,
|
||||
.user-button-text-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--bg-raised) 0%,
|
||||
color-mix(in srgb, var(--bg-raised) 78%, var(--ink) 22%) 50%,
|
||||
var(--bg-raised) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.user-button-text {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.user-button-text-skeleton {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.72rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user