grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: add create account button to login modal
Add createAccount() in auth.ts that redirects to /oauth/login with
prompt=create and pds hint. Add "Don't have an account? Create one"
link to the login modal.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+24
-2
+5
app/lib/auth.ts
+5
app/lib/auth.ts
···
11
11
throw new Error(body.error || "Login failed");
12
12
}
13
13
14
+
export async function createAccount(): Promise<void> {
15
+
const pds = import.meta.env.DEV ? "localhost:2583" : "selfhosted.social";
16
+
window.location.href = `/oauth/login?prompt=create&pds=${encodeURIComponent(pds)}`;
17
+
}
18
+
14
19
export async function logout(): Promise<void> {
15
20
(globalThis as any).__hatk_viewer = null;
16
21
await fetch("/auth/logout", { method: "POST" }).catch(() => {});
+19
-2
app/lib/components/organisms/LoginModal.svelte
+19
-2
app/lib/components/organisms/LoginModal.svelte
···
1
1
<script lang="ts">
2
-
import { login } from '$lib/auth'
2
+
import { login, createAccount } from '$lib/auth'
3
3
import Modal from '../atoms/Modal.svelte'
4
4
import Button from '../atoms/Button.svelte'
5
5
···
141
141
{submitting ? 'Signing in\u2026' : 'Sign in'}
142
142
</Button>
143
143
</div>
144
+
<div class="create-account">
145
+
<span class="create-account-text">Don't have an account?</span>
146
+
<button class="create-account-link" onclick={createAccount}>Create one</button>
147
+
</div>
144
148
</Modal>
145
149
146
150
<style>
···
223
227
text-overflow: ellipsis;
224
228
white-space: nowrap;
225
229
}
226
-
.actions { display: flex; gap: 10px; justify-content: flex-end; }
230
+
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 12px; }
231
+
.create-account { text-align: center; font-size: 13px; }
232
+
.create-account-text { color: var(--text-muted); }
233
+
.create-account-link {
234
+
background: none;
235
+
border: none;
236
+
color: var(--grain);
237
+
cursor: pointer;
238
+
font-size: 13px;
239
+
font-family: var(--font-body);
240
+
padding: 0;
241
+
text-decoration: none;
242
+
}
243
+
.create-account-link:hover { text-decoration: underline; }
227
244
.legal-links {
228
245
font-size: 11px;
229
246
color: var(--text-faint);