fix: allow user resources in app to work within iframes

frontend/src/lib/components/AppConnectInner.svelte

@@ -161,11 +161,14 @@
 	}
 
 	function popupListener(event) {
+		console.log('popupListener', event.data, event.origin, window.location.origin)
 		let data = event.data
-		if (event.origin !== window.location.origin) {
+		if (event.origin == null || event.origin !== window.location.origin) {
 			return
 		}
 
+		window.removeEventListener('message', popupListener)
+
 		if (data.type === 'error') {
 			sendUserToast(event.data.error, true)
 			step = 2
@@ -212,7 +215,7 @@
 			// if (!newPageOAuth) {
 			// 	window.location.href = url.toString()
 			// } else {
-			window.addEventListener('message', popupListener, { once: true })
+			window.addEventListener('message', popupListener)
 			window.open(url.toString(), '_blank', 'popup=true')
 			step += 1
 

frontend/src/lib/components/Login.svelte

@@ -173,6 +173,7 @@
 		if (data.type === 'error') {
 			sendUserToast(event.data.error, true)
 		} else if (data.type === 'success') {
+			window.removeEventListener('message', popupListener)
 			dispatch('login')
 		}
 	}
@@ -187,7 +188,7 @@
 		let url = base + '/api/oauth/login/' + provider
 		if (popup) {
 			localStorage.setItem('closeUponLogin', 'true')
-			window.addEventListener('message', popupListener, { once: true })
+			window.addEventListener('message', popupListener)
 			window.open(url, '_blank', 'popup')
 		} else {
 			window.location.href = url

frontend/src/lib/components/ResourcePicker.svelte

@@ -39,7 +39,7 @@
 	let collection = valueSelect ? [valueSelect] : []
 
 	export async function askNewResource() {
-		appConnect?.open?.(resourceType)
+		appConnect?.open?.(resourceType, expressOAuthSetup)
 	}
 
 	async function loadResources(resourceType: string | undefined) {

frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte

@@ -15,6 +15,7 @@
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
+	import { twMerge } from 'tailwind-merge'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -36,6 +37,15 @@
 		result: undefined as string | undefined
 	})
 
+	let css = initCss($app.css?.['userresourcecomponent'], customCss)
+
+	$: classInput = twMerge(
+		'windmillapp w-full px-2',
+		css?.input?.class ?? '',
+		'wm-input',
+		'wm-user-resource-select'
+	)
+
 	let value: string | undefined = outputs.result.peak()?.replace('$res:', '')
 
 	value && assignValue(outputs.result.peak())
@@ -66,8 +76,6 @@
 		}
 	}
 
-	let css = initCss($app.css?.['userresourcecomponent'], customCss)
-
 	let resourcePicker: ResourcePicker | undefined = undefined
 </script>
 
@@ -93,7 +101,10 @@
 <InitializeComponent {id} />
 {#if render}
 	<AlignWrapper {render} {verticalAlignment}>
-		<div class="relative w-full">
+		<div
+			class="relative w-full {classInput}',
+"
+		>
 			<ResourcePicker
 				expressOAuthSetup={resolvedConfig.expressOauthSetup}
 				bind:this={resourcePicker}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -2265,7 +2265,7 @@ This is a paragraph.
 		documentationLink: `${documentationBaseUrl}/resource_select`,
 		dims: '2:1-3:1' as AppComponentDimensions,
 		customCss: {
-			input: { style: '' }
+			input: { style: '', class: '' }
 		},
 		initialData: {
 			verticalAlignment: 'center',

frontend/src/lib/components/apps/editor/componentsPanel/cssUtils.ts

@@ -27,6 +27,7 @@ export const authorizedClassnames = [
 	'wm-currency-input',
 	'wm-date-input',
 	'wm-text-input',
+	'wm-user-resource-select',
 	'wm-html',
 	'wm-table-container',
 	'wm-table-header',
@@ -335,6 +336,17 @@ export const customisationByComponent: Customisation[] = [
 		selectors: [{ selector: '.wm-text-input', comment: 'Text component', customCssKey: 'input' }],
 		variables: []
 	},
+	{
+		components: ['userresourcecomponent'],
+		selectors: [
+			{
+				selector: '.wm-user-resource-select',
+				comment: 'User resource select',
+				customCssKey: 'input'
+			}
+		],
+		variables: []
+	},
 	{
 		components: ['htmlcomponent'],
 		selectors: [{ selector: '.wm-html', comment: 'HTML component', customCssKey: 'container' }],

frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte

@@ -5,6 +5,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import { sendUserToast } from '$lib/toast'
 
 	let client_name = $page.params.client_name
 	let error = $page.url.searchParams.get('error')
@@ -24,6 +25,7 @@
 					clientName: client_name,
 					requestBody: { code, state }
 				})
+				sendUserToast('successful', false)
 				window.opener.postMessage({ type: 'success', res, resource_type: client_name }, '*')
 				// goto(`/resources?resource_type=${client_name}`)
 			} catch (e) {

frontend/vite.config.js

@@ -2,7 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite'
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import circleDependency from 'vite-plugin-circular-dependency'
-import mkcert from 'vite-plugin-mkcert'
+// import mkcert from 'vite-plugin-mkcert'
 
 const file = fileURLToPath(new URL('package.json', import.meta.url))
 const json = readFileSync(file, 'utf8')
@@ -11,7 +11,7 @@ const version = JSON.parse(json)
 /** @type {import('vite').UserConfig} */
 const config = {
 	server: {
-		https: true,
+		https: false,
 		port: 3000,
 		proxy: {
 			'^/api/.*': {
@@ -34,7 +34,7 @@ const config = {
 	preview: {
 		port: 3000
 	},
-	plugins: [mkcert(), sveltekit(), circleDependency({ circleImportThrowErr: false })],
+	plugins: [sveltekit(), circleDependency({ circleImportThrowErr: false })],
 	define: {
 		__pkg__: version
 	},