kegorii/frovide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 폼 손질하기
All checks were successful
main-branch-frovide/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Insub Kim 2025-06-11 10:35:59 +00:00
parent 3d08574401
commit 26b5707800
1 changed files with 55 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/routes/(public)/login/login-form.svelte
View File

@ -8,16 +8,12 @@
superForm, superForm,
} from "sveltekit-superforms"; } from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters"; import { zodClient } from "sveltekit-superforms/adapters";
import { Button } from "$lib/components/ui/button/index.js"; import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js"; import * as Card from "$lib/components/ui/card/index.js";
import { Label } from "$lib/components/ui/label/index.js"; import { Label } from "$lib/components/ui/label/index.js";
import { Switch } from "$lib/components/ui/switch/index.js"; import { Switch } from "$lib/components/ui/switch/index.js";
import { cn } from "$lib/utils.js"; import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from "svelte/elements";
let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
const id = $props.id();
let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } = let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
$props(); $props();
@ -29,69 +25,53 @@
const { form: formData, enhance } = form; const { form: formData, enhance } = form;
</script> </script>
<form method="POST" use:enhance> <div class={cn("flex flex-col gap-6")}>
<Form.Field {form} name="login"> <Card.Root>
<Form.Control> <Card.Header class="text-center">
{#snippet children({ props })} <Card.Title class="text-xl font-semibold">LOGIN</Card.Title>
<Form.Label>Email</Form.Label> </Card.Header>
<Input {...props} bind:value={$formData.email} /> <Card.Content>
{/snippet} <form method="POST" use:enhance>
</Form.Control> <div class="grid gap-6">
<Form.Description>This is your public display name.</Form.Description> <div class="grid gap-6">
<Form.FieldErrors /> <div class="grid gap-3">
</Form.Field> <Form.Field {form} name="email">
<Form.Button>Submit</Form.Button> <Form.Control>
</form> {#snippet children({ props })}
<Form.Label>Email</Form.Label>
<div class={cn("flex flex-col gap-6", className)} {...restProps}> <Input {...props} bind:value={$formData.email} />
<Card.Root> {/snippet}
<Card.Header class="text-center"> </Form.Control>
<Card.Title class="text-xl">:: LOGIN ::</Card.Title> <Form.FieldErrors />
</Card.Header> </Form.Field>
<Card.Content> </div>
<form> <div class="grid gap-3">
<div class="grid gap-6"> <Form.Field {form} name="password">
<div class="grid gap-6"> <Form.Control>
<div class="grid gap-3"> {#snippet children({ props })}
<Label for="email-{id}">이메일</Label> <Form.Label>password</Form.Label>
<Input <Input
id="email-{id}" {...props}
type="email" bind:value={$formData.password}
placeholder="abcd@example.com" type="password"
required />
/> {/snippet}
</div> </Form.Control>
<div class="grid gap-3"> <Form.FieldErrors />
<div class="flex items-center"> </Form.Field>
<Label for="password-{id}">비밀번호</Label> </div>
<a <div class="flex items-center space-x-2">
href="##" <Switch id="airplane-mode" />
class="ml-auto text-sm underline-offset-4 hover:underline" <Label for="airplane-mode">이메일 저장</Label>
> </div>
비밀번호 찾기 <Form.Button class="w-full">로그인</Form.Button>
</a> </div>
</div> <div class="text-center text-sm">
<Input id="password-{id}" type="password" required /> 이메일 인증을 통한
</div> <a href="##" class="underline underline-offset-4"> 회원가입</a>
<div class="flex items-center space-x-2"> </div>
<Switch id="airplane-mode" /> </div>
<Label for="airplane-mode">이메일 저장</Label> </form>
</div> </Card.Content>
<Button type="submit" class="w-full">로그인</Button> </Card.Root>
</div>
<div class="text-center text-sm">
이메일 인증을 통한
<a href="##" class="underline underline-offset-4"> 회원가입</a>
</div>
</div>
</form>
</Card.Content>
</Card.Root>
<div
class="text-muted-foreground *:[a]:hover:text-primary *:[a]:underline *:[a]:underline-offset-4 text-balance text-center text-xs"
>
로그인 진행시 사이트의 <a href="##">서비스 이용약관</a>
과 <a href="##">개인정보 보호정책</a> 에 동의합니다.
</div>
</div> </div>
-->