refac: ldap auth page

This commit is contained in:
Timothy J. Baek 2024-11-05 20:32:09 -08:00
parent 2910cbe9a9
commit 75b169e11d
2 changed files with 67 additions and 124 deletions

View File

@ -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,

View File

@ -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>