lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4import {type NativeStackScreenProps} from '@react-navigation/native-stack'
5
6import {type CommonNavigatorParams} from '#/lib/routes/types'
7import {useAppPasswordsQuery} from '#/state/queries/app-passwords'
8import {useSession} from '#/state/session'
9import * as SettingsList from '#/screens/Settings/components/SettingsList'
10import {atoms as a, useTheme} from '#/alf'
11import * as Admonition from '#/components/Admonition'
12import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
13import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key'
14import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
15import * as Layout from '#/components/Layout'
16import {InlineLinkText} from '#/components/Link'
17import {Email2FAToggle} from './components/Email2FAToggle'
18import {PwiOptOut} from './components/PwiOptOut'
19
20type Props = NativeStackScreenProps<
21 CommonNavigatorParams,
22 'PrivacyAndSecuritySettings'
23>
24export function PrivacyAndSecuritySettingsScreen({}: Props) {
25 const {_} = useLingui()
26 const t = useTheme()
27 const {data: appPasswords} = useAppPasswordsQuery()
28 const {currentAccount} = useSession()
29
30 return (
31 <Layout.Screen>
32 <Layout.Header.Outer>
33 <Layout.Header.BackButton />
34 <Layout.Header.Content>
35 <Layout.Header.TitleText>
36 <Trans>Privacy and Security</Trans>
37 </Layout.Header.TitleText>
38 </Layout.Header.Content>
39 <Layout.Header.Slot />
40 </Layout.Header.Outer>
41 <Layout.Content>
42 <SettingsList.Container>
43 <SettingsList.Item>
44 <SettingsList.ItemIcon
45 icon={ShieldIcon}
46 color={
47 currentAccount?.emailAuthFactor
48 ? t.palette.primary_500
49 : undefined
50 }
51 />
52 <SettingsList.ItemText>
53 {currentAccount?.emailAuthFactor ? (
54 <Trans>Email 2FA enabled</Trans>
55 ) : (
56 <Trans>Two-factor authentication (2FA)</Trans>
57 )}
58 </SettingsList.ItemText>
59 <Email2FAToggle />
60 </SettingsList.Item>
61 <SettingsList.LinkItem
62 to="/settings/app-passwords"
63 label={_(msg`App passwords`)}>
64 <SettingsList.ItemIcon icon={KeyIcon} />
65 <SettingsList.ItemText>
66 <Trans>App passwords</Trans>
67 </SettingsList.ItemText>
68 {appPasswords && appPasswords.length > 0 && (
69 <SettingsList.BadgeText>
70 {appPasswords.length}
71 </SettingsList.BadgeText>
72 )}
73 </SettingsList.LinkItem>
74 <SettingsList.Divider />
75 <SettingsList.Group>
76 <SettingsList.ItemIcon icon={EyeSlashIcon} />
77 <SettingsList.ItemText>
78 <Trans>Logged-out visibility</Trans>
79 </SettingsList.ItemText>
80 <PwiOptOut />
81 </SettingsList.Group>
82 <SettingsList.Item>
83 <Admonition.Outer type="tip" style={[a.flex_1]}>
84 <Admonition.Row>
85 <Admonition.Icon />
86 <View style={[a.flex_1, a.gap_sm]}>
87 <Admonition.Text>
88 <Trans>
89 Note: Bluesky is an open and public network. This setting
90 only limits the visibility of your content on the Bluesky
91 app and website, and other apps may not respect this
92 setting. Your content may still be shown to logged-out
93 users by other apps and websites.
94 </Trans>
95 </Admonition.Text>
96 <Admonition.Text>
97 <InlineLinkText
98 label={_(
99 msg`Learn more about what is public on Bluesky.`,
100 )}
101 to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
102 <Trans>Learn more about what is public on Bluesky.</Trans>
103 </InlineLinkText>
104 </Admonition.Text>
105 </View>
106 </Admonition.Row>
107 </Admonition.Outer>
108 </SettingsList.Item>
109 </SettingsList.Container>
110 </Layout.Content>
111 </Layout.Screen>
112 )
113}