capture additional prehog events (#1466)

web/packages/design/src/StepSlider/StepSlider.tsx

@@ -111,6 +111,7 @@ export function StepSlider<T>(props: Props<T>) {
     return (
       <View
         key={step}
+        currFlow={currFlow}
         refCallback={requirePreMount ? setHeightOnPreMount : null}
         next={() => {
           preMountState.current.step = step + 1;

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 <RegisterSuccess redirect={redirect} resetMode={resetMode} />;
+    return (
+      <RegisterSuccess
+        redirect={redirect}
+        resetMode={resetMode}
+        username={resetToken.user}
+      />
+    );
   }
 
   if (recoveryCodes) {
@@ -130,4 +136,5 @@ export function NewCredentials(props: State & Props) {
 
 export type Props = State & {
   resetMode?: boolean;
+  currFlow?: LoginFlow;
 };

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;
   };

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;
     }

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 (
     <Card
       width="540px"
@@ -52,7 +68,7 @@ export function RegisterSuccess({
         <br />
         Proceed to access your account.
       </Text>
-      <ButtonPrimary width="100%" size="large" onClick={redirect}>
+      <ButtonPrimary width="100%" size="large" onClick={handleRedirect}>
         Go to Dashboard
       </ButtonPrimary>
     </Card>

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<ResetToken>();
@@ -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);
     }

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({
               </Text>
               <Flex flexDirection="column" className="no-print" ml={2}>
                 <MiniActionButton onClick={onCopyClick}>COPY</MiniActionButton>
-                <MiniActionButton onClick={window.print} mt={2}>
+                <MiniActionButton onClick={onPrintClick} mt={2}>
                   PRINT
                 </MiniActionButton>
               </Flex>

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',
 }

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 = {