-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
…to component/4080-badge
- Loading branch information
Showing
64 changed files
with
1,698 additions
and
522 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export interface SecuritySettingsState { | ||
allowLoginWithRememberMe: boolean; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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({}); | ||
}); | ||
}); |
96 changes: 96 additions & 0 deletions
96
app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
10 changes: 10 additions & 0 deletions
10
app/components/UI/LoginOptionsSwitch/__snapshots__/LoginOptionsSwitch.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
/> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line import/prefer-default-export | ||
export { default as LoginOptionsSwitch } from './LoginOptionsSwitch'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line import/prefer-default-export | ||
export { default as SecurityOptionToggle } from './SecurityOptionToggle'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.