kyd-shared-badge 0.3.78 → 0.3.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.78",
+  "version": "0.3.80",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/connect/ConnectAccounts.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
-import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink } from 'lucide-react';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
 import Link from 'next/link';
@@ -38,6 +38,9 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     headerDescription,
     requiredProviders,
     companyName,
+    initialProviderId,
+    githubAppSlugId,
+    userId,
   } = props;
 
   const router = useRouter();
@@ -45,11 +48,23 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   const [linkUrl, setLinkUrl] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState<string | null>(null);
+  const [showGithubManage, setShowGithubManage] = useState(false);
 
   const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
-  const connectedIds = useMemo(() => new Set((connected || []).map(c => c.id.toLowerCase())), [connected]);
+  const connectedIds = useMemo(() => new Set((connected || []).map(c => c.name.toLowerCase())), [connected]);
   const reconnectIds = useMemo(() => new Set((needsReconnectIds || []).map(id => id.toLowerCase())), [needsReconnectIds]);
 
+  // React to upstream changes to initialProviderId (e.g., after oauth success)
+  useEffect(() => {
+    if (initialProviderId && initialProviderId !== selectedProviderId) {
+      setSelectedProviderIdAndCallback(initialProviderId);
+      // If we landed here from initialProviderId, show the existing card (not manage)
+      if (initialProviderId === 'githubapp') setShowGithubManage(false);
+    }
+    // Do not clear selection if initialProviderId becomes falsy later
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialProviderId]);
+
   const list = useMemo(() => {
     const arr = [...providers];
     if (!sort) return arr;
@@ -94,6 +109,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
       });
       const data = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(data?.error || `Failed to disconnect ${providerId}.`);
+      setShowGithubManage(false);
       if (onDisconnected) onDisconnected(providerId);
     } catch (e) {
       const err = e as Error;
@@ -148,14 +164,27 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     if (url) router.push(url);
   };
 
-  const selectedProvider = useMemo(
-    () => (selectedProviderId ? providers.find(p => p.id.toLowerCase() === selectedProviderId.toLowerCase()) : null),
-    [selectedProviderId, providers]
-  );
+  const selectedProvider = useMemo(() => {
+    if (!selectedProviderId) return null;
+    if (selectedProviderId.toLowerCase() === 'githubapp') {
+      // Special virtual provider for github app, not in providers list
+      return {
+        id: 'githubapp',
+        name: 'GitHub App',
+        connectionType: 'githubapp',
+        iconColor: 'text-gray-900',
+        placeholder: 'Install the GitHub App to connect your repositories.',
+      };
+    }
+    return providers.find(
+      (p) => p.id.toLowerCase() === selectedProviderId.toLowerCase()
+    ) || null;
+  }, [selectedProviderId, providers]);
 
   const handleConnectBack = () => {
     setSelectedProviderIdAndCallback(null);
     setLinkUrl('');
+    setShowGithubManage(false);
   };
 
   const cardVariants = {
@@ -163,10 +192,20 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     animate: { opacity: 1, y: 0 },
     exit: { opacity: 0, y: -20 },
   };
