chat-ui / src /lib /components /LoginModal.svelte
victor's picture
victor HF staff
modal wording (#1000)
fe072ba unverified
raw
history blame
2.3 kB
<script lang="ts">
import { base } from "$app/paths";
import { page } from "$app/stores";
import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
import Modal from "$lib/components/Modal.svelte";
import { useSettingsStore } from "$lib/stores/settings";
import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
import Logo from "./icons/Logo.svelte";
const settings = useSettingsStore();
</script>
<Modal on:close>
<div
class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center"
>
<h2 class="flex items-center text-2xl font-semibold text-gray-800">
<Logo classNames="mr-1" />
{PUBLIC_APP_NAME}
</h2>
<p class="text-balance text-lg font-semibold leading-snug text-gray-800">
{PUBLIC_APP_DESCRIPTION}
</p>
<p class="text-balance rounded-xl border bg-white/80 p-2 text-base text-gray-800">
You have reached the guest message limit, <strong class="font-semibold"
>Sign In with a free Hugging Face account</strong
> to continue using HuggingChat.
</p>
<form
action="{base}/{$page.data.loginRequired ? 'login' : 'settings'}"
target="_parent"
method="POST"
class="flex w-full flex-col items-center gap-2"
>
{#if $page.data.loginRequired}
<button
type="submit"
class="flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
>
Sign in
{#if PUBLIC_APP_NAME === "HuggingChat"}
with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
{/if}
</button>
{:else}
<button
class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
on:click={(e) => {
if (!cookiesAreEnabled()) {
e.preventDefault();
window.open(window.location.href, "_blank");
}
$settings.ethicsModalAccepted = true;
}}
>
Start chatting
</button>
{/if}
</form>
</div>
</Modal>