feat: Add MFA (#962)

* feat: add mfa

* chore: add i18n

* chore: minor fixes

* chore: android/ios v4.2.1

* chore: change chatwoot min version

* chore: add the support for hexa decimal backup code

Author: muhsin-k

.env.example

@@ -1,7 +1,7 @@
 EXPO_PUBLIC_CHATWOOT_WEBSITE_TOKEN=
 EXPO_PUBLIC_CHATWOOT_BASE_URL=https://app.chatwoot.com
 EXPO_PUBLIC_JUNE_SDK_KEY=
-EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=3.13.0
+EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=4.1.0
 EXPO_PUBLIC_SENTRY_DSN=
 EXPO_PUBLIC_PROJECT_ID=
 EXPO_PUBLIC_APP_SLUG=

app.config.ts

@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.2.0',
+    version: '4.2.3',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',

jest.config.js

@@ -4,4 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@reduxjs|immer)',
+  ],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.2.0",
+  "version": "4.2.3",
   "scripts": {
     "start": "expo start --dev-client",
     "start:production": "expo start --no-dev --minify",

src/components-next/index.ts

@@ -6,3 +6,4 @@ export * from './sheet-components';
 export * from './spinner';
 export * from './action-tabs';
 export * from './no-network';
+export * from './verification-code';

src/components-next/verification-code/animated-code-number.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  FlipInXDown,
+  FlipOutXDown,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type StatusType = 'inProgress' | 'correct' | 'wrong';
+
+export type AnimatedCodeNumberProps = {
+  code?: string;
+  highlighted: boolean;
+  status: SharedValue<StatusType>;
+};
+
+export const AnimatedCodeNumber: React.FC<AnimatedCodeNumberProps> = ({
+  code,
+  highlighted,
+  status,
+}) => {
+  const correctColor = 'hsl(151, 40.2%, 54.1%)'; // green-600
+  const defaultColor = 'hsl(0, 0%, 89.5%)'; // gray-300
+
+  const rBoxStyle = useAnimatedStyle(() => {
+    return {
+      // Only show green border for correct status, default border for all other states
+      borderColor: withTiming(status.value === 'correct' ? correctColor : defaultColor),
+    };
+  }, [correctColor, defaultColor]);
+
+  return (
+    <Animated.View style={[styles.container, rBoxStyle]}>
+      {code != null && (
+        <Animated.View entering={FadeIn.duration(250)} exiting={FadeOut.duration(250)}>
+          <Animated.Text
+            entering={FlipInXDown.duration(500)
+              // Go to this website and you'll see the curve I used:
+              // https://cubic-bezier.com/#0,0.75,0.5,0.9
+              // Basically, I want the animation to start slow, then accelerate at the end
+              // Do we really need to use a curve? Every detail matters :)
+              .easing(Easing.bezier(0, 0.75, 0.5, 0.9).factory())
+              .build()}
+            exiting={FlipOutXDown.duration(500)
+              // https://cubic-bezier.com/#0.6,0.1,0.4,0.8
+              // I want the animation to start fast, then decelerate at the end (opposite of the previous one)
+              .easing(Easing.bezier(0.6, 0.1, 0.4, 0.8).factory())
+              .build()}
+            style={[styles.text, { color: 'hsl(0, 0%, 39.3%)' }]}>
+            {code}
+          </Animated.Text>
+        </Animated.View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '90%',
+    width: '80%',
+    borderWidth: 2,
+    borderRadius: 12,
+    borderCurve: 'continuous',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 40,
+    fontFamily: 'Inter-500-24',
+  },
+});

src/components-next/verification-code/hooks/use-animated-shake.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+// Custom hook for creating an animated shaking effect
+const useAnimatedShake = () => {
+  // Shared value to track the horizontal translation for shaking
+  const shakeTranslateX = useSharedValue(0);
+
+  // Callback function to trigger the shake animation
+  const shake = useCallback(() => {
+    // Cancel any ongoing animations on shakeTranslateX
+    cancelAnimation(shakeTranslateX);
+
+    // Reset the translation value to 0 before starting the new animation
+    shakeTranslateX.value = 0;
+
+    // Apply a repeating animation to create a shaking effect
+    shakeTranslateX.value = withRepeat(
+      withTiming(10, {
+        duration: 120,
+        easing: Easing.bezier(0.35, 0.7, 0.5, 0.7),
+      }),
+      6, // Repeat the animation 6 times
+      true, // Infinite loop (true indicates indefinite repetition)
+    );
+  }, [shakeTranslateX]); // Dependency array to ensure proper re-rendering
+
+  // Define the animated style based on the current translation value
+  const rShakeStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: shakeTranslateX.value }],
+    };
+  }, []);
+
+  // Return the shake callback function and the animated style for external use
+  return { shake, rShakeStyle };
+};
+
+// Export the custom hook for use in other components
+export { useAnimatedShake };

