Address woo passwordless UI feedback (#88748)

* Update border width in woo.scss * Remove browser autofill styles and update font family in woo.scss * Remove browser autofill styles and add support for autofill with OnePassword * Add signup link component and redirect to logout if user is already logged in * Import Inter font in woo * Add responsive styling to social buttons in auth form
Automattic · Mar 22, 2024 · 1a5a33c · 1a5a33c
1 parent 59c6952
commit 1a5a33c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -27,6 +27,7 @@ import { login } from 'calypso/lib/paths';
 import { addQueryArgs } from 'calypso/lib/route';
 import { isWebAuthnSupported } from 'calypso/lib/webauthn';
 import { sendEmailLogin } from 'calypso/state/auth/actions';
+import { redirectToLogout } from 'calypso/state/current-user/actions';
 import { getCurrentUser, isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import { wasManualRenewalImmediateLoginAttempted } from 'calypso/state/immediate-login/selectors';
 import { rebootAfterLogin } from 'calypso/state/login/actions';
@@ -293,6 +294,22 @@ class Login extends Component {
 		} );
 	};
 
+	getSignupLinkComponent = () => {
+		const signupUrl = this.getSignupUrl();
+		return (
+			<a
+				href={ signupUrl }
+				onClick={ ( event ) => {
+					// If the user is already logged in, log them out before sending them to the signup page. Otherwise, they will see the weird logged-in state on the signup page.
+					if ( this.props.isLoggedIn ) {
+						event.preventDefault();
+						this.props.redirectToLogout( signupUrl );
+					}
+				} }
+			/>
+		);
+	};
+
 	getSignupUrl = () => {
 		const {
 			currentRoute,
@@ -361,17 +378,7 @@ class Login extends Component {
 		let headerText = translate( 'Log in to your account' );
 		let preHeader = null;
 		let postHeader = null;
-		const signupLink = (
-			<a
-				href={ this.getSignupUrl() }
-				onClick={ () => {
-					// If the user is already logged in, log them out before sending them to the signup page. Otherwise, they will see the weird logged-in state on the signup page.
-					if ( this.props.isLoggedIn ) {
-						this.props.logoutUser();
-					}
-				} }
-			/>
-		);
+		const signupLink = this.getSignupLinkComponent();
 
 		if ( isSocialFirst ) {
 			headerText = translate( 'Log in to WordPress.com' );
@@ -747,16 +754,7 @@ class Login extends Component {
 			loginButtons,
 		} = this.props;
 
-		const signupLink = (
-			<a
-				href={ this.getSignupUrl() }
-				onClick={ () => {
-					if ( this.props.isLoggedIn ) {
-						this.props.logoutUser();
-					}
-				} }
-			/>
-		);
+		const signupLink = this.getSignupLinkComponent();
 
 		if ( socialConnect ) {
 			return (
@@ -973,6 +971,7 @@ export default connect(
 		hideMagicLoginRequestForm,
 		sendEmailLogin,
 		logoutUser,
+		redirectToLogout,
 	},
 	( stateProps, dispatchProps, ownProps ) => ( {
 		...ownProps,

diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
@@ -1,3 +1,4 @@
+@import url( https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap );
 @import "@wordpress/base-styles/colors";
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
@@ -1158,6 +1159,17 @@ $breakpoint-mobile: 660px;
 			}
 		}
 
+		// Remove autofill styles.
+		input:-webkit-autofill,
+		input:-webkit-autofill:hover,
+		input:-webkit-autofill:focus,
+		input:-webkit-autofill:active,
+		input[data-com-onepassword-filled="light"] {
+			-webkit-background-clip: text;
+			-webkit-box-shadow: 0 0 0 1000px #fff inset;
+			transition: background-color 5000s ease-in-out 0s;
+		}
+
 		.button.is-primary,
 		.login .button.is-primary,
 		.magic-login.is-white-login .magic-login__form-action .button.is-primary:not([disabled]) {
@@ -1337,6 +1349,10 @@ $breakpoint-mobile: 660px;
 
 			.auth-form__social-buttons-tos {
 				margin: 0;
+
+				@media ( max-width: $break-medium ) {
+					max-width: $max-width;
+				}
 			}
 
 			.login__lost-password-link {
@@ -1468,7 +1484,7 @@ $breakpoint-mobile: 660px;
 				align-items: center;
 				align-self: stretch;
 				border-radius: 8px; // stylelint-disable-line scales/radii
-				border: 2px solid #dcdcde;
+				border: 1px solid #dcdcde;
 				height: 221px;
 				box-sizing: border-box;
 				padding: 32px 24px 16px 24px;
@@ -1634,8 +1650,6 @@ $breakpoint-mobile: 660px;
 				p {
 					color: var(--studio-gray-60);
 					text-align: center;
-
-					font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 					font-size: rem(14px);
 					font-style: normal;
 					font-weight: 400;