@clerk/clerk-js
Version:
Clerk JS library
1 lines • 11.6 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["158"],{1816:function(e,t,i){i.d(t,{$:()=>w});var a=i(9109),r=i(3799),n=i(9144),o=i(6988),l=i(2672),s=i(431),c=i(9460),d=i(8487),u=i(2654),g=i(3412),h=i(7263),p=i(7259),z=i(8870),m=i(6788),b=i(8969),Z=i(4204),C=i(4174),S=i(7703),$=i(8493),x=i(5727),v=i(8181),f=i(7484);let w=(0,l.withCardStateProvider)(e=>{let t=(0,l.useCardState)(),i=(0,b.a2)({onNextStep:()=>t.setError(void 0)}),w=(0,n.useContext)(o.Hs),y=(0,r.cL)(),L=n.useRef(null),{createOrganization:P,isLoaded:A,setActive:T,userMemberships:k}=(0,r.eW)({userMemberships:f.AO.userMemberships}),{organization:_}=(0,r.o8)(),[I,B]=n.useState(),D=(0,m.Yp)("name","",{type:"text",label:(0,S.u1)("formFieldLabel__organizationName"),placeholder:(0,S.u1)("formFieldInputPlaceholder__organizationName")}),O=(0,m.Yp)("slug","",{type:"text",label:(0,S.u1)("formFieldLabel__organizationSlug"),placeholder:(0,S.u1)("formFieldInputPlaceholder__organizationSlug")}),R=!!D.value,K=async a=>{if((a.preventDefault(),R)&&A)try{let t={name:D.value};e.hideSlug||(t.slug=O.value);let a=await P(t);if(I&&await a.setLogo({file:I}),L.current=a,await T({organization:a}),w)return void await y.__internal_navigateToTaskIfAvailable({redirectUrlComplete:w.redirectUrlComplete});if(k.revalidate?.(),e.skipInvitationScreen??1===a.maxAllowedMemberships)return F();i.nextStep()}catch(e){(0,z.S3)(e,[D,O],t.setError)}},F=()=>{e.navigateAfterCreateOrganization?.(L.current),e.onComplete?.()},N=e=>{O.setValue(e)},W="organizationList"===e.flow?"subtitle":void 0;return(0,a.BX)(b.en,{...i.props,children:[(0,a.tZ)(d.Y,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:W,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,a.BX)(s.l.Root,{onSubmit:K,sx:e=>({gap:e.space.$6}),children:[(0,a.tZ)(Z.Col,{children:(0,a.tZ)(v.D,{organization:{name:D.value},onAvatarChange:async e=>await B(e),onAvatarRemove:I?()=>(t.setIdle(),B(null)):null,avatarPreviewPlaceholder:(0,a.tZ)(g.h,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,a.tZ)(Z.Icon,{size:"md",icon:C.gq,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,a.tZ)(s.l.ControlRow,{elementId:D.id,children:(0,a.tZ)(s.l.PlainInput,{...D.props,onChange:e=>{D.setValue(e.target.value),N((0,p.q)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),!e.hideSlug&&(0,a.tZ)(s.l.ControlRow,{elementId:O.id,children:(0,a.tZ)(s.l.PlainInput,{...O.props,onChange:e=>{N(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,a.BX)(c.K,{sx:e=>({marginTop:e.space.$none}),children:[(0,a.tZ)(s.l.SubmitButton,{block:!1,isDisabled:!R,localizationKey:(0,S.u1)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,a.tZ)(s.l.ResetButton,{localizationKey:(0,S.u1)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,a.tZ)(d.Y,{headerTitle:(0,S.u1)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:W,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:_&&(0,a.tZ)($.l,{resetButtonLabel:(0,S.u1)("createOrganization.invitePage.formButtonReset"),onSuccess:i.nextStep,onReset:F})}),(0,a.BX)(Z.Col,{children:[(0,a.tZ)(u.h.Root,{children:(0,a.tZ)(u.h.Title,{localizationKey:(0,S.u1)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,a.tZ)(h.I,{contents:(0,a.tZ)(x.a,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:F})]})]})})},683:function(e,t,i){i.r(t),i.d(t,{OrganizationList:()=>M});var a=i(9109),r=i(1576),n=i(4204),o=i(4676),l=i(3799),s=i(9144),c=i(2305),d=i(2418),u=i(2672),g=i(2654),h=i(2464),p=i(4174),z=i(1816),m=i(5973),b=i(8774),Z=i(1217);let C=e=>(0,a.tZ)(n.Col,{elementDescriptor:n.descriptors.organizationListPreviewItems,sx:e=>({maxHeight:`calc(8 * ${e.sizes.$12})`,overflowY:"auto",borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,...Z.common.unstyledScrollbar(e)}),children:e.children}),S=e=>({padding:`${e.space.$4} ${e.space.$5}`}),$=e=>({color:e.colors.$colorForeground,":hover":{color:e.colors.$colorForeground}}),x=e=>(0,a.BX)(n.Flex,{align:"center",gap:2,sx:[e=>({minHeight:"unset",justifyContent:"space-between",borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100}),S],elementDescriptor:n.descriptors.organizationListPreviewItem,children:[(0,a.tZ)(m.Z,{elementId:"organizationList",mainIdentifierSx:$,organization:e.organizationData}),e.children]}),v=(0,s.forwardRef)((e,t)=>(0,a.tZ)(n.Box,{ref:t,sx:e=>({width:"100%",height:e.space.$12,position:"relative"}),children:(0,a.tZ)(n.Box,{sx:{margin:"auto",position:"absolute",left:"50%",top:"50%",transform:"translateY(-50%) translateX(-50%)"},children:(0,a.tZ)(n.Spinner,{size:"sm",colorScheme:"primary",elementDescriptor:n.descriptors.spinner})})})),f=e=>(0,a.tZ)(n.Button,{elementDescriptor:n.descriptors.organizationListPreviewItemActionButton,textVariant:"buttonSmall",variant:"outline",size:"xs",...e}),w=e=>(0,a.tZ)(b.K,{elementDescriptor:n.descriptors.organizationListPreviewButton,sx:[S],icon:p.nR,...e});var y=i(8870),L=i(7484),P=i(2915),A=i(6988),T=i(7703);let k=(0,u.withCardStateProvider)(e=>{let t=(0,u.useCardState)(),{navigateAfterSelectOrganization:i}=(0,r.useOrganizationListContext)(),{isLoaded:n,setActive:o}=(0,l.eW)(),c=(0,l.cL)(),d=(0,s.useContext)(A.Hs);return n?(0,a.tZ)(w,{onClick:()=>{let a;return a=e.organization,t.runAsync(async()=>{if(await o({organization:a}),d)return c.__internal_navigateToTaskIfAvailable({redirectUrlComplete:d.redirectUrlComplete});await i(a)})},children:(0,a.tZ)(m.Z,{elementId:"organizationList",mainIdentifierSx:$,organization:e.organization})}):null}),_=(0,u.withCardStateProvider)(()=>{let e=(0,u.useCardState)(),{hidePersonal:t,navigateAfterSelectPersonal:i}=(0,r.useOrganizationListContext)(),{isLoaded:n,setActive:o}=(0,l.eW)(),{user:s}=(0,l.aF)();if(!s)return null;let{username:c,primaryEmailAddress:d,primaryPhoneNumber:g,...h}=s;return t?null:(0,a.tZ)(w,{onClick:()=>{if(n)return e.runAsync(async()=>{await o({organization:null}),await i(s)})},children:(0,a.tZ)(P.g,{user:h,mainIdentifierSx:$,title:(0,T.u1)("organizationSwitcher.personalWorkspace")})})}),I={userMemberships:{infinite:!0},userInvitations:{infinite:!0},userSuggestions:{infinite:!0,status:["pending","accepted"]}},B=e=>{let t=(0,u.useCardState)();return(0,a.tZ)(f,{isLoading:t.isLoading,onClick:e.onAccept,localizationKey:(0,n.localizationKeys)("organizationList.action__invitationAccept")})},D=(0,u.withCardStateProvider)(e=>{let t=(0,u.useCardState)(),{getOrganization:i}=(0,l.cL)(),[r,n]=(0,s.useState)(null),{userInvitations:o}=(0,l.eW)({userInvitations:I.userInvitations,userMemberships:I.userMemberships});return r?(0,a.tZ)(k,{organization:r}):(0,a.tZ)(x,{organizationData:e.publicOrganizationData,children:(0,a.tZ)(B,{onAccept:()=>t.runAsync(async()=>[await e.accept(),await i(e.publicOrganizationData.id)]).then(([e,t])=>{o?.setData?.(t=>(0,L.Sz)(e,t,"negative")),n(t)}).catch(e=>(0,y.S3)(e,[],t.setError))})})}),O=e=>{let t=(0,u.useCardState)(),{userSuggestions:i}=(0,l.eW)({userSuggestions:I.userSuggestions});return"accepted"===e.status?(0,a.tZ)(n.Text,{colorScheme:"secondary",localizationKey:(0,n.localizationKeys)("organizationList.suggestionsAcceptedLabel")}):(0,a.tZ)(f,{isLoading:t.isLoading,onClick:()=>t.runAsync(e.accept).then(e=>i?.setData?.(t=>(0,L.Sz)(e,t))).catch(e=>(0,y.S3)(e,[],t.setError)),localizationKey:(0,n.localizationKeys)("organizationList.action__suggestionsAccept")})},R=(0,u.withCardStateProvider)(e=>(0,a.tZ)(x,{organizationData:e.publicOrganizationData,children:(0,a.tZ)(O,{...e})})),K=()=>{let{userMemberships:e,userInvitations:t,userSuggestions:i}=(0,l.eW)(I),{ref:a}=(0,h.YD)({threshold:0,onChange:a=>{a&&(e.hasNextPage?e.fetchNext?.():t.hasNextPage?t.fetchNext?.():i.fetchNext?.())}});return{userMemberships:e,userInvitations:t,userSuggestions:i,ref:a}},F=({onCreateOrganizationClick:e})=>{let{user:t}=(0,l.aF)();return t?.createOrganizationEnabled?(0,a.tZ)(c.aU,{elementDescriptor:n.descriptors.organizationListCreateOrganizationActionButton,icon:p.mm,label:(0,n.localizationKeys)("organizationList.action__createOrganization"),onClick:e,sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,padding:`${e.space.$5} ${e.space.$5}`}),iconSx:e=>({width:e.sizes.$9,height:e.sizes.$6})}):null},N=(0,u.withCardStateProvider)(()=>{let e=(0,u.useCardState)(),{userMemberships:t,userSuggestions:i,userInvitations:o}=K(),l=t?.isLoading||o?.isLoading||i?.isLoading,s=!!(t?.count||o?.count||i?.count),{hidePersonal:c}=(0,r.useOrganizationListContext)();return(0,a.BX)(d.Z.Root,{children:[(0,a.BX)(d.Z.Content,{sx:e=>({padding:`${e.space.$8} ${e.space.$none} ${e.space.$none}`}),children:[(0,a.tZ)(d.Z.Alert,{sx:e=>({margin:`${e.space.$none} ${e.space.$5}`}),children:e.error}),l&&(0,a.tZ)(n.Flex,{direction:"row",align:"center",justify:"center",sx:e=>({height:"100%",minHeight:e.sizes.$60}),children:(0,a.tZ)(n.Spinner,{size:"lg",colorScheme:"primary",elementDescriptor:n.descriptors.spinner})}),!l&&(0,a.tZ)(W,{showListInitially:!(c&&!s)})]}),(0,a.tZ)(d.Z.Footer,{})]})}),W=({showListInitially:e})=>{let{navigateAfterCreateOrganization:t,skipInvitationScreen:i,hideSlug:o}=(0,r.useOrganizationListContext)(),[l,c]=(0,s.useState)(!e);return(0,a.BX)(a.HY,{children:[!l&&(0,a.tZ)(X,{onCreateOrganizationClick:()=>c(!0)}),l&&(0,a.tZ)(n.Box,{sx:e=>({padding:`${e.space.$none} ${e.space.$5} ${e.space.$5}`}),children:(0,a.tZ)(z.$,{flow:"organizationList",startPage:{headerTitle:(0,n.localizationKeys)("organizationList.createOrganization")},skipInvitationScreen:i,navigateAfterCreateOrganization:e=>t(e).then(()=>c(!1)),onCancel:e&&l?()=>c(!1):void 0,hideSlug:o})})]})},X=e=>{let t=(0,r.useEnvironment)(),{ref:i,userMemberships:o,userSuggestions:l,userInvitations:s}=K(),{hidePersonal:d}=(0,r.useOrganizationListContext)(),u=o?.isLoading||s?.isLoading||l?.isLoading,h=o?.hasNextPage||s?.hasNextPage||l?.hasNextPage,p=s.data?.filter(e=>!!e),z=l.data?.filter(e=>!!e);return(0,a.BX)(a.HY,{children:[(0,a.BX)(g.h.Root,{sx:e=>({padding:`${e.space.$none} ${e.space.$8}`}),children:[(0,a.tZ)(g.h.Title,{localizationKey:(0,n.localizationKeys)(d?"organizationList.titleWithoutPersonal":"organizationList.title")}),(0,a.tZ)(g.h.Subtitle,{localizationKey:(0,n.localizationKeys)("organizationList.subtitle",{applicationName:t.displayConfig.applicationName})})]}),(0,a.tZ)(n.Col,{elementDescriptor:n.descriptors.main,children:(0,a.tZ)(C,{children:(0,a.BX)(c.eX,{role:"menu",children:[(0,a.tZ)(_,{}),(o.count||0)>0&&o.data?.map(e=>(0,a.tZ)(k,{...e},e.id)),!o.hasNextPage&&p?.map(e=>(0,a.tZ)(D,{...e},e.id)),!o.hasNextPage&&!s.hasNextPage&&z?.map(e=>(0,a.tZ)(R,{...e},e.id)),(h||u)&&(0,a.tZ)(v,{ref:i}),(0,a.tZ)(F,{onCreateOrganizationClick:()=>{e.onCreateOrganizationClick()}})]})})})]})},H=(0,r.withCoreUserGuard)(N),M=()=>(0,a.tZ)(n.Flow.Root,{flow:"organizationList",children:(0,a.tZ)(n.Flow.Part,{children:(0,a.tZ)(o.Switch,{children:(0,a.tZ)(o.Route,{children:(0,a.tZ)(H,{})})})})})}}]);