From 4662a584da964381ab07db6811af95194d8914c3 Mon Sep 17 00:00:00 2001
From: reecelikesramen <3149587+reecelikesramen@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:48:25 -0600
Subject: [PATCH] Matched setup page to style, CSP broke build so reverting to
 null, also i18n isn't working on setup page right now

---
 src-tauri/tauri.conf.json                     |  2 +-
 .../chat/Settings/DesktopApp.svelte           |  4 +-
 src/routes/setup/+page.svelte                 | 69 +++++++++++++++----
 svelte.config.js                              |  2 +-
 4 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e4dcf41..967f670 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -45,7 +45,7 @@
 			}
 		],
 		"security": {
-			"csp": "default-src 'self'; connect-src 'self' ws: wss: http: https:;"
+			"csp": null
 		}
 	},
 	"bundle": {
diff --git a/src/lib/components/chat/Settings/DesktopApp.svelte b/src/lib/components/chat/Settings/DesktopApp.svelte
index 3c1e501..77965b8 100644
--- a/src/lib/components/chat/Settings/DesktopApp.svelte
+++ b/src/lib/components/chat/Settings/DesktopApp.svelte
@@ -234,10 +234,10 @@
 						type="text"
 						readonly
 						value={$WEBUI_BASE_URL}
-						class="text-xs px-3 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800 dark:text-gray-200 focus:outline-none pr-24"
+						class="text-xs px-3 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-850 dark:text-gray-200 focus:outline-none pr-24"
 					/>
 					<button
-						class="absolute right-1 flex text-xs items-center space-x-1 mr-1 px-3 py-1 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition"
+						class="absolute right-1 flex text-xs items-center space-x-1 mr-1 px-3 py-1 rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={webUIBaseURLChangeHandler}
 					>
 						<div class="self-center font-medium line-clamp-1">{$i18n.t('Change')}</div>
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index 8069b38..2f10d82 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -3,7 +3,11 @@
 	import { APP_STORE_FILE } from '$lib/app/constants';
 	import { WEBUI_BASE_URL } from '$lib/stores';
 	import { getStore } from '@tauri-apps/plugin-store';
-	import { onMount } from 'svelte';
+	import type { i18n as i18nType } from 'i18next';
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+
+	const i18n: Writable<i18nType> = getContext('i18n');
 
 	console.debug('On setup page');
 
@@ -28,8 +32,10 @@
 		}
 	};
 
+	$: $i18n.t('Sign in');
+
 	onMount(async () => {
-		console.log('SETUP PAGE MOUNTED');
+		console.debug('SETUP PAGE MOUNTED');
 		const store = await getStore(APP_STORE_FILE);
 		for (const key of (await store?.keys()) || []) {
 			if (key !== 'app_config' && key !== 'webui_base_url') {
@@ -47,19 +53,54 @@
 	});
 </script>
 
-<div class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8">
-	<h1 class="text-4xl font-bold text-center">Welcome to Open WebUI</h1>
+<div class="w-full h-screen max-h-[100dvh] relative bg-white dark:bg-gray-900">
+	<!-- <div class="w-full h-full absolute top-0 left-0 bg-white dark:bg-black z-[-1]"></div> -->
 
-	<div class="w-full max-w-md space-y-4">
-		<div class="text-center text-gray-600 dark:text-gray-400">
-			Please enter your instance base URL to get started
-		</div>
+	<div class="w-full h-full flex items-center justify-center">
+		<div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
+			<div class="my-auto pb-10 w-full dark:text-gray-100">
+				<h1 class="text-3xl font-bold mb-8 text-gray-900 dark:text-white">
+					Welcome to Open WebUI
+					<!-- {$i18n.t('Welcome to Open WebUI')} -->
+				</h1>
 
-		<input
-			bind:value={baseUrl}
-			placeholder="http://localhost:3000"
-			class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-			on:keydown={onKeyDown}
-		/>
+				<form
+					class="flex flex-col justify-center space-y-4"
+					on:submit|preventDefault={() => {
+						revealSplashScreen();
+						$WEBUI_BASE_URL = baseUrl;
+					}}
+				>
+					<div class="text-center text-gray-600 dark:text-gray-400 mb-4">
+						Please enter the base URL of your Open WebUI instance to get started
+						<!-- {$i18n.t('Please enter the base URL of your Open WebUI instance to get started')} -->
+					</div>
+
+					<div class="space-y-1">
+						<div class=" text-sm font-medium text-left mb-1">
+							WebUI Base URL
+							<!-- {$i18n.t('WebUI Base URL')} -->
+						</div>
+						<input
+							bind:value={baseUrl}
+							autocorrect="off"
+							autocomplete="url"
+							spellcheck="false"
+							on:keydown={onKeyDown}
+							placeholder="http://localhost:3000"
+							class="my-0.5 w-full text-sm outline-none bg-transparent"
+						/>
+					</div>
+
+					<button
+						class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+						type="submit"
+					>
+						<!-- {$i18n.t('Get Started')} -->
+						Get Started
+					</button>
+				</form>
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/svelte.config.js b/svelte.config.js
index 6ae1dcb..4c19d91 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,7 @@ export default {
 		adapter: adapter({
 			pages: 'build',
 			assets: 'build',
-			fallback: 'index.html'
+			fallback: 'app.html'
 		})
 	},
 	onwarn: (warning, handler) => {