Add profile picture support
- backend avatar storage and OIDC picture claims - profile and admin UI components - admin org cards, tests, and docs
This commit is contained in:
@@ -10,6 +10,7 @@
|
||||
<UserBasicInfo
|
||||
v-if="ctx"
|
||||
:name="ctx.user.display_name"
|
||||
:avatar-url="authStore.userInfo.user.avatar_url"
|
||||
:visits="authStore.userInfo.user.visits"
|
||||
:created-at="authStore.userInfo.user.created_at"
|
||||
:last-seen="authStore.userInfo.user.last_seen"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dialog-overlay" @click="$emit('close')">
|
||||
<div ref="dialog" class="modal-panel" @keydown="handleDialogKeydown" @click.stop>
|
||||
<div ref="dialog" :class="['modal-panel', panelClass]" @keydown="handleDialogKeydown" @click.stop>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +17,9 @@ const props = defineProps({
|
||||
// Optional: index to help find next sibling when item is deleted
|
||||
focusIndex: { type: Number, default: -1 },
|
||||
// Optional: selector for finding siblings when restoring focus
|
||||
focusSiblingSelector: { type: String, default: '' }
|
||||
focusSiblingSelector: { type: String, default: '' },
|
||||
// Optional: extra class name(s) for the modal panel
|
||||
panelClass: { type: [String, Array, Object], default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<component
|
||||
:is="rootTag"
|
||||
v-bind="rootAttrs"
|
||||
class="profile-picture"
|
||||
:class="{ 'profile-picture-btn': clickable }"
|
||||
:style="pictureStyle"
|
||||
@click="handleClick"
|
||||
>
|
||||
<img
|
||||
v-if="showPicture"
|
||||
:key="`${src || 'none'}:${renderVersion}`"
|
||||
:src="src"
|
||||
alt=""
|
||||
class="profile-picture-image"
|
||||
@error="handleError"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
:src="profileGeneric"
|
||||
alt=""
|
||||
class="profile-picture-fallback"
|
||||
/>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import profileGeneric from '@/assets/profile-generic.svg'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
src: { type: String, default: null },
|
||||
clickable: { type: Boolean, default: false },
|
||||
loading: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
renderVersion: { type: [Number, String], default: 0 },
|
||||
width: { type: String, default: '3rem' },
|
||||
height: { type: String, default: '3rem' },
|
||||
radius: { type: String, default: '0.9rem' },
|
||||
fit: { type: String, default: 'cover' },
|
||||
filter: { type: String, default: 'none' },
|
||||
fallbackSize: { type: String, default: '2em' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
const pictureAvailable = ref(true)
|
||||
|
||||
const rootTag = computed(() => (props.clickable ? 'button' : 'div'))
|
||||
const showPicture = computed(() => !!props.src && pictureAvailable.value)
|
||||
const pictureStyle = computed(() => ({
|
||||
'--profile-picture-width': props.width,
|
||||
'--profile-picture-height': props.height,
|
||||
'--profile-picture-radius': props.radius,
|
||||
'--profile-picture-fit': props.fit,
|
||||
'--profile-picture-filter': props.filter,
|
||||
'--profile-picture-fallback-size': props.fallbackSize
|
||||
}))
|
||||
const rootAttrs = computed(() => {
|
||||
if (!props.clickable) return { title: props.title || undefined }
|
||||
return {
|
||||
type: 'button',
|
||||
disabled: props.loading,
|
||||
title: props.title || undefined
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.src, () => {
|
||||
pictureAvailable.value = true
|
||||
})
|
||||
|
||||
const handleError = () => {
|
||||
pictureAvailable.value = false
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
if (!props.clickable || props.loading) return
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-picture {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--profile-picture-width);
|
||||
height: var(--profile-picture-height);
|
||||
font-size: var(--profile-picture-fallback-size);
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
border-radius: var(--profile-picture-radius);
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-picture-btn {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-picture-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: inset 0 0 0 1px var(--color-accent);
|
||||
}
|
||||
|
||||
.profile-picture-btn:disabled {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.profile-picture-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--profile-picture-fit);
|
||||
display: block;
|
||||
filter: var(--profile-picture-filter);
|
||||
}
|
||||
|
||||
.profile-picture-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<Modal panel-class="modal-panel--avatar" @close="closeEditor">
|
||||
<h3>{{ title }}</h3>
|
||||
<input
|
||||
ref="pictureInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="profile-picture-editor-input"
|
||||
:disabled="saving"
|
||||
@change="handlePictureSelected"
|
||||
/>
|
||||
<div ref="picturePreview" class="profile-picture-editor-preview" :style="previewStyle">
|
||||
<img
|
||||
v-if="editorImageUrl && displayMetrics"
|
||||
:src="editorImageUrl"
|
||||
alt=""
|
||||
class="profile-picture-editor-image"
|
||||
:style="editorImageStyle"
|
||||
/>
|
||||
<img
|
||||
v-if="editorImageUrl && displayMetrics"
|
||||
:src="editorImageUrl"
|
||||
alt=""
|
||||
class="profile-picture-editor-image profile-picture-editor-image--overlay"
|
||||
:style="editorOverlayStyle"
|
||||
/>
|
||||
<div
|
||||
v-if="editorImageUrl && displayMetrics"
|
||||
class="profile-picture-editor-crop"
|
||||
:style="cropBoxStyle"
|
||||
@pointerdown="startMove"
|
||||
>
|
||||
<div class="profile-picture-editor-guides" aria-hidden="true">
|
||||
<div class="profile-picture-editor-guide profile-picture-editor-guide--circle"></div>
|
||||
<div class="profile-picture-editor-guide profile-picture-editor-guide--eyes"></div>
|
||||
<div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-left"></div>
|
||||
<div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-right"></div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="profile-picture-editor-handle profile-picture-editor-handle--nw"
|
||||
@pointerdown.stop="startResize($event, 'nw')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="profile-picture-editor-handle profile-picture-editor-handle--ne"
|
||||
@pointerdown.stop="startResize($event, 'ne')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="profile-picture-editor-handle profile-picture-editor-handle--sw"
|
||||
@pointerdown.stop="startResize($event, 'sw')"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="profile-picture-editor-handle profile-picture-editor-handle--se"
|
||||
@pointerdown.stop="startResize($event, 'se')"
|
||||
></button>
|
||||
</div>
|
||||
<ProfilePicture
|
||||
v-else
|
||||
class="profile-picture-editor-trigger"
|
||||
:src="pictureUrl"
|
||||
:render-version="renderVersion"
|
||||
clickable
|
||||
:loading="saving"
|
||||
title="Choose profile picture"
|
||||
width="100%"
|
||||
height="100%"
|
||||
radius="0"
|
||||
fit="contain"
|
||||
fallback-size="5rem"
|
||||
@click="triggerPictureSelect"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="errorMessage" class="error small">{{ errorMessage }}</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" :disabled="saving" @click="closeEditor">Back</button>
|
||||
<button
|
||||
v-if="!editorImageUrl && pictureUrl"
|
||||
type="button"
|
||||
class="btn-danger"
|
||||
:disabled="saving"
|
||||
@click="removePicture"
|
||||
>Delete</button>
|
||||
<button
|
||||
v-if="editorImageUrl"
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
:disabled="saving"
|
||||
@click="savePicture"
|
||||
>Save</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
||||
import { apiJson } from 'paskia'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
import ProfilePicture from '@/components/ProfilePicture.vue'
|
||||
|
||||
const AVATAR_UPLOAD_SIZE = 720
|
||||
const MIN_CROP_SIZE = 36
|
||||
|
||||
const props = defineProps({
|
||||
endpoint: { type: String, required: true },
|
||||
pictureUrl: { type: String, default: null },
|
||||
renderVersion: { type: [Number, String], default: 0 },
|
||||
title: { type: String, default: 'Profile Picture' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'updated'])
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const pictureInput = ref(null)
|
||||
const picturePreview = ref(null)
|
||||
const editorImage = ref(null)
|
||||
const editorImageUrl = ref('')
|
||||
const previewObjectUrl = ref(null)
|
||||
const saving = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const cropRect = reactive({ x: 0, y: 0, size: 0 })
|
||||
const previewRect = reactive({ width: 0, height: 0 })
|
||||
const viewportSize = reactive({ width: 0, height: 0 })
|
||||
let dragState = null
|
||||
let previewObserver = null
|
||||
|
||||
onMounted(async () => {
|
||||
viewportSize.width = window.innerWidth
|
||||
viewportSize.height = window.innerHeight
|
||||
window.addEventListener('pointermove', handlePointerMove)
|
||||
window.addEventListener('pointerup', endPointerInteraction)
|
||||
window.addEventListener('resize', syncPreviewRect)
|
||||
await nextTick()
|
||||
syncPreviewRect()
|
||||
if (picturePreview.value && typeof ResizeObserver !== 'undefined') {
|
||||
previewObserver = new ResizeObserver(() => syncPreviewRect())
|
||||
previewObserver.observe(picturePreview.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('pointermove', handlePointerMove)
|
||||
window.removeEventListener('pointerup', endPointerInteraction)
|
||||
window.removeEventListener('resize', syncPreviewRect)
|
||||
previewObserver?.disconnect()
|
||||
clearPreviewObjectUrl()
|
||||
})
|
||||
|
||||
watch(editorImage, async (image) => {
|
||||
if (!image) return
|
||||
await nextTick()
|
||||
syncPreviewRect()
|
||||
initializeCrop()
|
||||
})
|
||||
|
||||
const clearPreviewObjectUrl = () => {
|
||||
if (!previewObjectUrl.value) return
|
||||
URL.revokeObjectURL(previewObjectUrl.value)
|
||||
previewObjectUrl.value = null
|
||||
}
|
||||
|
||||
const resetEditor = () => {
|
||||
clearPreviewObjectUrl()
|
||||
editorImage.value = null
|
||||
editorImageUrl.value = ''
|
||||
cropRect.x = 0
|
||||
cropRect.y = 0
|
||||
cropRect.size = 0
|
||||
errorMessage.value = ''
|
||||
if (pictureInput.value) pictureInput.value.value = ''
|
||||
}
|
||||
|
||||
const syncPreviewRect = () => {
|
||||
viewportSize.width = window.innerWidth
|
||||
viewportSize.height = window.innerHeight
|
||||
const element = picturePreview.value
|
||||
if (!element) return
|
||||
previewRect.width = element.clientWidth
|
||||
previewRect.height = element.clientHeight
|
||||
}
|
||||
|
||||
const previewStyle = computed(() => {
|
||||
const image = editorImage.value
|
||||
if (!image) {
|
||||
const size = Math.min(viewportSize.width * 0.72, viewportSize.height * 0.42, 352)
|
||||
return {
|
||||
width: `${Math.max(160, Math.round(size))}px`,
|
||||
height: `${Math.max(160, Math.round(size))}px`
|
||||
}
|
||||
}
|
||||
|
||||
const maxWidth = Math.min(viewportSize.width * 0.88, 928)
|
||||
const maxHeight = Math.min(viewportSize.height * 0.62, 620)
|
||||
const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight)
|
||||
|
||||
return {
|
||||
width: `${Math.max(1, Math.round(image.naturalWidth * scale))}px`,
|
||||
height: `${Math.max(1, Math.round(image.naturalHeight * scale))}px`
|
||||
}
|
||||
})
|
||||
|
||||
const displayMetrics = computed(() => {
|
||||
const image = editorImage.value
|
||||
if (!image || !previewRect.width || !previewRect.height) return null
|
||||
const scale = Math.min(previewRect.width / image.naturalWidth, previewRect.height / image.naturalHeight)
|
||||
const width = image.naturalWidth * scale
|
||||
const height = image.naturalHeight * scale
|
||||
return {
|
||||
x: (previewRect.width - width) / 2,
|
||||
y: (previewRect.height - height) / 2,
|
||||
width,
|
||||
height
|
||||
}
|
||||
})
|
||||
|
||||
const editorImageStyle = computed(() => {
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics) return null
|
||||
return {
|
||||
width: `${metrics.width}px`,
|
||||
height: `${metrics.height}px`,
|
||||
left: `${metrics.x}px`,
|
||||
top: `${metrics.y}px`
|
||||
}
|
||||
})
|
||||
|
||||
const editorOverlayStyle = computed(() => {
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics || !cropRect.size) return editorImageStyle.value
|
||||
|
||||
const left = cropRect.x
|
||||
const top = cropRect.y
|
||||
const right = cropRect.x + cropRect.size
|
||||
const bottom = cropRect.y + cropRect.size
|
||||
|
||||
return {
|
||||
...editorImageStyle.value,
|
||||
clipPath: `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px)`
|
||||
}
|
||||
})
|
||||
|
||||
const cropBoxStyle = computed(() => {
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics || !cropRect.size) return null
|
||||
return {
|
||||
left: `${metrics.x + cropRect.x}px`,
|
||||
top: `${metrics.y + cropRect.y}px`,
|
||||
width: `${cropRect.size}px`,
|
||||
height: `${cropRect.size}px`
|
||||
}
|
||||
})
|
||||
|
||||
const initializeCrop = () => {
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics) return
|
||||
const size = Math.min(metrics.width, metrics.height)
|
||||
cropRect.size = size
|
||||
cropRect.x = (metrics.width - size) / 2
|
||||
cropRect.y = (metrics.height - size) / 2
|
||||
}
|
||||
|
||||
const triggerPictureSelect = () => {
|
||||
pictureInput.value?.click()
|
||||
}
|
||||
|
||||
const handlePictureSelected = async (event) => {
|
||||
const nextFile = event.target.files?.[0] || null
|
||||
resetEditor()
|
||||
if (!nextFile) return
|
||||
|
||||
previewObjectUrl.value = URL.createObjectURL(nextFile)
|
||||
editorImageUrl.value = previewObjectUrl.value
|
||||
const image = new Image()
|
||||
image.decoding = 'async'
|
||||
image.src = editorImageUrl.value
|
||||
try {
|
||||
await image.decode()
|
||||
editorImage.value = image
|
||||
} catch {
|
||||
errorMessage.value = 'Failed to load image'
|
||||
resetEditor()
|
||||
}
|
||||
}
|
||||
|
||||
const startMove = (event) => {
|
||||
if (!displayMetrics.value || saving.value) return
|
||||
event.preventDefault()
|
||||
dragState = {
|
||||
mode: 'move',
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
initialX: cropRect.x,
|
||||
initialY: cropRect.y,
|
||||
initialSize: cropRect.size
|
||||
}
|
||||
}
|
||||
|
||||
const startResize = (event, handle) => {
|
||||
if (!displayMetrics.value || saving.value) return
|
||||
event.preventDefault()
|
||||
dragState = {
|
||||
mode: 'resize',
|
||||
handle,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
initialX: cropRect.x,
|
||||
initialY: cropRect.y,
|
||||
initialSize: cropRect.size
|
||||
}
|
||||
}
|
||||
|
||||
const handlePointerMove = (event) => {
|
||||
if (!dragState) return
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics) return
|
||||
|
||||
const dx = event.clientX - dragState.startX
|
||||
const dy = event.clientY - dragState.startY
|
||||
|
||||
if (dragState.mode === 'move') {
|
||||
cropRect.x = Math.max(0, Math.min(metrics.width - dragState.initialSize, dragState.initialX + dx))
|
||||
cropRect.y = Math.max(0, Math.min(metrics.height - dragState.initialSize, dragState.initialY + dy))
|
||||
return
|
||||
}
|
||||
|
||||
const directionMap = {
|
||||
nw: { deltaX: -1, deltaY: -1 },
|
||||
ne: { deltaX: 1, deltaY: -1 },
|
||||
sw: { deltaX: -1, deltaY: 1 },
|
||||
se: { deltaX: 1, deltaY: 1 }
|
||||
}
|
||||
const direction = directionMap[dragState.handle]
|
||||
if (!direction) return
|
||||
|
||||
const delta = Math.max(dx * direction.deltaX, dy * direction.deltaY)
|
||||
const nextSize = Math.max(
|
||||
MIN_CROP_SIZE,
|
||||
Math.min(getResizeLimit(metrics, dragState), dragState.initialSize + delta)
|
||||
)
|
||||
|
||||
applyResize(dragState, nextSize)
|
||||
}
|
||||
|
||||
const endPointerInteraction = () => {
|
||||
dragState = null
|
||||
}
|
||||
|
||||
const getResizeLimit = (metrics, state) => {
|
||||
const { initialX, initialY, initialSize, handle } = state
|
||||
|
||||
if (handle === 'nw') return Math.min(initialX + initialSize, initialY + initialSize)
|
||||
if (handle === 'ne') return Math.min(metrics.width - initialX, initialY + initialSize)
|
||||
if (handle === 'sw') return Math.min(initialX + initialSize, metrics.height - initialY)
|
||||
return Math.min(metrics.width - initialX, metrics.height - initialY)
|
||||
}
|
||||
|
||||
const applyResize = (state, size) => {
|
||||
const { initialX, initialY, initialSize, handle } = state
|
||||
|
||||
if (handle === 'nw') {
|
||||
cropRect.x = initialX + initialSize - size
|
||||
cropRect.y = initialY + initialSize - size
|
||||
cropRect.size = size
|
||||
return
|
||||
}
|
||||
|
||||
if (handle === 'ne') {
|
||||
cropRect.x = initialX
|
||||
cropRect.y = initialY + initialSize - size
|
||||
cropRect.size = size
|
||||
return
|
||||
}
|
||||
|
||||
if (handle === 'sw') {
|
||||
cropRect.x = initialX + initialSize - size
|
||||
cropRect.y = initialY
|
||||
cropRect.size = size
|
||||
return
|
||||
}
|
||||
|
||||
cropRect.x = initialX
|
||||
cropRect.y = initialY
|
||||
cropRect.size = size
|
||||
}
|
||||
|
||||
const renderPictureBlob = async () => {
|
||||
const image = editorImage.value
|
||||
if (!image) throw new Error('No image selected')
|
||||
const metrics = displayMetrics.value
|
||||
if (!metrics || !cropRect.size) throw new Error('Crop selection unavailable')
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = AVATAR_UPLOAD_SIZE
|
||||
canvas.height = AVATAR_UPLOAD_SIZE
|
||||
const context = canvas.getContext('2d')
|
||||
if (!context) throw new Error('Canvas unavailable')
|
||||
|
||||
const sourceScale = image.naturalWidth / metrics.width
|
||||
const sourceX = cropRect.x * sourceScale
|
||||
const sourceY = cropRect.y * sourceScale
|
||||
const sourceSize = cropRect.size * sourceScale
|
||||
context.drawImage(image, sourceX, sourceY, sourceSize, sourceSize, 0, 0, AVATAR_UPLOAD_SIZE, AVATAR_UPLOAD_SIZE)
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
reject(new Error('Failed to export cropped picture'))
|
||||
return
|
||||
}
|
||||
resolve(blob)
|
||||
}, 'image/webp', 0.9)
|
||||
})
|
||||
}
|
||||
|
||||
const reloadPictureFromCache = async () => {
|
||||
const response = await fetch(props.endpoint, {
|
||||
method: 'GET',
|
||||
credentials: 'same-origin',
|
||||
cache: 'reload'
|
||||
})
|
||||
if (!response.ok) throw new Error('Failed to refresh profile picture')
|
||||
}
|
||||
|
||||
const savePicture = async () => {
|
||||
try {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
const blob = await renderPictureBlob()
|
||||
const formData = new FormData()
|
||||
formData.append('file', blob, 'profile.webp')
|
||||
await apiJson(props.endpoint, { method: 'PUT', body: formData })
|
||||
await reloadPictureFromCache()
|
||||
authStore.showMessage('Profile picture updated.', 'success', 3000)
|
||||
emit('updated')
|
||||
closeEditor()
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || 'Failed to update profile picture'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const removePicture = async () => {
|
||||
try {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
await apiJson(props.endpoint, { method: 'DELETE' })
|
||||
authStore.showMessage('Profile picture removed.', 'success', 3000)
|
||||
emit('updated')
|
||||
closeEditor()
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || 'Failed to remove profile picture'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const closeEditor = () => {
|
||||
resetEditor()
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-picture-editor-input { display: none; }
|
||||
.profile-picture-editor-preview { position: relative; display: flex; justify-content: center; align-items: center; width: auto; max-width: min(58rem, 88vw); min-height: 0; margin: 0 auto; overflow: visible; }
|
||||
.profile-picture-editor-trigger { min-width: 0; }
|
||||
.profile-picture-editor-image { position: absolute; user-select: none; pointer-events: none; object-fit: contain; }
|
||||
.profile-picture-editor-image--overlay { filter: grayscale(0.45) saturate(0.7) brightness(0.68); }
|
||||
.profile-picture-editor-crop { position: absolute; border: 2px solid white; cursor: move; touch-action: none; }
|
||||
.profile-picture-editor-guides { position: absolute; inset: 0; pointer-events: none; }
|
||||
.profile-picture-editor-guide { position: absolute; border-color: rgba(255, 255, 255, 0.52); }
|
||||
.profile-picture-editor-guide--circle { inset: 0; border: 1.5px solid rgba(255, 255, 255, 0.62); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
|
||||
.profile-picture-editor-guide--eyes { left: 18%; right: 18%; top: 38%; border-top: 1.5px solid rgba(255, 255, 255, 0.56); }
|
||||
.profile-picture-editor-guide--cheek-left { top: 24%; bottom: 18%; left: 24%; border-left: 1.5px solid rgba(255, 255, 255, 0.48); }
|
||||
.profile-picture-editor-guide--cheek-right { top: 24%; bottom: 18%; right: 24%; border-right: 1.5px solid rgba(255, 255, 255, 0.48); }
|
||||
.profile-picture-editor-handle { position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid white; background: var(--color-accent); padding: 0; }
|
||||
.profile-picture-editor-handle--nw { left: -0.55rem; top: -0.55rem; cursor: nwse-resize; }
|
||||
.profile-picture-editor-handle--ne { right: -0.55rem; top: -0.55rem; cursor: nesw-resize; }
|
||||
.profile-picture-editor-handle--sw { left: -0.55rem; bottom: -0.55rem; cursor: nesw-resize; }
|
||||
.profile-picture-editor-handle--se { right: -0.55rem; bottom: -0.55rem; cursor: nwse-resize; }
|
||||
:deep(.modal-panel--avatar) { width: fit-content; max-width: min(58rem, 94vw); }
|
||||
@media (max-width: 720px) {
|
||||
.profile-picture-editor-preview { max-width: 100%; }
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,9 @@
|
||||
v-if="authStore.userInfo?.user"
|
||||
ref="userBasicInfo"
|
||||
:name="authStore.userInfo.user.display_name"
|
||||
:avatar-url="authStore.userInfo.user.avatar_url"
|
||||
:avatar-render-version="avatarRenderVersion"
|
||||
avatar-clickable
|
||||
:email="authStore.userInfo.user.email"
|
||||
:preferred_username="authStore.userInfo.user.preferred_username"
|
||||
:telephone="authStore.userInfo.user.telephone"
|
||||
@@ -26,6 +29,7 @@
|
||||
:role-name="authStore.userInfo.role.display_name"
|
||||
update-endpoint="/auth/api/user/info"
|
||||
@saved="authStore.loadUserInfo()"
|
||||
@avatar-click="openAvatarDialog"
|
||||
@edit="openEditDialog"
|
||||
@keydown="handleUserInfoKeydown"
|
||||
>
|
||||
@@ -131,6 +135,15 @@
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<ProfilePictureEditorModal
|
||||
v-if="showAvatarDialog && currentAvatarEndpoint"
|
||||
:endpoint="currentAvatarEndpoint"
|
||||
:picture-url="authStore.userInfo?.user?.avatar_url"
|
||||
:render-version="avatarRenderVersion"
|
||||
@close="closeAvatarDialog"
|
||||
@updated="handleProfilePictureUpdated"
|
||||
/>
|
||||
|
||||
<RegistrationLinkModal
|
||||
v-if="showRegLink"
|
||||
endpoint="/auth/api/user/create-link"
|
||||
@@ -144,6 +157,7 @@
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import CredentialList from '@/components/CredentialList.vue'
|
||||
import ProfilePictureEditorModal from '@/components/ProfilePictureEditorModal.vue'
|
||||
import ThemeSelector from '@/components/ThemeSelector.vue'
|
||||
import UserBasicInfo from '@/components/UserBasicInfo.vue'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
@@ -160,11 +174,13 @@ import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@
|
||||
const authStore = useAuthStore()
|
||||
const updateInterval = ref(null)
|
||||
const showEditDialog = ref(false)
|
||||
const showAvatarDialog = ref(false)
|
||||
const showRegLink = ref(false)
|
||||
const editName = ref('')
|
||||
const editEmail = ref('')
|
||||
const editUsername = ref('')
|
||||
const editTelephone = ref('')
|
||||
const avatarRenderVersion = ref(0)
|
||||
const saving = ref(false)
|
||||
const editError = ref('')
|
||||
const hoveredCredentialUuid = ref(null)
|
||||
@@ -176,14 +192,15 @@ const credentialButtons = ref(null)
|
||||
const sessionList = ref(null)
|
||||
const logoutButtons = ref(null)
|
||||
const breadcrumbs = ref(null)
|
||||
const userBasicInfo = ref(null)
|
||||
const userInfoSection = ref(null)
|
||||
|
||||
// Check if any modal/dialog is open (blocks arrow key navigation)
|
||||
const hasActiveModal = computed(() => showEditDialog.value || showRegLink.value)
|
||||
const hasActiveModal = computed(() => showEditDialog.value || showAvatarDialog.value || showRegLink.value)
|
||||
|
||||
watch(showEditDialog, (open) => {
|
||||
if (!open) return
|
||||
if (!open) {
|
||||
return
|
||||
}
|
||||
const user = authStore.userInfo.user
|
||||
editName.value = user.display_name ?? ''
|
||||
editEmail.value = user.email ?? ''
|
||||
@@ -196,7 +213,28 @@ onMounted(() => {
|
||||
updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
|
||||
})
|
||||
|
||||
onUnmounted(() => { if (updateInterval.value) clearInterval(updateInterval.value) })
|
||||
onUnmounted(() => {
|
||||
if (updateInterval.value) clearInterval(updateInterval.value)
|
||||
})
|
||||
|
||||
const currentAvatarEndpoint = computed(() => {
|
||||
const userUuid = authStore.userInfo?.user?.uuid
|
||||
if (!userUuid) return null
|
||||
return `/auth/api/user/${userUuid}/profile.webp`
|
||||
})
|
||||
|
||||
const openAvatarDialog = () => {
|
||||
showAvatarDialog.value = true
|
||||
}
|
||||
|
||||
const closeAvatarDialog = () => {
|
||||
showAvatarDialog.value = false
|
||||
}
|
||||
|
||||
const handleProfilePictureUpdated = async () => {
|
||||
await authStore.loadUserInfo()
|
||||
avatarRenderVersion.value += 1
|
||||
}
|
||||
|
||||
const addNewCredential = async () => {
|
||||
try {
|
||||
@@ -245,7 +283,7 @@ const handleBreadcrumbKeydown = (event) => {
|
||||
if (direction === 'down') {
|
||||
event.preventDefault()
|
||||
// Move to user info section - always focus edit button first
|
||||
focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
|
||||
focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
|
||||
}
|
||||
// ArrowUp at the top does nothing
|
||||
}
|
||||
@@ -257,7 +295,7 @@ const handleUserInfoKeydown = (event) => {
|
||||
if (!direction) return
|
||||
|
||||
event.preventDefault()
|
||||
const itemSelector = '.mini-btn, .pairing-input'
|
||||
const itemSelector = '.user-picture-btn, .mini-btn, .pairing-input'
|
||||
|
||||
if (direction === 'left' || direction === 'right') {
|
||||
navigateButtonRow(userInfoSection.value, event.target, direction, { itemSelector })
|
||||
@@ -278,7 +316,7 @@ const handleCredentialNavigateOut = (direction) => {
|
||||
focusPreferredButton(credentialButtons.value)
|
||||
} else if (direction === 'up' || direction === 'left') {
|
||||
// Focus user info section - always focus edit button first
|
||||
focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
|
||||
focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -399,6 +437,7 @@ const saveProfile = async () => {
|
||||
try {
|
||||
editError.value = ''
|
||||
saving.value = true
|
||||
let changed = false
|
||||
const body = {}
|
||||
if (name !== user.display_name) body.display_name = name
|
||||
if (emailVal !== (user.email || null)) body.email = emailVal
|
||||
@@ -406,6 +445,9 @@ const saveProfile = async () => {
|
||||
if (telephoneVal !== (user.telephone || null)) body.telephone = telephoneVal
|
||||
if (Object.keys(body).length) {
|
||||
await apiJson('/auth/api/user/info', { method: 'PATCH', body })
|
||||
changed = true
|
||||
}
|
||||
if (changed) {
|
||||
await authStore.loadUserInfo()
|
||||
authStore.showMessage('Profile updated!', 'success', 3000)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
<template>
|
||||
<div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
|
||||
<div class="user-info-content">
|
||||
<div class="user-picture">
|
||||
<span>👤</span>
|
||||
</div>
|
||||
<ProfilePicture
|
||||
:src="avatarUrl"
|
||||
:render-version="avatarRenderVersion"
|
||||
:clickable="avatarClickable"
|
||||
:loading="loading"
|
||||
:title="avatarClickable ? 'Change profile picture' : ''"
|
||||
width="5.25rem"
|
||||
height="5.25rem"
|
||||
radius="var(--radius-sm)"
|
||||
fallback-size="2.8em"
|
||||
class="user-picture"
|
||||
:class="avatarClickable ? 'user-picture-btn' : ''"
|
||||
@click="emit('avatar-click')"
|
||||
/>
|
||||
<h3 class="user-name-heading">
|
||||
<span class="user-name-row">
|
||||
<span class="display-name" :title="name">{{ name }}</span>
|
||||
@@ -42,11 +53,13 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import ProfilePicture from '@/components/ProfilePicture.vue'
|
||||
import { formatDate } from '@/utils/helpers'
|
||||
|
||||
const props = defineProps({
|
||||
name: { type: String, required: true },
|
||||
avatarUrl: { type: String, default: null },
|
||||
avatarRenderVersion: { type: [Number, String], default: 0 },
|
||||
email: { type: String, default: null },
|
||||
preferred_username: { type: String, default: null },
|
||||
telephone: { type: String, default: null },
|
||||
@@ -55,14 +68,13 @@ const props = defineProps({
|
||||
lastSeen: { type: [String, Number, Date], default: null },
|
||||
updateEndpoint: { type: String, default: null },
|
||||
canEdit: { type: Boolean, default: true },
|
||||
avatarClickable: { type: Boolean, default: false },
|
||||
loading: { type: Boolean, default: false },
|
||||
orgDisplayName: { type: String, default: '' },
|
||||
roleName: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['saved', 'edit'])
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const emit = defineEmits(['saved', 'edit', 'avatar-click'])
|
||||
const userLoaded = computed(() => !!props.name)
|
||||
</script>
|
||||
|
||||
@@ -96,12 +108,12 @@ const userLoaded = computed(() => !!props.name)
|
||||
grid-template-areas:
|
||||
"picture heading fields"
|
||||
"picture org fields"
|
||||
". info info";
|
||||
"picture info info";
|
||||
gap: 0 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-picture { grid-area: picture; display: flex; align-items: flex-start; font-size: 2em; line-height: 1; }
|
||||
:deep(.user-picture) { grid-area: picture; align-self: stretch; }
|
||||
.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; min-width: 0; }
|
||||
.org-role-sub { grid-area: org; display: flex; flex-direction: column; min-width: 0; }
|
||||
.org-line { font-size: .7rem; font-weight: 600; line-height: 1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
Reference in New Issue
Block a user