fix: set link default value to random (#192)

* fix: set link default value to random

* fix: add auto EOL and add conventional-changelog package

* feat: Adding reverse shares' shares a clickable link (#178)

* Add clickable link to reverse share's shares

* Ran format

* Apply suggestions from code review

* fix: set link default value to random (#181)

* fix: set link default value to random

* fix: add auto EOL and add conventional-changelog package

* Apply suggestions from code review

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* feat: Adding reverse share ability to copy the link (#179)

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write \"src/**/*.ts*\""
+    "format": "prettier --end-of-line=auto --write \"src/**/*.ts*\""
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",

frontend/src/components/account/showReverseShareLinkModal.tsx

@@ -0,0 +1,20 @@
+import { Stack, TextInput } from "@mantine/core";
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+
+const showReverseShareLinkModal = (
+  modals: ModalsContextProps,
+  reverseShareToken: string,
+  appUrl: string
+) => {
+  const link = `${appUrl}/upload/${reverseShareToken}`;
+  return modals.openModal({
+    title: "Reverse share link",
+    children: (
+      <Stack align="stretch">
+        <TextInput variant="filled" value={link} />
+      </Stack>
+    ),
+  });
+};
+
+export default showReverseShareLinkModal;

frontend/src/components/upload/CopyTextField.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState } from "react";
-import toast from "../../utils/toast.util";
 import { ActionIcon, TextInput } from "@mantine/core";
-import { TbCheck, TbCopy } from "react-icons/tb";
 import { useClipboard } from "@mantine/hooks";
+import { useRef, useState } from "react";
+import { TbCheck, TbCopy } from "react-icons/tb";
+import toast from "../../utils/toast.util";
 
 function CopyTextField(props: { link: string }) {
   const clipboard = useClipboard({ timeout: 500 });
@@ -14,7 +14,7 @@ function CopyTextField(props: { link: string }) {
 
   const copyLink = () => {
     clipboard.copy(props.link);
-    toast.success("Your link was copied to the keyboard.");
+    toast.success("The link was copied to your clipboard.");
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
       setCheckState(false);

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -62,6 +62,10 @@ const CreateUploadModalBody = ({
 }) => {
   const modals = useModals();
 
+  const generatedLink = Buffer.from(Math.random().toString(), "utf8")
+    .toString("base64")
+    .substr(10, 7);
+
   const [showNotSignedInAlert, setShowNotSignedInAlert] = useState(true);
 
   const validationSchema = yup.object().shape({
@@ -78,7 +82,7 @@ const CreateUploadModalBody = ({
   });
   const form = useForm({
     initialValues: {
-      link: "",
+      link: generatedLink,
       recipients: [] as string[],
       password: undefined,
       maxViews: undefined,

frontend/src/pages/account/reverseShares.tsx

@@ -1,6 +1,7 @@
 import {
   Accordion,
   ActionIcon,
+  Anchor,
   Box,
   Button,
   Center,
@@ -16,9 +17,10 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import { useEffect, useState } from "react";
 import { TbInfoCircle, TbLink, TbPlus, TbTrash } from "react-icons/tb";
+import Meta from "../../components/Meta";
+import showReverseShareLinkModal from "../../components/account/showReverseShareLinkModal";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
 import CenterLoader from "../../components/core/CenterLoader";
-import Meta from "../../components/Meta";
 import showCreateReverseShareModal from "../../components/share/modals/showCreateReverseShareModal";
 import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
@@ -34,6 +36,8 @@ const MyShares = () => {
 
   const [reverseShares, setReverseShares] = useState<MyReverseShare[]>();
 
+  const appUrl = config.get("general.appUrl");
+
   const getReverseShares = () => {
     shareService
       .getMyReverseShares()
@@ -119,9 +123,14 @@ const MyShares = () => {
                           <Accordion.Panel>
                             {reverseShare.shares.map((share) => (
                               <Group key={share.id} mb={4}>
-                                <Text maw={120} truncate>
-                                  {share.id}
-                                </Text>
+                                <Anchor
+                                  href={`${appUrl}/share/${share.id}`}
+                                  target="_blank"
+                                >
+                                  <Text maw={120} truncate>
+                                    {share.id}
+                                  </Text>
+                                </Anchor>
                                 <ActionIcon
                                   color="victoria"
                                   variant="light"
@@ -129,9 +138,7 @@ const MyShares = () => {
                                   onClick={() => {
                                     if (window.isSecureContext) {
                                       clipboard.copy(
-                                        `${config.get(
-                                          "general.appUrl"
-                                        )}/share/${share.id}`
+                                        `${appUrl}/share/${share.id}`
                                       );
                                       toast.success(
                                         "The share link was copied to the keyboard."
@@ -165,6 +172,31 @@ const MyShares = () => {
                   </td>
                   <td>
                     <Group position="right">
+                      <ActionIcon
+                        color="victoria"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          if (window.isSecureContext) {
+                            clipboard.copy(
+                              `${config.get("general.appUrl")}/upload/${
+                                reverseShare.token
+                              }`
+                            );
+                            toast.success(
+                              "The link was copied to your clipboard."
+                            );
+                          } else {
+                            showReverseShareLinkModal(
+                              modals,
+                              reverseShare.token,
+                              config.get("general.appUrl")
+                            );
+                          }
+                        }}
+                      >
+                        <TbLink />
+                      </ActionIcon>
                       <ActionIcon
                         color="red"
                         variant="light"

frontend/src/pages/account/shares.tsx

@@ -16,15 +16,15 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbLink, TbTrash, TbInfoCircle } from "react-icons/tb";
+import { TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
+import Meta from "../../components/Meta";
+import showShareInformationsModal from "../../components/account/showShareInformationsModal";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
 import CenterLoader from "../../components/core/CenterLoader";
-import Meta from "../../components/Meta";
 import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
-import showShareInformationsModal from "../../components/account/showShareInformationsModal";
 
 const MyShares = () => {
   const modals = useModals();
@@ -122,7 +122,7 @@ const MyShares = () => {
                               }`
                             );
                             toast.success(
-                              "Your link was copied to the keyboard."
+                              "The link was copied to your clipboard."
                             );
                           } else {
                             showShareLinkModal(

frontend/src/types/share.type.ts

@@ -32,6 +32,7 @@ export type MyReverseShare = {
   maxShareSize: string;
   shareExpiration: Date;
   remainingUses: number;
+  token: string;
   shares: MyShare[];
 };