Desktop support (#4484)

* Remove home link on desktop app

* Spellcheck, installation toasts, background styling, …

* Add email,slack, auth support

* More desktop style tweaks

* Move redirect to client

* cleanup

* Record desktop usage

* docs

* fix: Selection state in search input when double clicking header

app/scenes/DesktopRedirect.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+import Heading from "~/components/Heading";
+import PageTitle from "~/components/PageTitle";
+import Text from "~/components/Text";
+import useQuery from "~/hooks/useQuery";
+
+const DesktopRedirect = () => {
+  const params = useQuery();
+  const token = params.get("token");
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    if (token) {
+      window.location.href = `outline://${window.location.host}/auth/redirect?token=${token}`;
+
+      // Clean the url so it's not possible to hit reload, re-using the transfer token will not work.
+      window.location.search = "";
+    }
+  }, [token]);
+
+  return (
+    <Centered align="center" justify="center" column auto>
+      <PageTitle title={`${t("Signing in")}…`} />
+      <Heading centered>{t("Signing in")}…</Heading>
+      <Note>
+        {t(
+          "You can safely close this window once the Outline desktop app has opened"
+        )}
+        .
+      </Note>
+    </Centered>
+  );
+};
+
+const Note = styled(Text)`
+  color: ${(props) => props.theme.textTertiary};
+  text-align: center;
+  font-size: 14px;
+  margin-top: 8px;
+
+  em {
+    font-style: normal;
+    font-weight: 500;
+  }
+`;
+
+const Centered = styled(Flex)`
+  user-select: none;
+  width: 90vw;
+  height: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+`;
+
+export default DesktopRedirect;

app/scenes/Login/AuthenticationProvider.tsx

@@ -2,12 +2,14 @@ import { EmailIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { Client } from "@shared/types";
 import { parseDomain } from "@shared/utils/domains";
 import AuthLogo from "~/components/AuthLogo";
 import ButtonLarge from "~/components/ButtonLarge";
 import InputLarge from "~/components/InputLarge";
 import env from "~/env";
 import { client } from "~/utils/ApiClient";
+import Desktop from "~/utils/Desktop";
 
 type Props = {
   id: string;
@@ -39,6 +41,7 @@ function AuthenticationProvider(props: Props) {
       try {
         const response = await client.post(event.currentTarget.action, {
           email,
+          client: Desktop.isElectron() ? "desktop" : undefined,
         });
 
         if (response.redirect) {
@@ -95,7 +98,9 @@ function AuthenticationProvider(props: Props) {
   // and keep the user on the same page.
   const { custom, teamSubdomain, host } = parseDomain(window.location.origin);
   const needsRedirect = custom || teamSubdomain;
-  const href = needsRedirect
+  const href = Desktop.isElectron()
+    ? `${env.URL}${authUrl}?client=${Client.Desktop}`
+    : needsRedirect
     ? `${env.URL}${authUrl}?host=${encodeURI(host)}`
     : authUrl;
 

app/scenes/Login/index.tsx

@@ -21,6 +21,8 @@ import env from "~/env";
 import useLastVisitedPath from "~/hooks/useLastVisitedPath";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
+import { draggableOnDesktop } from "~/styles";
+import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
 import { changeLanguage, detectLanguage } from "~/utils/language";
 import AuthenticationProvider from "./AuthenticationProvider";
@@ -30,7 +32,11 @@ function Header({ config }: { config?: Config | undefined }) {
   const { t } = useTranslation();
   const isSubdomain = !!config?.hostname;
 
-  if (!isCloudHosted || parseDomain(window.location.origin).custom) {
+  if (
+    !isCloudHosted ||
+    parseDomain(window.location.origin).custom ||
+    Desktop.isElectron()
+  ) {
     return null;
   }
 
@@ -274,6 +280,7 @@ const Background = styled(Fade)`
   height: 100%;
   background: ${(props) => props.theme.background};
   display: flex;
+  ${draggableOnDesktop()}
 `;
 
 const Logo = styled.div`