acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[🙅] Add status to session state (#4269)

Browse Source 
* Add status to session state

* [🙅] Add new deactivated screen (#4270)

* Add new deactivated screen

* Update copy, handle logout

* Remove icons, adjust padding
This commit is contained in:
Eric Bailey
2024-05-31 13:49:33 -05:00
committed by GitHub
parent 0bcc08f920
commit 80a20993bd
6 changed files with 213 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/statsig/events.ts
+1 -1
View File
@@ -13,7 +13,7 @@ export type LogEvents = {
withPassword: boolean
}
'account:loggedOut': {
logContext: 'SwitchAccount' | 'Settings' | 'SignupQueued'
logContext: 'SwitchAccount' | 'Settings' | 'SignupQueued' | 'Deactivated'
}
'notifications:openApp': {}
'notifications:request': {
src/screens/Deactivated.tsx
+174
View File
@@ -0,0 +1,174 @@
import React from 'react'
import {View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native'
import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
import {isWeb} from '#/platform/detection'
import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
import {useSetMinimalShellMode} from '#/state/shell'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {ScrollView} from '#/view/com/util/Views'
import {Logo} from '#/view/icons/Logo'
import {atoms as a, useTheme} from '#/alf'
import {AccountList} from '#/components/AccountList'
import {Button, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {Text} from '#/components/Typography'
const COL_WIDTH = 400
export function Deactivated() {
const {_} = useLingui()
const t = useTheme()
const insets = useSafeAreaInsets()
const {currentAccount, accounts} = useSession()
const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
const {setShowLoggedOut} = useLoggedOutViewControls()
const hasOtherAccounts = accounts.length > 1
const setMinimalShellMode = useSetMinimalShellMode()
const {logout} = useSessionApi()
useFocusEffect(
React.useCallback(() => {
setMinimalShellMode(true)
}, [setMinimalShellMode]),
)
const onSelectAccount = React.useCallback(
(account: SessionAccount) => {
if (account.did !== currentAccount?.did) {
onPressSwitchAccount(account, 'SwitchAccount')
}
},
[currentAccount, onPressSwitchAccount],
)
const onPressAddAccount = React.useCallback(() => {
setShowLoggedOut(true)
}, [setShowLoggedOut])
const onPressLogout = React.useCallback(() => {
if (isWeb) {
// We're switching accounts, which remounts the entire app.
// On mobile, this gets us Home, but on the web we also need reset the URL.
// We can't change the URL via a navigate() call because the navigator
// itself is about to unmount, and it calls pushState() too late.
// So we change the URL ourselves. The navigator will pick it up on remount.
history.pushState(null, '', '/')
}
logout('Deactivated')
}, [logout])
return (
<View style={[a.h_full_vh, a.flex_1, t.atoms.bg]}>
<ScrollView
style={[a.h_full, a.w_full]}
contentContainerStyle={{borderWidth: 0}}>
<View
style={[
a.px_2xl,
{
paddingTop: isWeb ? 64 : insets.top,
paddingBottom: isWeb ? 64 : insets.bottom,
},
]}>
<View style={[a.flex_row, a.justify_center]}>
<View style={[a.w_full, {maxWidth: COL_WIDTH}]}>
<View
style={[a.w_full, a.justify_center, a.align_center, a.pb_5xl]}>
<Logo width={40} />
</View>
<View style={[a.gap_xs, a.pb_3xl]}>
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
<Trans>Welcome back!</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug]}>
<Trans>
You previously deactivated @{currentAccount?.handle}.
</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug, a.pb_md]}>
<Trans>
You can reactivate your account to continue logging in. Your
profile and posts will be visible to other users.
</Trans>
</Text>
<View style={[a.gap_sm]}>
<Button
label={_(msg`Reactivate your account`)}
size="medium"
variant="solid"
color="primary"
onPress={() => setShowLoggedOut(true)}>
<ButtonText>
<Trans>Yes, reactivate my account</Trans>
</ButtonText>
</Button>
<Button
label={_(msg`Cancel reactivation and log out`)}
size="medium"
variant="solid"
color="secondary"
onPress={onPressLogout}>
<ButtonText>
<Trans>Cancel</Trans>
</ButtonText>
</Button>
</View>
</View>
<View style={[a.pb_3xl]}>
<Divider />
</View>
{hasOtherAccounts ? (
<>
<Text
style={[
t.atoms.text_contrast_medium,
a.pb_md,
a.leading_snug,
]}>
<Trans>Or, log into one of your other accounts.</Trans>
</Text>
<AccountList
onSelectAccount={onSelectAccount}
onSelectOther={onPressAddAccount}
otherLabel={_(msg`Add account`)}
pendingDid={pendingDid}
/>
</>
) : (
<>
<Text
style={[
t.atoms.text_contrast_medium,
a.pb_md,
a.leading_snug,
]}>
<Trans>Or, continue with another account.</Trans>
</Text>
<Button
label={_(msg`Log in or sign up`)}
size="medium"
variant="solid"
color="secondary"
onPress={() => setShowLoggedOut(true)}>
<ButtonText>
<Trans>Log in or sign up</Trans>
</ButtonText>
</Button>
</>
)}
</View>
</View>
</View>
</ScrollView>
</View>
)
}
src/state/persisted/schema.ts
+3
View File
@@ -18,6 +18,9 @@ const accountSchema = z.object({
refreshJwt: z.string().optional(), // optional because it can expire
accessJwt: z.string().optional(), // optional because it can expire
signupQueued: z.boolean().optional(),
status: z
.enum(['active', 'takendown', 'suspended', 'deactivated'])
.optional(),
pdsUrl: z.string().optional(),
})
export type PersistedAccount = z.infer<typeof accountSchema>
src/state/session/__tests__/session-test.ts
+29
View File
@@ -59,6 +59,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-1",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -96,6 +97,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -145,6 +147,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-1",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -192,6 +195,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-1",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "alice-access-jwt-1",
@@ -204,6 +208,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-1",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -251,6 +256,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "bob-access-jwt-1",
@@ -263,6 +269,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-1",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -308,6 +315,7 @@ describe('session', () => {
"refreshJwt": "jay-refresh-jwt-1",
"service": "https://jay.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "alice-access-jwt-2",
@@ -320,6 +328,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "bob-access-jwt-1",
@@ -332,6 +341,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-1",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -373,6 +383,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://jay.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": undefined,
@@ -385,6 +396,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": undefined,
@@ -397,6 +409,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -455,6 +468,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -499,6 +513,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -610,6 +625,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-1",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -690,6 +706,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -740,6 +757,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-3",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -790,6 +808,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-4",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -946,6 +965,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-1",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "alice-access-jwt-2",
@@ -958,6 +978,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1006,6 +1027,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-2",
"service": "https://bob.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "alice-access-jwt-2",
@@ -1018,6 +1040,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1165,6 +1188,7 @@ describe('session', () => {
"refreshJwt": "alice-refresh-jwt-1",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1227,6 +1251,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1289,6 +1314,7 @@ describe('session', () => {
"refreshJwt": undefined,
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1380,6 +1406,7 @@ describe('session', () => {
"refreshJwt": "jay-refresh-jwt-1",
"service": "https://jay.com/",
"signupQueued": false,
"status": "active",
},
{
"accessJwt": "bob-access-jwt-2",
@@ -1392,6 +1419,7 @@ describe('session', () => {
"refreshJwt": "bob-refresh-jwt-2",
"service": "https://alice.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
@@ -1438,6 +1466,7 @@ describe('session', () => {
"refreshJwt": "clarence-refresh-jwt-2",
"service": "https://clarence.com/",
"signupQueued": false,
"status": "active",
},
],
"currentAgentState": {
src/state/session/agent.ts
+2
View File
@@ -235,6 +235,8 @@ export function agentToSessionAccount(
refreshJwt: agent.session.refreshJwt,
accessJwt: agent.session.accessJwt,
signupQueued: isSignupQueued(agent.session.accessJwt),
// @ts-expect-error TODO remove when backend is ready
status: agent.session.status || 'active',
pdsUrl: agent.pdsUrl?.toString(),
}
}
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+4
View File
@@ -30,6 +30,7 @@ import {
useLoggedOutViewControls,
} from '#/state/shell/logged-out'
import {isWeb} from 'platform/detection'
import {Deactivated} from '#/screens/Deactivated'
import {Onboarding} from '#/screens/Onboarding'
import {SignupQueued} from '#/screens/SignupQueued'
import {LoggedOut} from '../com/auth/LoggedOut'
@@ -108,6 +109,9 @@ function NativeStackNavigator({
if (showLoggedOut) {
return <LoggedOut onDismiss={() => setShowLoggedOut(false)} />
}
if (currentAccount?.status === 'deactivated') {
return <Deactivated />
}
if (onboardingState.isActive) {
return <Onboarding />
}