Add a page for desktop login

client/login/controller.js

@@ -2,6 +2,7 @@ import config from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { getUrlParts } from '@automattic/calypso-url';
 import { isGravPoweredOAuth2Client } from 'calypso/lib/oauth2-clients';
+import DesktopLogin from 'calypso/login/desktop-login';
 import { SOCIAL_HANDOFF_CONNECT_ACCOUNT } from 'calypso/state/action-types';
 import { isUserLoggedIn, getCurrentUserLocale } from 'calypso/state/current-user/selectors';
 import { fetchOAuth2ClientData } from 'calypso/state/oauth2-clients/actions';
@@ -132,6 +133,11 @@ export async function login( context, next ) {
 	next();
 }
 
+export async function desktopLogin( context, next ) {
+	context.primary = <DesktopLogin />;
+	next();
+}
+
 export async function magicLogin( context, next ) {
 	const {
 		path,

client/login/desktop-login/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslate } from 'i18n-calypso';
+import { FC } from 'react';
+import FormsButton from 'calypso/components/forms/form-button';
+import { navigate } from 'calypso/lib/navigate';
+
+const DesktopLogin: FC = () => {
+	const translate = useTranslate();
+	const loginUrl = '/desktop-auth';
+
+	return (
+		<>
+			<div className="login__form-header">{ translate( 'Log in to your account' ) }</div>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					navigate( loginUrl );
+				} }
+			>
+				<div className="login__form-action">
+					<FormsButton primary>{ translate( 'Log in with WordPress.com' ) }</FormsButton>
+				</div>
+			</form>
+		</>
+	);
+};
+
+export default DesktopLogin;

client/login/index.web.js

@@ -17,6 +17,7 @@ import {
 	magicLoginUse,
 	redirectJetpack,
 	redirectDefaultLocale,
+	desktopLogin,
 } from './controller';
 import redirectLoggedIn from './redirect-logged-in';
 import { setShouldServerSideRenderLogin, ssrSetupLocaleLogin, setMetaTags } from './ssr';
@@ -65,6 +66,22 @@ const makeLoggedOutLayout = makeLayoutMiddleware( ReduxWrappedLayout );
 export default ( router ) => {
 	const lang = getLanguageRouteParam();
 
+	// In development environments, the desktop app can be launched in a way in which it does not bundle calypso,
+	// but instead uses a calypso instance that is running outside the desktop app.
+	// In such a scenario, `config.isEnabled( 'desktop' )` returns false, but we still want the route to be available.
+	// For this reason, we always enable the route in development environments.
+	if ( config.isEnabled( 'desktop' ) || config( 'env_id' ) === 'development' ) {
+		router(
+			[ `/log-in/desktop/${ lang }` ],
+			redirectLoggedIn,
+			setLocaleMiddleware(),
+			setMetaTags,
+			setSectionMiddleware( LOGIN_SECTION_DEFINITION ),
+			desktopLogin,
+			makeLoggedOutLayout
+		);
+	}
+
 	if ( config.isEnabled( 'login/magic-login' ) ) {
 		router(
 			[ `/log-in/link/use/${ lang }`, `/log-in/jetpack/link/use/${ lang }` ],