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

chore: fix issue where vault admin wouldn't show up in members list and improve styles

Browse Source
This commit is contained in:
Aman Harwara
2023-09-13 02:11:24 +05:30
parent 2a0fdeedd6
commit ab2707d122
3 changed files with 66 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -225,9 +225,6 @@ const EditVaultModalContent: FunctionComponent<{
setShouldShowIconPicker((shouldShow) => !shouldShow)
}, [])
const canShowMembers =
members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
const advancedOptionsDisclosure = useDisclosureStore()
const isShowingAdvancedOptions = advancedOptionsDisclosure.useState('open')
@@ -299,12 +296,12 @@ const EditVaultModalContent: FunctionComponent<{
</div>
) : (
<>
{canShowMembers && (
{members.length > 0 && (
<VaultModalMembers
vault={existingVault}
members={members}
onChange={reloadVaultInfo}
isAdmin={isAdmin}
isCurrentUserAdmin={isAdmin}
/>
)}
{invites.length > 0 && (

48
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
View File

@@ -24,33 +24,39 @@ export const VaultModalInvites = ({
)
return (
<div className="mb-3">
<div>
<div className="mb-3 text-lg">Pending Invites</div>
<div className="flex flex-col gap-3">
<div className="space-y-3.5">
{invites.map((invite) => {
const contact = application.contacts.findContactForInvite(invite)
return (
<div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
<Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
<span>{contact?.name || invite.user_uuid}</span>
{contact ? (
<div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5">
<Icon type="check-circle" size="small" />
Trusted
</div>
) : (
<div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5">
<Icon type="clear-circle-filled" size="small" />
Untrusted
</div>
)}
</div>
{isAdmin && (
<Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
<div
key={invite.uuid}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
>
<Icon type="user" className="col-start-1 col-end-2 place-self-center" />
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
<span>{contact?.name || invite.user_uuid}</span>
{contact ? (
<div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
<Icon type="check-circle" size="small" />
Trusted
</div>
) : (
<div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
<Icon type="clear-circle-filled" size="small" />
Untrusted
</div>
)}
</div>
{isAdmin && (
<Button
label="Cancel Invite"
className="col-start-2 row-start-2"
onClick={() => deleteInvite(invite)}
small
/>
)}
</div>
)
})}

74
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
View File

@@ -6,13 +6,13 @@ import Button from '@/Components/Button/Button'
export const VaultModalMembers = ({
members,
isAdmin,
isCurrentUserAdmin,
vault,
onChange,
}: {
members: SharedVaultUserServerHash[]
vault: VaultListingInterface
isAdmin: boolean
isCurrentUserAdmin: boolean
onChange: () => void
}) => {
const application = useApplication()
@@ -28,44 +28,44 @@ export const VaultModalMembers = ({
)
return (
<div className="mb-3">
<div>
<div className="mb-3 text-lg">Vault Members</div>
{members.map((member) => {
if (application.vaultUsers.isVaultUserOwner(member)) {
return null
}
const contact = application.contacts.findContactForServerUser(member)
return (
<div
key={contact?.uuid || member.user_uuid}
className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md"
>
<Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">
{contact?.name || member.user_uuid}
</span>
{contact && <span className="text-info">Trusted</span>}
{!contact && (
<div>
<span className="text-base">Untrusted</span>
</div>
)}
{isAdmin && (
<div className="mt-2.5 flex flex-row">
<Button
label="Remove From Vault"
className={'mr-3 text-xs'}
onClick={() => removeMemberFromVault(member)}
/>
</div>
<div className="space-y-3.5">
{members.map((member) => {
const isMemberVaultOwner = application.vaultUsers.isVaultUserOwner(member)
const contact = application.contacts.findContactForServerUser(member)
return (
<div
key={contact?.uuid || member.user_uuid}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
>
<Icon type="user" className="col-start-1 col-end-2 place-self-center" />
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
<span>{contact?.name || member.user_uuid}</span>
{contact ? (
<div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
<Icon type="check-circle" size="small" />
Trusted
</div>
) : (
<div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
<Icon type="clear-circle-filled" size="small" />
Untrusted
</div>
)}
</div>
{isCurrentUserAdmin && !isMemberVaultOwner && (
<Button
className="col-start-2 row-start-2"
label="Remove From Vault"
onClick={() => removeMemberFromVault(member)}
small
/>
)}
</div>
</div>
)
})}
)
})}
</div>
</div>
)
}