Merge pull request #288 from SELab-2/share-fix

Changes with invite link
SELab-2 · May 23, 2024 · b3da71d · b3da71d
2 parents e7956a3 + 74f8423
commit b3da71d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
@@ -295,6 +295,8 @@
     "searchMember": "Search member",
     "inviteLink": "Invite link",
     "inviteLinkInfo": "With this link, students can join your course",
+    "copyLink": "Copy invite link",
+    "copyLinkSuccess": "Link copied to clipboard",
     "deleteCourse": "Delete course",
     "deleteCourseDescription": "Are you sure you want to delete this course? All projects and submissions will be deleted as well. This action cannot be undone.",
     "confirmDelete": "Confirm deletion",

diff --git a/frontend/src/i18n/nl/translation.json b/frontend/src/i18n/nl/translation.json
@@ -299,6 +299,8 @@
     "searchMember": "Zoek lid",
     "inviteLink": "Uitnodigingslink",
     "inviteLinkInfo": "Met deze link kunnen studenten zich inschrijven voor dit vak.",
+    "copyLink": "Kopieer uitnodiginslink",
+    "copyLinkSuccess": "Link gekopieerd",
     "deleteCourse": "Vak verwijderen",
     "deleteCourseDescription": "Bent u zeker dat u dit vak wilt verwijderen? Alle projecten en indieningen zullen ook verwijderd worden. Deze actie kan niet ongedaan gemaakt worden.",
     "confirmDelete": "Bevestig verwijdering",

diff --git a/frontend/src/pages/course/components/informationTab/InformationTab.tsx b/frontend/src/pages/course/components/informationTab/InformationTab.tsx
@@ -1,4 +1,5 @@
 import { Card, Col, Row, Space, Tooltip, Typography, theme } from "antd"
+import { EditOutlined, CheckOutlined, CopyOutlined } from "@ant-design/icons"
 import useCourse from "../../../../hooks/useCourse"
 import MarkdownTextfield from "../../../../components/input/MarkdownTextfield"
 import { InfoCircleOutlined } from "@ant-design/icons"
@@ -75,8 +76,12 @@ const InformationTab = () => {
             <Typography.Text strong>{t("course.inviteLink")}:  <Tooltip title={t("course.inviteLinkInfo")}>
               <InfoCircleOutlined />
             </Tooltip></Typography.Text> <br />
-            <Typography.Link copyable 
+            <Typography.Link copyable={{
+              tooltips: [t('course.copyLink'), t('course.copyLinkSuccess')],
+              icon: [<CopyOutlined style={{ fontSize: '18px', color: '#1890ff' }} />, <CheckOutlined style={{ fontSize: '18px', color: '#52c41a' }} />],
+            }} 
             editable={{
+              icon: <EditOutlined style={{ fontSize: '18px', color: '#1890ff' }} />,
               onStart: () => openInviteModal({course, modal, onChange: setCourse, title: t("course.invitePeopleToCourse")}),
             }}
             style={{color:token.colorLink, cursor:"default"}}

diff --git a/frontend/src/pages/course/components/tabExtraBtn/InviteModalContent.tsx b/frontend/src/pages/course/components/tabExtraBtn/InviteModalContent.tsx
@@ -1,19 +1,21 @@
-import { Button, Input, Modal, Space, Switch, Tooltip, Typography } from "antd"
+import { Button, Input, Modal, Space, Switch, Tooltip, Typography, theme, message } from "antd"
 import { FC, useMemo, useState } from "react"
 import { generateLink } from "../informationTab/InformationTab"
 import { CourseType } from "../../Course"
 import { HookAPI } from "antd/es/modal/useModal"
-import { InfoCircleOutlined, RedoOutlined } from "@ant-design/icons"
+import { InfoCircleOutlined, RedoOutlined, CopyOutlined, CheckOutlined } from "@ant-design/icons"
 import { useTranslation } from "react-i18next"
 import useApi from "../../../../hooks/useApi"
 import { ApiRoutes } from "../../../../@types/requests.d"
 
 const InviteModalContent: FC<{ defaultCourse: CourseType; onChange: (course: CourseType) => void }> = ({ defaultCourse, onChange }) => {
   const { t } = useTranslation()
+  const { token } = theme.useToken()
   const [course, setCourse] = useState<CourseType>(defaultCourse)
   const API = useApi()
   const [loading, setLoading] = useState(false)
   const url = useMemo<string>(() => generateLink(course.courseId.toString(), course.joinKey), [course])
+  const [copied, setCopied] = useState(false)
 
   const regenerateKey = async () => {
     setLoading(true)
@@ -47,13 +49,21 @@ const InviteModalContent: FC<{ defaultCourse: CourseType; onChange: (course: Cou
     >
       <Space.Compact style={{ width: "100%" }}>
         <Input
-          style={{ width: "100%" }}
+          style={{ width: "100%", borderColor: token.colorPrimary }}
           readOnly
           value={url}
           suffix={
-            <Tooltip title={"Share"}>
-              <InfoCircleOutlined  />
-            </Tooltip>
+            <Tooltip title={copied ? t("course.copyLinkSuccess") : t("course.copyLink")}>
+                {copied ? (
+                  <CheckOutlined style={{ color: "green" }} />
+                ) : (
+                  <CopyOutlined onClick={() => { 
+                    navigator.clipboard.writeText(url);
+                    setCopied(true);
+                    setTimeout(() => setCopied(false), 3000);  // Reset after 3 seconds
+                  }} />
+                )}
+              </Tooltip>
           }
         />
         {course.joinKey && (