From 9b23ff6aaff68974af9772d9bcf4c3f117b95516 Mon Sep 17 00:00:00 2001 From: Michelle Bergquist <11967646+michellescripts@users.noreply.github.com> Date: Wed, 11 Jan 2023 10:48:19 -0700 Subject: [PATCH] capture additional prehog events (#1466) --- .../design/src/StepSlider/StepSlider.tsx | 1 + .../Welcome/NewCredentials/NewCredentials.tsx | 11 ++++++-- .../Welcome/NewCredentials/NewMfaDevice.tsx | 4 +++ .../Welcome/NewCredentials/NewPassword.tsx | 7 ----- .../src/Welcome/NewCredentials/Success.tsx | 20 ++++++++++++-- web/packages/teleport/src/Welcome/useToken.ts | 8 +++++- .../RecoveryCodes/RecoveryCodes.tsx | 27 +++++++++++++------ .../teleport/src/services/userEvent/types.ts | 4 ++- .../src/services/userEvent/userEvent.ts | 2 ++ 9 files changed, 63 insertions(+), 21 deletions(-) diff --git a/web/packages/design/src/StepSlider/StepSlider.tsx b/web/packages/design/src/StepSlider/StepSlider.tsx index 9966058dfb5..700f4387467 100644 --- a/web/packages/design/src/StepSlider/StepSlider.tsx +++ b/web/packages/design/src/StepSlider/StepSlider.tsx @@ -111,6 +111,7 @@ export function StepSlider(props: Props) { return ( { preMountState.current.step = step + 1; diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx index 0859d06735f..d648fdc9ada 100644 --- a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx +++ b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx @@ -18,7 +18,7 @@ import React, { useState } from 'react'; import { Card } from 'design'; import { PrimaryAuthType } from 'shared/services'; -import { StepSlider, NewFlow, StepComponentProps } from 'design/StepSlider'; +import { NewFlow, StepComponentProps, StepSlider } from 'design/StepSlider'; import RecoveryCodes from 'teleport/components/RecoveryCodes'; import { PrivateKeyLoginDisabledCard } from 'teleport/components/PrivateKeyPolicy'; @@ -76,7 +76,13 @@ export function NewCredentials(props: State & Props) { } if (success) { - return ; + return ( + + ); } if (recoveryCodes) { @@ -130,4 +136,5 @@ export function NewCredentials(props: State & Props) { export type Props = State & { resetMode?: boolean; + currFlow?: LoginFlow; }; diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx index 1ae71542888..aa9802fb0f3 100644 --- a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx +++ b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx @@ -47,6 +47,7 @@ export function NewMfaDevice(props: Props) { prev, refCallback, hasTransitionEnded, + currFlow, } = props; const [otp, setOtp] = useState(''); const mfaOptions = createMfaOptions({ @@ -71,6 +72,8 @@ export function NewMfaDevice(props: Props) { userEventService.capturePreUserEvent({ event: CaptureEvent.PreUserOnboardRegisterChallengeSubmitEvent, username: resetToken.user, + mfaType: mfaType.value, + loginFlow: currFlow, }); if (!validator.validate()) { @@ -270,4 +273,5 @@ type Props = CredentialsProps & SliderProps & { password: string; updatePassword(pwd: string): void; + currFlow?: string; }; diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx index 9b2c304a2cd..a335a34ec6d 100644 --- a/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx +++ b/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx @@ -25,8 +25,6 @@ import { } from 'shared/components/Validation/rules'; import { useRefAutoFocus } from 'shared/hooks'; -import { CaptureEvent, userEventService } from 'teleport/services/userEvent'; - import { Props as CredentialsProps, SliderProps } from './NewCredentials'; export function NewPassword(props: Props) { @@ -53,11 +51,6 @@ export function NewPassword(props: Props) { ) { e.preventDefault(); // prevent form submit default - userEventService.capturePreUserEvent({ - event: CaptureEvent.PreUserOnboardSetCredentialSubmitEvent, - username: resetToken.user, - }); - if (!validator.validate()) { return; } diff --git a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx index 40580e2555c..1e383798b37 100644 --- a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx +++ b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx @@ -15,18 +15,34 @@ */ import React from 'react'; -import { Card, Text, ButtonPrimary, Flex, Image } from 'design'; +import { ButtonPrimary, Card, Flex, Image, Text } from 'design'; + +import { CaptureEvent, userEventService } from 'teleport/services/userEvent'; import shieldCheck from './shield-check.png'; export function RegisterSuccess({ redirect, resetMode = false, + username = '', }: { redirect(): void; resetMode: boolean; + username?: string; }) { const actionTxt = resetMode ? 'reset' : 'registration'; + + const handleRedirect = () => { + if (username) { + userEventService.capturePreUserEvent({ + event: CaptureEvent.PreUserCompleteGoToDashboardClickEvent, + username: username, + }); + } + + redirect(); + }; + return ( Proceed to access your account. - + Go to Dashboard diff --git a/web/packages/teleport/src/Welcome/useToken.ts b/web/packages/teleport/src/Welcome/useToken.ts index f4162c838b8..b3e30406c95 100644 --- a/web/packages/teleport/src/Welcome/useToken.ts +++ b/web/packages/teleport/src/Welcome/useToken.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useState, useEffect } from 'react'; +import { useEffect, useState } from 'react'; import useAttempt from 'shared/hooks/useAttemptNext'; import cfg from 'teleport/config'; @@ -24,6 +24,7 @@ import auth, { RecoveryCodes, ResetToken, } from 'teleport/services/auth'; +import { CaptureEvent, userEventService } from 'teleport/services/userEvent'; export default function useToken(tokenId: string) { const [resetToken, setResetToken] = useState(); @@ -44,6 +45,11 @@ export default function useToken(tokenId: string) { }, []); function handleResponse(res: ChangedUserAuthn) { + userEventService.capturePreUserEvent({ + event: CaptureEvent.PreUserOnboardSetCredentialSubmitEvent, + username: resetToken.user, + }); + if (res.privateKeyPolicyEnabled) { setPrivateKeyPolicyEnabled(true); } diff --git a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx index bd74d68ab00..55659f03f8c 100644 --- a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx +++ b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx @@ -32,6 +32,15 @@ export default function RecoveryCodesDialog({ }: Props) { const codesRef = useRef(); + const captureRecoveryCodeEvent = (event: CaptureEvent) => { + if (username) { + userEventService.capturePreUserEvent({ + event: event, + username: username, + }); + } + }; + const onCopyClick = () => { copyToClipboard( `${recoveryCodes?.codes.join('\n')} \n\nCreated: ${ @@ -40,16 +49,18 @@ export default function RecoveryCodesDialog({ ).then(() => { selectElementContent(codesRef.current); }); + captureRecoveryCodeEvent(CaptureEvent.PreUserRecoveryCodesCopyClickEvent); + }; + + const onPrintClick = () => { + window.print(); + captureRecoveryCodeEvent(CaptureEvent.PreUserRecoveryCodesPrintClickEvent); }; const handleContinue = () => { - if (username) { - userEventService.capturePreUserEvent({ - event: CaptureEvent.PreUserRecoveryCodesContinueClickEvent, - username: username, - }); - } - + captureRecoveryCodeEvent( + CaptureEvent.PreUserRecoveryCodesContinueClickEvent + ); onContinue(); }; @@ -114,7 +125,7 @@ export default function RecoveryCodesDialog({ COPY - + PRINT diff --git a/web/packages/teleport/src/services/userEvent/types.ts b/web/packages/teleport/src/services/userEvent/types.ts index e167aa04e9c..427959909f7 100644 --- a/web/packages/teleport/src/services/userEvent/types.ts +++ b/web/packages/teleport/src/services/userEvent/types.ts @@ -8,9 +8,11 @@ export enum CaptureEvent { // these events are unauthenticated, // and require username in the request - PreUserOnboardGetStartedClickEvent = 'tp.ui.onboard.getStarted.click', // not yet implemented PreUserOnboardSetCredentialSubmitEvent = 'tp.ui.onboard.setCredential.submit', PreUserOnboardRegisterChallengeSubmitEvent = 'tp.ui.onboard.registerChallenge.submit', + PreUserCompleteGoToDashboardClickEvent = 'tp.ui.onboard.completeGoToDashboard.click', PreUserRecoveryCodesContinueClickEvent = 'tp.ui.recoveryCodesContinue.click', + PreUserRecoveryCodesCopyClickEvent = 'tp.ui.recoveryCodesCopy.click', + PreUserRecoveryCodesPrintClickEvent = 'tp.ui.recoveryCodesPrint.click', } diff --git a/web/packages/teleport/src/services/userEvent/userEvent.ts b/web/packages/teleport/src/services/userEvent/userEvent.ts index 9554f1b465b..363bc1da151 100644 --- a/web/packages/teleport/src/services/userEvent/userEvent.ts +++ b/web/packages/teleport/src/services/userEvent/userEvent.ts @@ -10,6 +10,8 @@ export type UserEvent = { export type PreUserEvent = UserEvent & { username: string; + mfaType?: string; + loginFlow?: string; }; export const userEventService = {