feat: show package claim for not connected users (#1514)

Author: mikouaji

app/components/Package/ClaimPackageModal.vue

@@ -3,6 +3,8 @@ import { checkPackageName } from '~/utils/package-name'
 
 const props = defineProps<{
   packageName: string
+  packageScope?: string | null
+  canPublishToScope: boolean
 }>()
 
 const {
@@ -221,9 +223,19 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Availability status -->
-      <div v-if="checkResult.valid">
+      <template v-if="checkResult.valid">
         <div
-          v-if="checkResult.available"
+          v-if="isConnected && !canPublishToScope"
+          class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
+        >
+          <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">
+            {{ $t('claim.modal.missing_permission', { scope: packageScope }) }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
           <span class="i-lucide:check text-green-500 w-5 h-5" aria-hidden="true" />
@@ -237,10 +249,10 @@ const previewPackageJson = computed(() => {
           <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
-      </div>
+      </template>
 
       <!-- Similar packages warning -->
-      <div v-if="checkResult.similarPackages?.length && checkResult.available">
+      <template v-if="checkResult.similarPackages?.length && checkResult.available">
         <div
           :class="
             hasDangerousSimilarPackages
@@ -290,7 +302,7 @@ const previewPackageJson = computed(() => {
             </li>
           </ul>
         </div>
-      </div>
+      </template>
 
       <!-- Error message -->
       <div
@@ -336,7 +348,7 @@ const previewPackageJson = computed(() => {
         </div>
 
         <!-- Claim button -->
-        <div v-else class="space-y-3">
+        <div v-else-if="isConnected && canPublishToScope" class="space-y-3">
           <p class="text-sm text-fg-muted">
             {{ $t('claim.modal.publish_hint') }}
           </p>

app/pages/search.vue

@@ -332,14 +332,13 @@ const canPublishToScope = computed(() => {
   return orgMembership.value[scope] === true
 })
 
-// Show claim prompt when valid name, available, connected, and has permission
+// Show claim prompt when valid name, available, either not connected or connected and has permission
 const showClaimPrompt = computed(() => {
   return (
-    isConnected.value &&
     isValidPackageName.value &&
     packageAvailability.value?.available === true &&
     packageAvailability.value.name === query.value.trim() &&
-    canPublishToScope.value &&
+    (!isConnected.value || (isConnected.value && canPublishToScope.value)) &&
     status.value !== 'pending'
   )
 })
@@ -569,7 +568,7 @@ defineOgImageComponent('Default', {
           <!-- Claim prompt - shown at top when valid name but no exact match -->
           <div
             v-if="showClaimPrompt && visibleResults.total > 0"
-            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4"
+            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg sm:flex hidden flex-row sm:items-center gap-3 sm:gap-4"
           >
             <div class="flex-1 min-w-0">
               <p class="font-mono text-sm text-fg">
@@ -687,7 +686,7 @@ defineOgImageComponent('Default', {
             </div>
 
             <!-- Offer to claim the package name if it's valid -->
-            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center">
+            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center hidden sm:block">
               <div class="p-4 bg-bg-subtle border border-border rounded-lg">
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
@@ -741,6 +740,11 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Claim package modal -->
-    <PackageClaimPackageModal ref="claimPackageModalRef" :package-name="query" />
+    <PackageClaimPackageModal
+      ref="claimPackageModalRef"
+      :package-name="query"
+      :package-scope="packageScope"
+      :can-publish-to-scope="canPublishToScope"
+    />
   </main>
 </template>

i18n/locales/en.json

@@ -624,6 +624,7 @@
       "invalid_name": "Invalid package name:",
       "available": "This name is available!",
       "taken": "This name is already taken.",
+      "missing_permission": "You do not have permission to add a package to scope {'@'}{scope}.",
       "similar_warning": "Similar packages exist - npm may reject this name:",
       "related": "Related packages:",
       "scope_warning_title": "Consider using a scoped package instead",

i18n/locales/pl-PL.json

@@ -624,6 +624,7 @@
       "invalid_name": "Nieprawidłowa nazwa pakietu:",
       "available": "Ta nazwa jest dostępna!",
       "taken": "Ta nazwa jest już zajęta.",
+      "missing_permission": "Nie masz uprawnień aby dodać pakiet do scope’u {'@'}{scope}.",
       "similar_warning": "Istnieją podobne pakiety — npm może odrzucić tę nazwę:",
       "related": "Powiązane pakiety:",
       "scope_warning_title": "Rozważ użycie pakietu ze scope",

i18n/schema.json

@@ -1876,6 +1876,9 @@
             "taken": {
               "type": "string"
             },
+            "missing_permission": {
+              "type": "string"
+            },
             "similar_warning": {
               "type": "string"
             },

lunaria/files/en-GB.json

@@ -623,6 +623,7 @@
       "invalid_name": "Invalid package name:",
       "available": "This name is available!",
       "taken": "This name is already taken.",
+      "missing_permission": "You do not have permission to add a package to scope {'@'}{scope}.",
       "similar_warning": "Similar packages exist - npm may reject this name:",
       "related": "Related packages:",
       "scope_warning_title": "Consider using a scoped package instead",

lunaria/files/en-US.json

@@ -623,6 +623,7 @@
       "invalid_name": "Invalid package name:",
       "available": "This name is available!",
       "taken": "This name is already taken.",
+      "missing_permission": "You do not have permission to add a package to scope {'@'}{scope}.",
       "similar_warning": "Similar packages exist - npm may reject this name:",
       "related": "Related packages:",
       "scope_warning_title": "Consider using a scoped package instead",

lunaria/files/pl-PL.json

@@ -623,6 +623,7 @@
       "invalid_name": "Nieprawidłowa nazwa pakietu:",
       "available": "Ta nazwa jest dostępna!",
       "taken": "Ta nazwa jest już zajęta.",
+      "missing_permission": "Nie masz uprawnień aby dodać pakiet do scope’u {'@'}{scope}.",
       "similar_warning": "Istnieją podobne pakiety — npm może odrzucić tę nazwę:",
       "related": "Powiązane pakiety:",
       "scope_warning_title": "Rozważ użycie pakietu ze scope",

test/nuxt/a11y.spec.ts

@@ -1028,6 +1028,8 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
           packageName: 'test-package',
+          packageScope: undefined,
+          canPublishToScope: true,
           open: false,
         },
       })
@@ -1039,6 +1041,8 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
           packageName: 'test-package',
+          packageScope: undefined,
+          canPublishToScope: true,
           open: true,
         },
       })