File size: 2,462 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<script lang="ts">
import Form from "@gradio/form";
import { BaseTextbox as Textbox } from "@gradio/textbox";
import { BaseButton } from "@gradio/button";
import Column from "@gradio/column";
import { Block } from "@gradio/atoms";
import { _ } from "svelte-i18n";
export let root: string;
export let auth_message: string | null;
export let app_mode: boolean;
export let space_id: string | null;
let username = "";
let password = "";
let incorrect_credentials = false;
const submit = async (): Promise<void> => {
const formData = new FormData();
formData.append("username", username);
formData.append("password", password);
let response = await fetch(root + "/login", {
method: "POST",
body: formData
});
if (response.status === 400) {
incorrect_credentials = true;
username = "";
password = "";
} else if (response.status == 200) {
location.reload();
}
};
</script>
<div class="wrap" class:min-h-screen={app_mode}>
<Column variant="panel" min_width={480}>
<h2>{$_("login.login")}</h2>
{#if auth_message}
<p class="auth">{@html auth_message}</p>
{/if}
{#if space_id}
<p class="auth">
{$_("login.enable_cookies")}
</p>
{/if}
{#if incorrect_credentials}
<p class="creds">{$_("login.incorrect_credentials")}</p>
{/if}
<Form>
<Block>
<Textbox
{root}
label="username"
lines={1}
show_label={true}
max_lines={1}
on:submit={submit}
bind:value={username}
/>
</Block>
<Block>
<Textbox
{root}
label="password"
lines={1}
show_label={true}
max_lines={1}
type="password"
on:submit={submit}
bind:value={password}
/>
</Block>
</Form>
<BaseButton size="lg" variant="primary" on:click={submit}
>{$_("login.login")}</BaseButton
>
</Column>
</div>
<style>
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: var(--size-3);
background: var(--background-fill-primary);
width: var(--size-full);
}
h2 {
margin-bottom: var(--size-3);
color: var(--body-text-color);
font-weight: var(--section-header-text-weight);
font-size: var(--text-xl);
}
.auth {
margin-top: var(--size-1);
margin-bottom: var(--size-1);
color: var(--body-text-color);
}
.creds {
margin-top: var(--size-4);
margin-bottom: var(--size-4);
color: var(--error-text-color);
font-weight: var(--weight-semibold);
}
</style>
|