85 lines
2.3 KiB
Svelte
85 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Content,
|
|
Form,
|
|
Link,
|
|
Modal,
|
|
PasswordInput,
|
|
RadioButton,
|
|
RadioButtonGroup,
|
|
TextInput,
|
|
} from "carbon-components-svelte";
|
|
import RightArrow from "carbon-icons-svelte/lib/ArrowRight.svelte";
|
|
|
|
let { handleLogin }: { handleLogin: () => void } = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-row items-center justify-center ma4">
|
|
<div class="login-block ma6">
|
|
<form class="measure center">
|
|
<fieldset id="sign_up" class="ba b--transparent ph0 mh0">
|
|
<legend class="f2 fw5 mh0 mb1">Log In to X-Tablo</legend>
|
|
<span
|
|
>Don't have an account, create one for free <Link
|
|
href="#0"
|
|
class="f6 link dim">here</Link
|
|
>
|
|
</span>
|
|
<div class="mt3">
|
|
<label class="db fw6 lh-copy f6" for="email-address">Email</label>
|
|
<TextInput
|
|
class="pa2 bg-transparent ba w-100"
|
|
type="email"
|
|
id="email-address"
|
|
name="email-address"
|
|
></TextInput>
|
|
</div>
|
|
<div class="mv3">
|
|
<label class="db fw6 lh-copy f6" for="password">Password</label>
|
|
<TextInput
|
|
class="pa2 bg-transparent ba w-100"
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
></TextInput>
|
|
</div>
|
|
<Checkbox labelText="Remember ID" checked />
|
|
</fieldset>
|
|
<div class="">
|
|
<Button
|
|
on:click={handleLogin}
|
|
class="b ph3 pv2 input-reset ba db w-50 grow"
|
|
type="submit"
|
|
icon={RightArrow}>Log In</Button
|
|
>
|
|
</div>
|
|
<div class="lh-copy mt3">
|
|
<Link href="#0" class="f6 link dim db">Sign up</Link>
|
|
<Link href="#0" class="f6 link dim db">Forgot your password?</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<script
|
|
src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"
|
|
></script><lottie-player
|
|
src="https://lottie.host/36551324-1e54-499f-8410-4695a457a128/rrkpkFcJVP.json"
|
|
background="##FFFFFF"
|
|
speed="1"
|
|
style="width: 400px; height: 400px"
|
|
loop
|
|
autoplay
|
|
direction="1"
|
|
mode="normal"
|
|
></lottie-player>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
.login-block {
|
|
width: 350px;
|
|
}
|
|
</style>
|