Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ exports[`ThirdPartyAuthComponent buttons match snapshot: apple 1`] = `
<button
aria-label="Continue with Apple"
class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
bg-black border-transparent
"
bg-black border-transparent
"
type="submit"
>
<svg
Expand All @@ -20,8 +20,8 @@ exports[`ThirdPartyAuthComponent buttons match snapshot: google 1`] = `
<button
aria-label="Continue with Google"
class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
bg-[#F9F4F4] border-[#747775] border-[1px]
"
bg-[#F9F4F4] border-[#747775] border-[1px]
"
type="submit"
>
<svg
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,36 +143,6 @@ describe('ThirdPartyAuthComponent', () => {
expect(onContinueWithApple).not.toHaveBeenCalled();
});

it('should deeplink directly to google auth, if deeplink=`googleLogin`', async () => {
renderWith({
enabled: true,
showSeparator: false,
deeplink: 'googleLogin',
view: 'index',
});

expect(
(await screen.findByTestId('google-signin-form-state')).getAttribute(
'value'
)
).not.toEqual('');
});

it('should deeplink directly to apple auth, if deeplink=`appleLogin`', async () => {
renderWith({
enabled: true,
showSeparator: false,
deeplink: 'appleLogin',
view: 'index',
});

expect(
(await screen.findByTestId('apple-signin-form-state')).getAttribute(
'value'
)
).not.toEqual('');
});

it('hides separator', async () => {
renderWith({
enabled: true,
Expand Down
57 changes: 14 additions & 43 deletions packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export type ThirdPartyAuthProps = {
onContinueWithApple?: FormEventHandler<HTMLFormElement>;
showSeparator?: boolean;
viewName?: string;
deeplink?: string;
flowQueryParams?: QueryParams;
separatorType?: 'or' | 'signInWith';
};
Expand All @@ -35,7 +34,6 @@ const ThirdPartyAuth = ({
onContinueWithApple,
showSeparator = true,
viewName = 'unknown',
deeplink,
flowQueryParams,
separatorType = 'or',
}: ThirdPartyAuthProps) => {
Expand Down Expand Up @@ -91,7 +89,6 @@ const ThirdPartyAuth = ({
<GoogleLogo className="w-full h-auto" />
</>
),
deeplink,
}}
/>
<ThirdPartySignInForm
Expand All @@ -111,7 +108,6 @@ const ThirdPartyAuth = ({
<AppleLogo className="w-full h-auto" />
</>
),
deeplink,
}}
/>
</div>
Expand Down Expand Up @@ -139,7 +135,6 @@ const ThirdPartySignInForm = ({
buttonText,
onSubmit,
viewName,
deeplink,
flowQueryParams,
}: {
party: 'google' | 'apple';
Expand All @@ -155,14 +150,12 @@ const ThirdPartySignInForm = ({
buttonText: ReactElement;
onSubmit?: FormEventHandler<HTMLFormElement>;
viewName?: string;
deeplink?: string;
flowQueryParams?: QueryParams;
}) => {
const { logViewEventOnce } = useMetrics();
const { l10n } = useLocalization();
const stateRef = useRef<HTMLInputElement>(null);
const formRef = useRef<HTMLFormElement>(null);
const isDeeplinking = deeplink !== undefined;

const getLoginAriaLabel = () => {
const labels = {
Expand Down Expand Up @@ -201,12 +194,6 @@ const ThirdPartySignInForm = ({
case 'apple-signup':
GleanMetrics.thirdPartyAuth.startAppleAuthFromReg();
break;
case 'google-deeplink':
GleanMetrics.thirdPartyAuth.googleDeeplink();
break;
case 'apple-deeplink':
GleanMetrics.thirdPartyAuth.appleDeeplink();
break;
}

// wait for all the Glean events to be sent before the page unloads
Expand All @@ -221,19 +208,6 @@ const ThirdPartySignInForm = ({
onSubmit = () => true;
}

useEffect(() => {
if (deeplink && formRef.current) {
// Only deeplink if this is the correct button
if (
(deeplink === 'googleLogin' && party === 'google') ||
(deeplink === 'appleLogin' && party === 'apple')
) {
onClick();
formRef.current.submit();
}
}
}, [deeplink, onClick, party]);

return (
<form
action={authorizationEndpoint}
Expand All @@ -258,22 +232,20 @@ const ThirdPartySignInForm = ({
<input type="hidden" name="response_mode" value={responseMode} />
)}

{!isDeeplinking ? (
<button
type="submit"
className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
${
party === 'google'
? 'bg-[#F9F4F4] border-[#747775] border-[1px]'
: 'bg-black border-transparent'
}
`}
onClick={onClick}
aria-label={getLoginAriaLabel()}
>
{buttonText}
</button>
) : null}
<button
type="submit"
className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
${
party === 'google'
? 'bg-[#F9F4F4] border-[#747775] border-[1px]'
: 'bg-black border-transparent'
}
`}
onClick={onClick}
aria-label={getLoginAriaLabel()}
>
{buttonText}
</button>
</form>
);
};
Expand Down Expand Up @@ -302,7 +274,6 @@ function getState(flowQueryParams: QueryParams | undefined) {

// Remove unwanted keys
const filteredParams = deleteParams(new URLSearchParams(combinedParams), [
'deeplink',
'email',
'emailStatusChecked',
'forceExperiment',
Expand Down
6 changes: 0 additions & 6 deletions packages/fxa-settings/src/lib/glean/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -427,12 +427,6 @@ const recordEventMetric = (
case 'third_party_auth_apple_login_start':
thirdPartyAuth.appleLoginStart.record();
break;
case 'third_party_auth_apple_deeplink':
thirdPartyAuth.appleDeeplink.record();
break;
case 'third_party_auth_google_deeplink':
thirdPartyAuth.googleDeeplink.record();
break;
case 'cad_firefox_notnow_submit':
cadFirefox.notnowSubmit.record();
break;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { IsEmail, IsIn, IsOptional, Validate } from 'class-validator';
import { IsEmail, IsOptional, Validate } from 'class-validator';
import {
bind,
KeyTransforms,
Expand All @@ -20,9 +20,4 @@ export class IndexQueryParams extends ModelDataProvider {
@Validate(IsEmailOrEmpty, {})
@bind(KeyTransforms.snakeCase)
loginHint: string | undefined;

@IsOptional()
@IsIn(['googleLogin', 'appleLogin'])
@bind()
deeplink: string | undefined;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
MaxLength,
Matches,
Validate,
IsIn,
} from 'class-validator';
import {
bind,
Expand Down Expand Up @@ -51,9 +50,4 @@ export class SigninQueryParams extends ModelDataProvider {
@Validate(IsFxaRedirectToUrl, {})
@bind(T.snakeCase)
redirectTo: string | undefined = undefined;

@IsOptional()
@IsIn(['googleLogin', 'appleLogin'])
@bind(T.snakeCase)
deeplink!: string;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { IsBoolean, IsEmail, IsIn, IsOptional } from 'class-validator';
import { bind, KeyTransforms as T, ModelDataProvider } from '../../../lib/model-data';
import { IsBoolean, IsEmail, IsOptional } from 'class-validator';
import { bind, ModelDataProvider } from '../../../lib/model-data';

export class SignupQueryParams extends ModelDataProvider {
// 'email' will be optional once the index page is converted to React
Expand All @@ -20,9 +20,4 @@ export class SignupQueryParams extends ModelDataProvider {
@IsBoolean()
@bind()
emailStatusChecked: boolean = false;

@IsOptional()
@IsIn(['googleLogin', 'appleLogin'])
@bind(T.snakeCase)
deeplink!: string;
}
2 changes: 0 additions & 2 deletions packages/fxa-settings/src/pages/Index/container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,6 @@ const IndexContainer = ({
}, [ftlMsgResolver, deleteAccountSuccess]);

const initialPrefill = prefillEmail || suggestedEmail;
const deeplink = queryParamModel.deeplink;
const isMobile = isMobileDevice();

const cmsInfo = integration.getCmsInfo();
Expand All @@ -339,7 +338,6 @@ const IndexContainer = ({
errorBannerMessage,
successBannerMessage,
tooltipErrorMessage,
deeplink,
flowQueryParams,
isMobile,
useFxAStatusResult,
Expand Down
30 changes: 1 addition & 29 deletions packages/fxa-settings/src/pages/Index/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,9 @@
import React from 'react';
import { screen, waitFor } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import {
createMockIndexOAuthIntegration,
createMockIndexOAuthNativeIntegration,
Subject,
} from './mocks';
import { createMockIndexOAuthNativeIntegration, Subject } from './mocks';
import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
import { MozServices } from '../../lib/types';
import { MONITOR_CLIENTIDS } from '../../models/integrations/client-matching';
import GleanMetrics from '../../lib/glean';
import { MOCK_CMS_INFO } from '../mocks';

Expand Down Expand Up @@ -219,29 +214,6 @@ describe('Index page', () => {
).not.toBeInTheDocument();
});

// This is wrapped so that the HTMLFormElement.submit can be mocked
// without affecting other tests.
describe('deep linking', () => {
beforeEach(() => {
HTMLFormElement.prototype.submit = jest.fn();
});
afterEach(() => {
jest.resetAllMocks();
});
it('does not render when deeplinking third party auth', () => {
renderWithLocalizationProvider(
<Subject
integration={createMockIndexOAuthIntegration({
clientId: MONITOR_CLIENTIDS[0],
})}
deeplink="appleLogin"
/>
);

thirdPartyAuthNotRendered();
});
});

describe('glean metrics', () => {
it('emits emailFirst.view on initial render', () => {
const viewSpy = jest.spyOn(GleanMetrics.emailFirst, 'view');
Expand Down
15 changes: 0 additions & 15 deletions packages/fxa-settings/src/pages/Index/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export const Index = ({
setErrorBannerMessage,
setSuccessBannerMessage,
setTooltipErrorMessage,
deeplink,
flowQueryParams,
isMobile,
useFxAStatusResult,
Expand All @@ -43,8 +42,6 @@ export const Index = ({

const emailEngageEventEmitted = useRef(false);

const isDeeplinking = !!deeplink;

useEffect(() => {
GleanMetrics.emailFirst.view();
}, []);
Expand Down Expand Up @@ -82,18 +79,6 @@ export const Index = ({
},
});

if (isDeeplinking) {
// To avoid flickering, we just render third party auth when deeplinking
return (
<ThirdPartyAuth
showSeparator={false}
viewName="deeplink"
deeplink={deeplink}
flowQueryParams={flowQueryParams}
/>
);
}

const cmsInfo = integration.getCmsInfo();
const title = cmsInfo?.EmailFirstPage?.pageTitle;
const splitLayout = cmsInfo?.EmailFirstPage?.splitLayout;
Expand Down
1 change: 0 additions & 1 deletion packages/fxa-settings/src/pages/Index/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export interface IndexProps extends LocationState {
errorBannerMessage?: string;
successBannerMessage?: string;
tooltipErrorMessage?: string;
deeplink?: string;
flowQueryParams?: QueryParams;
isMobile: boolean;
useFxAStatusResult: UseFxAStatusResult;
Expand Down
3 changes: 0 additions & 3 deletions packages/fxa-settings/src/pages/Index/mocks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,6 @@ export const Subject = ({
initialErrorBanner = '',
initialSuccessBanner = '',
initialTooltipMessage = '',
deeplink,
isMobile = false,
supportsKeysOptionalLogin = false,
}: {
Expand All @@ -114,7 +113,6 @@ export const Subject = ({
initialErrorBanner?: string;
initialSuccessBanner?: string;
initialTooltipMessage?: string;
deeplink?: string;
isMobile?: boolean;
supportsKeysOptionalLogin?: boolean;
}) => {
Expand Down Expand Up @@ -142,7 +140,6 @@ export const Subject = ({
setErrorBannerMessage,
setSuccessBannerMessage,
setTooltipErrorMessage,
deeplink,
isMobile,
useFxAStatusResult: mockUseFxAStatusResult,
}}
Expand Down
Loading
Loading