Render a specific login screen for the desktop app

Automattic · Jan 20, 2025 · aebc726 · aebc726
1 parent 3852427
commit aebc726
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/client/login/wp-login/index.jsx b/client/login/wp-login/index.jsx
@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import LoginBlock from 'calypso/blocks/login';
 import AutomatticLogo from 'calypso/components/automattic-logo';
 import DocumentHead from 'calypso/components/data/document-head';
+import FormsButton from 'calypso/components/forms/form-button';
 import LocaleSuggestions from 'calypso/components/locale-suggestions';
 import LoggedOutFormBackLink from 'calypso/components/logged-out-form/back-link';
 import Main from 'calypso/components/main';
@@ -20,6 +21,7 @@ import {
 	isReactLostPasswordScreenEnabled,
 	pathWithLeadingSlash,
 } from 'calypso/lib/login';
+import { navigate } from 'calypso/lib/navigate';
 import {
 	isJetpackCloudOAuth2Client,
 	isA4AOAuth2Client,
@@ -590,6 +592,26 @@ export class Login extends Component {
 		);
 	}
 
+	renderDesktopAppContent() {
+		const { translate } = this.props;
+		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>
+			</>
+		);
+	}
+
 	render() {
 		const {
 			locale,
@@ -601,12 +623,14 @@ export class Login extends Component {
 			isWhiteLogin,
 		} = this.props;
 		const canonicalUrl = localizeUrl( 'https://wordpress.com/log-in', locale );
+		const isDesktopApp = config.isEnabled( 'desktop' );
 		const isSocialFirst =
 			config.isEnabled( 'login/social-first' ) &&
 			isWhiteLogin &&
 			! isGravPoweredClient &&
 			! isWoo &&
-			! isBlazePro;
+			! isBlazePro &&
+			! isDesktopApp;
 
 		return (
 			<div>
@@ -633,7 +657,9 @@ export class Login extends Component {
 					/>
 
 					{ isSocialFirst && this.renderLoginHeaderNavigation() }
-					<div className="wp-login__container">{ this.renderContent( isSocialFirst ) }</div>
+					<div className="wp-login__container">
+						{ isDesktopApp ? this.renderDesktopAppContent() : this.renderContent( isSocialFirst ) }
+					</div>
 				</Main>
 
 				{ this.renderFooter() }