Initial commit
This commit is contained in:
83
src/components/reader/ReaderBody.vue
Normal file
83
src/components/reader/ReaderBody.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { EmailSanitizer, SecurityLevel } from '@/utile/emailSanitizer'
|
||||
|
||||
interface Props {
|
||||
messageBody: string
|
||||
isHtml: boolean
|
||||
securityLevel: SecurityLevel
|
||||
allowImages: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Sanitize HTML content for security
|
||||
const sanitizedMessageBody = computed(() => {
|
||||
if (!props.messageBody || !props.isHtml) return props.messageBody
|
||||
|
||||
return EmailSanitizer.sanitize(props.messageBody, {
|
||||
securityLevel: props.securityLevel,
|
||||
allowImages: props.allowImages,
|
||||
allowExternalLinks: true,
|
||||
allowStyles: true
|
||||
})
|
||||
})
|
||||
|
||||
// Iframe reference for sandboxed HTML rendering
|
||||
const emailFrame = ref<HTMLIFrameElement | null>(null)
|
||||
|
||||
// Resize iframe to fit content
|
||||
const resizeIframe = () => {
|
||||
if (emailFrame.value?.contentWindow?.document?.body) {
|
||||
const height = emailFrame.value.contentWindow.document.body.scrollHeight
|
||||
emailFrame.value.style.height = `${height + 20}px`
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes to trigger resize
|
||||
watch(() => props.messageBody, () => {
|
||||
setTimeout(resizeIframe, 100)
|
||||
})
|
||||
|
||||
watch(() => props.allowImages, () => {
|
||||
setTimeout(resizeIframe, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-body pa-6">
|
||||
<!-- HTML body (sandboxed iframe) -->
|
||||
<iframe
|
||||
v-if="isHtml"
|
||||
ref="emailFrame"
|
||||
sandbox="allow-same-origin"
|
||||
class="html-content-frame"
|
||||
:srcdoc="sanitizedMessageBody"
|
||||
@load="resizeIframe"
|
||||
/>
|
||||
|
||||
<!-- Plain text body -->
|
||||
<pre v-else class="text-body-1 text-pre-wrap">{{ messageBody }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-body {
|
||||
background-color: rgb(var(--v-theme-background));
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.html-content-frame {
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: 400px;
|
||||
display: block;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.text-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: inherit;
|
||||
}
|
||||
</style>
|
||||
40
src/components/reader/ReaderEmpty.vue
Normal file
40
src/components/reader/ReaderEmpty.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
compose: []
|
||||
}>()
|
||||
|
||||
const handleCompose = () => {
|
||||
emit('compose')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<v-icon size="96" color="grey-lighten-1">mdi-email-open-outline</v-icon>
|
||||
<div class="text-h5 mt-6 text-medium-emphasis">No message selected</div>
|
||||
<div class="text-body-1 mt-2 text-medium-emphasis">
|
||||
Select a message to read or compose a new one
|
||||
</div>
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="large"
|
||||
class="mt-6"
|
||||
prepend-icon="mdi-pencil"
|
||||
@click="handleCompose"
|
||||
>
|
||||
Compose New Message
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
110
src/components/reader/ReaderHeader.vue
Normal file
110
src/components/reader/ReaderHeader.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { MessageObject } from '@MailManager/models/message'
|
||||
|
||||
interface Props {
|
||||
messageInstance: MessageObject
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (date: Date | string | null | undefined): string => {
|
||||
if (!date) return ''
|
||||
|
||||
const messageDate = new Date(date)
|
||||
return messageDate.toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
})
|
||||
}
|
||||
|
||||
// Format file size for display
|
||||
const formatFileSize = (bytes: number | undefined): string => {
|
||||
if (!bytes) return ''
|
||||
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-header pa-6">
|
||||
<div class="text-h5 mb-4">{{ messageInstance?.subject || '(No subject)' }}</div>
|
||||
|
||||
<div class="d-flex align-center mb-3">
|
||||
<v-avatar size="48" color="primary" class="mr-3">
|
||||
<span class="text-white text-h6">
|
||||
{{ (messageInstance?.from?.label || messageInstance?.from?.address || 'U')[0].toUpperCase() }}
|
||||
</span>
|
||||
</v-avatar>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ messageInstance?.from?.label || messageInstance?.from?.address || 'Unknown Sender' }}
|
||||
</div>
|
||||
<div class="text-caption text-medium-emphasis">
|
||||
{{ formatDate(messageInstance?.date) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipients -->
|
||||
<div v-if="messageInstance?.to && messageInstance?.to.length > 0" class="text-body-2 mb-1">
|
||||
<span class="text-medium-emphasis">To:</span>
|
||||
{{ messageInstance?.to.map(t => t.label || t.address).join(', ') }}
|
||||
</div>
|
||||
|
||||
<div v-if="messageInstance?.cc && messageInstance?.cc.length > 0" class="text-body-2 mb-1">
|
||||
<span class="text-medium-emphasis">Cc:</span>
|
||||
{{ messageInstance?.cc.map(c => c.label || c.address).join(', ') }}
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<div v-if="messageInstance?.attachments && messageInstance?.attachments.length > 0" class="mt-4">
|
||||
<div class="text-body-2 text-medium-emphasis mb-2">
|
||||
Attachments ({{ messageInstance?.attachments.length }})
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip
|
||||
v-for="(attachment, index) in messageInstance?.attachments"
|
||||
:key="index"
|
||||
prepend-icon="mdi-paperclip"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
class="attachment-chip"
|
||||
>
|
||||
<span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
|
||||
<span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
|
||||
({{ formatFileSize(attachment.size) }})
|
||||
</span>
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-header {
|
||||
background-color: rgba(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.attachment-chip {
|
||||
max-width: 300px;
|
||||
|
||||
.attachment-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/components/reader/ReaderToolbar.vue
Normal file
164
src/components/reader/ReaderToolbar.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { EntityInterface } from '@MailManager/types/entity'
|
||||
import type { MessageInterface } from '@MailManager/types/message'
|
||||
import { SecurityLevel } from '@/utile/emailSanitizer'
|
||||
|
||||
interface Props {
|
||||
message: EntityInterface<MessageInterface>
|
||||
isHtml: boolean
|
||||
allowImages: boolean
|
||||
securityLevel: SecurityLevel
|
||||
isSecurityOverridden: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
reply: []
|
||||
forward: []
|
||||
delete: []
|
||||
flag: []
|
||||
toggleImages: []
|
||||
setSecurityLevel: [level: SecurityLevel]
|
||||
}>()
|
||||
|
||||
const securityLevels = [
|
||||
{ value: SecurityLevel.STRICT, title: 'Strict', icon: 'mdi-shield-lock', description: 'Maximum security' },
|
||||
{ value: SecurityLevel.MODERATE, title: 'Moderate', icon: 'mdi-shield-check', description: 'Balanced security' },
|
||||
{ value: SecurityLevel.RELAXED, title: 'Relaxed', icon: 'mdi-shield-off', description: 'Minimal restrictions' }
|
||||
]
|
||||
|
||||
const currentSecurityLevel = computed(() => {
|
||||
return securityLevels.find(l => l.value === props.securityLevel) || securityLevels[1]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-toolbar density="compact" elevation="0" class="message-toolbar">
|
||||
<v-btn
|
||||
icon="mdi-reply"
|
||||
variant="text"
|
||||
@click="emit('reply')"
|
||||
>
|
||||
<v-icon>mdi-reply</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Reply</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
icon="mdi-reply-all"
|
||||
variant="text"
|
||||
@click="emit('reply')"
|
||||
>
|
||||
<v-icon>mdi-reply-all</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Reply All</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
icon="mdi-share"
|
||||
variant="text"
|
||||
@click="emit('forward')"
|
||||
>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Forward</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical class="mx-2" />
|
||||
|
||||
<!-- Image toggle -->
|
||||
<v-btn
|
||||
v-if="isHtml"
|
||||
:icon="allowImages ? 'mdi-image' : 'mdi-image-off'"
|
||||
variant="text"
|
||||
:color="allowImages ? 'primary' : undefined"
|
||||
@click="emit('toggleImages')"
|
||||
>
|
||||
<v-icon>{{ allowImages ? 'mdi-image' : 'mdi-image-off' }}</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">
|
||||
{{ allowImages ? 'Hide Images' : 'Show Images' }} (This Message Only)
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<!-- Security Level Menu -->
|
||||
<v-menu v-if="isHtml" :close-on-content-click="false">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-btn
|
||||
v-bind="menuProps"
|
||||
:icon="currentSecurityLevel.icon"
|
||||
variant="text"
|
||||
:color="isSecurityOverridden ? 'warning' : undefined"
|
||||
>
|
||||
<v-icon>{{ currentSecurityLevel.icon }}</v-icon>
|
||||
<v-badge
|
||||
v-if="isSecurityOverridden"
|
||||
dot
|
||||
color="warning"
|
||||
offset-x="-8"
|
||||
offset-y="8"
|
||||
/>
|
||||
<v-tooltip activator="parent" location="bottom">
|
||||
{{ isSecurityOverridden ? 'Security Override Active' : 'Security Level' }} (This Message Only)
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card min-width="280">
|
||||
<v-card-title class="text-subtitle-1">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Message Security
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<div class="text-caption text-medium-emphasis mb-2">
|
||||
Override security level for this message only
|
||||
</div>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="level in securityLevels"
|
||||
:key="level.value"
|
||||
:active="securityLevel === level.value"
|
||||
@click="emit('setSecurityLevel', level.value)"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon :icon="level.icon" />
|
||||
</template>
|
||||
<v-list-item-title>{{ level.title }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ level.description }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<v-icon v-if="securityLevel === level.value" icon="mdi-check" color="primary" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-alert
|
||||
v-if="isSecurityOverridden"
|
||||
density="compact"
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
class="text-caption mt-3"
|
||||
icon="mdi-alert"
|
||||
>
|
||||
Security override active for this message. Change messages to reset.
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
icon="mdi-dots-vertical"
|
||||
variant="text"
|
||||
>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">More Actions</v-tooltip>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color));
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user