moth11.net
frontend for xcvr appview
add initial profile form
+63
-2
+2
.gitignore
+2
.gitignore
+61
-2
src/routes/p/[handle]/+page.svelte
+61
-2
src/routes/p/[handle]/+page.svelte
···
1
1
<script lang="ts">
2
2
import type { PageProps } from "./$types";
3
+
import { numToHex } from "$lib/colors"
3
4
let { data }: PageProps = $props();
4
5
</script>
5
6
6
7
<main>
7
8
{#if data.profile}
8
-
<h1>
9
+
<h1 class="display name">
9
10
{data.profile.displayName}
10
11
</h1>
11
-
<h2>
12
+
<h2 class="display">
12
13
<a href="{data.profile.handle}">
13
14
@{data.profile.handle}
14
15
</a>
···
18
19
</p>
19
20
{/if}
20
21
</main>
22
+
{#if data?.id?.handle && data?.profile?.handle && data.id.handle === data.profile.handle}
23
+
<aside>
24
+
<p>
25
+
you can change your profile here, press the i'm done button when you have finished to save your new profile
26
+
</p>
27
+
<form action="{import.meta.env.VITE_API_URL}/oauth/login" method="POST">
28
+
<div>
29
+
<label for="displayName">
30
+
display name, this is what shows in most atproto stuff
31
+
</label>
32
+
<input
33
+
type="text"
34
+
name="displayName"
35
+
placeholder="alice rulez"
36
+
value="{data.profile.displayName}"
37
+
required
38
+
/></div><div>
39
+
<label for="defaultNick">
40
+
default nickname, which is what shows just in the lrc chats by default
41
+
</label>
42
+
<input
43
+
type="text"
44
+
name="defaultNick"
45
+
placeholder="alice"
46
+
value="{data.profile?.defaultNick}"
47
+
required
48
+
/></div><div>
49
+
<label for="status">
50
+
this is your status / bio, you can put extra stuff here if you'd like to share more about yourself
51
+
</label>
52
+
<textarea
53
+
type="text"
54
+
name="status"
55
+
placeholder="hi i'm alice"
56
+
value="{data.profile?.status}"
57
+
required
58
+
/></div><div>
59
+
<label for="color">
60
+
this is your accent color, make sure to pick something cool and trendy to drive your personal brand awareness
61
+
</label>
62
+
<input
63
+
type="color"
64
+
name="color"
65
+
value="{numToHex(data.profile?.color)}"
66
+
/></div>
67
+
68
+
</form>
69
+
</aside>
70
+
{/if}
71
+
72
+
<style>
73
+
.name {
74
+
font-size: 4rem;
75
+
}
76
+
h2 {
77
+
margin: 0;
78
+
}
79
+
</style>