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>

frontend/src/i18n/translations/de-DE.ts

@@ -124,6 +124,8 @@ export default {
   "account.shares.table.expiresAt": "Läuft ab am",
   "account.shares.table.createdAt": "Angelegt am",
   "account.shares.table.size": "Größe",
+  "account.shares.table.password-protected": "Passwortgeschützt",
+  "account.shares.table.visitor-count": "{count} von {max}",
   "account.shares.table.expiry-never": "nie",
   "account.shares.modal.share-informations": "Teile deine Information",
   "account.shares.modal.share-link": "Freigabe teilen",

frontend/src/i18n/translations/en-US.ts

@@ -158,6 +158,8 @@ export default {
   "account.shares.table.expiresAt": "Expires on",
   "account.shares.table.createdAt": "Created on",
   "account.shares.table.size": "Size",
+  "account.shares.table.password-protected": "Password protected",
+  "account.shares.table.visitor-count": "{count} of {max}",
   "account.shares.table.expiry-never": "Never",
 
   "account.shares.modal.share-informations": "Share informations",

frontend/src/pages/account/shares.tsx

@@ -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">

frontend/src/types/share.type.ts

@@ -34,9 +34,10 @@ export type ShareMetaData = {
   isZipReady: boolean;
 };
 
-export type MyShare = Share & {
+export type MyShare = Omit<Share, "hasPassword"> & {
   views: number;
   createdAt: Date;
+  security: MyShareSecurity;
 };
 
 export type MyReverseShare = {
@@ -52,3 +53,8 @@ export type ShareSecurity = {
   maxViews?: number;
   password?: string;
 };
+
+export type MyShareSecurity = {
+  passwordProtected: boolean;
+  maxViews: number;
+};