Skip to content

Commit 1315097

Browse files
danielroedanielroe
committed
fix: extract strings + use 'disconnect'
1 parent a947448 commit 1315097

3 files changed

Lines changed: 71 additions & 47 deletions

File tree

‎app/components/AuthModal.vue‎

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ async function handleLogin() {
5151
<button
5252
type="button"
5353
class="absolute inset-0 bg-black/60 cursor-default"
54-
aria-label="Close modal"
54+
:aria-label="$t('auth.modal.close')"
5555
@click="open = false"
5656
/>
5757

@@ -64,11 +64,13 @@ async function handleLogin() {
6464
>
6565
<div class="p-6">
6666
<div class="flex items-center justify-between mb-6">
67-
<h2 id="auth-modal-title" class="font-mono text-lg font-medium">Account</h2>
67+
<h2 id="auth-modal-title" class="font-mono text-lg font-medium">
68+
{{ $t('auth.modal.title') }}
69+
</h2>
6870
<button
6971
type="button"
7072
class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
71-
aria-label="Close"
73+
:aria-label="$t('common.close')"
7274
@click="open = false"
7375
>
7476
<span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -79,35 +81,37 @@ async function handleLogin() {
7981
<div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
8082
<span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
8183
<div>
82-
<p class="font-mono text-xs text-fg-muted">Connected as @{{ user.handle }}</p>
84+
<p class="font-mono text-xs text-fg-muted">
85+
{{ $t('auth.modal.connected_as', { handle: user.handle }) }}
86+
</p>
8387
</div>
8488
</div>
8589
<button
90+
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"
8691
@click="logout"
87-
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"
8892
>
89-
Logout
93+
{{ $t('auth.modal.disconnect') }}
9094
</button>
9195
</div>
9296

9397
<!-- Disconnected state -->
9498
<form v-else class="space-y-4" @submit.prevent="handleLogin">
95-
<p class="text-sm text-fg-muted">Connect with your Atmosphere account</p>
99+
<p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
96100

97101
<div class="space-y-3">
98102
<div>
99103
<label
100104
for="handle-input"
101105
class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
102106
>
103-
Handle
107+
{{ $t('auth.modal.handle_label') }}
104108
</label>
105109
<input
106110
id="handle-input"
107111
v-model="handleInput"
108112
type="text"
109113
name="handle"
110-
placeholder="alice.bsky.social"
114+
:placeholder="$t('auth.modal.handle_placeholder')"
111115
autocomplete="off"
112116
spellcheck="false"
113117
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"
@@ -118,38 +122,41 @@ async function handleLogin() {
118122
<summary
119123
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
120124
>
121-
What is an Atmosphere account?
125+
{{ $t('auth.modal.what_is_atmosphere') }}
122126
</summary>
123127
<div class="mt-3">
124-
<p>
125-
<span class="font-bold">npmx.dev</span> uses the
126-
<a
127-
href="https://atproto.com"
128-
target="_blank"
129-
class="text-blue-400 hover:underline"
130-
>
131-
AT Protocol
132-
</a>
133-
to power many of its social features, allowing users to own their data and use
134-
one account for all compatible applications. Once you create an account, you
135-
can use other apps like
136-
<a
137-
href="https://bsky.app"
138-
target="_blank"
139-
class="text-blue-400 hover:underline"
140-
>
141-
Bluesky
142-
</a>
143-
and
144-
<a
145-
href="https://tangled.org"
146-
target="_blank"
147-
class="text-blue-400 hover:underline"
148-
>
149-
Tangled
150-
</a>
151-
with the same account.
152-
</p>
128+
<i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
129+
<template #npmx>
130+
<span class="font-bold">npmx.dev</span>
131+
</template>
132+
<template #atproto>
133+
<a
134+
href="https://atproto.com"
135+
target="_blank"
136+
class="text-blue-400 hover:underline"
137+
>
138+
AT Protocol
139+
</a>
140+
</template>
141+
<template #bluesky>
142+
<a
143+
href="https://bsky.app"
144+
target="_blank"
145+
class="text-blue-400 hover:underline"
146+
>
147+
Bluesky
148+
</a>
149+
</template>
150+
<template #tangled>
151+
<a
152+
href="https://tangled.org"
153+
target="_blank"
154+
class="text-blue-400 hover:underline"
155+
>
156+
Tangled
157+
</a>
158+
</template>
159+
</i18n-t>
153160
</div>
154161
</details>
155162
</div>
@@ -159,22 +166,22 @@ async function handleLogin() {
159166
:disabled="!handleInput.trim()"
160167
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"
161168
>
162-
Connect
169+
{{ $t('auth.modal.connect') }}
163170
</button>
164171
<button
165172
type="button"
166-
@click="handleCreateAccount"
167173
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"
174+
@click="handleCreateAccount"
168175
>
169-
Create a new account
176+
{{ $t('auth.modal.create_account') }}
170177
</button>
171178
<hr />
172179
<button
173180
type="button"
174-
@click="handleBlueskySignIn"
175181
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"
182+
@click="handleBlueskySignIn"
176183
>
177-
Connect with Bluesky
184+
{{ $t('auth.modal.connect_bluesky') }}
178185
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
179186
<path
180187
fill="#0F73FF"

‎app/components/ConnectorModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ watch(open, isOpen => {
9393
<div>
9494
<p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
9595
<p v-if="npmUser" class="font-mono text-xs text-fg-muted">
96-
{{ $t('connector.modal.logged_in_as', { user: npmUser }) }}
96+
{{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
9797
</p>
9898
</div>
9999
</div>

‎i18n/locales/en.json‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@
359359
"title": "Local Connector",
360360
"close_modal": "Close modal",
361361
"connected": "Connected",
362-
"logged_in_as": "Logged in as ~{user}",
362+
"connected_as_user": "Connected as ~{user}",
363363
"connected_hint": "You can now manage packages and organizations from the web UI.",
364364
"disconnect": "Disconnect",
365365
"run_hint": "Run the connector on your machine to enable admin features.",
@@ -739,7 +739,24 @@
739739
"connect_npm_cli": "Connect to npm CLI",
740740
"connect_atmosphere": "Connect to Atmosphere",
741741
"connecting": "Connecting...",
742-
"ops": "ops"
742+
"ops": "ops",
743+
"disconnect": "Disconnect"
744+
},
745+
"auth": {
746+
"modal": {
747+
"title": "Atmosphere",
748+
"close": "Close",
749+
"connected_as": "Connected as {'@'}{handle}",
750+
"disconnect": "Disconnect",
751+
"connect_prompt": "Connect with your Atmosphere account",
752+
"handle_label": "Handle",
753+
"handle_placeholder": "alice.bsky.social",
754+
"connect": "Connect",
755+
"create_account": "Create a new account",
756+
"connect_bluesky": "Connect with Bluesky",
757+
"what_is_atmosphere": "What is an Atmosphere account?",
758+
"atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account."
759+
}
743760
},
744761
"header": {
745762
"home": "npmx home",

0 commit comments

Comments
 (0)