feat: add file name and mimetype icon to heading

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

src/components/GuestNamePicker.vue

@@ -4,7 +4,10 @@
 		size="small"
 		:show.sync="show">
 		<div class="modal__content">
-			<h2>{{ t('richdocuments', 'Guest name') }}</h2>
+			<h3>
+				<NcIconSvgWrapper :inline="true" :svg="mimeTypeIcon" :size="35" />
+				{{ t('richdocuments', fileName) }}
+			</h3>
 
 			<p>
 				{{ t('richdocuments', `Please enter the guest name you wish to use before proceeding to the document.
@@ -29,8 +32,9 @@
 </template>
 
 <script>
-import { NcModal, NcButton, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcIconSvgWrapper, NcModal, NcTextField } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
+import axios from '@nextcloud/axios'
 import { setGuestName } from '../helpers/guestName.js'
 
 export default {
@@ -40,6 +44,7 @@ export default {
 		NcModal,
 		NcButton,
 		NcTextField,
+		NcIconSvgWrapper,
 	},
 
 	props: {
@@ -52,10 +57,29 @@ export default {
 	data() {
 		return {
 			guestName: '',
+			fileName: '',
+			mimeTypeIcon: null,
 			show: true,
 		}
 	},
 
+	async mounted() {
+		const fileName = document.getElementById('filename').value
+		const mimeTypeIcon = async () => {
+			const url = document.getElementById('mimetypeIcon').value
+			const res = await axios.get(url)
+
+			if (res.status === 200) {
+				return res.data
+			} else {
+				return ''
+			}
+		}
+
+		this.fileName = fileName
+		this.mimeTypeIcon = await mimeTypeIcon()
+	},
+
 	methods: {
 		t,
 		setGuestName(guestName) {