fix: Cannot sign-in with Gmail on desktop app

app/components/Input.tsx

@@ -175,6 +175,7 @@ function Input(
     labelHidden,
     onFocus,
     onBlur,
+    children,
     ...rest
   } = props;
 
@@ -211,6 +212,7 @@ function Input(
               {...rest}
             />
           )}
+          {children}
         </Outline>
       </label>
       {error && (

app/scenes/Login/index.tsx

@@ -15,6 +15,7 @@ import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import OutlineIcon from "~/components/Icons/OutlineIcon";
+import Input from "~/components/Input";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import PageTitle from "~/components/PageTitle";
 import TeamLogo from "~/components/TeamLogo";
@@ -34,11 +35,11 @@ function Header({ config }: { config?: Config | undefined }) {
   const { t } = useTranslation();
   const isSubdomain = !!config?.hostname;
 
-  if (
-    !isCloudHosted ||
-    parseDomain(window.location.origin).custom ||
-    Desktop.isElectron()
-  ) {
+  if (!isCloudHosted || parseDomain(window.location.origin).custom) {
+    return null;
+  }
+
+  if (Desktop.isElectron() && !isSubdomain) {
     return null;
   }
 
@@ -56,6 +57,8 @@ type Props = {
 function Login({ children }: Props) {
   const location = useLocation();
   const query = useQuery();
+  const notice = query.get("notice");
+
   const { t, i18n } = useTranslation();
   const { auth } = useStores();
   const { config } = auth;
@@ -74,6 +77,22 @@ function Login({ children }: Props) {
     setEmailLinkSentTo(email);
   }, []);
 
+  const handleGoSubdomain = React.useCallback(async (event) => {
+    event.preventDefault();
+    const data = Object.fromEntries(new FormData(event.target));
+    const normalizedSubdomain = data.subdomain
+      .toString()
+      .toLowerCase()
+      .trim()
+      .replace(/^https?:\/\//, "");
+    const host = `https://${normalizedSubdomain}.getoutline.com`;
+    await Desktop.bridge.addCustomHost(host);
+
+    setTimeout(() => {
+      window.location.href = host;
+    }, 500);
+  }, []);
+
   React.useEffect(() => {
     auth.fetchConfig().catch(setError);
   }, [auth]);
@@ -160,6 +179,43 @@ function Login({ children }: Props) {
     );
   }
 
+  if (Desktop.isElectron() && notice === "domain-required") {
+    return (
+      <Background>
+        <Header config={config} />
+
+        <Centered
+          as="form"
+          onSubmit={handleGoSubdomain}
+          align="center"
+          justify="center"
+          column
+          auto
+        >
+          <Heading centered>{t("Choose workspace")}</Heading>
+          <Note>
+            {t(
+              "This login method requires choosing your workspace to continue"
+            )}
+            …
+          </Note>
+          <Flex>
+            <Input
+              name="subdomain"
+              style={{ textAlign: "right" }}
+              placeholder={t("subdomain")}
+            >
+              <Domain>.getoutline.com</Domain>
+            </Input>
+          </Flex>
+          <ButtonLarge type="submit" fullwidth>
+            {t("Continue")}
+          </ButtonLarge>
+        </Centered>
+      </Background>
+    );
+  }
+
   const hasMultipleProviders = config.providers.length > 1;
   const defaultProvider = find(
     config.providers,
@@ -275,6 +331,11 @@ const StyledHeading = styled(Heading)`
   margin: 0;
 `;
 
+const Domain = styled.div`
+  color: ${s("textSecondary")};
+  padding: 0 8px 0 0;
+`;
+
 const CheckEmailIcon = styled(EmailIcon)`
   margin-bottom: -1.5em;
 `;

shared/i18n/locales/en_US/translation.json

@@ -633,6 +633,9 @@
   "Custom domain setup": "Custom domain setup",
   "Almost there": "Almost there",
   "Your custom domain is successfully pointing at Outline. To complete the setup process please contact support.": "Your custom domain is successfully pointing at Outline. To complete the setup process please contact support.",
+  "Choose workspace": "Choose workspace",
+  "This login method requires choosing your workspace to continue": "This login method requires choosing your workspace to continue",
+  "subdomain": "subdomain",
   "Check your email": "Check your email",
   "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.": "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.",
   "Back to login": "Back to login",