@clerk/clerk-js/dist/apiKeys_clerk.legacy.browser_85244b_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["616"],{52010:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>E,APIKeysPage:()=>$}),i(50725),i(56113),i(65223);var a=i(79109),r=i(73531),o=i(83799),l=i(69144),n=i(80267),s=i(8969),d=i(11576),c=i(64204),p=i(99805),u=i(2672),y=i(81319),h=i(77691),m=i(96519),x=i(51217),K=i(93344),_=i(7901),g=i(33009),Z=i(12464),f=i(92156);let v=e=>{let{apiKeyID:t,enabled:i}=e,a=(0,o.cL)();return(0,_.default)(i?["api-key-secret",t]:null,()=>a.apiKeys.getSecret(t))},b=e=>{let{apiKeyID:t}=e,[i,r]=(0,l.useState)(!1),{data:o}=v({apiKeyID:t,enabled:i}),{onCopy:n,hasCopied:s}=(0,Z.VP)(null!=o?o:"");return(0,l.useEffect)(()=>{i&&o&&(n(),r(!1))},[i,o,n]),(0,a.tZ)(c.Button,{variant:"ghost","aria-label":s?"Copied API key to clipboard":"Copy API key",onClick:()=>r(!0),focusRing:!1,elementDescriptor:c.descriptors.apiKeysCopyButton,children:(0,a.tZ)(c.Icon,{size:"sm",icon:s?m.Jr:m.uU,sx:e=>({color:e.colors.$primary500})})})},D=e=>{let{apiKeyID:t}=e,[i,r]=(0,l.useState)(!1),{data:o}=v({apiKeyID:t,enabled:i});return(0,a.BX)(c.Flex,{center:!0,sx:{width:"100%",position:"relative"},children:[(0,a.tZ)(c.Input,{type:i?"text":"password",value:i&&o?o:"•".repeat(25),readOnly:!0,"aria-label":"API key (hidden)",sx:e=>({paddingInlineEnd:e.sizes.$12})}),(0,a.tZ)(c.Button,{variant:"ghost",sx:e=>({position:"absolute",right:0,"&:focus-visible":{...x.common.focusRingStyles(e)}}),focusRing:!1,"aria-label":"Show key",elementDescriptor:c.descriptors.apiKeysRevealButton,onClick:()=>r(!i),children:(0,a.tZ)(c.Icon,{icon:i?m.N6:m.bA,sx:e=>({color:e.colors.$colorMutedForeground})})})]})},C=e=>{let{rows:t,isLoading:i,onRevoke:r,elementDescriptor:o,canManageAPIKeys:l}=e;return(0,a.tZ)(c.Flex,{sx:e=>({width:"100%",[x.mqu.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.BX)(c.Table,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:o,children:[(0,a.tZ)(c.Thead,{children:(0,a.BX)(c.Tr,{children:[(0,a.tZ)(c.Th,{children:"Name"}),(0,a.tZ)(c.Th,{children:"Last used"}),(0,a.tZ)(c.Th,{children:"Key"}),l&&(0,a.tZ)(c.Th,{children:"Actions"})]})}),(0,a.tZ)(c.Tbody,{children:i?(0,a.tZ)(c.Tr,{children:(0,a.tZ)(c.Td,{colSpan:4,children:(0,a.tZ)(c.Spinner,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:c.descriptors.spinner})})}):t.length?t.map(e=>(0,a.BX)(c.Tr,{children:[(0,a.tZ)(c.Td,{children:(0,a.BX)(c.Flex,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.tZ)(c.Text,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.tZ)(c.Text,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,c.localizationKeys)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,c.localizationKeys)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.tZ)(c.Td,{children:(0,a.tZ)(c.Box,{sx:{minWidth:"10ch"},children:(0,a.tZ)(c.Text,{localizationKey:e.lastUsedAt?(0,f.S)(e.lastUsedAt):"-"})})}),(0,a.tZ)(c.Td,{children:(0,a.BX)(c.Flex,{direction:"row",gap:1,sx:{[x.mqu.sm]:{minWidth:"25ch"}},children:[(0,a.tZ)(D,{apiKeyID:e.id}),(0,a.tZ)(b,{apiKeyID:e.id})]})}),l&&(0,a.tZ)(c.Td,{children:(0,a.tZ)(g.a,{actions:[{label:(0,c.localizationKeys)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>r(e.id,e.name)}]})})]},e.id)):(0,a.tZ)(T,{})})]})})},T=()=>(0,a.tZ)(c.Tr,{children:(0,a.tZ)(c.Td,{colSpan:4,children:(0,a.tZ)(c.Text,{localizationKey:(0,c.localizationKeys)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var F=i(44709),w=i(70431),k=i(19460),I=i(68487),S=i(3146),z=i(36788);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=e=>{var t;let{selectedExpiration:i,setSelectedExpiration:r}=e,o=(0,l.useRef)(null),{t:n}=(0,c.useLocalizations)(),s=B.map(e=>({value:e,label:n((0,c.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:s,value:null!=(t=null==i?void 0:i.value)?t:"",onChange:r,placeholder:n((0,c.localizationKeys)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:o,children:[(0,a.tZ)(S.UN,{ref:o,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=e=>{let{onCreate:t,isSubmitting:i}=e,[r,o]=(0,l.useState)(null),{close:n}=(0,F.XC)(),{showDescription:s=!1}=(0,d.useApiKeysContext)(),{t:p}=(0,c.useLocalizations)(),u=(0,z.Yp)("name","",{type:"text",label:(0,c.localizationKeys)("formFieldLabel__apiKeyName"),placeholder:(0,c.localizationKeys)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,z.Yp)("apiKeyDescription","",{type:"text",label:(0,c.localizationKeys)("formFieldLabel__apiKeyDescription"),placeholder:(0,c.localizationKeys)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),h=u.value.length>2,m=(0,l.useMemo)(()=>{let e=P(null==r?void 0:r.value);if(!(null==r?void 0:r.value)||!e)return p((0,c.localizationKeys)("apiKeys.formFieldCaption__expiration__never"));let t=new Date(Date.now()+1e3*e);return p((0,c.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"})}))},[null==r?void 0:r.value]);return(0,a.tZ)(I.Y,{headerTitle:(0,c.localizationKeys)("apiKeys.formTitle"),headerSubtitle:(0,c.localizationKeys)("apiKeys.formHint"),elementDescriptor:c.descriptors.apiKeysCreateForm,children:(0,a.BX)(w.l.Root,{onSubmit:e=>{e.preventDefault(),t({name:u.value,description:y.value||void 0,secondsUntilExpiration:P(null==r?void 0:r.value)},n)},children:[(0,a.BX)(c.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:u.id,elementDescriptor:c.descriptors.apiKeysCreateFormNameInput,children:(0,a.tZ)(w.l.PlainInput,{...u.props})}),(0,a.BX)(c.Col,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:c.descriptors.apiKeysCreateFormExpirationInput,children:[(0,a.BX)(c.FormLabel,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.tZ)(c.Text,{as:"span",variant:"subtitle",localizationKey:(0,c.localizationKeys)("formFieldLabel__apiKeyExpiration")}),(0,a.tZ)(c.Text,{variant:"caption",colorScheme:"secondary",localizationKey:(0,c.localizationKeys)("formFieldHintText__optional")})]}),(0,a.tZ)(R,{selectedExpiration:r,setSelectedExpiration:o}),(0,a.tZ)(c.Text,{variant:"caption",colorScheme:"secondary",localizationKey:m,elementDescriptor:c.descriptors.apiKeysCreateFormExpirationCaption})]})]}),s&&(0,a.tZ)(c.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:y.id,elementDescriptor:c.descriptors.apiKeysCreateFormDescriptionInput,children:(0,a.tZ)(w.l.PlainInput,{...y.props})})}),(0,a.tZ)(k.A,{submitLabel:(0,c.localizationKeys)("apiKeys.formButtonPrimary__add"),isDisabled:!h,onReset:n,isLoading:i,elementDescriptor:c.descriptors.apiKeysCreateFormSubmitButton})]})})};i(28419);let X=(0,l.lazy)(()=>i.e("642").then(i.bind(i,3250)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),$=e=>{let{subject:t,perPage:i,revokeModalRoot:d}=e,g=(0,K.ir)(t),Z=(0,s.N2)({permission:"org:sys_api_keys:read"}),f=(0,s.N2)({permission:"org:sys_api_keys:manage"}),{apiKeys:v,isLoading:b,search:D,setSearch:T,page:F,setPage:w,pageCount:k,itemCount:I,startingRow:S,endingRow:z,cacheKey:B}=(e=>{let{subject:t,perPage:i=5,enabled:a}=e,r=(0,o.cL)(),n={key:"api-keys",subject:t},{data:s,isLoading:d,mutate:c}=(0,_.default)(a?n:null,()=>r.apiKeys.getAll({subject:t})),[p,u]=(0,l.useState)(""),{page:y,setPage:h,pageCount:m,itemCount:x,startingRow:K,endingRow:g,paginatedItems:Z}=((e,t)=>{let[i,a]=(0,l.useState)(1),r=e.length,o=Math.max(1,Math.ceil(r/t)),n=r>0?(i-1)*t+1:0,s=Math.min(i*t,r),d=e.slice(n-1,s);return{page:i,setPage:a,pageCount:o,itemCount:r,startingRow:n,endingRow:s,paginatedItems:d}})((null!=s?s:[]).filter(e=>e.name.toLowerCase().includes(p.toLowerCase())),i);return{apiKeys:Z,cacheKey:n,mutate:c,isLoading:d,search:p,setSearch:u,page:y,setPage:h,pageCount:m,itemCount:x,startingRow:K,endingRow:g}})({subject:t,perPage:i,enabled:!g||Z}),A=(0,u.useCardState)(),{trigger:P,isMutating:R}=(0,n.Z)(B,(e,t)=>{let{arg:i}=t;return E.apiKeys.create(i)}),{t:$}=(0,c.useLocalizations)(),E=(0,o.cL)(),[O,N]=(0,l.useState)(!1),[j,M]=(0,l.useState)(""),[q,U]=(0,l.useState)(""),W=async(e,i)=>{try{await P({...e,subject:t}),i(),A.setError(void 0)}catch(e){(0,r.kD)(e)&&409===e.status&&A.setError("API Key name already exists")}};return(0,a.BX)(c.Col,{gap:4,sx:{width:"100%"},elementDescriptor:c.descriptors.apiKeys,children:[(0,a.BX)(p.a.Root,{children:[(0,a.BX)(c.Flex,{justify:"between",align:"center",gap:4,sx:{[x.mqu.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:c.descriptors.apiKeysHeader,children:[(0,a.tZ)(c.Box,{elementDescriptor:c.descriptors.apiKeysSearchBox,children:(0,a.tZ)(y.W,{placeholder:$((0,c.localizationKeys)("apiKeys.action__search")),leftIcon:(0,a.tZ)(c.Icon,{icon:m.Yt}),value:D,onChange:e=>{T(e.target.value),w(1)},elementDescriptor:c.descriptors.apiKeysSearchInput})}),(g&&f||!g)&&(0,a.tZ)(p.a.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.tZ)(c.Button,{variant:"solid",localizationKey:(0,c.localizationKeys)("apiKeys.action__add"),elementDescriptor:c.descriptors.apiKeysAddButton})})]}),(0,a.tZ)(p.a.Open,{value:"add-api-key",children:(0,a.tZ)(c.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:W,isSubmitting:R})})})})]}),(0,a.tZ)(C,{rows:v,isLoading:b,onRevoke:(e,t)=>{M(e),U(t),N(!0)},elementDescriptor:c.descriptors.apiKeysTable,canManageAPIKeys:g&&f||!g}),I>(null!=i?i:5)&&(0,a.tZ)(h.t,{count:k,page:F,onChange:w,siblingCount:1,rowInfo:{allRowsCount:I,startingRow:S,endingRow:z}}),(0,a.tZ)(X,{subject:t,isOpen:O,onOpen:()=>N(!0),onClose:()=>{M(""),U(""),N(!1)},apiKeyId:j,apiKeyName:q,modalRoot:d})]})},E=(0,d.withCoreUserGuard)((0,u.withCardStateProvider)(()=>{var e,t;let i=(0,d.useApiKeysContext)(),{user:r}=(0,o.aF)(),{organization:l}=(0,o.o8)(),n=null!=(t=null!=(e=null==l?void 0:l.id)?e:null==r?void 0:r.id)?t:"";return(0,a.tZ)(c.Flow.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.tZ)($,{subject:n,perPage:i.perPage})})}))}}]);