chore: update vaults prefs (#2504)

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx

@@ -37,8 +37,12 @@ const Vaults = () => {
   const [isAddContactModalOpen, setIsAddContactModalOpen] = useState(false)
   const closeAddContactModal = () => setIsAddContactModalOpen(false)
 
+  const [isCreatingSharedVault, setIsCreatingSharedVault] = useState(false)
   const [isVaultModalOpen, setIsVaultModalOpen] = useState(false)
-  const closeVaultModal = () => setIsVaultModalOpen(false)
+  const closeVaultModal = () => {
+    setIsVaultModalOpen(false)
+    setIsCreatingSharedVault(false)
+  }
 
   const vaultService = application.vaults
   const contactService = application.contacts
@@ -46,17 +50,20 @@ const Vaults = () => {
 
   const updateVaults = useCallback(async () => {
     const vaults = vaultService.getVaults()
+    const ownedVaults = vaults.filter((vault) => {
+      return !vault.isSharedVaultListing() ? true : application.vaultUsers.isCurrentUserSharedVaultOwner(vault)
+    })
 
     if (featuresService.hasMinimumRole(RoleName.NAMES.ProUser)) {
       setCanCreateMoreVaults(true)
     } else if (featuresService.hasMinimumRole(RoleName.NAMES.PlusUser)) {
-      setCanCreateMoreVaults(vaults.length < 3)
+      setCanCreateMoreVaults(ownedVaults.length < 3)
     } else {
-      setCanCreateMoreVaults(vaults.length < 1)
+      setCanCreateMoreVaults(ownedVaults.length < 1)
     }
 
     setVaults(vaults)
-  }, [vaultService, featuresService])
+  }, [vaultService, featuresService, application.vaultUsers])
 
   const updateInvites = useCallback(async () => {
     setInvites(application.vaultInvites.getCachedPendingInviteRecords())
@@ -115,6 +122,11 @@ const Vaults = () => {
     setIsVaultModalOpen(true)
   }, [])
 
+  const createNewSharedVault = useCallback(async () => {
+    setIsCreatingSharedVault(true)
+    setIsVaultModalOpen(true)
+  }, [])
+
   const createNewContact = useCallback(() => {
     setIsAddContactModalOpen(true)
   }, [])
@@ -125,7 +137,11 @@ const Vaults = () => {
         <EditContactModal onCloseDialog={closeAddContactModal} />
       </ModalOverlay>
 
-      <EditVaultModal isVaultModalOpen={isVaultModalOpen} closeVaultModal={closeVaultModal} />
+      <EditVaultModal
+        isVaultModalOpen={isVaultModalOpen}
+        creatingSharedVault={isCreatingSharedVault}
+        closeVaultModal={closeVaultModal}
+      />
 
       {invites.length > 0 && (
         <PreferencesGroup>
@@ -169,8 +185,9 @@ const Vaults = () => {
             </div>
           )}
           {canCreateMoreVaults ? (
-            <div className="mt-2.5 flex flex-row">
-              <Button label="Create New Vault" className="mr-3" onClick={createNewVault} />
+            <div className="mt-2.5 flex gap-3">
+              <Button label="Create Vault" onClick={createNewVault} />
+              <Button label="Create Shared Vault" onClick={createNewSharedVault} />
             </div>
           ) : (
             <div className="mt-3.5">

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx

@@ -28,8 +28,9 @@ import Spinner from '@/Components/Spinner/Spinner'
 
 const EditVaultModalContent: FunctionComponent<{
   existingVaultUuid?: string
+  creatingSharedVault?: boolean
   onCloseDialog: () => void
-}> = ({ onCloseDialog, existingVaultUuid }) => {
+}> = ({ onCloseDialog, existingVaultUuid, creatingSharedVault }) => {
   const application = useApplication()
 
   const existingVault = useItem<VaultListingInterface>(existingVaultUuid)
@@ -65,7 +66,7 @@ const EditVaultModalContent: FunctionComponent<{
 
     if (existingVault.isSharedVaultListing()) {
       setIsAdmin(
-        existingVault.isSharedVaultListing() && application.vaultUsers.isCurrentUserSharedVaultAdmin(existingVault),
+        existingVault.isSharedVaultListing() && application.vaultUsers.isCurrentUserSharedVaultOwner(existingVault),
       )
 
       setIsLoadingCollaborationInfo(true)
@@ -160,12 +161,30 @@ const EditVaultModalContent: FunctionComponent<{
       if (!customPassword) {
         throw new Error('Custom key is not set')
       }
-      await application.vaults.createUserInputtedPasswordVault({
+      if (creatingSharedVault) {
+        await application.sharedVaults.createSharedVault({
+          name,
+          description,
+          iconString: iconString,
+          storagePreference: keyStorageMode,
+          userInputtedPassword: customPassword,
+        })
+      } else {
+        await application.vaults.createUserInputtedPasswordVault({
+          name,
+          description,
+          iconString: iconString,
+          storagePreference: keyStorageMode,
+          userInputtedPassword: customPassword,
+        })
+      }
+    } else if (creatingSharedVault) {
+      await application.sharedVaults.createSharedVault({
         name,
         description,
         iconString: iconString,
         storagePreference: keyStorageMode,
-        userInputtedPassword: customPassword,
+        userInputtedPassword: undefined,
       })
     } else {
       await application.vaults.createRandomizedVault({
@@ -177,7 +196,9 @@ const EditVaultModalContent: FunctionComponent<{
 
     handleDialogClose()
   }, [
+    application.sharedVaults,
     application.vaults,
+    creatingSharedVault,
     customPassword,
     description,
     handleDialogClose,
@@ -203,7 +224,7 @@ const EditVaultModalContent: FunctionComponent<{
   const modalActions = useMemo(
     (): ModalAction[] => [
       {
-        label: existingVault ? 'Save Vault' : 'Create Vault',
+        label: existingVault ? 'Save Vault' : creatingSharedVault ? 'Create Shared Vault' : 'Create Vault',
         onClick: handleSubmit,
         type: 'primary',
         mobileSlot: 'right',
@@ -216,7 +237,7 @@ const EditVaultModalContent: FunctionComponent<{
         mobileSlot: 'left',
       },
     ],
-    [existingVault, handleDialogClose, handleSubmit, isSubmitting],
+    [creatingSharedVault, existingVault, handleDialogClose, handleSubmit, isSubmitting],
   )
 
   const [shouldShowIconPicker, setShouldShowIconPicker] = useState(false)
@@ -334,14 +355,20 @@ const EditVaultModal = ({
   isVaultModalOpen,
   closeVaultModal,
   vault,
+  creatingSharedVault,
 }: {
   isVaultModalOpen: boolean
   closeVaultModal: () => void
   vault?: VaultListingInterface
+  creatingSharedVault?: boolean
 }) => {
   return (
     <ModalOverlay className="md:max-h-[70vh]" isOpen={isVaultModalOpen} close={closeVaultModal}>
-      <EditVaultModalContent existingVaultUuid={vault?.uuid} onCloseDialog={closeVaultModal} />
+      <EditVaultModalContent
+        creatingSharedVault={creatingSharedVault}
+        existingVaultUuid={vault?.uuid}
+        onCloseDialog={closeVaultModal}
+      />
     </ModalOverlay>
   )
 }

packages/web/src/javascripts/Hooks/useVault.ts

@@ -38,7 +38,7 @@ export const useVault = (vault: VaultListingInterface) => {
 
   const isCurrentUserAdmin = !vault.isSharedVaultListing()
     ? true
-    : application.vaultUsers.isCurrentUserSharedVaultAdmin(vault)
+    : application.vaultUsers.isCurrentUserSharedVaultOwner(vault)
 
   const ensureVaultIsUnlocked = useCallback(async () => {
     if (!application.vaultLocks.isVaultLocked(vault)) {