the statusphere demo reworked into a vite/react app in a monorepo
Finish the UI
+58
-59
+17
-52
src/pages/home.ts
+17
-52
src/pages/home.ts
···
65
65
<button type="submit">Log out</button>
66
66
</div>
67
67
</form>`
68
-
: html`<p><a href="/login">Log in</a> to set your status!</p>`}
68
+
: html`<div class="session-form">
69
+
<div><a href="/login">Log in</a> to set your status!</div>
70
+
<div>
71
+
<a href="/login" class="button">Log in</a>
72
+
</div>
73
+
</div>`}
69
74
</div>
70
-
<div class="">
71
-
<div class="status-options">
72
-
${STATUS_OPTIONS.map(
73
-
(status) =>
74
-
html`<div class="status-option" data-value="${status}">
75
-
${status}
76
-
</div>`
77
-
)}
78
-
</div>
79
-
</div>
80
-
<div class="status-line no-line">
81
-
<div class="status">👍</div>
82
-
<div class="desc">
83
-
<a class="author" href="/">@pfrazee.com</a>
84
-
is feeling 👍 on Aug 12, 2024
85
-
</div>
86
-
</div>
87
-
<div class="status-line">
88
-
<div class="status">👍</div>
89
-
<div class="desc">
90
-
<a class="author" href="/">@pfrazee.com</a>
91
-
is feeling 👍 on Aug 12, 2024
92
-
</div>
93
-
</div>
94
-
<div class="status-line">
95
-
<div class="status">👍</div>
96
-
<div class="desc">
97
-
<a class="author" href="/">@pfrazee.com</a>
98
-
is feeling 👍 on Aug 12, 2024
99
-
</div>
100
-
</div>
101
-
<div class="status-line">
102
-
<div class="status">👍</div>
103
-
<div class="desc">
104
-
<a class="author" href="/">@pfrazee.com</a>
105
-
is feeling 👍 on Aug 12, 2024
106
-
</div>
107
-
</div>
108
-
<div class="status-line">
109
-
<div class="status">👍</div>
110
-
<div class="desc">
111
-
<a class="author" href="/">@pfrazee.com</a>
112
-
is feeling 👍 on Aug 12, 2024
113
-
</div>
114
-
</div>
115
-
<div class="status-line">
116
-
<div class="status">👍</div>
117
-
<div class="desc">
118
-
<a class="author" href="/">@pfrazee.com</a>
119
-
is feeling 👍 on Aug 12, 2024
120
-
</div>
75
+
<div class="status-options">
76
+
${STATUS_OPTIONS.map(
77
+
(status) =>
78
+
html`<div
79
+
class="status-option"
80
+
data-value="${status}"
81
+
data-authed=${profile ? '1' : '0'}
82
+
>
83
+
${status}
84
+
</div>`
85
+
)}
121
86
</div>
122
87
${statuses.map((status, i) => {
123
88
const handle = didHandleMap[status.authorDid] || status.authorDid
+16
-5
src/pages/login.ts
+16
-5
src/pages/login.ts
···
12
12
13
13
function content({ error }: Props) {
14
14
return html`<div id="root">
15
-
<form action="/login" method="post">
16
-
<input type="text" name="handle" placeholder="handle" required />
17
-
<button type="submit">Log in.</button>
18
-
${error ? html`<p>Error: <i>${error}</i></p>` : undefined}
19
-
</form>
15
+
<div id="header">
16
+
<h1>Statusphere</h1>
17
+
<p>Set your status on the Atmosphere.</p>
18
+
</div>
19
+
<div class="container">
20
+
<form action="/login" method="post" class="login-form">
21
+
<input
22
+
type="text"
23
+
name="handle"
24
+
placeholder="Enter your handle (eg alice.bsky.social)"
25
+
required
26
+
/>
27
+
<button type="submit">Log in</button>
28
+
${error ? html`<p>Error: <i>${error}</i></p>` : undefined}
29
+
</form>
30
+
</div>
20
31
</div>`
21
32
}
+6
src/public/home.js
+6
src/public/home.js
···
1
1
Array.from(document.querySelectorAll('.status-option'), (el) => {
2
2
el.addEventListener('click', async (ev) => {
3
3
setError('')
4
+
5
+
if (el.dataset.authed !== '1') {
6
+
window.location = '/login'
7
+
return
8
+
}
9
+
4
10
const res = await fetch('/status', {
5
11
method: 'POST',
6
12
headers: { 'content-type': 'application/json' },
+19
-2
src/public/styles.css
+19
-2
src/public/styles.css
···
43
43
/*
44
44
Common components
45
45
*/
46
-
button {
46
+
button, .button {
47
+
display: inline-block;
47
48
border: 0;
48
49
background-color: var(--primary-500);
49
50
border-radius: 50px;
50
51
color: #fff;
51
52
padding: 2px 10px;
52
53
cursor: pointer;
54
+
text-decoration: none;
53
55
}
54
-
button:hover {
56
+
button:hover, .button:hover {
55
57
background: var(--primary-400);
56
58
}
57
59
···
106
108
flex-direction: row;
107
109
align-items: center;
108
110
justify-content: space-between;
111
+
}
112
+
113
+
.login-form {
114
+
display: flex;
115
+
flex-direction: row;
116
+
gap: 6px;
117
+
border: 1px solid var(--border-color);
118
+
border-radius: 6px;
119
+
padding: 10px 16px;
120
+
background-color: #fff;
121
+
}
122
+
123
+
.login-form input {
124
+
flex: 1;
125
+
border: 0;
109
126
}
110
127
111
128
.status-options {