diff --git a/package.json b/package.json index 258f66b936..a95e158ab2 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android" }, "dependencies": { - "@atproto/api": "^0.9.1", + "@atproto/api": "^0.9.5", "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@emoji-mart/react": "^1.1.1", diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d2100f0b42..7c682ac1a1 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -337,6 +337,7 @@ export function Button({ a.flex_row, a.align_center, a.overflow_hidden, + a.justify_center, ...baseStyles, ...(state.hovered || state.pressed ? hoverStyles : []), ...(state.focused ? focusStyles : []), diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx new file mode 100644 index 0000000000..bbe4e2f75c --- /dev/null +++ b/src/components/Loader.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import Animated, { + Easing, + useSharedValue, + useAnimatedStyle, + withRepeat, + withTiming, +} from 'react-native-reanimated' + +import {atoms as a} from '#/alf' +import {Props, useCommonSVGProps} from '#/components/icons/common' +import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader' + +export function Loader(props: Props) { + const common = useCommonSVGProps(props) + const rotation = useSharedValue(0) + + const animatedStyles = useAnimatedStyle(() => ({ + transform: [{rotate: rotation.value + 'deg'}], + })) + + React.useEffect(() => { + rotation.value = withRepeat( + withTiming(360, {duration: 500, easing: Easing.linear}), + -1, + ) + }, [rotation]) + + return ( + + + + ) +} diff --git a/src/components/icons/Group3.tsx b/src/components/icons/Group3.tsx new file mode 100644 index 0000000000..2bb16ba870 --- /dev/null +++ b/src/components/icons/Group3.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Group3_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M17 16H21.1456C20.8246 11.4468 17.7199 9.48509 15.0001 10.1147M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4ZM18.5 4.5C18.5 5.88071 17.3807 7 16 7C14.6193 7 13.5 5.88071 13.5 4.5C13.5 3.11929 14.6193 2 16 2C17.3807 2 18.5 3.11929 18.5 4.5ZM1 17H13C12.3421 7.66667 1.65792 7.66667 1 17Z', +}) diff --git a/src/components/icons/Loader.tsx b/src/components/icons/Loader.tsx new file mode 100644 index 0000000000..01419ba54c --- /dev/null +++ b/src/components/icons/Loader.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Loader_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 5a7 7 0 0 0-5.218 11.666A1 1 0 0 1 5.292 18a9 9 0 1 1 13.416 0 1 1 0 1 1-1.49-1.334A7 7 0 0 0 12 5Z', +}) diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx new file mode 100644 index 0000000000..965fad07ba --- /dev/null +++ b/src/screens/Deactivated.tsx @@ -0,0 +1,208 @@ +import React from 'react' +import {View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {useOnboardingDispatch} from '#/state/shell' +import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session' +import {logger} from '#/logger' +import {pluralize} from '#/lib/strings/helpers' + +import {atoms as a, useTheme, useBreakpoints} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {isWeb} from '#/platform/detection' +import {H2, P} from '#/components/Typography' +import {ScrollView} from '#/view/com/util/Views' +import {Group3_Stroke2_Corner0_Rounded as Group3} from '#/components/icons/Group3' +import {Loader} from '#/components/Loader' + +const COL_WIDTH = 400 + +export function Deactivated() { + const {_} = useLingui() + const t = useTheme() + const insets = useSafeAreaInsets() + const {gtMobile} = useBreakpoints() + const onboardingDispatch = useOnboardingDispatch() + const {logout} = useSessionApi() + + const [isProcessing, setProcessing] = React.useState(false) + const [estimatedTime, setEstimatedTime] = React.useState( + undefined, + ) + const [placeInQueue, setPlaceInQueue] = React.useState( + undefined, + ) + + const checkStatus = React.useCallback(async () => { + setProcessing(true) + try { + const res = await getAgent().com.atproto.temp.checkSignupQueue() + if (res.data.activated) { + // ready to go, exchange the access token for a usable one and kick off onboarding + await getAgent().refreshSession() + if (!isSessionDeactivated(getAgent().session?.accessJwt)) { + onboardingDispatch({type: 'start'}) + } + } else { + // not ready, update UI + setEstimatedTime(msToString(res.data.estimatedTimeMs)) + if (typeof res.data.placeInQueue !== 'undefined') { + setPlaceInQueue(Math.max(res.data.placeInQueue, 1)) + } + } + } catch (e: any) { + logger.error('Failed to check signup queue', {err: e.toString()}) + } finally { + setProcessing(false) + } + }, [setProcessing, setEstimatedTime, setPlaceInQueue, onboardingDispatch]) + + React.useEffect(() => { + checkStatus() + const interval = setInterval(checkStatus, 60e3) + return () => clearInterval(interval) + }, [checkStatus]) + + const checkBtn = ( + + ) + + return ( + + + + + + + + +

