this repo has no description
1import {type AppBskyNotificationDeclaration} from '@atproto/api'
2import {msg} from '@lingui/core/macro'
3import {useLingui} from '@lingui/react'
4import {Trans} from '@lingui/react/macro'
5import {type NativeStackScreenProps} from '@react-navigation/native-stack'
6
7import {type CommonNavigatorParams} from '#/lib/routes/types'
8import {useNotificationDeclarationQuery} from '#/state/queries/activity-subscriptions'
9import {useAppPasswordsQuery} from '#/state/queries/app-passwords'
10import {useSession} from '#/state/session'
11import * as SettingsList from '#/screens/Settings/components/SettingsList'
12import {atoms as a, useTheme} from '#/alf'
13import * as Admonition from '#/components/Admonition'
14import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
15import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
16import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key'
17import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
18import * as Layout from '#/components/Layout'
19import {InlineLinkText} from '#/components/Link'
20import {Email2FAToggle} from './components/Email2FAToggle'
21import {PwiOptOut} from './components/PwiOptOut'
22import {ItemTextWithSubtitle} from './NotificationSettings/components/ItemTextWithSubtitle'
23
24type Props = NativeStackScreenProps<
25 CommonNavigatorParams,
26 'PrivacyAndSecuritySettings'
27>
28export function PrivacyAndSecuritySettingsScreen({}: Props) {
29 const {_} = useLingui()
30 const t = useTheme()
31 const {data: appPasswords} = useAppPasswordsQuery()
32 const {currentAccount} = useSession()
33 const {
34 data: notificationDeclaration,
35 isPending,
36 isError,
37 } = useNotificationDeclarationQuery()
38
39 return (
40 <Layout.Screen>
41 <Layout.Header.Outer>
42 <Layout.Header.BackButton />
43 <Layout.Header.Content>
44 <Layout.Header.TitleText>
45 <Trans>Privacy and Security</Trans>
46 </Layout.Header.TitleText>
47 </Layout.Header.Content>
48 <Layout.Header.Slot />
49 </Layout.Header.Outer>
50 <Layout.Content>
51 <SettingsList.Container>
52 <SettingsList.Item>
53 <SettingsList.ItemIcon
54 icon={ShieldIcon}
55 color={
56 currentAccount?.emailAuthFactor
57 ? t.palette.primary_500
58 : undefined
59 }
60 />
61 <SettingsList.ItemText>
62 {currentAccount?.emailAuthFactor ? (
63 <Trans>Email 2FA enabled</Trans>
64 ) : (
65 <Trans>Two-factor authentication (2FA)</Trans>
66 )}
67 </SettingsList.ItemText>
68 <Email2FAToggle />
69 </SettingsList.Item>
70 <SettingsList.LinkItem
71 to="/settings/app-passwords"
72 label={_(msg`App passwords`)}>
73 <SettingsList.ItemIcon icon={KeyIcon} />
74 <SettingsList.ItemText>
75 <Trans>App passwords</Trans>
76 </SettingsList.ItemText>
77 {appPasswords && appPasswords.length > 0 && (
78 <SettingsList.BadgeText>
79 {appPasswords.length}
80 </SettingsList.BadgeText>
81 )}
82 </SettingsList.LinkItem>
83 <SettingsList.LinkItem
84 label={_(
85 msg`Settings for allowing others to be notified of your posts`,
86 )}
87 to={{screen: 'ActivityPrivacySettings'}}
88 contentContainerStyle={[a.align_start]}>
89 <SettingsList.ItemIcon icon={BellRingingIcon} />
90 <ItemTextWithSubtitle
91 titleText={
92 <Trans>Allow others to be notified of your posts</Trans>
93 }
94 subtitleText={
95 <NotificationDeclaration
96 data={notificationDeclaration}
97 isError={isError}
98 />
99 }
100 showSkeleton={isPending}
101 />
102 </SettingsList.LinkItem>
103 <SettingsList.Divider />
104 <SettingsList.Group>
105 <SettingsList.ItemIcon icon={EyeSlashIcon} />
106 <SettingsList.ItemText>
107 <Trans>Logged-out visibility</Trans>
108 </SettingsList.ItemText>
109 <PwiOptOut />
110 </SettingsList.Group>
111 <SettingsList.Item>
112 <Admonition.Outer type="tip" style={[a.flex_1]}>
113 <Admonition.Row>
114 <Admonition.Icon />
115 <Admonition.Content>
116 <Admonition.Text>
117 <Trans>
118 Note: Bluesky is an open and public network. This setting
119 only limits the visibility of your content on the Bluesky
120 app and website, and other apps may not respect this
121 setting. Your content may still be shown to logged-out
122 users by other apps and websites.
123 </Trans>
124 </Admonition.Text>
125 <Admonition.Text>
126 <InlineLinkText
127 label={_(
128 msg`Learn more about what is public on Bluesky.`,
129 )}
130 to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
131 <Trans>Learn more about what is public on Bluesky.</Trans>
132 </InlineLinkText>
133 </Admonition.Text>
134 </Admonition.Content>
135 </Admonition.Row>
136 </Admonition.Outer>
137 </SettingsList.Item>
138 </SettingsList.Container>
139 </Layout.Content>
140 </Layout.Screen>
141 )
142}
143
144function NotificationDeclaration({
145 data,
146 isError,
147}: {
148 data?: {
149 value: AppBskyNotificationDeclaration.Record
150 }
151 isError?: boolean
152}) {
153 if (isError) {
154 return <Trans>Error loading preference</Trans>
155 }
156 switch (data?.value?.allowSubscriptions) {
157 case 'mutuals':
158 return <Trans>Only followers who I follow</Trans>
159 case 'none':
160 return <Trans context="enable for">No one</Trans>
161 case 'followers':
162 default:
163 return <Trans>Anyone who follows me</Trans>
164 }
165}