Skip to content

Commit d1255df

Browse files
benjaminstrasserbenjaminstrasser
committed
Updated design of Login page
Added placeholder pages Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
1 parent 0991ab0 commit d1255df

File tree

7 files changed

+86
-22
lines changed

7 files changed

+86
-22
lines changed

‎src/components/ui/checkbox/checkbox.svelte‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts">
2+
import { Checkbox as CheckboxPrimitive } from 'bits-ui'
3+
import Check from 'lucide-svelte/icons/check'
4+
import Minus from 'lucide-svelte/icons/minus'
5+
import { cn } from '$utils'
6+
7+
type $$Props = CheckboxPrimitive.Props
8+
type $$Events = CheckboxPrimitive.Events
9+
10+
let className: $$Props['class'] = undefined
11+
export let checked: $$Props['checked'] = false
12+
export { className as class }
13+
</script>
14+
15+
<CheckboxPrimitive.Root
16+
class={cn(
17+
'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
18+
className
19+
)}
20+
bind:checked
21+
{...$$restProps}
22+
on:click
23+
>
24+
<CheckboxPrimitive.Indicator
25+
class={cn('flex h-4 w-4 items-center justify-center text-current')}
26+
let:isChecked
27+
let:isIndeterminate
28+
>
29+
{#if isChecked}
30+
<Check class="h-3.5 w-3.5" />
31+
{:else if isIndeterminate}
32+
<Minus class="h-3.5 w-3.5" />
33+
{/if}
34+
</CheckboxPrimitive.Indicator>
35+
</CheckboxPrimitive.Root>

‎src/components/ui/checkbox/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Root from './checkbox.svelte'
2+
3+
export {
4+
Root,
5+
//
6+
Root as Checkbox
7+
}

‎src/routes/(auth)/+layout.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
</div>
1313

1414
<!-- Middle Section -->
15-
<div class="flex flex-grow flex-col items-start justify-center space-y-4 p-6 text-2xl">
15+
<div
16+
class="flex flex-grow flex-col items-start justify-center space-y-4 p-6 text-2xl font-bold"
17+
>
1618
<div class="flex items-center">
1719
<span class="mr-2 rounded-full bg-background p-1"><Check /></span>
1820
<span>Efficiently translate your content</span>

‎src/routes/(auth)/forgot-password/+page.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Forgot Password

‎src/routes/(auth)/login/login-form.svelte‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script lang="ts">
22
import * as Form from '$components/ui/form'
33
import { Input } from '$components/ui/input'
4-
import * as Card from '$components/ui/card'
4+
import { Checkbox } from '$components/ui/checkbox'
5+
import { Label } from '$components/ui/label'
56
import { type LoginFormSchema, loginSchema } from './schema'
67
import { type Infer, type SuperValidated, superForm } from 'sveltekit-superforms'
78
import { zodClient } from 'sveltekit-superforms/adapters'
@@ -26,36 +27,52 @@
2627
})
2728
2829
const { form: formData, enhance } = form
29-
$formData.email = 'test@test.com'
30-
$formData.password = 'passwordAÖOGDÖADG'
3130
</script>
3231

33-
<form method="POST" use:enhance>
34-
<Card.Root class="m-auto w-[350px]">
35-
<Card.Header>
36-
<Card.Title>Log In</Card.Title>
37-
<Card.Description>Log In to tiny-tms and start doing you translations</Card.Description>
38-
</Card.Header>
39-
<Card.Content>
32+
<div class="flex items-center justify-center">
33+
<div class="w-full max-w-2xl">
34+
<div class="text-center">
35+
<h2 class="mt-6 text-center text-3xl font-extrabold">Sign in to your account</h2>
36+
<p class="mt-2 text-center text-sm">
37+
Or <a href="/signup" class="font-medium underline">sign up for a new account</a>
38+
</p>
39+
</div>
40+
<form method="POST" use:enhance>
4041
<Form.Field {form} name="email">
4142
<Form.Control let:attrs>
42-
<Form.Label>E-Mail</Form.Label>
43-
<Input {...attrs} bind:value={$formData.email} />
43+
<Form.Label>Email</Form.Label>
44+
<Input {...attrs} placeholder="m@example.com" bind:value={$formData.email} />
4445
</Form.Control>
45-
<Form.Description>This is your e-mail.</Form.Description>
4646
<Form.FieldErrors />
4747
</Form.Field>
4848
<Form.Field {form} name="password">
4949
<Form.Control let:attrs>
5050
<Form.Label>Password</Form.Label>
51-
<Input {...attrs} type="password" bind:value={$formData.password} />
51+
<Input
52+
{...attrs}
53+
type="password"
54+
placeholder="enter password"
55+
bind:value={$formData.password}
56+
/>
5257
</Form.Control>
53-
<Form.Description>This is your password</Form.Description>
5458
<Form.FieldErrors />
5559
</Form.Field>
56-
</Card.Content>
57-
<Card.Footer class="flex justify-end">
58-
<Form.Button>Log In</Form.Button>
59-
</Card.Footer>
60-
</Card.Root>
61-
</form>
60+
<div class="mb-5 mt-7 flex items-center justify-between">
61+
<div class="flex items-center">
62+
<Checkbox id="stay-logged-in" />
63+
<Label for="stay-logged-in" class="ml-2 text-sm">Stay logged in</Label>
64+
</div>
65+
<div class="text-sm">
66+
<a href="/forgot-password" class="font-medium underline">Forgot your password?</a>
67+
</div>
68+
</div>
69+
<Form.Button class="w-full">Log In</Form.Button>
70+
</form>
71+
<div class="mt-5 text-sm">
72+
Check out our <a href="/code-of-conduct" class="font-medium underline">Code of Conduct</a>
73+
and
74+
<a href="privacy-policy" class="font-medium underline">Privacy Policy</a>
75+
page.
76+
</div>
77+
</div>
78+
</div>

‎src/routes/(terms-policy)/code-of-conduct/+page.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Code of Conduct

‎src/routes/(terms-policy)/privacy-policy/+page.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Privacy Policy

0 commit comments

Comments
 (0)