+ You're in line +

+

+ + There's been a rush of new users! We'll activate your account as + soon as we can. + +

+ + + {typeof placeInQueue === 'number' && ( + + {placeInQueue} + + )} +

+ {typeof placeInQueue === 'number' ? ( + left to go. + ) : ( + You are in line. + )}{' '} + {estimatedTime ? ( + + We estimate {estimatedTime} until your account is ready. + + ) : ( + + We will let you know when your account is ready. + + )} +

+ + + {isWeb && gtMobile && ( + + + {checkBtn} + + )} + + + + + + + {(!isWeb || !gtMobile) && ( + + + {checkBtn} + + + + )} + + ) +} + +function msToString(ms: number | undefined): string | undefined { + if (ms && ms > 0) { + const estimatedTimeMins = Math.ceil(ms / 60e3) + if (estimatedTimeMins > 59) { + const estimatedTimeHrs = Math.round(estimatedTimeMins / 60) + if (estimatedTimeHrs > 6) { + // dont even bother + return undefined + } + // hours + return `${estimatedTimeHrs} ${pluralize(estimatedTimeHrs, 'hour')}` + } + // minutes + return `${estimatedTimeMins} ${pluralize(estimatedTimeMins, 'minute')}` + } + return undefined +} diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index a6f2ea06a6..870e14aaf2 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -12,6 +12,7 @@ const accountSchema = z.object({ emailConfirmed: z.boolean().optional(), refreshJwt: z.string().optional(), // optional because it can expire accessJwt: z.string().optional(), // optional because it can expire + deactivated: z.boolean().optional(), }) export type PersistedAccount = z.infer diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index e49bc2b390..629aff6dc6 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -12,6 +12,7 @@ import {emitSessionDropped} from '../events' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {track} from '#/lib/analytics/analytics' +import {hasProp} from '#/lib/type-guards' let __globalAgent: BskyAgent = PUBLIC_BSKY_AGENT @@ -125,6 +126,7 @@ function createPersistSessionHandler( handle: session?.handle || account.handle, email: session?.email || account.email, emailConfirmed: session?.emailConfirmed || account.emailConfirmed, + deactivated: isSessionDeactivated(session?.accessJwt), /* * Tokens are undefined if the session expires, or if creation fails for @@ -139,6 +141,7 @@ function createPersistSessionHandler( did: refreshedAccount.did, handle: refreshedAccount.handle, service: refreshedAccount.service, + deactivated: refreshedAccount.deactivated, }) if (expired) { @@ -235,11 +238,14 @@ export function Provider({children}: React.PropsWithChildren<{}>) { throw new Error(`session: createAccount failed to establish a session`) } - /*dont await*/ agent.upsertProfile(_existing => { - return { - displayName: handle, - } - }) + const deactivated = isSessionDeactivated(agent.session.accessJwt) + if (!deactivated) { + /*dont await*/ agent.upsertProfile(_existing => { + return { + displayName: handle, + } + }) + } const account: SessionAccount = { service: agent.service.toString(), @@ -249,6 +255,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { emailConfirmed: false, refreshJwt: agent.session.refreshJwt, accessJwt: agent.session.accessJwt, + deactivated, } agent.setPersistSessionHandler( @@ -305,6 +312,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { emailConfirmed: agent.session.emailConfirmed || false, refreshJwt: agent.session.refreshJwt, accessJwt: agent.session.accessJwt, + deactivated: isSessionDeactivated(agent.session.accessJwt), } agent.setPersistSessionHandler( @@ -392,6 +400,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) { refreshJwt: account.refreshJwt || '', did: account.did, handle: account.handle, + deactivated: + isSessionDeactivated(account.accessJwt) || account.deactivated, } if (canReusePrevSession) { @@ -402,6 +412,13 @@ export function Provider({children}: React.PropsWithChildren<{}>) { queryClient.clear() upsertAccount(account) + if (prevSession.deactivated) { + // don't attempt to resume + // use will be taken to the deactivated screen + logger.info(`session: reusing session for deactivated account`) + return + } + // Intentionally not awaited to unblock the UI: resumeSessionWithFreshAccount() .then(freshAccount => { @@ -466,6 +483,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { emailConfirmed: agent.session.emailConfirmed || false, refreshJwt: agent.session.refreshJwt, accessJwt: agent.session.accessJwt, + deactivated: isSessionDeactivated(agent.session.accessJwt), } } }, @@ -687,3 +705,13 @@ export function useRequireAuth() { [hasSession, setShowLoggedOut, closeAll], ) } + +export function isSessionDeactivated(accessJwt: string | undefined) { + if (accessJwt) { + const sessData = jwtDecode(accessJwt) + return ( + hasProp(sessData, 'scope') && sessData.scope === 'com.atproto.deactivated' + ) + } + return false +} diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx index 9fea6e49f1..7e275502b5 100644 --- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx +++ b/src/view/shell/createNativeStackNavigatorWithAuth.tsx @@ -35,6 +35,7 @@ import { } from '#/state/shell/logged-out' import {useSession} from '#/state/session' import {isWeb} from 'platform/detection' +import {Deactivated} from '#/screens/Deactivated' import {LoggedOut} from '../com/auth/LoggedOut' import {Onboarding} from '../com/auth/Onboarding' @@ -92,7 +93,7 @@ function NativeStackNavigator({ ) // --- our custom logic starts here --- - const {hasSession} = useSession() + const {hasSession, currentAccount} = useSession() const activeRoute = state.routes[state.index] const activeDescriptor = descriptors[activeRoute.key] const activeRouteRequiresAuth = activeDescriptor.options.requireAuth ?? false @@ -103,6 +104,9 @@ function NativeStackNavigator({ if ((!PWI_ENABLED || activeRouteRequiresAuth) && !hasSession) { return } + if (hasSession && currentAccount?.deactivated) { + return + } if (showLoggedOut) { return setShowLoggedOut(false)} /> } diff --git a/yarn.lock b/yarn.lock index 1075743d8c..c5d70ab5d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48,10 +48,10 @@ typed-emitter "^2.1.0" zod "^3.21.4" -"@atproto/api@^0.9.1": - version "0.9.1" - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.1.tgz#0b28baefa4af32bc4c05715b8641656f332546c6" - integrity sha512-DHPc/dGgpf8sgPlfR9meIAk7s4YMll0g7HTq/W/LeaaaY0T6d3ZAtrgvjIU1aKCp5WNzTfzrmz0LIHIX46FHHw== +"@atproto/api@^0.9.5": + version "0.9.5" + resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.5.tgz#630e5d9520bba38d0cd348c8028ddbb73bd074f8" + integrity sha512-4vlwTbiWSkCV0DkfNMawiH+26Fv7txPr4x0vwq6KPIBz28UHPK9UyPseLKxi6/Aok74aPr8ySJ4+nfcmwcp08Q== dependencies: "@atproto/common-web" "^0.2.3" "@atproto/lexicon" "^0.3.1"