Hide remember me

app/actions/security/index.ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+import type { Action } from 'redux';
+
+export enum ActionType {
+  SET_ALLOW_LOGIN_WITH_REMEMBER_ME = 'SET_ALLOW_LOGIN_WITH_REMEMBER_ME',
+}
+
+export interface AllowLoginWithRememberMeUpdated
+  extends Action<ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME> {
+  enabled: boolean;
+}
+
+export type Action = AllowLoginWithRememberMeUpdated;
+
+export const setAllowLoginWithRememberMe = (
+  enabled: boolean,
+): AllowLoginWithRememberMeUpdated => ({
+  type: ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME,
+  enabled,
+});

app/actions/security/state.ts

@@ -0,0 +1,3 @@
+export interface SecuritySettingsState {
+  allowLoginWithRememberMe: boolean;
+}

app/components/Nav/App/index.js

@@ -54,6 +54,7 @@ import ModalConfirmation from '../../../component-library/components/Modals/Moda
 import Toast, {
   ToastContext,
 } from '../../../component-library/components/Toast';
+import { TurnOffRememberMeModal } from '../../../components/UI/TurnOffRememberMeModal';
 
 const Stack = createStackNavigator();
 /**
@@ -351,6 +352,10 @@ const App = ({ userLoggedIn }) => {
         component={ModalConfirmation}
       />
       <Stack.Screen name={Routes.MODAL.WHATS_NEW} component={WhatsNewModal} />
+      <Stack.Screen
+        name={Routes.MODAL.TURN_OFF_REMEMBER_ME}
+        component={TurnOffRememberMeModal}
+      />
     </Stack.Navigator>
   );
 

app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import LoginOptionsSwitch from './LoginOptionsSwitch';
+import { BIOMETRY_TYPE } from 'react-native-keychain';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+describe('LoginWithBiometricsSwitch', () => {
+  const mockStore = configureMockStore();
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const handleUpdate = (_biometricsEnabled: boolean) => {};
+  it('should render correctly', () => {
+    const store = mockStore({});
+    const wrapper = shallow(
+      <Provider store={store}>
+        <LoginOptionsSwitch
+          shouldRenderBiometricOption={BIOMETRY_TYPE.FACE}
+          biometryChoiceState
+          onUpdateBiometryChoice={handleUpdate}
+          onUpdateRememberMe={handleUpdate}
+        />
+      </Provider>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should return empty object when shouldRenderBiometricOption is undefined and allowLoginWithRememberMe is false in settings', () => {
+    const store = mockStore({});
+    const wrapper = shallow(
+      <Provider store={store}>
+        <LoginOptionsSwitch
+          onUpdateBiometryChoice={handleUpdate}
+          onUpdateRememberMe={handleUpdate}
+          biometryChoiceState
+        />
+      </Provider>,
+    );
+    expect(wrapper).toMatchObject({});
+  });
+});

app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback, useState } from 'react';
+import { View, Switch, Text } from 'react-native';
+import { mockTheme, useAppThemeFromContext } from '../../../util/theme';
+import { strings } from '../../../../locales/i18n';
+import { BIOMETRY_TYPE } from 'react-native-keychain';
+import { createStyles } from './styles';
+import {
+  LOGIN_WITH_BIOMETRICS_SWITCH,
+  LOGIN_WITH_REMEMBER_ME_SWITCH,
+} from '../../../constants/test-ids';
+import { useSelector } from 'react-redux';
+
+interface Props {
+  shouldRenderBiometricOption: BIOMETRY_TYPE | null;
+  biometryChoiceState: boolean;
+  onUpdateBiometryChoice: (biometryEnabled: boolean) => void;
+  onUpdateRememberMe: (rememberMeEnabled: boolean) => void;
+}
+
+/**
+ * View that renders the toggle for login options
+ * The highest priority login option is biometrics and will always get rendered over other options IF it is enabled.
+ * If the user has enabled login with remember me in settings and has turned off biometrics then remember me will be the option
+ * If both of these features are disabled then no options will be rendered
+ */
+const LoginOptionsSwitch = ({
+  shouldRenderBiometricOption,
+  biometryChoiceState,
+  onUpdateBiometryChoice,
+  onUpdateRememberMe,
+}: Props) => {
+  const { colors } = useAppThemeFromContext() || mockTheme;
+  const styles = createStyles(colors);
+  const allowLoginWithRememberMe = useSelector(
+    (state: any) => state.security.allowLoginWithRememberMe,
+  );
+  const [rememberMeEnabled, setRememberMeEnabled] = useState<boolean>(false);
+  const onBiometryValueChanged = useCallback(
+    async (newBiometryChoice: boolean) => {
+      onUpdateBiometryChoice(newBiometryChoice);
+    },
+    [onUpdateBiometryChoice],
+  );
+
+  const onRememberMeValueChanged = useCallback(async () => {
+    onUpdateRememberMe(!rememberMeEnabled);
+    setRememberMeEnabled(!rememberMeEnabled);
+  }, [onUpdateRememberMe, rememberMeEnabled]);
+
+  // should only render remember me option if biometrics are disabled and rememberOptionMeEnabled is enabled in security settings
+  // if both are disabled then this component returns null
+  if (shouldRenderBiometricOption !== null) {
+    return (
+      <View style={styles.container} testID={LOGIN_WITH_BIOMETRICS_SWITCH}>
+        <Text style={styles.label}>
+          {strings(
+            `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
+          )}
+        </Text>
+        <Switch
+          onValueChange={onBiometryValueChanged}
+          value={biometryChoiceState}
+          style={styles.switch}
+          trackColor={{
+            true: colors.primary.default,
+            false: colors.border.muted,
+          }}
+          thumbColor={colors.white}
+          ios_backgroundColor={colors.border.muted}
+        />
+      </View>
+    );
+  } else if (shouldRenderBiometricOption === null && allowLoginWithRememberMe) {
+    return (
+      <View style={styles.container} testID={LOGIN_WITH_REMEMBER_ME_SWITCH}>
+        <Text style={styles.label}>
+          {strings(`choose_password.remember_me`)}
+        </Text>
+        <Switch
+          onValueChange={onRememberMeValueChanged}
+          value={rememberMeEnabled}
+          style={styles.switch}
+          trackColor={{
+            true: colors.primary.default,
+            false: colors.border.muted,
+          }}
+          thumbColor={colors.white}
+          ios_backgroundColor={colors.border.muted}
+        />
+      </View>
+    );
+  }
+  return null;
+};
+
+export default React.memo(LoginOptionsSwitch);

app/components/UI/LoginOptionsSwitch/__snapshots__/LoginOptionsSwitch.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoginWithBiometricsSwitch should render correctly 1`] = `
+<Component
+  biometryChoiceState={true}
+  onUpdateBiometryChoice={[Function]}
+  onUpdateRememberMe={[Function]}
+  shouldRenderBiometricOption="Face"
+/>
+`;

app/components/UI/LoginOptionsSwitch/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LoginOptionsSwitch } from './LoginOptionsSwitch';

app/components/UI/LoginOptionsSwitch/styles.ts

@@ -0,0 +1,27 @@
+/* eslint-disable import/prefer-default-export */
+import { fontStyles } from '../../../styles/common';
+import { StyleSheet } from 'react-native';
+
+export const createStyles = (colors: any) =>
+  StyleSheet.create({
+    screen: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    container: {
+      position: 'relative',
+      marginTop: 20,
+      marginBottom: 30,
+    },
+    label: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text.default,
+      ...fontStyles.normal,
+    },
+    switch: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+    },
+  });

app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { Switch, Text, View } from 'react-native';
+import { mockTheme, useAppThemeFromContext } from '../../../util/theme';
+import { createStyles } from './styles';
+import { colors as importedColors } from '../../../styles/common';
+
+interface SecurityOptionsToggleProps {
+  title: string;
+  description?: string;
+  value: boolean;
+  onOptionUpdated: (enabled: boolean) => void;
+  testId?: string;
+  disabled?: boolean;
+}
+
+/**
+ * View that renders the toggle for security options
+ * This component assumes that the parent will manage the state of the toggle. This is because most of the state is global.
+ */
+const SecurityOptionToggle = ({
+  title,
+  description,
+  value,
+  testId,
+  onOptionUpdated,
+  disabled,
+}: SecurityOptionsToggleProps) => {
+  const { colors } = useAppThemeFromContext() || mockTheme;
+  const styles = createStyles(colors);
+
+  const handleOnValueChange = useCallback(
+    (newValue: boolean) => {
+      onOptionUpdated(newValue);
+    },
+    [onOptionUpdated],
+  );
+  return (
+    <View style={styles.setting} testID={testId}>
+      <Text style={styles.title}>{title}</Text>
+      {description ? <Text style={styles.desc}>{description}</Text> : null}
+      <View style={styles.switchElement}>
+        <Switch
+          value={value}
+          onValueChange={(newValue: boolean) => handleOnValueChange(newValue)}
+          trackColor={{
+            true: colors.primary.default,
+            false: colors.border.muted,
+          }}
+          thumbColor={importedColors.white}
+          style={styles.switch}
+          ios_backgroundColor={colors.border.muted}
+          disabled={disabled}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(SecurityOptionToggle);

app/components/UI/SecurityOptionToggle/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SecurityOptionToggle } from './SecurityOptionToggle';

app/components/UI/SecurityOptionToggle/styles.ts

@@ -0,0 +1,32 @@
+/* eslint-disable import/prefer-default-export */
+import { fontStyles } from '../../../styles/common';
+import { StyleSheet } from 'react-native';
+
+export const createStyles = (colors: any) =>
+  StyleSheet.create({
+    title: {
+      ...fontStyles.normal,
+      color: colors.text.default,
+      fontSize: 20,
+      lineHeight: 20,
+      paddingTop: 4,
+      marginTop: -4,
+    },
+    desc: {
+      ...fontStyles.normal,
+      color: colors.text.alternative,
+      fontSize: 14,
+      lineHeight: 20,
+      marginTop: 12,
+    },
+    switchElement: {
+      marginTop: 18,
+      alignSelf: 'flex-start',
+    },
+    setting: {
+      marginTop: 50,
+    },
+    switch: {
+      alignSelf: 'flex-start',
+    },
+  });