chat-ui / src /lib /components /LoginModal.svelte
nsarrazin's picture
nsarrazin HF staff
Login button sends you directly to login page (#501)
545f27c unverified
raw
history blame
2.58 kB
<script lang="ts">
import { base } from "$app/paths";
import { page } from "$app/stores";
import { PUBLIC_APP_DATA_SHARING, PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
import Modal from "$lib/components/Modal.svelte";
import type { LayoutData } from "../../routes/$types";
import Logo from "./icons/Logo.svelte";
export let settings: LayoutData["settings"];
</script>
<Modal>
<div
class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-primary-500/40 via-primary-500/10 to-primary-500/0 px-4 pb-10 pt-9 text-center"
>
<h2 class="flex items-center text-2xl font-semibold text-gray-800">
<Logo classNames="mr-1" />
{PUBLIC_APP_NAME}
<div
class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
>
v{PUBLIC_VERSION}
</div>
</h2>
{#if $page.data.requiresLogin}
<p
class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12"
style="text-wrap: balance;"
>
Please Sign in with Hugging Face to continue
</p>
{/if}
<p class="text-base text-gray-800">
Disclaimer: AI is an area of active research with known problems such as biased generation and
misinformation. Do not use this application for high-stakes decisions or advice.
</p>
{#if PUBLIC_APP_DATA_SHARING}
<p class="px-2 text-sm text-gray-500">
Your conversations will be shared with model authors unless you disable it from your
settings.
</p>
{/if}
<form
action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
target="_parent"
method="POST"
class="flex w-full flex-col items-center gap-2"
>
{#if $page.data.requiresLogin}
<button
type="submit"
class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
>
Sign in
{#if PUBLIC_APP_NAME === "HuggingChat"}
with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
{/if}
</button>
{:else}
<input type="hidden" name="ethicsModalAccepted" value={true} />
{#each Object.entries(settings) as [key, val]}
<input type="hidden" name={key} value={val} />
{/each}
<button
type="submit"
class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
>
Start chatting
</button>
{/if}
</form>
</div>
</Modal>