feat: Event Editor: Select Profile (import)

cli/import-organizer/instagram.ts

@@ -0,0 +1,52 @@
+import { IgApiClient } from 'instagram-private-api'
+
+export type InstagramProfileData = {
+  username: string
+  fullName: string
+  biography: string
+  photoUrl?: string
+  externalUrl?: string
+  followerCount: number
+  isVerified: boolean
+}
+
+export async function getInstagramProfile(
+  instagramUrl: string
+): Promise<InstagramProfileData> {
+  const username = instagramUrl
+    .replace('https://', '')
+    .replace('http://', '')
+    .replace('www.', '')
+    .replace('instagram.com/', '')
+    .replace('instagr.am/', '')
+    .replace(/\/$/, '')
+    .split('/')[0]
+    .split('?')[0]
+
+  if (!username) {
+    throw new Error('Invalid Instagram URL: could not extract valid username')
+  }
+  console.log(`Fetching instagram profile for ${username}`)
+  const instagram = new IgApiClient()
+
+  const IG_USER = process.env.INSTAGRAM_USERNAME
+  const IG_PASS = process.env.INSTAGRAM_PASSWORD
+  if (!IG_USER || !IG_PASS) {
+    throw new Error('INSTAGRAM_USERNAME and INSTAGRAM_PASSWORD must be set')
+  }
+
+  instagram.state.generateDevice(IG_USER)
+  await instagram.account.login(IG_USER, IG_PASS)
+  const userInfo = await instagram.user.usernameinfo(username)
+
+  console.log(`Successfully fetched data for @${username}`)
+  return {
+    username: userInfo.username,
+    fullName: userInfo.full_name || username,
+    biography: userInfo.biography || '',
+    photoUrl: userInfo.profile_pic_url || '',
+    externalUrl: userInfo.external_url || '',
+    followerCount: userInfo.follower_count || 0,
+    isVerified: userInfo.is_verified || false,
+  }
+}

components/inputs/ProfileInput.vue

@@ -1,16 +1,74 @@
 <script setup lang="ts">
-const model = defineModel() as Ref<any>
+import { toast } from 'vue-sonner'
 
+const model = defineModel<any>()
 const { $client } = useNuxtApp()
-
 const searchQuery = ref('')
+const queryKey = computed(() => ['profiles.search', searchQuery.value.trim()])
 const { data } = useQuery<any>({
-  queryKey: ['profiles.search', searchQuery],
-  queryFn: () => $client.profiles.search.query({ query: searchQuery.value }),
+  queryKey,
+  queryFn: ({ queryKey: [, term] }) =>
+    $client.profiles.search.query({ query: term as string }),
+  enabled: computed(() => !!(queryKey.value[1] as string)),
   retry: false,
 })
-
 const isOpen = ref(false)
+
+const instagramUsername = computed(() => {
+  return extractInstagramUsername(searchQuery.value)
+})
+
+const importFromInstagram = async () => {
+  if (!instagramUsername.value) return
+
+  const promise = $client.profiles.createFromInstagram.mutate({
+    instagramUrl: `https://instagram.com/${instagramUsername.value}`,
+  })
+
+  toast.promise(promise, {
+    loading: 'Scheduling profile import...',
+    success: (profile: any) => {
+      if (profile) {
+        model.value = profile
+        isOpen.value = false
+        searchQuery.value = ''
+        return 'Profile import scheduled successfully!'
+      }
+      return 'Profile import scheduled but no profile returned'
+    },
+    error: (error: any) => (error as Error).message,
+  })
+}
+
+// Browser-safe duplication of the backend parsing logic.
+function isValidInstagramUsername(username: string): boolean {
+  if (!username || username.length === 0) return false
+  if (username.length > 30) return false // Instagram username limit
+
+  const validPattern = /^[a-zA-Z0-9_]([a-zA-Z0-9_.]*[a-zA-Z0-9_])?$/
+  const hasConsecutivePeriods = /\.\./.test(username)
+
+  return validPattern.test(username) && !hasConsecutivePeriods
+}
+
+function extractInstagramUsername(input: string): string {
+  const raw = input.trim()
+
+  if (raw.startsWith('@')) {
+    const username = raw.replace(/^@+/, '').split(/[/?#]/, 1)[0].toLowerCase()
+    return isValidInstagramUsername(username) ? username : ''
+  }
+  const match = raw.match(/instagram\.com\/([a-zA-Z0-9_.]+)/)
+  const candidate = match ? match[1] : ''
+
+  // A guard for the most common non-profile routes
+  if (/^(p|reel|stories)$/i.test(candidate)) {
+    return ''
+  }
+
+  const normalized = candidate.toLowerCase()
+  return isValidInstagramUsername(normalized) ? normalized : ''
+}
 </script>
 
 <template>
@@ -57,9 +115,26 @@ const isOpen = ref(false)
             </span>
           </div>
         </ComboboxAnchor>
+        <p class="text-xs text-muted-foregorund mt-1 px-1">
+          Or paste a link for an Instagram profile
+        </p>
 
         <ComboboxList class="w-[260px]">
-          <ComboboxEmpty> No profiles found. </ComboboxEmpty>
+          <div v-if="instagramUsername">
+            <div
+              class="cursor-pointer p-2 flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
+              @click="importFromInstagram"
+            >
+              <Icon name="heroicons:link" class="h-4 w-4" />
+              <span>Import @{{ instagramUsername }} from Instagram</span>
+            </div>
+          </div>
+
+          <ComboboxEmpty
+            v-if="!data?.length && !instagramUsername && searchQuery"
+          >
+            No profiles found.
+          </ComboboxEmpty>
 
           <ComboboxGroup>
             <ComboboxItem

package.json

@@ -53,6 +53,7 @@
     "html-entities": "^2.6.0",
     "htmlparser2": "^10.0.0",
     "ical": "^0.8.0",
+    "instagram-private-api": "^1.46.1",
     "lucide-vue-next": "^0.487.0",
     "mailgun.js": "^12.0.3",
     "markdown-it": "^14.1.0",