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": { "features": {
"auth": WEBUI_AUTH, "auth": WEBUI_AUTH,
"auth_trusted_header": bool(webui_app.state.AUTH_TRUSTED_EMAIL_HEADER), "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_signup": webui_app.state.config.ENABLE_SIGNUP,
"enable_login_form": webui_app.state.config.ENABLE_LOGIN_FORM, "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, "enable_web_search": retrieval_app.state.config.ENABLE_RAG_WEB_SEARCH,

View File

@ -20,12 +20,7 @@
let loaded = false; let loaded = false;
let mode = let mode = $config?.features.enable_ldap ? 'ldap' : 'signin';
!$config?.features.enable_login_form &&
Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
$config?.features.enable_ldap_form
? 'ldap'
: 'signin';
let name = ''; let name = '';
let email = ''; let email = '';
@ -34,13 +29,6 @@
let ldapUsername = ''; let ldapUsername = '';
let ldapPassword = ''; 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) => { const setSessionUser = async (sessionUser) => {
if (sessionUser) { if (sessionUser) {
console.log(sessionUser); console.log(sessionUser);
@ -144,12 +132,7 @@
bind:show={onboarding} bind:show={onboarding}
getStartedHandler={() => { getStartedHandler={() => {
onboarding = false; onboarding = false;
mode = mode = $config?.features.enable_ldap ? 'ldap' : 'signup';
!$config?.features.enable_login_form &&
Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
$config?.features.enable_ldap_form
? 'ldap'
: 'signup';
}} }}
/> />
@ -209,7 +192,7 @@
{/if} {/if}
</div> </div>
{#if (mode === 'signup' || mode === 'ldap') && ($config?.onboarding ?? false)} {#if $config?.onboarding ?? false}
<div class=" mt-1 text-xs font-medium text-gray-500"> <div class=" mt-1 text-xs font-medium text-gray-500">
{$WEBUI_NAME} {$WEBUI_NAME}
{$i18n.t( {$i18n.t(
@ -219,7 +202,7 @@
{/if} {/if}
</div> </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"> <div class="flex flex-col mt-4">
{#if mode === 'signup'} {#if mode === 'signup'}
<div class="mb-2"> <div class="mb-2">
@ -275,9 +258,9 @@
</div> </div>
</div> </div>
{/if} {/if}
{#if $config?.features.enable_ldap_form && mode === 'ldap'}
<div class="mt-5"> <div class="mt-5">
{#if $config?.features.enable_login_form}
{#if mode === 'ldap'}
<button <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" 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" type="submit"
@ -286,9 +269,7 @@
? $i18n.t('Authenticate as Admin') ? $i18n.t('Authenticate as Admin')
: $i18n.t('Authenticate')} : $i18n.t('Authenticate')}
</button> </button>
</div> {:else}
{:else if $config?.features.enable_login_form && mode !== 'ldap'}
<div class="mt-5">
<button <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" 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" type="submit"
@ -321,11 +302,12 @@
</button> </button>
</div> </div>
{/if} {/if}
</div>
{/if} {/if}
{/if}
</div>
</form> </form>
{#if showOtherSignInMethods} {#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
<div class="inline-flex items-center justify-center w-full"> <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" /> <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} {#if $config?.features.enable_login_form}
@ -417,64 +399,25 @@
> >
</button> </button>
{/if} {/if}
</div>
{/if}
{#if showSwitchButtonForSignInForm} {#if $config?.features.enable_ldap}
<div class="mt-2">
<button <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" class="flex justify-center items-center text-xs w-full text-center underline"
on:click={() => { on:click={() => {
if (mode === 'ldap') if (mode === 'ldap')
mode = ($config?.onboarding ?? false) ? 'signup' : 'signin'; mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
else mode = 'ldap'; 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-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 <span
>{mode === 'ldap' >{mode === 'ldap'
? $i18n.t('Continue with Email') ? $i18n.t('Continue with Email')
: $i18n.t('Continue with LDAP')}</span : $i18n.t('Continue with LDAP')}</span
> >
</button> </button>
{/if}
</div> </div>
{/if} {/if}
</div> </div>