fix: improve on-boarding flow app

backend/migrations/20240209103543_update_app_new.down.sql

@@ -0,0 +1 @@
+-- Add down migration script here

frontend/src/lib/common.ts

@@ -37,6 +37,7 @@ export interface SchemaProperty {
 	properties?: { [name: string]: SchemaProperty }
 	required?: string[]
 	showExpr?: string
+	password?: boolean
 }
 
 export interface ModalSchemaProperty {
@@ -58,6 +59,7 @@ export interface ModalSchemaProperty {
 	schema?: Schema
 	customErrorMessage?: string
 	showExpr?: string
+	password?: boolean
 }
 
 export function modalToSchema(schema: ModalSchemaProperty): SchemaProperty {
@@ -78,7 +80,8 @@ export function modalToSchema(schema: ModalSchemaProperty): SchemaProperty {
 		currency: schema.currency,
 		currencyLocale: schema.currencyLocale,
 		multiselect: schema.multiselect,
-		showExpr: schema.showExpr
+		showExpr: schema.showExpr,
+		password: schema.password
 	}
 }
 export type Schema = {

frontend/src/lib/components/ArgInput.svelte

@@ -607,7 +607,7 @@
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
-						{#if password}
+						{#if password || extra?.['password'] == true}
 							<Password {disabled} bind:password={value} />
 						{:else}
 							{#key extra?.['minRows']}

frontend/src/lib/components/LightweightArgInput.svelte

@@ -17,6 +17,7 @@
 	import DateTimeInput from './DateTimeInput.svelte'
 	import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte'
 	import Multiselect from 'svelte-multiselect'
+	import Password from './Password.svelte'
 
 	export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
 	export let label: string = ''
@@ -395,23 +396,27 @@
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between">
-						<textarea
-							rows="1"
-							bind:this={el}
-							on:focus={(e) => {
-								dispatch('focus')
-							}}
-							use:autosize
-							type="text"
-							class="col-span-10 {valid && error == ''
-								? ''
-								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
-							placeholder={defaultValue ?? ''}
-							bind:value
-							on:pointerdown|stopPropagation={(e) => {
-								dispatch('inputClicked', e)
-							}}
-						/>
+						{#if extra?.['password'] == true}
+							<Password bind:password={value} />
+						{:else}
+							<textarea
+								rows="1"
+								bind:this={el}
+								on:focus={(e) => {
+									dispatch('focus')
+								}}
+								use:autosize
+								type="text"
+								class="col-span-10 {valid && error == ''
+									? ''
+									: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
+								placeholder={defaultValue ?? ''}
+								bind:value
+								on:pointerdown|stopPropagation={(e) => {
+									dispatch('inputClicked', e)
+								}}
+							/>
+						{/if}
 					</div>
 				</div>
 			{/if}

frontend/src/lib/components/SchemaModal.svelte

@@ -59,7 +59,8 @@
 							required: schema.required ?? []
 					  }
 					: undefined,
-			showExpr: schema.showExpr
+			showExpr: schema.showExpr,
+			password: schema.password
 		}
 	}
 
@@ -131,6 +132,7 @@
 		property.multiselect = undefined
 		property.items = undefined
 		property.showExpr = undefined
+		property.password = undefined
 		drawer.closeDrawer()
 	}
 
@@ -217,6 +219,7 @@
 								property.currency = undefined
 								property.currencyLocale = undefined
 								property.multiselect = undefined
+								property.password = undefined
 								if (argType == 'array') {
 									property.items = { type: 'string' }
 								} else {
@@ -280,6 +283,7 @@
 						bind:pattern={property.pattern}
 						bind:enum_={property.enum_}
 						bind:contentEncoding={property.contentEncoding}
+						bind:password={property.password}
 						noExtra
 					/>
 				{:else if property.selectedType == 'array'}

frontend/src/lib/components/StringTypeNarrowing.svelte

@@ -14,7 +14,7 @@
 	export let minRows: number | undefined = undefined
 	export let disableCreate: boolean | undefined = false
 	export let disableVariablePicker: boolean | undefined = false
-
+	export let password: boolean = false
 	export let noExtra = false
 
 	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' = computeKind()
@@ -227,3 +227,16 @@
 		}}
 	/>
 {/if}
+
+{#if kind == 'none' || kind == 'pattern'}
+	<div class="mt-1" />
+	<Toggle
+		size="xs"
+		options={{ right: 'Is Password' }}
+		checked={password}
+		on:change={(e) => {
+			password = e.detail
+		}}
+	/>
+	<div class="mb-4" />
+{/if}

frontend/src/routes/(root)/(logged)/+layout.svelte

@@ -44,22 +44,26 @@
 	let isCollapsed = false
 	let userSettings: UserSettings
 	let superadminSettings: SuperadminSettings
+	let menuHidden = false
 
 	if ($page.status == 404) {
 		goto('/user/login')
 	}
 
-	$: {
+	$: $page.url && onQueryChange()
+
+	function onQueryChange() {
 		let queryWorkspace = $page.url.searchParams.get('workspace')
 		if (queryWorkspace) {
 			$workspaceStore = queryWorkspace
 		}
-	}
 
-	$: if (userSettings && $page.url.hash === USER_SETTINGS_HASH) {
-		userSettings.openDrawer()
-	} else if (superadminSettings && $page.url.hash === SUPERADMIN_SETTINGS_HASH) {
-		superadminSettings.openDrawer()
+		if (userSettings && $page.url.hash === USER_SETTINGS_HASH) {
+			userSettings.openDrawer()
+		} else if (superadminSettings && $page.url.hash === SUPERADMIN_SETTINGS_HASH) {
+			superadminSettings.openDrawer()
+		}
+		menuHidden = $page.url.searchParams.get('nomenubar') === 'true'
 	}
 
 	$: updateUserStore($workspaceStore)
@@ -224,41 +228,159 @@
 		<SuperadminSettings bind:this={superadminSettings} />
 	{/if}
 	<div>
-		{#if !$userStore?.operator}
-			<div
-				class={classNames(
-					'relative md:hidden',
-					menuOpen ? 'z-40' : 'pointer-events-none',
-					devOnly ? 'hidden' : ''
-				)}
-				role="dialog"
-				aria-modal="true"
-			>
+		{#if !menuHidden}
+			{#if !$userStore?.operator}
 				<div
 					class={classNames(
-						'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
-
-						menuOpen ? 'opacity-100' : 'opacity-0'
+						'relative md:hidden',
+						menuOpen ? 'z-40' : 'pointer-events-none',
+						devOnly ? 'hidden' : ''
 					)}
-				/>
-
-				<div class="fixed inset-0 flex z-40">
+					role="dialog"
+					aria-modal="true"
+				>
 					<div
 						class={classNames(
-							'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-300 transform',
-							menuOpen ? 'translate-x-0' : '-translate-x-full'
+							'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
+
+							menuOpen ? 'opacity-100' : 'opacity-0'
+						)}
+					/>
+
+					<div class="fixed inset-0 flex z-40">
+						<div
+							class={classNames(
+								'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-300 transform',
+								menuOpen ? 'translate-x-0' : '-translate-x-full'
+							)}
+						>
+							<div
+								class={classNames(
+									'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-300',
+									menuOpen ? 'opacity-100' : 'opacity-0'
+								)}
+							>
+								<button
+									type="button"
+									on:click={() => {
+										menuOpen = !menuOpen
+									}}
+									class="ml-1 flex items-center justify-center h-8 w-8 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
+								>
+									<svg
+										class="h-6 w-6 text-white"
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2"
+										stroke="currentColor"
+										aria-hidden="true"
+									>
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+									</svg>
+								</button>
+							</div>
+							<div class="dark:bg-[#1e232e] bg-[#202125] h-full !dark">
+								<div
+									class="flex gap-x-2 flex-shrink-0 p-4 font-semibold text-gray-200 w-10"
+									class:w-40={!isCollapsed}
+								>
+									<WindmillIcon white={true} height="20px" width="20px" />
+									{#if !isCollapsed}Windmill{/if}
+								</div>
+
+								<div class="px-2 py-4 space-y-2 border-y border-gray-500">
+									<WorkspaceMenu />
+									<FavoriteMenu {favoriteLinks} />
+								</div>
+
+								<SidebarContent {isCollapsed} />
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div
+					id="sidebar"
+					class={classNames(
+						'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40 ',
+						isCollapsed ? 'md:w-12' : 'md:w-40',
+						devOnly ? '!hidden' : ''
+					)}
+				>
+					<div
+						class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
+					>
+						<button
+							on:click={() => {
+								goto('/')
+							}}
+						>
+							<div
+								class="flex-row flex-shrink-0 px-3.5 py-3.5 text-opacity-70 h-12 flex items-center gap-1.5"
+								class:w-40={!isCollapsed}
+							>
+								<div class:mr-1={!isCollapsed}>
+									<WindmillIcon white={true} height="20px" width="20px" />
+								</div>
+								{#if !isCollapsed}
+									<div class="text-sm mt-0.5 text-white"> Windmill </div>
+								{/if}
+							</div>
+						</button>
+						<div class="px-2 py-4 space-y-2 border-y border-gray-700">
+							<WorkspaceMenu {isCollapsed} />
+							<FavoriteMenu {favoriteLinks} {isCollapsed} />
+						</div>
+
+						<SidebarContent {isCollapsed} />
+
+						<div class="flex-shrink-0 flex px-4 pb-3.5">
+							<button
+								on:click={() => {
+									isCollapsed = !isCollapsed
+								}}
+							>
+								<ArrowLeft
+									size={16}
+									class={classNames(
+										'flex-shrink-0 h-4 w-4 transition-all ease-in-out duration-200 text-white',
+										isCollapsed ? 'rotate-180' : 'rotate-0'
+									)}
+								/>
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<div class="absolute top-2 left-2 z5000">
+					<OperatorMenu {favoriteLinks} />
+				</div>
+			{/if}
+
+			<div
+				class={classNames(
+					'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300  !dark',
+					'opacity-0'
+				)}
+			>
+				<div class={twMerge('fixed inset-0 flex ', '-z-0')}>
+					<div
+						class={classNames(
+							'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-100 transform',
+							'-translate-x-full'
 						)}
 					>
 						<div
 							class={classNames(
-								'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-300',
-								menuOpen ? 'opacity-100' : 'opacity-0'
+								'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-100',
+								'opacity-0'
 							)}
 						>
 							<button
 								type="button"
 								on:click={() => {
-									menuOpen = !menuOpen
+									// menuSlide = !menuSlide
 								}}
 								class="ml-1 flex items-center justify-center h-8 w-8 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
 							>
@@ -294,123 +416,7 @@
 					</div>
 				</div>
 			</div>
-
-			<div
-				id="sidebar"
-				class={classNames(
-					'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40 ',
-					isCollapsed ? 'md:w-12' : 'md:w-40',
-					devOnly ? '!hidden' : ''
-				)}
-			>
-				<div
-					class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
-				>
-					<button
-						on:click={() => {
-							goto('/')
-						}}
-					>
-						<div
-							class="flex-row flex-shrink-0 px-3.5 py-3.5 text-opacity-70 h-12 flex items-center gap-1.5"
-							class:w-40={!isCollapsed}
-						>
-							<div class:mr-1={!isCollapsed}>
-								<WindmillIcon white={true} height="20px" width="20px" />
-							</div>
-							{#if !isCollapsed}
-								<div class="text-sm mt-0.5 text-white"> Windmill </div>
-							{/if}
-						</div>
-					</button>
-					<div class="px-2 py-4 space-y-2 border-y border-gray-700">
-						<WorkspaceMenu {isCollapsed} />
-						<FavoriteMenu {favoriteLinks} {isCollapsed} />
-					</div>
-
-					<SidebarContent {isCollapsed} />
-
-					<div class="flex-shrink-0 flex px-4 pb-3.5">
-						<button
-							on:click={() => {
-								isCollapsed = !isCollapsed
-							}}
-						>
-							<ArrowLeft
-								size={16}
-								class={classNames(
-									'flex-shrink-0 h-4 w-4 transition-all ease-in-out duration-200 text-white',
-									isCollapsed ? 'rotate-180' : 'rotate-0'
-								)}
-							/>
-						</button>
-					</div>
-				</div>
-			</div>
-		{:else}
-			<div class="absolute top-2 left-2 z5000">
-				<OperatorMenu {favoriteLinks} />
-			</div>
 		{/if}
-
-		<div
-			class={classNames(
-				'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300  !dark',
-				'opacity-0'
-			)}
-		>
-			<div class={twMerge('fixed inset-0 flex ', '-z-0')}>
-				<div
-					class={classNames(
-						'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-100 transform',
-						'-translate-x-full'
-					)}
-				>
-					<div
-						class={classNames(
-							'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-100',
-							'opacity-0'
-						)}
-					>
-						<button
-							type="button"
-							on:click={() => {
-								// menuSlide = !menuSlide
-							}}
-							class="ml-1 flex items-center justify-center h-8 w-8 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
-						>
-							<svg
-								class="h-6 w-6 text-white"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="2"
-								stroke="currentColor"
-								aria-hidden="true"
-							>
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-							</svg>
-						</button>
-					</div>
-					<div class="dark:bg-[#1e232e] bg-[#202125] h-full !dark">
-						<div
-							class="flex gap-x-2 flex-shrink-0 p-4 font-semibold text-gray-200 w-10"
-							class:w-40={!isCollapsed}
-						>
-							<WindmillIcon white={true} height="20px" width="20px" />
-							{#if !isCollapsed}Windmill{/if}
-						</div>
-
-						<div class="px-2 py-4 space-y-2 border-y border-gray-500">
-							<WorkspaceMenu />
-							<FavoriteMenu {favoriteLinks} />
-						</div>
-
-						<SidebarContent {isCollapsed} />
-					</div>
-				</div>
-			</div>
-		</div>
 		<div
 			id="content"
 			class={classNames(

frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte

@@ -21,7 +21,7 @@
 		and enable hub resource type sync
 	</p>
 	<div class="flex flex-row justify-between pt-4 gap-x-1">
-		<Button color="dark" variant="border" on:click={decline}>Skip setup</Button>
-		<Button color="dark" on:click={startSetup}>Setup</Button>
+		<Button color="light" size="xs2" variant="contained" on:click={decline}>Skip</Button>
+		<Button color="dark" size="lg" on:click={startSetup}>Setup</Button>
 	</div>
 </CenteredModal>

frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte

@@ -13,7 +13,7 @@
 	</p>
 	<Button
 		on:click={() => {
-			goto('/apps/get/g/all/setup_app')
+			goto('/apps/get/g/all/setup_app?nomenubar=true')
 		}}>Finish Setup</Button
 	>
 </CenteredModal>