From 75b169e11ddbf936d5cf3543ffc876e302bbf2a0 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 5 Nov 2024 20:32:09 -0800
Subject: [PATCH] refac: ldap auth page

---
 backend/open_webui/main.py   |   2 +-
 src/routes/auth/+page.svelte | 189 ++++++++++++-----------------------
 2 files changed, 67 insertions(+), 124 deletions(-)

diff --git a/backend/open_webui/main.py b/backend/open_webui/main.py
index a252dc10b..c0650e444 100644
--- a/backend/open_webui/main.py
+++ b/backend/open_webui/main.py
@@ -2235,9 +2235,9 @@ async def get_app_config(request: Request):
         "features": {
             "auth": WEBUI_AUTH,
             "auth_trusted_header": bool(webui_app.state.AUTH_TRUSTED_EMAIL_HEADER),
+            "enable_ldap": webui_app.state.config.ENABLE_LDAP,
             "enable_signup": webui_app.state.config.ENABLE_SIGNUP,
             "enable_login_form": webui_app.state.config.ENABLE_LOGIN_FORM,
-            "enable_ldap_form": webui_app.state.config.ENABLE_LDAP,
             **(
                 {
                     "enable_web_search": retrieval_app.state.config.ENABLE_RAG_WEB_SEARCH,
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 0c9156e7e..96a6cd1ee 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -20,12 +20,7 @@
 
 	let loaded = false;
 
-	let mode =
-		!$config?.features.enable_login_form &&
-		Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
-		$config?.features.enable_ldap_form
-			? 'ldap'
-			: 'signin';
+	let mode = $config?.features.enable_ldap ? 'ldap' : 'signin';
 
 	let name = '';
 	let email = '';
@@ -34,13 +29,6 @@
 	let ldapUsername = '';
 	let ldapPassword = '';
 
-	$: showSwitchButtonForSignInForm =
-		($config?.features.enable_ldap_form && mode !== 'ldap') ||
-		($config?.features.enable_login_form && mode === 'ldap');
-
-	$: showOtherSignInMethods =
-		Object.keys($config?.oauth?.providers ?? {}).length > 0 || showSwitchButtonForSignInForm;
-
 	const setSessionUser = async (sessionUser) => {
 		if (sessionUser) {
 			console.log(sessionUser);
@@ -144,12 +132,7 @@
 	bind:show={onboarding}
 	getStartedHandler={() => {
 		onboarding = false;
-		mode =
-			!$config?.features.enable_login_form &&
-			Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
-			$config?.features.enable_ldap_form
-				? 'ldap'
-				: 'signup';
+		mode = $config?.features.enable_ldap ? 'ldap' : 'signup';
 	}}
 />
 
@@ -209,7 +192,7 @@
 									{/if}
 								</div>
 
-								{#if (mode === 'signup' || mode === 'ldap') && ($config?.onboarding ?? false)}
+								{#if $config?.onboarding ?? false}
 									<div class=" mt-1 text-xs font-medium text-gray-500">
 										ⓘ {$WEBUI_NAME}
 										{$i18n.t(
@@ -219,7 +202,7 @@
 								{/if}
 							</div>
 
-							{#if $config?.features.enable_login_form || $config?.features.enable_ldap_form}
+							{#if $config?.features.enable_login_form}
 								<div class="flex flex-col mt-4">
 									{#if mode === 'signup'}
 										<div class="mb-2">
@@ -275,57 +258,56 @@
 									</div>
 								</div>
 							{/if}
-
-							{#if $config?.features.enable_ldap_form && mode === 'ldap'}
-								<div class="mt-5">
-									<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"
-									>
-										{($config?.onboarding ?? false)
-											? $i18n.t('Authenticate as Admin')
-											: $i18n.t('Authenticate')}
-									</button>
-								</div>
-							{:else if $config?.features.enable_login_form && mode !== 'ldap'}
-								<div class="mt-5">
-									<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"
-									>
-										{mode === 'signin'
-											? $i18n.t('Sign in')
-											: ($config?.onboarding ?? false)
-												? $i18n.t('Create Admin Account')
-												: $i18n.t('Create Account')}
-									</button>
-
-									{#if $config?.features.enable_signup && !($config?.onboarding ?? false)}
-										<div class=" mt-4 text-sm text-center">
+							<div class="mt-5">
+								{#if $config?.features.enable_login_form}
+									{#if mode === 'ldap'}
+										<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"
+										>
+											{($config?.onboarding ?? false)
+												? $i18n.t('Authenticate as Admin')
+												: $i18n.t('Authenticate')}
+										</button>
+									{:else}
+										<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"
+										>
 											{mode === 'signin'
-												? $i18n.t("Don't have an account?")
-												: $i18n.t('Already have an account?')}
+												? $i18n.t('Sign in')
+												: ($config?.onboarding ?? false)
+													? $i18n.t('Create Admin Account')
+													: $i18n.t('Create Account')}
+										</button>
 
-											<button
-												class=" font-medium underline"
-												type="button"
-												on:click={() => {
-													if (mode === 'signin') {
-														mode = 'signup';
-													} else {
-														mode = 'signin';
-													}
-												}}
-											>
-												{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
-											</button>
-										</div>
+										{#if $config?.features.enable_signup && !($config?.onboarding ?? false)}
+											<div class=" mt-4 text-sm text-center">
+												{mode === 'signin'
+													? $i18n.t("Don't have an account?")
+													: $i18n.t('Already have an account?')}
+
+												<button
+													class=" font-medium underline"
+													type="button"
+													on:click={() => {
+														if (mode === 'signin') {
+															mode = 'signup';
+														} else {
+															mode = 'signin';
+														}
+													}}
+												>
+													{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
+												</button>
+											</div>
+										{/if}
 									{/if}
-								</div>
-							{/if}
+								{/if}
+							</div>
 						</form>
 
-						{#if showOtherSignInMethods}
+						{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
 							<div class="inline-flex items-center justify-center w-full">
 								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
 								{#if $config?.features.enable_login_form}
@@ -417,64 +399,25 @@
 										>
 									</button>
 								{/if}
+							</div>
+						{/if}
 
-								{#if showSwitchButtonForSignInForm}
-									<button
-										class="flex justify-center items-center 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"
-										on:click={() => {
-											if (mode === 'ldap')
-												mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
-											else mode = 'ldap';
-										}}
+						{#if $config?.features.enable_ldap}
+							<div class="mt-2">
+								<button
+									class="flex justify-center items-center text-xs w-full text-center underline"
+									on:click={() => {
+										if (mode === 'ldap')
+											mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
+										else mode = 'ldap';
+									}}
+								>
+									<span
+										>{mode === 'ldap'
+											? $i18n.t('Continue with Email')
+											: $i18n.t('Continue with LDAP')}</span
 									>
-										{#if mode === 'ldap'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 24 24"
-												fill="none"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4 mr-3"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7"
-													stroke-width="2"
-												/>
-												<rect
-													x="3"
-													y="5"
-													width="18"
-													height="14"
-													rx="2"
-													stroke-width="2"
-													stroke-linecap="round"
-												/>
-											</svg>
-										{:else}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4 mr-3"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
-												/>
-											</svg>
-										{/if}
-										<span
-											>{mode === 'ldap'
-												? $i18n.t('Continue with Email')
-												: $i18n.t('Continue with LDAP')}</span
-										>
-									</button>
-								{/if}
+								</button>
 							</div>
 						{/if}
 					</div>