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);

app/scenes/Login/index.tsx

@@ -49,7 +49,11 @@ function Header({ config }: { config?: Config | undefined }) {
   );
 }
 
-function Login() {
+type Props = {
+  children?: (config?: Config) => React.ReactNode;
+};
+
+function Login({ children }: Props) {
   const location = useLocation();
   const query = useQuery();
   const { t, i18n } = useTranslation();
@@ -174,11 +178,14 @@ function Login() {
             </GetStarted>
           </>
         ) : (
-          <StyledHeading centered>
-            {t("Login to {{ authProviderName }}", {
-              authProviderName: config.name || "Outline",
-            })}
-          </StyledHeading>
+          <>
+            <StyledHeading centered>
+              {t("Login to {{ authProviderName }}", {
+                authProviderName: config.name || "Outline",
+              })}
+            </StyledHeading>
+            {children?.(config)}
+          </>
         )}
         <Notices />
         {defaultProvider && (

shared/i18n/locales/en_US/translation.json

@@ -430,6 +430,7 @@
   "Share nested documents": "Share nested documents",
   "Nested documents are publicly available": "Nested documents are publicly available",
   "Nested documents are not shared": "Nested documents are not shared",
+  "{{ teamName }} is using Outline to share documents, please login to continue.": "{{ teamName }} is using Outline to share documents, please login to continue.",
   "Are you sure you want to delete the <em>{{ documentTitle }}</em> template?": "Are you sure you want to delete the <em>{{ documentTitle }}</em> template?",
   "Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.": "Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.",
   "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.": "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.",