diff --git a/app/scenes/Login/Provider.tsx b/app/scenes/Login/AuthenticationProvider.tsx similarity index 96% rename from app/scenes/Login/Provider.tsx rename to app/scenes/Login/AuthenticationProvider.tsx index ee3500089..40140e8f1 100644 --- a/app/scenes/Login/Provider.tsx +++ b/app/scenes/Login/AuthenticationProvider.tsx @@ -21,7 +21,7 @@ type State = { email: string; }; -class Provider extends React.Component { +class AuthenticationProvider extends React.Component { state = { showEmailSignin: false, isSubmitting: false, @@ -123,7 +123,6 @@ class Provider extends React.Component { } const Wrapper = styled.div` - margin-bottom: 1em; width: 100%; `; @@ -133,4 +132,4 @@ const Form = styled.form` justify-content: space-between; `; -export default withTranslation()(Provider); +export default withTranslation()(AuthenticationProvider); diff --git a/app/scenes/Login/index.tsx b/app/scenes/Login/index.tsx index f0e478615..85dc78c71 100644 --- a/app/scenes/Login/index.tsx +++ b/app/scenes/Login/index.tsx @@ -5,12 +5,13 @@ import * as React from "react"; import { Trans, useTranslation } from "react-i18next"; import { useLocation, Link, Redirect } from "react-router-dom"; import styled from "styled-components"; -import { setCookie } from "tiny-cookie"; +import { getCookie, setCookie } from "tiny-cookie"; import { Config } from "~/stores/AuthStore"; import ButtonLarge from "~/components/ButtonLarge"; import Fade from "~/components/Fade"; import Flex from "~/components/Flex"; import Heading from "~/components/Heading"; +import LoadingIndicator from "~/components/LoadingIndicator"; import NoticeAlert from "~/components/NoticeAlert"; import OutlineLogo from "~/components/OutlineLogo"; import PageTitle from "~/components/PageTitle"; @@ -22,8 +23,8 @@ import useStores from "~/hooks/useStores"; import { isCustomDomain } from "~/utils/domains"; import isHosted from "~/utils/isHosted"; import { changeLanguage, detectLanguage } from "~/utils/language"; +import AuthenticationProvider from "./AuthenticationProvider"; import Notices from "./Notices"; -import Provider from "./Provider"; function Header({ config }: { config?: Config | undefined }) { const { t } = useTranslation(); @@ -77,11 +78,11 @@ function Login() { React.useEffect(() => { const entries = Object.fromEntries(query.entries()); + const existing = getCookie("signupQueryParams"); - // We don't want to override this cookie if we're viewing an error notice - // sent back from the server via query string (notice=), or if there are no - // query params at all. - if (Object.keys(entries).length && !query.get("notice")) { + // We don't want to set this cookie if we're viewing an error notice via + // query string(notice =), if there are no query params, or it's already set + if (Object.keys(entries).length && !query.get("notice") && !existing) { setCookie("signupQueryParams", JSON.stringify(entries)); } }, [query]); @@ -114,9 +115,10 @@ function Login() { ); } - // we're counting on the config request being fast, so display nothing while waiting + // we're counting on the config request being fast, so just a simple loading + // indicator here that's delayed by 250ms if (!config) { - return null; + return ; } const hasMultipleProviders = config.providers.length > 1; @@ -152,7 +154,7 @@ function Login() { return (
- + {env.TEAM_LOGO && !isHosted ? ( @@ -163,7 +165,7 @@ function Login() { {isCreate ? ( <> - {t("Create an account")} + {t("Create an account")} {t( "Get started by choosing a sign-in method for your new team below…" @@ -171,16 +173,16 @@ function Login() { ) : ( - + {t("Login to {{ authProviderName }}", { authProviderName: config.name || "Outline", })} - + )} {defaultProvider && ( - login.": "Already have an account? Go to <1>login.", - "Sign In": "Sign In", - "Continue with Email": "Continue with Email", - "Continue with {{ authProviderName }}": "Continue with {{ authProviderName }}", "Any collection": "Any collection", "Any time": "Any time", "Past day": "Past day",