forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add warning for connector for non-contributors (#540)
authored by
Daniel Roe
and committed by
GitHub
b66c719a
73e50ef8
+61
-2
+55
-2
app/components/ConnectorModal.vue
+55
-2
app/components/ConnectorModal.vue
···
8
8
const portInput = shallowRef('31415')
9
9
const { copied, copy } = useClipboard({ copiedDuring: 2000 })
10
10
11
+
const hasAttemptedConnect = shallowRef(false)
12
+
11
13
async function handleConnect() {
14
+
hasAttemptedConnect.value = true
12
15
const port = Number.parseInt(portInput.value, 10) || 31415
13
16
const success = await connect(tokenInput.value.trim(), port)
14
17
if (success) {
···
42
45
watch(open, isOpen => {
43
46
if (isOpen) {
44
47
tokenInput.value = ''
48
+
hasAttemptedConnect.value = false
45
49
}
46
50
})
47
51
</script>
···
116
120
117
121
<!-- Disconnected state -->
118
122
<form v-else class="space-y-4" @submit.prevent="handleConnect">
123
+
<!-- Contributor-only notice -->
124
+
<div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
125
+
<div class="space-y-2">
126
+
<span
127
+
class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
128
+
>
129
+
{{ $t('connector.modal.contributor_badge') }}
130
+
</span>
131
+
<p class="text-sm text-fg-muted">
132
+
<i18n-t keypath="connector.modal.contributor_notice">
133
+
<template #link>
134
+
<a
135
+
href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
136
+
target="_blank"
137
+
rel="noopener noreferrer"
138
+
class="text-amber-400 hover:underline"
139
+
>
140
+
{{ $t('connector.modal.contributor_link') }}
141
+
</a>
142
+
</template>
143
+
</i18n-t>
144
+
</p>
145
+
</div>
146
+
</div>
147
+
119
148
<p class="text-sm text-fg-muted">
120
149
{{ $t('connector.modal.run_hint') }}
121
150
</p>
···
124
153
class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
125
154
>
126
155
<span class="text-fg-subtle">$</span>
156
+
<span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
157
+
<button
158
+
type="button"
159
+
:aria-label="
160
+
copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
161
+
"
162
+
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
163
+
@click="copy('pnpm npmx-connector')"
164
+
>
165
+
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
166
+
<span
167
+
v-else
168
+
class="i-carbon:checkmark block w-5 h-5 text-green-500"
169
+
aria-hidden="true"
170
+
/>
171
+
</button>
172
+
</div>
173
+
174
+
<!-- TODO: Uncomment when npmx-connector is published to npm
175
+
<div
176
+
class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
177
+
>
178
+
<span class="text-fg-subtle">$</span>
127
179
<span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
128
180
<div class="ms-auto flex items-center gap-2">
129
181
<PackageManagerSelect />
···
145
197
</button>
146
198
</div>
147
199
</div>
200
+
-->
148
201
149
202
<p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
150
203
···
193
246
</details>
194
247
</div>
195
248
196
-
<!-- Error message -->
249
+
<!-- Error message (only show after user explicitly clicks Connect) -->
197
250
<div
198
-
v-if="error"
251
+
v-if="error && hasAttemptedConnect"
199
252
role="alert"
200
253
class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
201
254
>
+3
i18n/locales/en.json
+3
i18n/locales/en.json
···
374
374
},
375
375
"modal": {
376
376
"title": "Local Connector",
377
+
"contributor_badge": "Contributors only",
378
+
"contributor_notice": "The connector is not yet published to npm. See the {link} for how to run locally.",
379
+
"contributor_link": "contributing guide",
377
380
"connected": "Connected",
378
381
"connected_as_user": "Connected as ~{user}",
379
382
"connected_hint": "You can now manage packages and organizations from the web UI.",
+3
lunaria/files/en-US.json
+3
lunaria/files/en-US.json
···
374
374
},
375
375
"modal": {
376
376
"title": "Local Connector",
377
+
"contributor_badge": "Contributors only",
378
+
"contributor_notice": "The connector is not yet published to npm. See the {link} for how to run locally.",
379
+
"contributor_link": "contributing guide",
377
380
"connected": "Connected",
378
381
"connected_as_user": "Connected as ~{user}",
379
382
"connected_hint": "You can now manage packages and organizations from the web UI.",