OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: LDAP User management

Browse Source 
LDAP will be used as default if no other auth form is enabled.
LDAP now will work with ENABLE_LOGIN_FORM = false.
Fixed exception "User does not match the record."
Now LDAP login is case insensitive.
Integrated with onboarding feature.
This commit is contained in:
morgan55555
2024-11-06 03:20:54 +05:00
parent eb56614b58
commit 5d934d7d15
9 changed files with 791 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/routes/auth/+page.svelte
View File

@@ -1,6 +1,6 @@
<script>
import { goto } from '$app/navigation';
import { getSessionUser, userSignIn, userSignUp } from '$lib/apis/auths';
import { ldapUserSignIn, getSessionUser, userSignIn, userSignUp } from '$lib/apis/auths';
import Spinner from '$lib/components/common/Spinner.svelte';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, config, user, socket } from '$lib/stores';
@@ -15,12 +15,22 @@
const i18n = getContext('i18n');
let loaded = false;
let mode = 'signin';
let mode = (
!$config?.features.enable_login_form &&
Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
$config?.features.enable_ldap_form
) ? 'ldap' : 'signin';
let name = '';
let email = '';
let password = '';
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);
@@ -36,6 +46,14 @@
}
};
const ldapSignInHandler = async () => {
const sessionUser = await ldapUserSignIn(ldapUsername, ldapPassword).catch((error) => {
toast.error(error);
return null;
});
await setSessionUser(sessionUser);
};
const signInHandler = async () => {
const sessionUser = await userSignIn(email, password).catch((error) => {
toast.error(error);
@@ -57,7 +75,10 @@
};
const submitHandler = async () => {
if (mode === 'signin') {
if (mode === 'ldap'){
await ldapSignInHandler();
}
else if (mode === 'signin') {
await signInHandler();
} else {
await signUpHandler();
@@ -114,7 +135,11 @@
bind:show={onboarding}
getStartedHandler={() => {
onboarding = false;
mode = 'signup';
mode = (
!$config?.features.enable_login_form &&
Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
$config?.features.enable_ldap_form
) ? 'ldap' : 'signup';;
}}
/>
@@ -167,12 +192,14 @@
{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
{:else if $config?.onboarding ?? false}
{$i18n.t(`Get started with {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
{:else if mode === 'ldap'}
{$i18n.t(`Sign in to {{WEBUI_NAME}} with LDAP`, { WEBUI_NAME: $WEBUI_NAME })}
{:else}
{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
{/if}
</div>
{#if mode === 'signup' && ($config?.onboarding ?? false)}
{#if (mode === 'signup' || mode === 'ldap') && ($config?.onboarding ?? false)}
<div class=" mt-1 text-xs font-medium text-gray-500">
ⓘ {$WEBUI_NAME}
{$i18n.t(
@@ -182,7 +209,7 @@
{/if}
</div>
{#if $config?.features.enable_login_form}
{#if $config?.features.enable_login_form || $config?.features.enable_ldap_form }
<div class="flex flex-col mt-4">
{#if mode === 'signup'}
<div class="mb-2">
@@ -198,17 +225,31 @@
</div>
{/if}
<div class="mb-2">
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
<input
bind:value={email}
type="email"
class="my-0.5 w-full text-sm outline-none bg-transparent"
autocomplete="email"
placeholder={$i18n.t('Enter Your Email')}
required
/>
</div>
{#if mode === 'ldap'}
<div class="mb-2">
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Username')}</div>
<input
bind:value={ldapUsername}
type="text"
class="my-0.5 w-full text-sm outline-none bg-transparent"
autocomplete="username"
placeholder={$i18n.t('Enter Your Username')}
required
/>
</div>
{:else}
<div class="mb-2">
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
<input
bind:value={email}
type="email"
class="my-0.5 w-full text-sm outline-none bg-transparent"
autocomplete="email"
placeholder={$i18n.t('Enter Your Email')}
required
/>
</div>
{/if}
<div>
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
@@ -225,7 +266,18 @@
</div>
{/if}
{#if $config?.features.enable_login_form}
{#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"
@@ -263,7 +315,7 @@
{/if}
</form>
{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
{#if showOtherSignInMethods}
<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}
@@ -355,6 +407,51 @@
>
</button>
{/if}
{#if showSwitchButtonForSignInForm}
<button
class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
on:click={() => {
if (mode === 'ldap')
mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
else mode = 'ldap';
}}
>
{#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-6 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-6 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}
</div>
{/if}
</div>