Tweak 2FA enabled state (#6043)

* tweak 2fa presentation

* tweak dialog text style
This commit is contained in:
Samuel Newman
2024-11-01 00:30:42 +00:00
committed by GitHub
parent 3b68dfeb3b
commit 1b69ecb57a
3 changed files with 20 additions and 7 deletions
@@ -6,8 +6,9 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {CommonNavigatorParams} from '#/lib/routes/types' import {CommonNavigatorParams} from '#/lib/routes/types'
import {useAppPasswordsQuery} from '#/state/queries/app-passwords' import {useAppPasswordsQuery} from '#/state/queries/app-passwords'
import {useSession} from '#/state/session'
import * as SettingsList from '#/screens/Settings/components/SettingsList' import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import * as Admonition from '#/components/Admonition' import * as Admonition from '#/components/Admonition'
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash' import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key' import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key'
@@ -23,16 +24,30 @@ type Props = NativeStackScreenProps<
> >
export function PrivacyAndSecuritySettingsScreen({}: Props) { export function PrivacyAndSecuritySettingsScreen({}: Props) {
const {_} = useLingui() const {_} = useLingui()
const t = useTheme()
const {data: appPasswords} = useAppPasswordsQuery() const {data: appPasswords} = useAppPasswordsQuery()
const {currentAccount} = useSession()
return ( return (
<Layout.Screen> <Layout.Screen>
<Layout.Header title={_(msg`Privacy and Security`)} /> <Layout.Header title={_(msg`Privacy and Security`)} />
<Layout.Content> <Layout.Content>
<SettingsList.Container> <SettingsList.Container>
<SettingsList.Item> <SettingsList.Item>
<SettingsList.ItemIcon icon={VerifiedIcon} /> <SettingsList.ItemIcon
icon={VerifiedIcon}
color={
currentAccount?.emailAuthFactor
? t.palette.primary_500
: undefined
}
/>
<SettingsList.ItemText> <SettingsList.ItemText>
<Trans>Two-factor authentication (2FA)</Trans> {currentAccount?.emailAuthFactor ? (
<Trans>Email 2FA enabled</Trans>
) : (
<Trans>Two-factor authentication (2FA)</Trans>
)}
</SettingsList.ItemText> </SettingsList.ItemText>
<Email2FAToggle /> <Email2FAToggle />
</SettingsList.Item> </SettingsList.Item>
@@ -57,7 +57,7 @@ export function Email2FAToggle() {
/> />
<SettingsList.BadgeButton <SettingsList.BadgeButton
label={ label={
currentAccount?.emailAuthFactor ? _(msg`Disable`) : _(msg`Enable`) currentAccount?.emailAuthFactor ? _(msg`Change`) : _(msg`Enable`)
} }
onPress={onToggle} onPress={onToggle}
/> />
@@ -88,9 +88,7 @@ export function DisableEmail2FADialog({
style={[a.text_2xl, a.font_bold, t.atoms.text]}> style={[a.text_2xl, a.font_bold, t.atoms.text]}>
<Trans>Disable Email 2FA</Trans> <Trans>Disable Email 2FA</Trans>
</Text> </Text>
<P <P nativeID="dialog-description">
nativeID="dialog-description"
style={[a.text_sm, t.atoms.text, a.leading_snug]}>
{stage === Stages.ConfirmCode ? ( {stage === Stages.ConfirmCode ? (
<Trans> <Trans>
An email has been sent to{' '} An email has been sent to{' '}