From 0c191b428275405aadf49e4c741418a437f39b98 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Thu, 11 Jul 2024 15:26:02 +0800
Subject: [PATCH] chore: updates

---
 package.json                                  |  2 +-
 src/app/config.ts                             |  3 +-
 src/components/FileMessage/AudioMessage.tsx   |  5 ++--
 src/components/FileMessage/DownloadArea.tsx   | 28 +++++++++++++++++++
 .../FileMessage/OtherFileMessage.tsx          | 10 ++-----
 src/components/FileMessage/VideoMessage.tsx   |  5 ++--
 src/routes/onboarding/steps/admin-account.tsx |  4 ++-
 .../onboarding/steps/who-can-sign-up.tsx      |  8 ++----
 src/widget/Popup/Login/index.tsx              | 27 ++++++++++--------
 9 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 src/components/FileMessage/DownloadArea.tsx

diff --git a/package.json b/package.json
index 96de3fee..c4bdd137 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.7.23",
+  "version": "0.7.24",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/src/app/config.ts b/src/app/config.ts
index 49c97737..58a8ee52 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -13,7 +13,7 @@ const prices: Price[] = [
 ];
 const official_dev = `https://dev.voce.chat`;
 const local_dev = `https://dev.voce.chat`;
-// const local_dev = `https://cqvoce.com`;
+// const local_dev = `http://localhost:3881`;
 const dev_origin = process.env.REACT_APP_OFFICIAL_DEMO ? official_dev : local_dev;
 
 // const local_dev = `https://im.ttt.td`;
@@ -75,6 +75,7 @@ export const PAYMENT_URL_PREFIX =
     ? `https://vera.nicegoodthings.com`
     : `http://localhost:4000`;
 export const CACHE_VERSION = `0.3.37`;
