Add message to login screen for shared links

app/scenes/Document/Shared.tsx

@@ -2,17 +2,20 @@ import { Location } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
 import { RouteComponentProps, useLocation } from "react-router-dom";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { setCookie } from "tiny-cookie";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
 import ErrorOffline from "~/scenes/ErrorOffline";
 import Layout from "~/components/Layout";
 import Sidebar from "~/components/Sidebar/Shared";
+import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
 import { AuthorizationError, OfflineError } from "~/utils/errors";
+import isCloudHosted from "~/utils/isCloudHosted";
 import Login from "../Login";
 import Document from "./components/Document";
 import Loading from "./components/Loading";
@@ -75,6 +78,7 @@ function SharedDocumentScene(props: Props) {
   const { ui } = useStores();
   const theme = useTheme();
   const location = useLocation();
+  const { t } = useTranslation();
   const [response, setResponse] = React.useState<Response>();
   const [error, setError] = React.useState<Error | null | undefined>();
   const { documents } = useStores();
@@ -111,7 +115,22 @@ function SharedDocumentScene(props: Props) {
       return <ErrorOffline />;
     } else if (error instanceof AuthorizationError) {
       setCookie("postLoginRedirectPath", props.location.pathname);
-      return <Login />;
+      return (
+        <Login>
+          {(config) =>
+            config?.name && isCloudHosted ? (
+              <GetStarted>
+                {t(
+                  "{{ teamName }} is using Outline to share documents, please login to continue.",
+                  {
+                    teamName: config.name,
+                  }
+                )}
+              </GetStarted>
+            ) : null
+          }
+        </Login>
+      );
     } else {
       return <Error404 />;
     }
@@ -146,4 +165,9 @@ function SharedDocumentScene(props: Props) {
   );
 }
 
+const GetStarted = styled(Text)`
+  text-align: center;
+  margin-top: -8px;
+`;
+
 export default observer(SharedDocumentScene);