chore(ui-react-native): SetupTOTP small fixes (#3048)

Author: ioanabrooks

packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -25,6 +25,7 @@ const {
   getConfirmingText,
   getConfirmText,
   getSetupTOTPText,
+  getSetupTOTPInstructionsText,
 } = authenticatorTextUtil;
 
 const SetupTOTP: DefaultSetupTOTPComponent = ({
@@ -67,9 +68,14 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   const secondaryButtonText = getBackToSignInText();
 
   const body = secretKey ? (
-    <Label selectable style={styles.secretKeyText}>
-      {secretKey}
-    </Label>
+    <>
+      <Label style={styles.secretKeyText}>
+        {getSetupTOTPInstructionsText()}
+      </Label>
+      <Label selectable style={styles.secretKeyText}>
+        {secretKey}
+      </Label>
+    </>
   ) : null;
 
   const buttons = useMemo(

packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -37,6 +37,7 @@ const {
   getConfirmingText,
   getConfirmText,
   getSetupTOTPText,
+  getSetupTOTPInstructionsText,
 } = authenticatorTextUtil;
 
 const SECRET_KEY = 'secretKey';
@@ -96,13 +97,14 @@ describe('SetupTOTP', () => {
   });
 
   it('handles secret code generation as expected', async () => {
-    const { queryByText, rerender } = render(
+    const { getByText, queryByText, rerender } = render(
       <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
     );
     await waitFor(async () => {
       expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
+      expect(getByText(getSetupTOTPInstructionsText())).toBeDefined();
       expect(queryByText(SECRET_KEY)).toBeDefined();
-      expect(queryByText(SECRET_KEY)?.props.selectable).toBe(true);
+      expect(getByText(SECRET_KEY).props.selectable).toBe(true);
       expect(errorSpy).not.toHaveBeenCalled();
 
       rerender(

packages/react-native/src/Authenticator/Defaults/SetupTOTP/styles.ts

@@ -5,5 +5,6 @@ export interface SetupTOTPStyle {
 }
 
 export const styles: SetupTOTPStyle = StyleSheet.create({
-  secretKeyText: { flexWrap: 'wrap', paddingVertical: 4 },
+  // TODO: replace with tokens
+  secretKeyText: { flexWrap: 'wrap', paddingVertical: 4, marginHorizontal: 8 },
 });

packages/ui/src/helpers/authenticator/textUtil.ts

@@ -133,6 +133,11 @@ export const authenticatorTextUtil = {
 
   /** SetupTOTP */
   getSetupTOTPText: () => translate(DefaultTexts.SETUP_TOTP),
+  // TODO: add defaultText for below
+  getSetupTOTPInstructionsText: () =>
+    translate(
+      'Copy and paste the secret key below into an authenticator app and then enter the code in the text field below.'
+    ),
   // TODO: add defaultText for "COPIED"
   getCopiedText: () => translate('COPIED'),