-
+  
+  // GitHub status helpers
+  const githubConnectedAccount = useMemo(() => {
+    return (connected || []).find(c => (c?.name || '').toLowerCase() === 'github');
+  }, [connected]);
+  const isGithubConnected = !!githubConnectedAccount;
+  const isGithubAppInstalled = useMemo(() => {
+    const setupAction = (githubConnectedAccount as any)?.app_installation_info?.setupAction;
+    return setupAction === 'install';
+  }, [githubConnectedAccount]);
+  
   return (
     <>
-      {selectedProvider ? (
+      {selectedProvider && selectedProvider.id !== 'githubapp' ? (
         <AnimatePresence>
           <motion.div
             key="connect-card"
@@ -255,6 +294,165 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
             </div>
           </motion.div>
         </AnimatePresence>
+      ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
+        <AnimatePresence>
+          {(!showGithubManage && initialProviderId === 'githubapp') ? (
+            <motion.div
+              key="github-card"
+              className="rounded-xl border max-w-xl w-full"
+              style={{
+                backgroundColor: 'var(--content-card-background)',
+                borderColor: 'var(--icon-button-secondary)',
+              }}
+              variants={cardVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              transition={{ duration: 0.3 }}
+            >
+              <div className="p-6 flex flex-col items-center">
+                <div className="w-full flex items-center gap-3 mb-2 justify-center">
+                  <ProviderIcon name="github" className="w-8 h-8 inline-block" />
+                  <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
+                </div>
+                <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
+                  You’ve successfully linked your GitHub account! 
+                  <br />
+                  To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you’d like to highlight private work or share additional contributions for verification.
+                  <br /><br />
+                  <span className="text-[var(--text-main)] font-medium">
+                    Would you like to connect your private repositories?
+                  </span>
+                </p>
+                <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button
+                      className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
+                      variant="destructive"
+                      onClick={() => {
+                        handleConnectBack();
+                      }}
+                    >
+                      No, don&#39;t connect
+                    </Button>
+                  </motion.div>
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button
+                      className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
+                      onClick={() => {
+                        const opaqueState = window.crypto?.randomUUID?.() || Math.random().toString(36).substring(2);
+                        const stateObj = { opaqueState, userId, companyId };
+                        const stateString = encodeURIComponent(JSON.stringify(stateObj));
+                        const redirectUrl = `https://github.com/apps/${githubAppSlugId}/installations/new?state=${stateString}`;
+                        window.location.href = redirectUrl;
+                      }}
+                    >
+                      <span className="flex items-center justify-center">
+                        <ExternalLink className="w-4 h-4 mr-2" />
+                        Yes, connect my private repos
+                      </span>
+                    </Button>
+                  </motion.div>
+                </div>
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="github-manage"
+              className="rounded-xl border max-w-xl w-full"
+              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+              variants={cardVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+            >
+              <div className="sm:p-6 p-4">
+                <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+                  <ArrowLeft className="w-4 h-4" />
+                  Back
+                </button>
+                <div className="text-center">
+                  <div className="flex justify-center mb-4">
+                    <ProviderIcon name="github" className="w-10 h-10" />
+                  </div>
+                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>Manage GitHub Connections</h3>
+                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md">
+                    Connect or disconnect your GitHub OAuth account and optional GitHub App for private repositories.
+                  </p>
+                </div>
+
+                <div className="mt-6 space-y-4">
+                  <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub OAuth</div>
+                        <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubConnected ? 'Connected' : 'Not connected'}</div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {isGithubConnected ? (
+                          <Button
+                            onClick={() => onDisconnect('github')}
+                            className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                            style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                            variant="destructive"
+                            disabled={isDisconnecting === 'github'}
+                          >
+                            {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
+                            <span>Disconnect</span>
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() => onOAuth('github')}
+                            className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
+                          >
+                            <ExternalLink className="w-4 h-4 mr-2" />
+                            Connect
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub App (Private Repos)</div>
+                        <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubAppInstalled ? 'Installed' : 'Not installed'}</div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {isGithubAppInstalled ? (
+                          <Button
+                            onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
+                            className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                            style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                            variant="destructive"
+                          >
+                            <Unlink className="size-3 sm:size-4" />
+                            <span>Uninstall</span>
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() => {
+                              const opaqueState = window.crypto?.randomUUID?.() || Math.random().toString(36).substring(2);
+                              const stateObj = { opaqueState, userId };
+                              const stateString = encodeURIComponent(JSON.stringify(stateObj));
+                              const redirectUrl = `https://github.com/apps/${githubAppSlugId}/installations/new?state=${stateString}`;
+                              window.location.href = redirectUrl;
+                            }}
+                            className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
+                          >
+                            <ExternalLink className="w-4 h-4 mr-2" />
+                            Install
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       ) : (
         <Card className="border-[var(--icon-button-secondary)] pt-2" style={{ backgroundColor: 'var(--content-card-background)'}}>
           <AnimatePresence mode="wait">
@@ -279,7 +477,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                     const isConnected = connectedIds.has(providerId.toLowerCase());
                     const needsReconnect = reconnectIds.has(providerId.toLowerCase());
                     const isOauth = provider.connectionType === 'oauth'
-                    const connectedUrl = connected.find(c => c.id.toLowerCase() === providerId.toLowerCase())?.url;
+                    const connectedUrl = connected.find(c => c.name.toLowerCase() === providerId.toLowerCase())?.url;
                     const betaFlag = () => (
                       <span
                         className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
@@ -324,7 +522,49 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                           {provider.beta ? betaFlag() : null}
                         </div>
 
-                        {isConnected && isDisconnecting !== providerId ? (
+                        {providerId.toLowerCase() === 'github' ? (
+                          <div className="flex items-center gap-2">
+                            {(!isConnected && !isGithubAppInstalled) && (
+                              <Button
+                                onClick={() => setSelectedProviderIdAndCallback(providerId)}
+                                className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                              >
+                                <Link2 className="size-3 sm:size-4" />
+                                <span className="sm:text-base text-sm">Connect</span>
+                              </Button>
+                            )}
+                            {(isConnected && !isGithubAppInstalled) && (
+                              <Button
+                                onClick={() => { setShowGithubManage(true); setSelectedProviderIdAndCallback('githubapp'); }}
+                                className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                              >
+                                <Settings className="size-3 sm:size-4" />
+                                <span className="sm:text-base text-sm">Manage</span>
+                              </Button>
+                            )}
+                            {(isConnected && isGithubAppInstalled) && (
+                              <div
+                                className="relative flex items-center group"
+                                onClick={() => { setShowGithubManage(true); setSelectedProviderIdAndCallback('githubapp'); }}
+                                style={{ cursor: 'pointer' }}
+                              >
+                                <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                                  <CheckCircle className="size-3 sm:size-4" />
+                                  <span className="text-sm font-medium">Connected</span>
+                                </div>
+                                <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                                  <div className="flex items-center gap-1.5 text-red-600 text-sm hover:underline">
+                                    <Unlink className="size-3 sm:size-4" />
+                                    <span>Disconnect</span>
+                                  </div>
+                                </div>
+                              </div>
+                            )}
+                            {isDisconnecting === providerId && (
+                              <Spinner />
+                            )}
+                          </div>
+                        ) : isConnected && isDisconnecting !== providerId ? (
                           <div className="relative flex items-center">
                             <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                               <CheckCircle className="size-3 sm:size-4" />
@@ -333,14 +573,13 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                             <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
                               <button
                                 onClick={() => onDisconnect(providerId)}
-                                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
+                                className="inline-flex items-center gap-1.5 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                               >
                                 <Unlink className="size-3 sm:size-4" />
                                 <span>Disconnect</span>
                               </button>
                             </div>
                           </div>
-
                         ) : isDisconnecting === providerId ? (
                           <div className="relative flex items-center">
                             <Spinner />
@@ -415,3 +654,4 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
 export default ConnectAccounts;
 
 
+

package/src/connect/types.ts

@@ -1,7 +1,4 @@
-export type ConnectedAccountLite = {
-  id: string;
-  url?: string | null;
-};
+import { ConnectedAccount } from '../types';
 
 export type RedirectUriOverrides = Partial<Record<'github' | 'gitlab' | 'stackoverflow', string>>;
 
@@ -18,7 +15,7 @@ export interface ConnectAccountsProps {
     copy?: string;
     beta?: boolean;
   }>;
-  connected: ConnectedAccountLite[];
+  connected: ConnectedAccount[];
   idToken: string;
   apiGatewayUrl?: string;
   companyId?: string;
@@ -39,6 +36,9 @@ export interface ConnectAccountsProps {
   isDisconnecting?: string | null;
   requiredProviders?: string[];
   companyName?: string;
+  initialProviderId?: string;
+  githubAppSlugId: string;
+  userId: string;
 }
 
 

package/src/types.ts

@@ -22,18 +22,28 @@ export interface PublicBadgeData {
   assessmentResult: AssessmentResult;
   updatedAt: string;
   badgeImageUrl?: string;
-  connectedAccounts?: {
-    name: string;
-    url?: string;
-    handle?: string;
-    observedAt?: string;
-  }[];
+  connectedAccounts?: ConnectedAccount[];
   optOutScreening?: boolean;
   isPublic: boolean;
   companyName?: string;
   providersToReconnect?: string[];
 }
 
+export interface AppInstallationInfo {
+  installationId: string;
+  setupAction: string;
+  stateOpaque: string;
+  verifiedAt: string;
+}
+
+export interface ConnectedAccount {
+  name: string;
+  url?: string;
+  handle?: string;
+  observedAt?: string;
+  app_installation_info?: AppInstallationInfo;
+}
+
 export type User = {
   userId: string;
   name: string;
@@ -47,7 +57,7 @@ export type User = {
   latestBadgeId?: string;
   latestBadgeImageUrl?: string;
   assessments: PublicBadgeData[];
-  connectedAccounts?: { name: string; url: string | null; handle: string | null; observedAt?: string }[];
+  connectedAccounts?: ConnectedAccount[];
   userPendingRetryBadgeId?: string;
   createdAt?: string;
 };