+export const WIDGET_USER_PWD = `123123`;
 export const GuestRoutes = ["/", "/chat", "/chat/channel/:channel_id"];
 export const ContentTypes = {
   text: "text/plain",
diff --git a/src/components/FileMessage/AudioMessage.tsx b/src/components/FileMessage/AudioMessage.tsx
index 4ff56fa3..60ade27d 100644
--- a/src/components/FileMessage/AudioMessage.tsx
+++ b/src/components/FileMessage/AudioMessage.tsx
@@ -5,6 +5,7 @@ import IconDownload from "@/assets/icons/download.svg";
 import IconAudio from "@/assets/icons/file.audio.svg";
 import { formatBytes } from "../../utils";
 import ExpiredMessage from "./ExpiredMessage";
+import DownloadArea from "./DownloadArea";
 
 type Props = {
   url: string;
@@ -40,9 +41,7 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
             <span className="text-gray-400">{_size}</span>
           </div>
         </div>
-        <a href={download} className="mt-2 hidden md:block">
-          <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-        </a>
+        <DownloadArea copyLink={download} downloadLink={download} />
       </div>
       <audio
         onError={handleError}
diff --git a/src/components/FileMessage/DownloadArea.tsx b/src/components/FileMessage/DownloadArea.tsx
new file mode 100644
index 00000000..9d972bc1
--- /dev/null
+++ b/src/components/FileMessage/DownloadArea.tsx
@@ -0,0 +1,28 @@
+import useCopy from "@/hooks/useCopy";
+import IconDownload from "@/assets/icons/download.svg";
+import IconCopy from "@/assets/icons/copy.svg";
+
+type Props = {
+  copyLink: string;
+  downloadLink: string;
+};
+
+const DownloadArea = ({ copyLink, downloadLink }: Props) => {
+  const { copy, copied } = useCopy();
+  return (
+    <div className="flex flex-col-reverse gap-2 items-center">
+      <button
+        className="hidden md:block whitespace-nowrap"
+        disabled={copied}
+        onClick={copy.bind(null, copyLink, false)}
+      >
+        <IconCopy className="size-6 fill-gray-500 dark:fill-gray-400" />
+      </button>
+      <a className="hidden md:block whitespace-nowrap" download={name} href={downloadLink}>
+        <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+      </a>
+    </div>
+  );
+};
+
+export default DownloadArea;
diff --git a/src/components/FileMessage/OtherFileMessage.tsx b/src/components/FileMessage/OtherFileMessage.tsx
index 91ee6701..849face0 100644
--- a/src/components/FileMessage/OtherFileMessage.tsx
+++ b/src/components/FileMessage/OtherFileMessage.tsx
@@ -4,9 +4,9 @@ import clsx from "clsx";
 import { User } from "@/types/user";
 import { formatBytes, fromNowTime, getFileIcon } from "@/utils";
 import IconClose from "@/assets/icons/close.circle.svg";
-import IconDownload from "@/assets/icons/download.svg";
 import ExpiredMessage from "./ExpiredMessage";
 import Progress from "./Progress";
+import DownloadArea from "./DownloadArea";
 
 type Props = {
   content: string;
@@ -87,13 +87,7 @@ const OtherFileMessage = ({
         {sending ? (
           <IconClose className="cursor-pointer" onClick={handleCancel} />
         ) : (
-          <a
-            className="hidden md:block whitespace-nowrap"
-            download={name}
-            href={`${content}&download=true`}
-          >
-            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-          </a>
+          <DownloadArea copyLink={content} downloadLink={`${content}&download=true`} />
         )}
       </div>
     </div>
diff --git a/src/components/FileMessage/VideoMessage.tsx b/src/components/FileMessage/VideoMessage.tsx
index 0b26043d..15ca1141 100644
--- a/src/components/FileMessage/VideoMessage.tsx
+++ b/src/components/FileMessage/VideoMessage.tsx
@@ -6,6 +6,7 @@ import IconDownload from "@/assets/icons/download.svg";
 import IconVideo from "@/assets/icons/file.video.svg";
 import { formatBytes } from "../../utils";
 import ExpiredMessage from "./ExpiredMessage";
+import DownloadArea from "./DownloadArea";
 
 type Props = {
   url: string;
@@ -66,9 +67,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
             <span className="text-gray-400">{_size}</span>
           </div>
         </div>
-        <a href={download} className="hidden md:block mt-2">
-          <IconDownload className="fill-white" />
-        </a>
+        <DownloadArea copyLink={download} downloadLink={download} />
       </div>
       {!canPlay && !error ? (
         <div className={tipClass}>
diff --git a/src/routes/onboarding/steps/admin-account.tsx b/src/routes/onboarding/steps/admin-account.tsx
index 514eaf7d..5b504407 100644
--- a/src/routes/onboarding/steps/admin-account.tsx
+++ b/src/routes/onboarding/steps/admin-account.tsx
@@ -17,7 +17,7 @@ type Props = {
 const AdminAccount: FC<Props> = ({ serverName }) => {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { nextStep } = useWizard();
-  const formRef = useRef<HTMLFormElement | undefined>();
+  const formRef = useRef<HTMLFormElement>(null);
   const loggedIn = useAppSelector((store) => !!store.authData.token, shallowEqual);
   const dispatch = useDispatch();
   const [createAdmin, { isLoading: isSigningUp, isError: signUpError, isSuccess: signUpOk }] =
@@ -65,6 +65,8 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
   // After updated server
   useEffect(() => {
     if (isUpdatedServer) {
+      console.log({ isUpdatedServer });
+
       nextStep();
     }
   }, [isUpdatedServer]);
diff --git a/src/routes/onboarding/steps/who-can-sign-up.tsx b/src/routes/onboarding/steps/who-can-sign-up.tsx
index 1be579ca..997c5df4 100644
--- a/src/routes/onboarding/steps/who-can-sign-up.tsx
+++ b/src/routes/onboarding/steps/who-can-sign-up.tsx
@@ -12,19 +12,15 @@ export default function SignUpSetting() {
   const { t } = useTranslation("welcome");
   const { t: st } = useTranslation("setting");
   const { nextStep } = useWizard();
-  const { data: loginConfig, refetch } = useGetLoginConfigQuery();
+  const { data: loginConfig } = useGetLoginConfigQuery();
   const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
 
   const [value, setValue] = useState<WhoCanSignUp>();
-  useEffect(() => {
-    refetch();
-  }, []);
 
   // Sync to `value` when `loginConfig` is fetched
   useEffect(() => {
     if (loginConfig) {
       console.log("login config", loginConfig.who_can_sign_up);
-
       setValue(loginConfig.who_can_sign_up);
     }
   }, [loginConfig]);
@@ -39,7 +35,7 @@ export default function SignUpSetting() {
   useEffect(() => {
     if (isSuccess) nextStep();
   }, [isSuccess]);
-
+  if (!loginConfig) return null;
   return (
     <div className="h-full px-2 flex-center flex-col text-center w-full md:w-[512px] m-auto dark:text-gray-100">
       <span className="font-bold text-2xl mb-2">{t("onboarding.invite_title")}</span>
diff --git a/src/widget/Popup/Login/index.tsx b/src/widget/Popup/Login/index.tsx
index b36dc8f6..b34d3432 100644
--- a/src/widget/Popup/Login/index.tsx
+++ b/src/widget/Popup/Login/index.tsx
@@ -17,8 +17,10 @@ import useGithubAuthConfig from "../../../hooks/useGithubAuthConfig";
 import useGoogleAuthConfig from "../../../hooks/useGoogleAuthConfig";
 import { useWidget } from "../../WidgetContext";
 import Loading from "@/components/Loading";
+import { WIDGET_USER_PWD } from "@/app/config";
 
 // type Props = {}
+let currInput = { email: "", name: "" };
 const randomText = () => (Math.random() + 1).toString(36).substring(7);
 const Login = () => {
   const { t } = useTranslation("widget");
@@ -38,7 +40,7 @@ const Login = () => {
       widget_id: id,
       name: _name,
       email: _email,
-      password: `${_name}${_email}${rand}`
+      password: WIDGET_USER_PWD
     });
   };
   const handleSubmit = (evt: FormEvent<HTMLFormElement>) => {
@@ -52,10 +54,9 @@ const Login = () => {
     const data = new FormData(form);
     const name = data.get("username") as string;
     const email = data.get("email") as string;
-    // const email = data.get("email") as string;
-    console.log("name", name);
+    // for use later
+    currInput = { email, name };
     registerUser({ name, email, auto: false });
-    // const content = new FormData(form).get("prompt") as string;
   };
   useEffect(() => {
     if (autoReg && !token) {
@@ -67,7 +68,7 @@ const Login = () => {
 
   useEffect(() => {
     if (tokenLoginError) {
-      toast.error("Token login error!");
+      toast.error("Login error!");
     }
   }, [tokenLoginError]);
   useEffect(() => {
@@ -80,12 +81,16 @@ const Login = () => {
     if (error) {
       switch (error.status) {
         case 409:
-          toast.error("Email existed already!");
-          // login({
-          //   name: data?.name,
-          //   email: data?.email,
-          //   password
-          // })
+          {
+            // toast.error("Email existed already!");
+            // try to login
+            loginByToken({
+              email: currInput.email,
+              password: WIDGET_USER_PWD,
+              type: "password"
+            });
+          }
+
           break;
         default:
           toast.error("Something error!");