|
@@ -1,4 +1,7 @@
|
|
<script>
|
|
<script>
|
|
|
|
+ import DOMPurify from 'dompurify';
|
|
|
|
+ import { marked } from 'marked';
|
|
|
|
+
|
|
import { toast } from 'svelte-sonner';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
|
|
import { onMount, getContext, tick } from 'svelte';
|
|
import { onMount, getContext, tick } from 'svelte';
|
|
@@ -192,9 +195,9 @@
|
|
<div
|
|
<div
|
|
class="fixed bg-transparent min-h-screen w-full flex justify-center font-primary z-50 text-black dark:text-white"
|
|
class="fixed bg-transparent min-h-screen w-full flex justify-center font-primary z-50 text-black dark:text-white"
|
|
>
|
|
>
|
|
- <div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
|
|
|
|
|
|
+ <div class="w-full px-10 min-h-screen flex flex-col text-center">
|
|
{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
|
|
{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
|
|
- <div class=" my-auto pb-10 w-full">
|
|
|
|
|
|
+ <div class=" my-auto pb-10 w-full sm:max-w-md">
|
|
<div
|
|
<div
|
|
class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
|
|
class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
|
|
>
|
|
>
|
|
@@ -208,282 +211,304 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
{:else}
|
|
- <div class=" my-auto pb-10 w-full dark:text-gray-100">
|
|
|
|
- <form
|
|
|
|
- class=" flex flex-col justify-center"
|
|
|
|
- on:submit={(e) => {
|
|
|
|
- e.preventDefault();
|
|
|
|
- submitHandler();
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div class="mb-1">
|
|
|
|
- <div class=" text-2xl font-medium">
|
|
|
|
|
|
+ <div class="my-auto flex flex-col justify-center items-center">
|
|
|
|
+ <div class=" sm:max-w-md my-auto pb-10 w-full dark:text-gray-100">
|
|
|
|
+ <form
|
|
|
|
+ class=" flex flex-col justify-center"
|
|
|
|
+ on:submit={(e) => {
|
|
|
|
+ e.preventDefault();
|
|
|
|
+ submitHandler();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <div class="mb-1">
|
|
|
|
+ <div class=" text-2xl font-medium">
|
|
|
|
+ {#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 if mode === 'signin'}
|
|
|
|
+ {$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
|
|
|
+ {:else}
|
|
|
|
+ {$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
|
|
|
+ {/if}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
{#if $config?.onboarding ?? false}
|
|
{#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 if mode === 'signin'}
|
|
|
|
- {$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
|
|
|
- {:else}
|
|
|
|
- {$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
|
|
|
|
|
+ <div class="mt-1 text-xs font-medium text-gray-600 dark:text-gray-500">
|
|
|
|
+ ⓘ {$WEBUI_NAME}
|
|
|
|
+ {$i18n.t(
|
|
|
|
+ 'does not make any external connections, and your data stays securely on your locally hosted server.'
|
|
|
|
+ )}
|
|
|
|
+ </div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- {#if $config?.onboarding ?? false}
|
|
|
|
- <div class="mt-1 text-xs font-medium text-gray-600 dark:text-gray-500">
|
|
|
|
- ⓘ {$WEBUI_NAME}
|
|
|
|
- {$i18n.t(
|
|
|
|
- 'does not make any external connections, and your data stays securely on your locally hosted server.'
|
|
|
|
- )}
|
|
|
|
- </div>
|
|
|
|
- {/if}
|
|
|
|
- </div>
|
|
|
|
|
|
+ {#if $config?.features.enable_login_form || $config?.features.enable_ldap}
|
|
|
|
+ <div class="flex flex-col mt-4">
|
|
|
|
+ {#if mode === 'signup'}
|
|
|
|
+ <div class="mb-2">
|
|
|
|
+ <label for="name" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
+ >{$i18n.t('Name')}</label
|
|
|
|
+ >
|
|
|
|
+ <input
|
|
|
|
+ bind:value={name}
|
|
|
|
+ type="text"
|
|
|
|
+ id="name"
|
|
|
|
+ class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
+ autocomplete="name"
|
|
|
|
+ placeholder={$i18n.t('Enter Your Full Name')}
|
|
|
|
+ required
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
|
|
- {#if $config?.features.enable_login_form || $config?.features.enable_ldap}
|
|
|
|
- <div class="flex flex-col mt-4">
|
|
|
|
- {#if mode === 'signup'}
|
|
|
|
- <div class="mb-2">
|
|
|
|
- <label for="name" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
- >{$i18n.t('Name')}</label
|
|
|
|
- >
|
|
|
|
- <input
|
|
|
|
- bind:value={name}
|
|
|
|
- type="text"
|
|
|
|
- id="name"
|
|
|
|
- class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
- autocomplete="name"
|
|
|
|
- placeholder={$i18n.t('Enter Your Full Name')}
|
|
|
|
- required
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- {/if}
|
|
|
|
|
|
+ {#if mode === 'ldap'}
|
|
|
|
+ <div class="mb-2">
|
|
|
|
+ <label for="username" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
+ >{$i18n.t('Username')}</label
|
|
|
|
+ >
|
|
|
|
+ <input
|
|
|
|
+ bind:value={ldapUsername}
|
|
|
|
+ type="text"
|
|
|
|
+ class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
+ autocomplete="username"
|
|
|
|
+ name="username"
|
|
|
|
+ id="username"
|
|
|
|
+ placeholder={$i18n.t('Enter Your Username')}
|
|
|
|
+ required
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ {:else}
|
|
|
|
+ <div class="mb-2">
|
|
|
|
+ <label for="email" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
+ >{$i18n.t('Email')}</label
|
|
|
|
+ >
|
|
|
|
+ <input
|
|
|
|
+ bind:value={email}
|
|
|
|
+ type="email"
|
|
|
|
+ id="email"
|
|
|
|
+ class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
+ autocomplete="email"
|
|
|
|
+ name="email"
|
|
|
|
+ placeholder={$i18n.t('Enter Your Email')}
|
|
|
|
+ required
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
|
|
- {#if mode === 'ldap'}
|
|
|
|
- <div class="mb-2">
|
|
|
|
- <label for="username" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
- >{$i18n.t('Username')}</label
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <label for="password" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
+ >{$i18n.t('Password')}</label
|
|
>
|
|
>
|
|
<input
|
|
<input
|
|
- bind:value={ldapUsername}
|
|
|
|
- type="text"
|
|
|
|
|
|
+ bind:value={password}
|
|
|
|
+ type="password"
|
|
|
|
+ id="password"
|
|
class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
- autocomplete="username"
|
|
|
|
- name="username"
|
|
|
|
- id="username"
|
|
|
|
- placeholder={$i18n.t('Enter Your Username')}
|
|
|
|
|
|
+ placeholder={$i18n.t('Enter Your Password')}
|
|
|
|
+ autocomplete={mode === 'signup' ? 'new-password' : 'current-password'}
|
|
|
|
+ name="password"
|
|
required
|
|
required
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
- {:else}
|
|
|
|
- <div class="mb-2">
|
|
|
|
- <label for="email" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
- >{$i18n.t('Email')}</label
|
|
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
+ <div class="mt-5">
|
|
|
|
+ {#if $config?.features.enable_login_form || $config?.features.enable_ldap}
|
|
|
|
+ {#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"
|
|
>
|
|
>
|
|
- <input
|
|
|
|
- bind:value={email}
|
|
|
|
- type="email"
|
|
|
|
- id="email"
|
|
|
|
- class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
- autocomplete="email"
|
|
|
|
- name="email"
|
|
|
|
- placeholder={$i18n.t('Enter Your Email')}
|
|
|
|
- required
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
+ {$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('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">
|
|
|
|
+ {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}
|
|
{/if}
|
|
{/if}
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
|
|
- <div>
|
|
|
|
- <label for="password" class="text-sm font-medium text-left mb-1 block"
|
|
|
|
- >{$i18n.t('Password')}</label
|
|
|
|
|
|
+ {#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 || $config?.features.enable_ldap}
|
|
|
|
+ <span
|
|
|
|
+ class="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
|
|
|
|
+ >{$i18n.t('or')}</span
|
|
>
|
|
>
|
|
- <input
|
|
|
|
- bind:value={password}
|
|
|
|
- type="password"
|
|
|
|
- id="password"
|
|
|
|
- class="my-0.5 w-full text-sm outline-hidden bg-transparent"
|
|
|
|
- placeholder={$i18n.t('Enter Your Password')}
|
|
|
|
- autocomplete={mode === 'signup' ? 'new-password' : 'current-password'}
|
|
|
|
- name="password"
|
|
|
|
- required
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
+ {/if}
|
|
|
|
+
|
|
|
|
+ <hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
|
|
</div>
|
|
</div>
|
|
- {/if}
|
|
|
|
- <div class="mt-5">
|
|
|
|
- {#if $config?.features.enable_login_form || $config?.features.enable_ldap}
|
|
|
|
- {#if mode === 'ldap'}
|
|
|
|
|
|
+ <div class="flex flex-col space-y-2">
|
|
|
|
+ {#if $config?.oauth?.providers?.google}
|
|
<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"
|
|
|
|
- type="submit"
|
|
|
|
|
|
+ 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={() => {
|
|
|
|
+ window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
- {$i18n.t('Authenticate')}
|
|
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ viewBox="0 0 48 48"
|
|
|
|
+ class="size-6 mr-3"
|
|
|
|
+ >
|
|
|
|
+ <path
|
|
|
|
+ fill="#EA4335"
|
|
|
|
+ d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
|
|
|
|
+ /><path
|
|
|
|
+ fill="#4285F4"
|
|
|
|
+ d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
|
|
|
|
+ /><path
|
|
|
|
+ fill="#FBBC05"
|
|
|
|
+ d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
|
|
|
|
+ /><path
|
|
|
|
+ fill="#34A853"
|
|
|
|
+ d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
|
|
|
|
+ /><path fill="none" d="M0 0h48v48H0z" />
|
|
|
|
+ </svg>
|
|
|
|
+ <span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
|
|
</button>
|
|
</button>
|
|
- {:else}
|
|
|
|
|
|
+ {/if}
|
|
|
|
+ {#if $config?.oauth?.providers?.microsoft}
|
|
<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"
|
|
|
|
- type="submit"
|
|
|
|
|
|
+ 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={() => {
|
|
|
|
+ window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
- {mode === 'signin'
|
|
|
|
- ? $i18n.t('Sign in')
|
|
|
|
- : ($config?.onboarding ?? false)
|
|
|
|
- ? $i18n.t('Create Admin Account')
|
|
|
|
- : $i18n.t('Create Account')}
|
|
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ viewBox="0 0 21 21"
|
|
|
|
+ class="size-6 mr-3"
|
|
|
|
+ >
|
|
|
|
+ <rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
|
|
|
|
+ x="1"
|
|
|
|
+ y="11"
|
|
|
|
+ width="9"
|
|
|
|
+ height="9"
|
|
|
|
+ fill="#00a4ef"
|
|
|
|
+ /><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
|
|
|
|
+ x="11"
|
|
|
|
+ y="11"
|
|
|
|
+ width="9"
|
|
|
|
+ height="9"
|
|
|
|
+ fill="#ffb900"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ <span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span
|
|
|
|
+ >
|
|
</button>
|
|
</button>
|
|
-
|
|
|
|
- {#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}
|
|
{/if}
|
|
- {/if}
|
|
|
|
- </div>
|
|
|
|
- </form>
|
|
|
|
-
|
|
|
|
- {#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 || $config?.features.enable_ldap}
|
|
|
|
- <span
|
|
|
|
- class="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
|
|
|
|
- >{$i18n.t('or')}</span
|
|
|
|
- >
|
|
|
|
- {/if}
|
|
|
|
|
|
+ {#if $config?.oauth?.providers?.github}
|
|
|
|
+ <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={() => {
|
|
|
|
+ window.location.href = `${WEBUI_BASE_URL}/oauth/github/login`;
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ viewBox="0 0 24 24"
|
|
|
|
+ class="size-6 mr-3"
|
|
|
|
+ >
|
|
|
|
+ <path
|
|
|
|
+ fill="currentColor"
|
|
|
|
+ d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.92 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ <span>{$i18n.t('Continue with {{provider}}', { provider: 'GitHub' })}</span>
|
|
|
|
+ </button>
|
|
|
|
+ {/if}
|
|
|
|
+ {#if $config?.oauth?.providers?.oidc}
|
|
|
|
+ <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={() => {
|
|
|
|
+ window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <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>
|
|
|
|
+
|
|
|
|
+ <span
|
|
|
|
+ >{$i18n.t('Continue with {{provider}}', {
|
|
|
|
+ provider: $config?.oauth?.providers?.oidc ?? 'SSO'
|
|
|
|
+ })}</span
|
|
|
|
+ >
|
|
|
|
+ </button>
|
|
|
|
+ {/if}
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
|
|
- <hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
|
|
|
|
- </div>
|
|
|
|
- <div class="flex flex-col space-y-2">
|
|
|
|
- {#if $config?.oauth?.providers?.google}
|
|
|
|
|
|
+ {#if $config?.features.enable_ldap && $config?.features.enable_login_form}
|
|
|
|
+ <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"
|
|
|
|
+ type="button"
|
|
on:click={() => {
|
|
on:click={() => {
|
|
- window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
|
|
|
|
|
|
+ if (mode === 'ldap')
|
|
|
|
+ mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
|
|
|
|
+ else mode = 'ldap';
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="size-6 mr-3">
|
|
|
|
- <path
|
|
|
|
- fill="#EA4335"
|
|
|
|
- d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
|
|
|
|
- /><path
|
|
|
|
- fill="#4285F4"
|
|
|
|
- d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
|
|
|
|
- /><path
|
|
|
|
- fill="#FBBC05"
|
|
|
|
- d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
|
|
|
|
- /><path
|
|
|
|
- fill="#34A853"
|
|
|
|
- d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
|
|
|
|
- /><path fill="none" d="M0 0h48v48H0z" />
|
|
|
|
- </svg>
|
|
|
|
- <span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
|
|
|
|
- </button>
|
|
|
|
- {/if}
|
|
|
|
- {#if $config?.oauth?.providers?.microsoft}
|
|
|
|
- <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={() => {
|
|
|
|
- window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="size-6 mr-3">
|
|
|
|
- <rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
|
|
|
|
- x="1"
|
|
|
|
- y="11"
|
|
|
|
- width="9"
|
|
|
|
- height="9"
|
|
|
|
- fill="#00a4ef"
|
|
|
|
- /><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
|
|
|
|
- x="11"
|
|
|
|
- y="11"
|
|
|
|
- width="9"
|
|
|
|
- height="9"
|
|
|
|
- fill="#ffb900"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
- <span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span>
|
|
|
|
- </button>
|
|
|
|
- {/if}
|
|
|
|
- {#if $config?.oauth?.providers?.github}
|
|
|
|
- <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={() => {
|
|
|
|
- window.location.href = `${WEBUI_BASE_URL}/oauth/github/login`;
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-6 mr-3">
|
|
|
|
- <path
|
|
|
|
- fill="currentColor"
|
|
|
|
- d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.92 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
- <span>{$i18n.t('Continue with {{provider}}', { provider: 'GitHub' })}</span>
|
|
|
|
- </button>
|
|
|
|
- {/if}
|
|
|
|
- {#if $config?.oauth?.providers?.oidc}
|
|
|
|
- <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={() => {
|
|
|
|
- window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <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>
|
|
|
|
-
|
|
|
|
<span
|
|
<span
|
|
- >{$i18n.t('Continue with {{provider}}', {
|
|
|
|
- provider: $config?.oauth?.providers?.oidc ?? 'SSO'
|
|
|
|
- })}</span
|
|
|
|
|
|
+ >{mode === 'ldap'
|
|
|
|
+ ? $i18n.t('Continue with Email')
|
|
|
|
+ : $i18n.t('Continue with LDAP')}</span
|
|
>
|
|
>
|
|
</button>
|
|
</button>
|
|
- {/if}
|
|
|
|
- </div>
|
|
|
|
- {/if}
|
|
|
|
-
|
|
|
|
- {#if $config?.features.enable_ldap && $config?.features.enable_login_form}
|
|
|
|
- <div class="mt-2">
|
|
|
|
- <button
|
|
|
|
- class="flex justify-center items-center text-xs w-full text-center underline"
|
|
|
|
- type="button"
|
|
|
|
- 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
|
|
|
|
- >
|
|
|
|
- </button>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
+ </div>
|
|
|
|
+ {#if $config?.metadata?.login_footer}
|
|
|
|
+ <div class="max-w-3xl mx-auto">
|
|
|
|
+ <div class="mt-2 text-[0.7rem] text-gray-500 dark:text-gray-400 marked">
|
|
|
|
+ {@html DOMPurify.sanitize(marked($config?.metadata?.login_footer))}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|