Refactor frontend components and enhance API integration
- Updated frontend-nuxt.mdc to specify usage of composables for API calls. - Added new AuthCard and ConfirmModal components for improved UI consistency. - Introduced UserAvatar component for user profile display, replacing previous Gravatar implementation. - Implemented useFormSubmit composable for handling form submissions with loading and error states. - Enhanced vitest.config.ts to include coverage reporting for composables and components. - Removed deprecated useAdminApi and useAuth composables to streamline API interactions. - Updated login and setup pages to utilize new components and composables for better user experience.
This commit is contained in:
42
frontend-nuxt/components/UserAvatar.vue
Normal file
42
frontend-nuxt/components/UserAvatar.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="avatar">
|
||||
<div
|
||||
class="rounded-full overflow-hidden flex items-center justify-center shrink-0"
|
||||
:style="{ width: `${size}px`, height: `${size}px` }"
|
||||
>
|
||||
<img
|
||||
v-if="email && !gravatarError"
|
||||
:src="useGravatarUrl(email, size)"
|
||||
alt=""
|
||||
class="w-full h-full object-cover"
|
||||
@error="gravatarError = true"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="bg-primary text-primary-content rounded-full w-full h-full flex items-center justify-center"
|
||||
:class="initialClass"
|
||||
>
|
||||
<span>{{ (username || '?')[0].toUpperCase() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
username: string
|
||||
email?: string
|
||||
size?: number
|
||||
}>(),
|
||||
{ size: 32 }
|
||||
)
|
||||
|
||||
const gravatarError = ref(false)
|
||||
|
||||
const initialClass = computed(() => {
|
||||
if (props.size <= 32) return 'text-sm'
|
||||
if (props.size <= 40) return 'text-sm'
|
||||
return 'text-2xl font-semibold'
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user