rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: add button to lock vault from preferences (#2479)

Browse Source
This commit is contained in:
Aman Harwara
2023-09-05 22:30:05 +05:30
committed by GitHub
parent 53d1c7fe4b
commit 152d2f5b84
2 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx
View File

@@ -23,7 +23,6 @@ import EditVaultModal from './Vaults/VaultModal/EditVaultModal'
import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
import { ToastType, addToast } from '@standardnotes/toast'
import NoProSubscription from '../Account/NoProSubscription'
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
const Vaults = () => {
const application = useApplication()
@@ -170,13 +169,11 @@ const Vaults = () => {
<Button label="Create New Vault" className={'mr-3 text-xs'} onClick={createNewVault} />
</div>
) : (
<div>
<HorizontalSeparator classes="my-4" />
<div className="mt-3.5">
<NoProSubscription
application={application}
text={<span>Please upgrade in order to increase your shared vault limit.</span>}
/>
<HorizontalSeparator classes="my-4" />
</div>
)}
</PreferencesSegment>

41
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
View File

@@ -1,6 +1,6 @@
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { ButtonType, VaultListingInterface, isClientDisplayableError } from '@standardnotes/snjs'
import { useCallback, useState } from 'react'
import { ButtonType, VaultListingInterface, VaultLockServiceEvent, isClientDisplayableError } from '@standardnotes/snjs'
import { useCallback, useEffect, useState } from 'react'
import { useApplication } from '@/Components/ApplicationProvider'
import Button from '@/Components/Button/Button'
@@ -21,6 +21,28 @@ const VaultItem = ({ vault }: Props) => {
const [isVaultModalOpen, setIsVaultModalOpen] = useState(false)
const closeVaultModal = () => setIsVaultModalOpen(false)
const isVaultLockable = application.vaultLocks.isVaultLockable(vault)
const [isVaultLocked, setIsVaultLocked] = useState(() => application.vaultLocks.isVaultLocked(vault))
useEffect(() => {
return application.vaultLocks.addEventObserver((event) => {
if (event === VaultLockServiceEvent.VaultLocked || event === VaultLockServiceEvent.VaultUnlocked) {
setIsVaultLocked(application.vaultLocks.isVaultLocked(vault))
}
})
}, [application.vaultLocks, vault])
const toggleLock = useCallback(async () => {
if (!isVaultLockable) {
return
}
if (isVaultLocked) {
application.vaultDisplayService.unlockVault(vault).catch(console.error)
} else {
application.vaultLocks.lockNonPersistentVault(vault).catch(console.error)
}
}, [application.vaultDisplayService, application.vaultLocks, isVaultLockable, isVaultLocked, vault])
const isAdmin = !vault.isSharedVaultListing() ? true : application.vaultUsers.isCurrentUserSharedVaultAdmin(vault)
const deleteVault = useCallback(async () => {
@@ -129,19 +151,22 @@ const VaultItem = ({ vault }: Props) => {
File storage used: {formatSizeToReadableString(vault.sharing?.fileBytesUsed ?? 0)}
</span>
<div className="mt-2 flex w-full">
<Button label="Edit" className="mr-3 text-xs" onClick={openEditModal} />
{isAdmin && <Button colorStyle="danger" label="Delete" className="mr-3 text-xs" onClick={deleteVault} />}
<div className="mt-2 flex w-full flex-wrap gap-3">
<Button label="Edit" className="text-xs" onClick={openEditModal} />
{isVaultLockable && (
<Button label={isVaultLocked ? 'Unlock' : 'Lock'} className="text-xs" onClick={toggleLock} />
)}
{isAdmin && <Button colorStyle="danger" label="Delete" className="text-xs" onClick={deleteVault} />}
{!isAdmin && vault.isSharedVaultListing() && (
<Button label="Leave Vault" className="mr-3 text-xs" onClick={leaveVault} />
<Button label="Leave Vault" className="text-xs" onClick={leaveVault} />
)}
{vault.isSharedVaultListing() ? (
<Button colorStyle="info" label="Invite Contacts" className="mr-3 text-xs" onClick={openInviteModal} />
<Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
) : (
<Button
colorStyle="info"
label="Enable Collaboration"
className="mr-3 text-xs"
className="text-xs"
onClick={convertToSharedVault}
/>
)}