feat(MyShares): show information about own share security options (#720)

* Provide security information about owned shares

* Add visitor count display for shares with max views

* Add password protection indicator to shares table

* Remove validation from MyShareSecurityDTO

* center lock icon and add spacing

* refactor: run formatter

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Aaron
2024-12-31 15:21:00 +01:00
committed by GitHub
parent 4d3aa398a2
commit b58dcdba0b
7 changed files with 60 additions and 9 deletions

View File

@@ -15,7 +15,7 @@ import { useModals } from "@mantine/modals";
import moment from "moment";
import Link from "next/link";
import { useEffect, useState } from "react";
import { TbEdit, TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
import { TbEdit, TbInfoCircle, TbLink, TbLock, TbTrash } from "react-icons/tb";
import { FormattedMessage } from "react-intl";
import Meta from "../../components/Meta";
import showShareInformationsModal from "../../components/account/showShareInformationsModal";
@@ -85,13 +85,37 @@ const MyShares = () => {
<tbody>
{shares.map((share) => (
<tr key={share.id}>
<td>{share.id}</td>
<td>{share.name}</td>
<td>{share.views}</td>
<td>
{moment(share.expiration).unix() === 0
? <FormattedMessage id="account.shares.table.expiry-never" />
: moment(share.expiration).format("LLL")}
<Group spacing="xs">
{share.id}{" "}
{share.security.passwordProtected && (
<TbLock
color="orange"
title={t("account.shares.table.password-protected")}
/>
)}
</Group>
</td>
<td>{share.name}</td>
<td>
{share.security.maxViews ? (
<FormattedMessage
id="account.shares.table.visitor-count"
values={{
count: share.views,
max: share.security.maxViews,
}}
/>
) : (
share.views
)}
</td>
<td>
{moment(share.expiration).unix() === 0 ? (
<FormattedMessage id="account.shares.table.expiry-never" />
) : (
moment(share.expiration).format("LLL")
)}
</td>
<td>
<Group position="right">