@clerk/clerk-js/dist/apiKeys_clerk.chips.browser_c495c5_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["616"],{2010:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>E,APIKeysPage:()=>$});var a=i(9109),r=i(3531),o=i(3799),n=i(9144),l=i(267),s=i(8969),c=i(1576),d=i(4204),p=i(9805),u=i(2672),y=i(1319),h=i(2930),m=i(4174),x=i(1217),K=i(3344),_=i(7901),g=i(3009),Z=i(2464),f=i(2156);let b=({apiKeyID:e,enabled:t})=>{let i=(0,o.cL)();return(0,_.default)(t?["api-key-secret",e]:null,()=>i.apiKeys.getSecret(e))},D=({apiKeyID:e})=>{let[t,i]=(0,n.useState)(!1),{data:r}=b({apiKeyID:e,enabled:t}),{onCopy:o,hasCopied:l}=(0,Z.VP)(r??"");return(0,n.useEffect)(()=>{t&&r&&(o(),i(!1))},[t,r,o]),(0,a.tZ)(d.Button,{variant:"ghost","aria-label":l?"Copied API key to clipboard":"Copy API key",onClick:()=>i(!0),focusRing:!1,elementDescriptor:d.descriptors.apiKeysCopyButton,children:(0,a.tZ)(d.Icon,{size:"sm",icon:l?m.Jr:m.uU,sx:e=>({color:e.colors.$primary500})})})},v=({apiKeyID:e})=>{let[t,i]=(0,n.useState)(!1),{data:r}=b({apiKeyID:e,enabled:t});return(0,a.BX)(d.Flex,{center:!0,sx:{width:"100%",position:"relative"},children:[(0,a.tZ)(d.Input,{type:t?"text":"password",value:t&&r?r:`\u{2022}`.repeat(25),readOnly:!0,"aria-label":"API key (hidden)",sx:e=>({paddingInlineEnd:e.sizes.$12})}),(0,a.tZ)(d.Button,{variant:"ghost",sx:e=>({position:"absolute",right:0,"&:focus-visible":{...x.common.focusRingStyles(e)}}),focusRing:!1,"aria-label":"Show key",elementDescriptor:d.descriptors.apiKeysRevealButton,onClick:()=>i(!t),children:(0,a.tZ)(d.Icon,{icon:t?m.N6:m.bA,sx:e=>({color:e.colors.$colorMutedForeground})})})]})},C=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:o})=>(0,a.tZ)(d.Flex,{sx:e=>({width:"100%",[x.mqu.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.BX)(d.Table,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.tZ)(d.Thead,{children:(0,a.BX)(d.Tr,{children:[(0,a.tZ)(d.Th,{children:"Name"}),(0,a.tZ)(d.Th,{children:"Last used"}),(0,a.tZ)(d.Th,{children:"Key"}),o&&(0,a.tZ)(d.Th,{children:"Actions"})]})}),(0,a.tZ)(d.Tbody,{children:t?(0,a.tZ)(d.Tr,{children:(0,a.tZ)(d.Td,{colSpan:4,children:(0,a.tZ)(d.Spinner,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:d.descriptors.spinner})})}):e.length?e.map(e=>(0,a.BX)(d.Tr,{children:[(0,a.tZ)(d.Td,{children:(0,a.BX)(d.Flex,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.tZ)(d.Text,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.tZ)(d.Text,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,d.localizationKeys)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,d.localizationKeys)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.tZ)(d.Td,{children:(0,a.tZ)(d.Box,{sx:{minWidth:"10ch"},children:(0,a.tZ)(d.Text,{localizationKey:e.lastUsedAt?(0,f.S)(e.lastUsedAt):"-"})})}),(0,a.tZ)(d.Td,{children:(0,a.BX)(d.Flex,{direction:"row",gap:1,sx:{[x.mqu.sm]:{minWidth:"25ch"}},children:[(0,a.tZ)(v,{apiKeyID:e.id}),(0,a.tZ)(D,{apiKeyID:e.id})]})}),o&&(0,a.tZ)(d.Td,{children:(0,a.tZ)(g.a,{actions:[{label:(0,d.localizationKeys)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.tZ)(T,{})})]})}),T=()=>(0,a.tZ)(d.Tr,{children:(0,a.tZ)(d.Td,{colSpan:4,children:(0,a.tZ)(d.Text,{localizationKey:(0,d.localizationKeys)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var F=i(4709),w=i(431),k=i(9460),I=i(8487),S=i(3146),z=i(6788);let B=["never","1d","7d","30d","60d","90d","180d","1y"],A={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e||!e)return;let t=new Date,i=new Date(t);return A[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,n.useRef)(null),{t:r}=(0,d.useLocalizations)(),o=B.map(e=>({value:e,label:r((0,d.localizationKeys)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.BX)(S.Ph,{elementId:"apiKeyExpiration",options:o,value:e?.value??"",onChange:t,placeholder:r((0,d.localizationKeys)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.tZ)(S.UN,{ref:i,icon:m.jC,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.tZ)(S.pp,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},L=({onCreate:e,isSubmitting:t})=>{let[i,r]=(0,n.useState)(null),{close:o}=(0,F.XC)(),{showDescription:l=!1}=(0,c.useApiKeysContext)(),{t:s}=(0,d.useLocalizations)(),p=(0,z.Yp)("name","",{type:"text",label:(0,d.localizationKeys)("formFieldLabel__apiKeyName"),placeholder:(0,d.localizationKeys)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),u=(0,z.Yp)("apiKeyDescription","",{type:"text",label:(0,d.localizationKeys)("formFieldLabel__apiKeyDescription"),placeholder:(0,d.localizationKeys)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),y=p.value.length>2,h=(0,n.useMemo)(()=>{let e=P(i?.value);if(!i?.value||!e)return s((0,d.localizationKeys)("apiKeys.formFieldCaption__expiration__never"));let t=new Date(Date.now()+1e3*e);return s((0,d.localizationKeys)("apiKeys.formFieldCaption__expiration__expiresOn",{date:t.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[i?.value]);return(0,a.tZ)(I.Y,{headerTitle:(0,d.localizationKeys)("apiKeys.formTitle"),headerSubtitle:(0,d.localizationKeys)("apiKeys.formHint"),elementDescriptor:d.descriptors.apiKeysCreateForm,children:(0,a.BX)(w.l.Root,{onSubmit:t=>{t.preventDefault(),e({name:p.value,description:u.value||void 0,secondsUntilExpiration:P(i?.value)},o)},children:[(0,a.BX)(d.Box,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[x.mqu.sm]:{flexDirection:"column"}}),children:[(0,a.tZ)(w.l.ControlRow,{sx:{flex:1},elementId:p.id,elementDescriptor:d.descriptors.apiKeysCreateFormNameInput,children:(0,a.tZ)(w.l.PlainInput,{...p.props})}),(0,a.BX)(d.Col,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:d.descriptors.apiKeysCreateFormExpirationInput,children:[(0,a.BX)(d.FormLabel,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.tZ)(d.Text,{as:"span",variant:"subtitle",localizationKey:(0,d.localizationKeys)("formFieldLabel__apiKeyExpiration")}),(0,a.tZ)(d.Text,{variant:"caption",colorScheme:"secondary",localizationKey:(0,d.localizationKeys)("formFieldHintText__optional")})]}),(0,a.tZ)(R,{selectedExpiration:i,setSelectedExpiration:r}),(0,a.tZ)(d.Text,{variant:"caption",colorScheme:"secondary",localizationKey:h,elementDescriptor:d.descriptors.apiKeysCreateFormExpirationCaption})]})]}),l&&(0,a.tZ)(d.Col,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.tZ)(w.l.ControlRow,{elementId:u.id,elementDescriptor:d.descriptors.apiKeysCreateFormDescriptionInput,children:(0,a.tZ)(w.l.PlainInput,{...u.props})})}),(0,a.tZ)(k.A,{submitLabel:(0,d.localizationKeys)("apiKeys.formButtonPrimary__add"),isDisabled:!y,onReset:o,isLoading:t,elementDescriptor:d.descriptors.apiKeysCreateFormSubmitButton})]})})},X=(0,n.lazy)(()=>i.e("642").then(i.bind(i,3250)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),$=({subject:e,perPage:t,revokeModalRoot:i})=>{let c=(0,K.ir)(e),g=(0,s.N2)({permission:"org:sys_api_keys:read"}),Z=(0,s.N2)({permission:"org:sys_api_keys:manage"}),{apiKeys:f,isLoading:b,search:D,setSearch:v,page:T,setPage:F,pageCount:w,itemCount:k,startingRow:I,endingRow:S,cacheKey:z}=(({subject:e,perPage:t=5,enabled:i})=>{let a=(0,o.cL)(),r={key:"api-keys",subject:e},{data:l,isLoading:s,mutate:c}=(0,_.default)(i?r:null,()=>a.apiKeys.getAll({subject:e})),[d,p]=(0,n.useState)(""),{page:u,setPage:y,pageCount:h,itemCount:m,startingRow:x,endingRow:K,paginatedItems:g}=((e,t)=>{let[i,a]=(0,n.useState)(1),r=e.length,o=Math.max(1,Math.ceil(r/t)),l=r>0?(i-1)*t+1:0,s=Math.min(i*t,r),c=e.slice(l-1,s);return{page:i,setPage:a,pageCount:o,itemCount:r,startingRow:l,endingRow:s,paginatedItems:c}})((l??[]).filter(e=>e.name.toLowerCase().includes(d.toLowerCase())),t);return{apiKeys:g,cacheKey:r,mutate:c,isLoading:s,search:d,setSearch:p,page:u,setPage:y,pageCount:h,itemCount:m,startingRow:x,endingRow:K}})({subject:e,perPage:t,enabled:!c||g}),B=(0,u.useCardState)(),{trigger:A,isMutating:P}=(0,l.Z)(z,(e,{arg:t})=>$.apiKeys.create(t)),{t:R}=(0,d.useLocalizations)(),$=(0,o.cL)(),[E,O]=(0,n.useState)(!1),[N,j]=(0,n.useState)(""),[M,q]=(0,n.useState)(""),U=async(t,i)=>{try{await A({...t,subject:e}),i(),B.setError(void 0)}catch(e){(0,r.kD)(e)&&409===e.status&&B.setError("API Key name already exists")}};return(0,a.BX)(d.Col,{gap:4,sx:{width:"100%"},elementDescriptor:d.descriptors.apiKeys,children:[(0,a.BX)(p.a.Root,{children:[(0,a.BX)(d.Flex,{justify:"between",align:"center",gap:4,sx:{[x.mqu.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:d.descriptors.apiKeysHeader,children:[(0,a.tZ)(d.Box,{elementDescriptor:d.descriptors.apiKeysSearchBox,children:(0,a.tZ)(y.W,{placeholder:R((0,d.localizationKeys)("apiKeys.action__search")),leftIcon:(0,a.tZ)(d.Icon,{icon:m.Yt}),value:D,onChange:e=>{v(e.target.value),F(1)},elementDescriptor:d.descriptors.apiKeysSearchInput})}),(c&&Z||!c)&&(0,a.tZ)(p.a.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.tZ)(d.Button,{variant:"solid",localizationKey:(0,d.localizationKeys)("apiKeys.action__add"),elementDescriptor:d.descriptors.apiKeysAddButton})})]}),(0,a.tZ)(p.a.Open,{value:"add-api-key",children:(0,a.tZ)(d.Flex,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.tZ)(p.a.Card,{sx:{width:"100%"},children:(0,a.tZ)(L,{onCreate:U,isSubmitting:P})})})})]}),(0,a.tZ)(C,{rows:f,isLoading:b,onRevoke:(e,t)=>{j(e),q(t),O(!0)},elementDescriptor:d.descriptors.apiKeysTable,canManageAPIKeys:c&&Z||!c}),k>(t??5)&&(0,a.tZ)(h.t,{count:w,page:T,onChange:F,siblingCount:1,rowInfo:{allRowsCount:k,startingRow:I,endingRow:S}}),(0,a.tZ)(X,{subject:e,isOpen:E,onOpen:()=>O(!0),onClose:()=>{j(""),q(""),O(!1)},apiKeyId:N,apiKeyName:M,modalRoot:i})]})},E=(0,c.withCoreUserGuard)((0,u.withCardStateProvider)(()=>{let e=(0,c.useApiKeysContext)(),{user:t}=(0,o.aF)(),{organization:i}=(0,o.o8)(),r=i?.id??t?.id??"";return(0,a.tZ)(d.Flow.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.tZ)($,{subject:r,perPage:e.perPage})})}))}}]);