src/components-next/verification-code/index.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type { AnimatedCodeNumberProps } from './animated-code-number';
+import { AnimatedCodeNumber } from './animated-code-number';
+
+export type StatusType = 'inProgress' | 'correct' | 'wrong';
+
+type VerificationCodeProps = {
+  code: string[];
+  maxLength?: number;
+  isCodeWrong: boolean;
+} & Pick<AnimatedCodeNumberProps, 'status'>;
+
+export const VerificationCode: React.FC<VerificationCodeProps> = ({
+  code,
+  maxLength = 5,
+  status,
+  isCodeWrong,
+}) => {
+  const wrongStatus = useSharedValue<StatusType>('wrong');
+
+  return (
+    <View style={styles.container}>
+      {new Array(maxLength).fill(0).map((_, index) => (
+        <View key={index} style={styles.codeContainer}>
+          <AnimatedCodeNumber
+            code={code[index]}
+            highlighted={index === code.length}
+            status={isCodeWrong ? wrongStatus : status}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+  },
+  codeContainer: {
+    aspectRatio: 0.95,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

src/i18n/en.json

@@ -50,6 +50,24 @@
     "SUB_TITLE": "Don't worry! We got your back",
     "API_SUCCESS": "Password reset link has been sent to your email address"
   },
+  "MFA": {
+    "TITLE": "Two-Factor Authentication",
+    "TABS": {
+      "AUTHENTICATOR_APP": "Authenticator App",
+      "BACKUP_CODE": "Backup Code"
+    },
+    "INSTRUCTIONS": {
+      "AUTHENTICATOR": "Enter 6-digit code from your authenticator app",
+      "BACKUP": "Enter your one of your backup code"
+    },
+    "PLACEHOLDERS": {
+      "BACKUP_CODE": "Enter backup code"
+    },
+    "BUTTONS": {
+      "VERIFY": "Verify",
+      "VERIFYING": "Verifying..."
+    }
+  },
   "CONVERSATION": {
     "HEADER": {
       "TITLE": "Conversations",

src/navigation/stack/AuthStack.tsx

@@ -4,11 +4,13 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import ConfigInstallationURL from '@/screens/auth/ConfigURLScreen';
 import Login from '@/screens/auth/LoginScreen';
 import ForgotPassword from '@/screens/auth/ForgotPassword';
+import MFAScreen from '@/screens/auth/MFAScreen';
 
 export type AuthStackParamList = {
   Login: undefined;
   ResetPassword: undefined;
   ConfigureURL: undefined;
+  MFAScreen: undefined;
 };
 
 const Stack = createNativeStackNavigator<AuthStackParamList>();
@@ -45,6 +47,17 @@ export const AuthStack = () => {
         name="ConfigureURL"
         component={ConfigInstallationURL}
       />
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          headerBackTitle: 'Back',
+          headerBackVisible: true,
+          headerShadowVisible: false,
+          title: '',
+        }}
+        name="MFAScreen"
+        component={MFAScreen}
+      />
     </Stack.Navigator>
   );
 };