feat: Fix #625.

6 files changed, 120 insertions, 80 deletions

diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index da824e4a..966eddda 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -80,6 +80,7 @@
     "sendPostFailed": "Failed to send post.",
     "dropDraft": "Drop Draft",
     "confirmLeave": "Are you sure to leave? All content you typed would be lost.",
+    "postNoLogin": "Please <l>login</l> to send post.",
     "visibility": {
       "public": "public to everyone",
       "register": "only registed people can see",
diff --git a/FrontEnd/src/locales/zh/translation.json b/FrontEnd/src/locales/zh/translation.json
index 6f1346fb..2a2ae4bd 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -80,6 +80,7 @@
     "sendPostFailed": "发送消息失败。",
     "dropDraft": "放弃草稿",
     "confirmLeave": "确定要离开吗？所有输入的内容将会丢失。",
+    "postNoLogin": "<l>登陆</l>后即可发表消息！",
     "visibility": {
       "public": "对所有人公开",
       "register": "仅注册可见",
diff --git a/FrontEnd/src/views/timeline-common/Timeline.tsx b/FrontEnd/src/views/timeline-common/Timeline.tsx
index 3aed2445..d812463a 100644
--- a/FrontEnd/src/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/views/timeline-common/Timeline.tsx
@@ -21,6 +21,7 @@ import TimelinePagedPostListView from "./TimelinePagedPostListView";
 import TimelineEmptyItem from "./TimelineEmptyItem";
 import TimelineLoading from "./TimelineLoading";
 import TimelinePostEdit from "./TimelinePostEdit";
+import TimelinePostEditNoLogin from "./TimelinePostEditNoLogin";
 
 import "./index.css";
 
@@ -149,7 +150,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
           {timeline?.postable ? (
             <TimelinePostEdit timeline={timeline} onPosted={onReload.current} />
           ) : (
-            <TimelineEmptyItem startSegmentLength={20} center="none" current />
+            <TimelinePostEditNoLogin />
           )}
         </div>
       );
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 9c48c7c8..f19f7785 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -17,9 +17,8 @@ import { base64 } from "@/http/common";
 import BlobImage from "../common/BlobImage";
 import LoadingButton from "../common/button/LoadingButton";
 import PopupMenu from "../common/menu/PopupMenu";
-import Card from "../common/Card";
 import MarkdownPostEdit from "./MarkdownPostEdit";
-import TimelineLine from "./TimelineLine";
+import TimelinePostEditCard from "./TimelinePostEditCard";
 
 import "./TimelinePostEdit.css";
 
@@ -195,87 +194,76 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   };
 
   return (
-    <div
-      className={classnames("timeline-item timeline-post-edit", className)}
-      style={style}
-    >
-      <TimelineLine center="node" current />
-      <Card className="timeline-item-card">
-        {showMarkdown ? (
-          <MarkdownPostEdit
-            className="cru-fill-parent"
-            onClose={() => setShowMarkdown(false)}
-            timeline={timeline.name}
-            onPosted={onPosted}
-            onPostError={onPostError}
-          />
-        ) : (
-          <div className="row">
-            <div className="col px-1 py-1">
-              {(() => {
-                if (kind === "text") {
-                  return (
-                    <TimelinePostEditText
-                      className="cru-fill-parent timeline-post-edit"
-                      text={text}
-                      disabled={process}
-                      onChange={(t) => {
-                        setText(t);
-                        window.localStorage.setItem(
-                          draftTextLocalStorageKey,
-                          t
-                        );
-                      }}
-                    />
-                  );
-                } else if (kind === "image") {
-                  return (
-                    <TimelinePostEditImage
-                      onSelect={setImage}
-                      disabled={process}
-                    />
-                  );
-                }
-              })()}
-            </div>
-            <div className="col col-auto align-self-end m-1">
-              <div className="d-block cru-text-center mt-1 mb-2">
-                <PopupMenu
-                  items={(["text", "image", "markdown"] as const).map(
-                    (kind) => ({
-                      type: "button",
-                      text: `timeline.post.type.${kind}`,
-                      iconClassName: postKindIconClassNameMap[kind],
-                      onClick: () => {
-                        if (kind === "markdown") {
-                          setShowMarkdown(true);
-                        } else {
-                          setKind(kind);
-                        }
-                      },
-                    })
-                  )}
-                >
-                  <i
-                    className={classnames(
-                      postKindIconClassNameMap[kind],
-                      "icon-button large"
-                    )}
+    <TimelinePostEditCard className={className} style={style}>
+      {showMarkdown ? (
+        <MarkdownPostEdit
+          className="cru-fill-parent"
+          onClose={() => setShowMarkdown(false)}
+          timeline={timeline.name}
+          onPosted={onPosted}
+          onPostError={onPostError}
+        />
+      ) : (
+        <div className="row">
+          <div className="col px-1 py-1">
+            {(() => {
+              if (kind === "text") {
+                return (
+                  <TimelinePostEditText
+                    className="cru-fill-parent timeline-post-edit"
+                    text={text}
+                    disabled={process}
+                    onChange={(t) => {
+                      setText(t);
+                      window.localStorage.setItem(draftTextLocalStorageKey, t);
+                    }}
                   />
-                </PopupMenu>
-              </div>
-              <LoadingButton
-                onClick={onSend}
-                disabled={!canSend}
-                loading={process}
+                );
+              } else if (kind === "image") {
+                return (
+                  <TimelinePostEditImage
+                    onSelect={setImage}
+                    disabled={process}
+                  />
+                );
+              }
+            })()}
+          </div>
+          <div className="col col-auto align-self-end m-1">
+            <div className="d-block cru-text-center mt-1 mb-2">
+              <PopupMenu
+                items={(["text", "image", "markdown"] as const).map((kind) => ({
+                  type: "button",
+                  text: `timeline.post.type.${kind}`,
+                  iconClassName: postKindIconClassNameMap[kind],
+                  onClick: () => {
+                    if (kind === "markdown") {
+                      setShowMarkdown(true);
+                    } else {
+                      setKind(kind);
+                    }
+                  },
+                }))}
               >
-                {t("timeline.send")}
-              </LoadingButton>
+                <i
+                  className={classnames(
+                    postKindIconClassNameMap[kind],
+                    "icon-button large"
+                  )}
+                />
+              </PopupMenu>
             </div>
+            <LoadingButton
+              onClick={onSend}
+              disabled={!canSend}
+              loading={process}
+            >
+              {t("timeline.send")}
+            </LoadingButton>
           </div>
-        )}
-      </Card>
-    </div>
+        </div>
+      )}
+    </TimelinePostEditCard>
   );
 };
 
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx
new file mode 100644
index 00000000..a69d413a
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEditCard.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import classnames from "classnames";
+
+import Card from "../common/Card";
+import TimelineLine from "./TimelineLine";
+
+import "./TimelinePostEdit.css";
+
+export interface TimelinePostEditCardProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const TimelinePostEdit: React.FC<TimelinePostEditCardProps> = ({
+  className,
+  style,
+  children,
+}) => {
+  return (
+    <div
+      className={classnames("timeline-item timeline-post-edit", className)}
+      style={style}
+    >
+      <TimelineLine center="node" current />
+      <Card className="timeline-item-card">{children}</Card>
+    </div>
+  );
+};
+
+export default TimelinePostEdit;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx
new file mode 100644
index 00000000..82834e95
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEditNoLogin.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Trans } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import TimelinePostEditCard from "./TimelinePostEditCard";
+
+export default function TimelinePostEditNoLogin(): React.ReactElement | null {
+  return (
+    <TimelinePostEditCard>
+      <div className="mt-3 mb-4">
+        <Trans
+          i18nKey="timeline.postNoLogin"
+          components={{ l: <Link to="/login" /> }}
+        />
+      </div>
+    </TimelinePostEditCard>
+  );
+}