Skip to content

Commit 14cfdfb

Browse files
nulfrostnulfrost
committed
refactor: working on some modal enhancements
1 parent 0e8b61e commit 14cfdfb

6 files changed

Lines changed: 212 additions & 207 deletions

File tree

‎app/app.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,7 @@ if (import.meta.client) {
8181

8282
<ScrollToTop />
8383
</div>
84+
85+
<!-- <ConnectorModal /> -->
86+
<AuthModal />
8487
</template>

‎app/assets/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,3 +553,8 @@ input[type='search']::-webkit-search-results-decoration {
553553
animation-duration: 0.3s;
554554
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
555555
}
556+
557+
/* Locking the scroll whenever any of the modals are open */
558+
html:has(dialog[open]) {
559+
overflow: hidden;
560+
}

‎app/components/AuthModal.client.vue‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<script setup lang="ts">
2+
const handleInput = shallowRef('')
3+
4+
const { user, logout } = useAtproto()
5+
6+
async function handleBlueskySignIn() {
7+
await navigateTo(
8+
{
9+
path: '/api/auth/atproto',
10+
query: { handle: 'https://bsky.social' },
11+
},
12+
{ external: true },
13+
)
14+
}
15+
16+
async function handleCreateAccount() {
17+
await navigateTo(
18+
{
19+
path: '/api/auth/atproto',
20+
query: { handle: 'https://npmx.social', create: 'true' },
21+
},
22+
{ external: true },
23+
)
24+
}
25+
26+
async function handleLogin() {
27+
if (handleInput.value) {
28+
await navigateTo(
29+
{
30+
path: '/api/auth/atproto',
31+
query: { handle: handleInput.value },
32+
},
33+
{ external: true },
34+
)
35+
}
36+
}
37+
</script>
38+
39+
<template>
40+
<Transition
41+
enter-active-class="transition-opacity duration-200"
42+
leave-active-class="transition-opacity duration-200"
43+
enter-from-class="opacity-0"
44+
leave-to-class="opacity-0"
45+
>
46+
<!-- Modal -->
47+
<Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg text-white">
48+
<div v-if="user?.handle" class="space-y-4">
49+
<div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
50+
<span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
51+
<div>
52+
<p class="font-mono text-xs text-fg-muted">
53+
{{ $t('auth.modal.connected_as', { handle: user.handle }) }}
54+
</p>
55+
</div>
56+
</div>
57+
<button
58+
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
59+
@click="logout"
60+
>
61+
{{ $t('auth.modal.disconnect') }}
62+
</button>
63+
</div>
64+
65+
<!-- Disconnected state -->
66+
<form v-else class="space-y-4" @submit.prevent="handleLogin">
67+
<p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
68+
69+
<div class="space-y-3">
70+
<div>
71+
<label
72+
for="handle-input"
73+
class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
74+
>
75+
{{ $t('auth.modal.handle_label') }}
76+
</label>
77+
<input
78+
id="handle-input"
79+
v-model="handleInput"
80+
type="text"
81+
name="handle"
82+
:placeholder="$t('auth.modal.handle_placeholder')"
83+
autocomplete="off"
84+
spellcheck="false"
85+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
86+
/>
87+
</div>
88+
89+
<details class="text-sm">
90+
<summary
91+
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
92+
>
93+
{{ $t('auth.modal.what_is_atmosphere') }}
94+
</summary>
95+
<div class="mt-3">
96+
<i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
97+
<template #npmx>
98+
<span class="font-bold">npmx.dev</span>
99+
</template>
100+
<template #atproto>
101+
<a
102+
href="https://atproto.com"
103+
target="_blank"
104+
class="text-blue-400 hover:underline"
105+
>
106+
AT Protocol
107+
</a>
108+
</template>
109+
<template #bluesky>
110+
<a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
111+
Bluesky
112+
</a>
113+
</template>
114+
<template #tangled>
115+
<a
116+
href="https://tangled.org"
117+
target="_blank"
118+
class="text-blue-400 hover:underline"
119+
>
120+
Tangled
121+
</a>
122+
</template>
123+
</i18n-t>
124+
</div>
125+
</details>
126+
</div>
127+
128+
<button
129+
type="submit"
130+
:disabled="!handleInput.trim()"
131+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
132+
>
133+
{{ $t('auth.modal.connect') }}
134+
</button>
135+
<button
136+
type="button"
137+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
138+
@click="handleCreateAccount"
139+
>
140+
{{ $t('auth.modal.create_account') }}
141+
</button>
142+
<hr />
143+
<button
144+
type="button"
145+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
146+
@click="handleBlueskySignIn"
147+
>
148+
{{ $t('auth.modal.connect_bluesky') }}
149+
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
150+
<path
151+
fill="#0F73FF"
152+
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
153+
></path>
154+
</svg>
155+
</button>
156+
</form>
157+
</Modal>
158+
</Transition>
159+
</template>

‎app/components/AuthModal.vue‎

Lines changed: 0 additions & 198 deletions
This file was deleted.

0 commit comments

Comments
 (0)