diff options
| -rw-r--r-- | __e2e__/mock-server.ts | 3 | ||||
| -rw-r--r-- | __e2e__/tests/create-account.test.ts | 12 | ||||
| -rw-r--r-- | __e2e__/tests/invite-codes.test.ts | 13 | ||||
| -rw-r--r-- | __e2e__/tests/invites-and-text-verification.test.ts | 57 | ||||
| -rw-r--r-- | __e2e__/tests/text-verification.test.ts | 85 | ||||
| -rw-r--r-- | __e2e__/util.ts | 2 | ||||
| -rw-r--r-- | jest/test-pds.ts | 38 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/state/session/index.tsx | 14 | ||||
| -rw-r--r-- | src/view/com/auth/create/CreateAccount.tsx | 26 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step1.tsx | 345 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step2.tsx | 263 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step3.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/auth/create/StepHeader.tsx | 37 | ||||
| -rw-r--r-- | src/view/com/auth/create/state.ts | 107 | ||||
| -rw-r--r-- | src/view/icons/index.tsx | 6 | ||||
| -rw-r--r-- | yarn.lock | 13 |
17 files changed, 694 insertions, 332 deletions
diff --git a/__e2e__/mock-server.ts b/__e2e__/mock-server.ts index 482df6ef6..1bf240ccb 100644 --- a/__e2e__/mock-server.ts +++ b/__e2e__/mock-server.ts @@ -14,7 +14,8 @@ async function main() { await server?.close() console.log('Starting new server') const inviteRequired = url?.query && 'invite' in url.query - server = await createServer({inviteRequired}) + const phoneRequired = url?.query && 'phone' in url.query + server = await createServer({inviteRequired, phoneRequired}) console.log('Listening at', server.pdsUrl) if (url?.query) { if ('users' in url.query) { diff --git a/__e2e__/tests/create-account.test.ts b/__e2e__/tests/create-account.test.ts index eab3e538b..a6724e8e4 100644 --- a/__e2e__/tests/create-account.test.ts +++ b/__e2e__/tests/create-account.test.ts @@ -16,14 +16,12 @@ describe('Create account', () => { await element(by.id('createAccountButton')).tap() await device.takeScreenshot('1- opened create account screen') - await element(by.id('otherServerBtn')).tap() + await element(by.id('selectServiceButton')).tap() await device.takeScreenshot('2- selected other server') - await element(by.id('customServerInput')).clearText() - await element(by.id('customServerInput')).typeText(service) + await element(by.id('customServerTextInput')).typeText(service) + await element(by.id('customServerTextInput')).tapReturnKey() + await element(by.id('customServerSelectBtn')).tap() await device.takeScreenshot('3- input test server URL') - - await element(by.id('nextBtn')).tap() - await element(by.id('emailInput')).typeText('example@test.com') await element(by.id('passwordInput')).typeText('hunter2') await device.takeScreenshot('4- entered account details') @@ -31,7 +29,7 @@ describe('Create account', () => { await element(by.id('nextBtn')).tap() await element(by.id('handleInput')).typeText('e2e-test') - await device.takeScreenshot('4- entered handle') + await device.takeScreenshot('5- entered handle') await element(by.id('nextBtn')).tap() diff --git a/__e2e__/tests/invite-codes.test.ts b/__e2e__/tests/invite-codes.test.ts index 7db7c595a..7ab5b1477 100644 --- a/__e2e__/tests/invite-codes.test.ts +++ b/__e2e__/tests/invite-codes.test.ts @@ -1,10 +1,5 @@ /* eslint-env detox/detox */ -/** - * This test is being skipped until we can resolve the detox crash issue - * with the side drawer. - */ - import {describe, beforeAll, it} from '@jest/globals' import {expect} from 'detox' import {openApp, loginAsAlice, createServer} from '../util' @@ -31,12 +26,12 @@ describe('invite-codes', () => { await element(by.id('e2eOpenLoggedOutView')).tap() await element(by.id('createAccountButton')).tap() await device.takeScreenshot('1- opened create account screen') - await element(by.id('otherServerBtn')).tap() + await element(by.id('selectServiceButton')).tap() await device.takeScreenshot('2- selected other server') - await element(by.id('customServerInput')).clearText() - await element(by.id('customServerInput')).typeText(service) + await element(by.id('customServerTextInput')).typeText(service) + await element(by.id('customServerTextInput')).tapReturnKey() + await element(by.id('customServerSelectBtn')).tap() await device.takeScreenshot('3- input test server URL') - await element(by.id('nextBtn')).tap() await element(by.id('inviteCodeInput')).typeText(inviteCode) await element(by.id('emailInput')).typeText('example@test.com') await element(by.id('passwordInput')).typeText('hunter2') diff --git a/__e2e__/tests/invites-and-text-verification.test.ts b/__e2e__/tests/invites-and-text-verification.test.ts new file mode 100644 index 000000000..850ca6d5c --- /dev/null +++ b/__e2e__/tests/invites-and-text-verification.test.ts @@ -0,0 +1,57 @@ +/* eslint-env detox/detox */ + +import {describe, beforeAll, it} from '@jest/globals' +import {expect} from 'detox' +import {openApp, loginAsAlice, createServer} from '../util' + +describe('invite-codes', () => { + let service: string + let inviteCode = '' + beforeAll(async () => { + service = await createServer('?users&invite&phone') + await openApp({permissions: {notifications: 'YES'}}) + }) + + it('I can fetch invite codes', async () => { + await loginAsAlice() + await element(by.id('e2eOpenInviteCodesModal')).tap() + await expect(element(by.id('inviteCodesModal'))).toBeVisible() + const attrs = await element(by.id('inviteCode-0-code')).getAttributes() + inviteCode = attrs.text + await element(by.id('closeBtn')).tap() + await element(by.id('e2eSignOut')).tap() + }) + + it('I can create a new account with the invite code', async () => { + await element(by.id('e2eOpenLoggedOutView')).tap() + await element(by.id('createAccountButton')).tap() + await device.takeScreenshot('1- opened create account screen') + await element(by.id('selectServiceButton')).tap() + await device.takeScreenshot('2- selected other server') + await element(by.id('customServerTextInput')).typeText(service) + await element(by.id('customServerTextInput')).tapReturnKey() + await element(by.id('customServerSelectBtn')).tap() + await device.takeScreenshot('3- input test server URL') + await element(by.id('inviteCodeInput')).typeText(inviteCode) + await element(by.id('emailInput')).typeText('example@test.com') + await element(by.id('passwordInput')).typeText('hunter2') + await device.takeScreenshot('4- entered account details') + await element(by.id('nextBtn')).tap() + await element(by.id('phoneInput')).typeText('5558675309') + await element(by.id('requestCodeBtn')).tap() + await device.takeScreenshot('5- requested code') + await element(by.id('codeInput')).typeText('000000') + await device.takeScreenshot('6- entered code') + await element(by.id('nextBtn')).tap() + await element(by.id('handleInput')).typeText('e2e-test') + await device.takeScreenshot('7- entered handle') + await element(by.id('nextBtn')).tap() + await expect(element(by.id('welcomeOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('homeScreen'))).toBeVisible() + }) +}) diff --git a/__e2e__/tests/text-verification.test.ts b/__e2e__/tests/text-verification.test.ts new file mode 100644 index 000000000..a307a95ff --- /dev/null +++ b/__e2e__/tests/text-verification.test.ts @@ -0,0 +1,85 @@ +/* eslint-env detox/detox */ + +import {describe, beforeAll, it} from '@jest/globals' +import {expect} from 'detox' +import {openApp, createServer} from '../util' + +describe('Create account', () => { + let service: string + beforeAll(async () => { + service = await createServer('?phone') + await openApp({permissions: {notifications: 'YES'}}) + }) + + it('I can create a new account with text verification', async () => { + await element(by.id('e2eOpenLoggedOutView')).tap() + + await element(by.id('createAccountButton')).tap() + await device.takeScreenshot('1- opened create account screen') + await element(by.id('selectServiceButton')).tap() + await device.takeScreenshot('2- selected other server') + await element(by.id('customServerTextInput')).typeText(service) + await element(by.id('customServerTextInput')).tapReturnKey() + await element(by.id('customServerSelectBtn')).tap() + await device.takeScreenshot('3- input test server URL') + await element(by.id('emailInput')).typeText('text-verification@test.com') + await element(by.id('passwordInput')).typeText('hunter2') + await device.takeScreenshot('4- entered account details') + await element(by.id('nextBtn')).tap() + + await element(by.id('phoneInput')).typeText('1234567890') + await element(by.id('requestCodeBtn')).tap() + await device.takeScreenshot('5- requested code') + + await element(by.id('codeInput')).typeText('000000') + await device.takeScreenshot('6- entered code') + await element(by.id('nextBtn')).tap() + + await element(by.id('handleInput')).typeText('text-verification-test') + await device.takeScreenshot('7- entered handle') + + await element(by.id('nextBtn')).tap() + + await expect(element(by.id('welcomeOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible() + await element(by.id('continueBtn')).tap() + await expect(element(by.id('homeScreen'))).toBeVisible() + }) + + it('failed text verification correctly goes back to the code input screen', async () => { + await element(by.id('e2eSignOut')).tap() + await element(by.id('e2eOpenLoggedOutView')).tap() + + await element(by.id('createAccountButton')).tap() + await device.takeScreenshot('1- opened create account screen') + await element(by.id('selectServiceButton')).tap() + await device.takeScreenshot('2- selected other server') + await element(by.id('customServerTextInput')).typeText(service) + await element(by.id('customServerTextInput')).tapReturnKey() + await element(by.id('customServerSelectBtn')).tap() + await device.takeScreenshot('3- input test server URL') + await element(by.id('emailInput')).typeText('text-verification2@test.com') + await element(by.id('passwordInput')).typeText('hunter2') + await device.takeScreenshot('4- entered account details') + await element(by.id('nextBtn')).tap() + + await element(by.id('phoneInput')).typeText('1234567890') + await element(by.id('requestCodeBtn')).tap() + await device.takeScreenshot('5- requested code') + + await element(by.id('codeInput')).typeText('111111') + await device.takeScreenshot('6- entered code') + await element(by.id('nextBtn')).tap() + + await element(by.id('handleInput')).typeText('text-verification-test2') + await device.takeScreenshot('7- entered handle') + + await element(by.id('nextBtn')).tap() + + await expect(element(by.id('codeInput'))).toBeVisible() + await device.takeScreenshot('8- got error') + }) +}) diff --git a/__e2e__/util.ts b/__e2e__/util.ts index c5668d042..8c47406c0 100644 --- a/__e2e__/util.ts +++ b/__e2e__/util.ts @@ -105,7 +105,7 @@ async function openAppForDebugBuild(platform: string, opts: any) { await sleep(3000) } -export async function createServer(path = '') { +export async function createServer(path = ''): Promise<string> { return new Promise(function (resolve, reject) { var req = http.request( { diff --git a/jest/test-pds.ts b/jest/test-pds.ts index d86ebd787..1912ffc6a 100644 --- a/jest/test-pds.ts +++ b/jest/test-pds.ts @@ -1,7 +1,7 @@ import net from 'net' import path from 'path' import fs from 'fs' -import {TestNetwork} from '@atproto/dev-env' +import {TestNetwork, TestPds} from '@atproto/dev-env' import {AtUri, BskyAgent} from '@atproto/api' export interface TestUser { @@ -55,19 +55,36 @@ class StringIdGenerator { const ids = new StringIdGenerator() export async function createServer( - {inviteRequired}: {inviteRequired: boolean} = {inviteRequired: false}, + { + inviteRequired, + phoneRequired, + }: {inviteRequired: boolean; phoneRequired: boolean} = { + inviteRequired: false, + phoneRequired: false, + }, ): Promise<TestPDS> { - const port = await getPort() + const port = 3000 const port2 = await getPort(port + 1) const port3 = await getPort(port2 + 1) const pdsUrl = `http://localhost:${port}` const id = ids.next() + const phoneParams = phoneRequired + ? { + phoneVerificationRequired: true, + twilioAccountSid: 'ACXXXXXXX', + twilioAuthToken: 'AUTH', + twilioServiceSid: 'VAXXXXXXXX', + } + : {} + const testNet = await TestNetwork.create({ pds: { port, hostname: 'localhost', + dbPostgresSchema: `pds_${id}`, inviteRequired, + ...phoneParams, }, bsky: { dbPostgresSchema: `bsky_${id}`, @@ -76,6 +93,7 @@ export async function createServer( }, plc: {port: port2}, }) + mockTwilio(testNet.pds) const pic = fs.readFileSync( path.join(__dirname, '..', 'assets', 'default-avatar.png'), @@ -144,6 +162,8 @@ class Mocker { email, handle: name + '.test', password: 'hunter2', + verificationPhone: '1234567890', + verificationCode: '000000', }) await agent.upsertProfile(async () => { const blob = await agent.uploadBlob(this.pic, { @@ -430,3 +450,15 @@ async function getPort(start = 3000) { } throw new Error('Unable to find an available port') } + +export const mockTwilio = (pds: TestPds) => { + if (!pds.ctx.twilio) return + + pds.ctx.twilio.sendCode = async (_number: string) => { + // do nothing + } + + pds.ctx.twilio.verifyCode = async (_number: string, code: string) => { + return code === '000000' + } +} diff --git a/package.json b/package.json index ff0ddd3e9..120e653ff 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.8.0", + "@atproto/api": "^0.9.1", "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@emoji-mart/react": "^1.1.1", @@ -120,6 +120,7 @@ "js-sha256": "^0.9.0", "jwt-decode": "^4.0.0", "lande": "^1.0.10", + "libphonenumber-js": "^1.10.53", "lodash.chunk": "^4.2.0", "lodash.debounce": "^4.0.8", "lodash.isequal": "^4.5.0", diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index 0a565c975..e49bc2b39 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -44,6 +44,8 @@ export type ApiContext = { password: string handle: string inviteCode?: string + verificationPhone?: string + verificationCode?: string }) => Promise<void> login: (props: { service: string @@ -203,7 +205,15 @@ export function Provider({children}: React.PropsWithChildren<{}>) { }, [setStateAndPersist, queryClient]) const createAccount = React.useCallback<ApiContext['createAccount']>( - async ({service, email, password, handle, inviteCode}: any) => { + async ({ + service, + email, + password, + handle, + inviteCode, + verificationPhone, + verificationCode, + }: any) => { logger.info(`session: creating account`, { service, handle, @@ -217,6 +227,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) { password, email, inviteCode, + verificationPhone, + verificationCode, }) if (!agent.session) { diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 74307a631..449afb0d3 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -22,12 +22,13 @@ import { useSetSaveFeedsMutation, DEFAULT_PROD_FEEDS, } from '#/state/queries/preferences' -import {IS_PROD} from '#/lib/constants' +import {FEEDBACK_FORM_URL, IS_PROD} from '#/lib/constants' import {Step1} from './Step1' import {Step2} from './Step2' import {Step3} from './Step3' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {TextLink} from '../../util/Link' export function CreateAccount({onPressBack}: {onPressBack: () => void}) { const {screen} = useAnalytics() @@ -117,7 +118,7 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) { return ( <LoggedOutLayout - leadin={`Step ${uiState.step}`} + leadin="" title={_(msg`Create Account`)} description={_(msg`We're so excited to have you join us!`)}> <ScrollView testID="createAccount" style={pal.view}> @@ -176,6 +177,27 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) { </> ) : undefined} </View> + + <View style={styles.stepContainer}> + <View + style={[ + s.flexRow, + s.alignCenter, + pal.viewLight, + {borderRadius: 8, paddingHorizontal: 14, paddingVertical: 12}, + ]}> + <Text type="md" style={pal.textLight}> + <Trans>Having trouble?</Trans>{' '} + </Text> + <TextLink + type="md" + style={pal.link} + text={_(msg`Contact support`)} + href={FEEDBACK_FORM_URL({email: uiState.email})} + /> + </View> + </View> + <View style={{height: isTabletOrDesktop ? 50 : 400}} /> </ScrollView> </LoggedOutLayout> diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index 0f8581c0b..2ce77cf53 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -1,25 +1,38 @@ import React from 'react' -import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' +import { + ActivityIndicator, + Keyboard, + StyleSheet, + TouchableWithoutFeedback, + View, +} from 'react-native' +import {CreateAccountState, CreateAccountDispatch, is18} from './state' import {Text} from 'view/com/util/text/Text' +import {DateInput} from 'view/com/util/forms/DateInput' import {StepHeader} from './StepHeader' -import {CreateAccountState, CreateAccountDispatch} from './state' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' -import {HelpTip} from '../util/HelpTip' +import {usePalette} from 'lib/hooks/usePalette' import {TextInput} from '../util/TextInput' -import {Button} from 'view/com/util/forms/Button' +import {Button} from '../../util/forms/Button' +import {Policies} from './Policies' import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {msg, Trans} from '@lingui/macro' +import {isWeb} from 'platform/detection' +import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {logger} from '#/logger' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'lib/constants' -import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags' +function sanitizeDate(date: Date): Date { + if (!date || date.toString() === 'Invalid Date') { + logger.error(`Create account: handled invalid date for birthDate`, { + hasDate: !!date, + }) + return new Date() + } + return date +} -/** STEP 1: Your hosting provider - * @field Bluesky (default) - * @field Other (staging, local dev, your own PDS, etc.) - */ export function Step1({ uiState, uiDispatch, @@ -28,136 +41,175 @@ export function Step1({ uiDispatch: CreateAccountDispatch }) { const pal = usePalette('default') - const [isDefaultSelected, setIsDefaultSelected] = React.useState(true) const {_} = useLingui() + const {openModal} = useModalControls() - const onPressDefault = React.useCallback(() => { - setIsDefaultSelected(true) - uiDispatch({type: 'set-service-url', value: PROD_SERVICE}) - }, [setIsDefaultSelected, uiDispatch]) + const onPressSelectService = React.useCallback(() => { + openModal({ + name: 'server-input', + initialService: uiState.serviceUrl, + onSelect: (url: string) => + uiDispatch({type: 'set-service-url', value: url}), + }) + Keyboard.dismiss() + }, [uiDispatch, uiState.serviceUrl, openModal]) - const onPressOther = React.useCallback(() => { - setIsDefaultSelected(false) - uiDispatch({type: 'set-service-url', value: 'https://'}) - }, [setIsDefaultSelected, uiDispatch]) + const onPressWaitlist = React.useCallback(() => { + openModal({name: 'waitlist'}) + }, [openModal]) - const onChangeServiceUrl = React.useCallback( - (v: string) => { - uiDispatch({type: 'set-service-url', value: v}) - }, - [uiDispatch], - ) + const birthDate = React.useMemo(() => { + return sanitizeDate(uiState.birthDate) + }, [uiState.birthDate]) return ( <View> - <StepHeader step="1" title={_(msg`Your hosting provider`)} /> - <Text style={[pal.text, s.mb10]}> - <Trans>This is the service that keeps you online.</Trans> - </Text> - <Option - testID="blueskyServerBtn" - isSelected={isDefaultSelected} - label="Bluesky" - help=" (default)" - onPress={onPressDefault} - /> - <Option - testID="otherServerBtn" - isSelected={!isDefaultSelected} - label="Other" - onPress={onPressOther}> - <View style={styles.otherForm}> - <Text nativeID="addressProvider" style={[pal.text, s.mb5]}> - <Trans>Enter the address of your provider:</Trans> - </Text> - <TextInput - testID="customServerInput" - icon="globe" - placeholder={_(msg`Hosting provider address`)} - value={uiState.serviceUrl} - editable - onChange={onChangeServiceUrl} - accessibilityHint={_(msg`Input hosting provider address`)} - accessibilityLabel={_(msg`Hosting provider address`)} - accessibilityLabelledBy="addressProvider" - /> - {LOGIN_INCLUDE_DEV_SERVERS && ( - <View style={[s.flexRow, s.mt10]}> - <Button - testID="stagingServerBtn" - type="default" - style={s.mr5} - label={_(msg`Staging`)} - onPress={() => onChangeServiceUrl(STAGING_SERVICE)} - /> - <Button - testID="localDevServerBtn" - type="default" - label={_(msg`Dev Server`)} - onPress={() => onChangeServiceUrl(LOCAL_DEV_SERVICE)} + <StepHeader uiState={uiState} title={_(msg`Your account`)}> + <View> + <Button + testID="selectServiceButton" + type="default" + style={{ + aspectRatio: 1, + justifyContent: 'center', + alignItems: 'center', + }} + accessibilityLabel={_(msg`Select service`)} + accessibilityHint={_(msg`Sets server for the Bluesky client`)} + onPress={onPressSelectService}> + <FontAwesomeIcon icon="server" size={21} /> + </Button> + </View> + </StepHeader> + + {!uiState.serviceDescription ? ( + <ActivityIndicator /> + ) : ( + <> + {uiState.isInviteCodeRequired && ( + <View style={s.pb20}> + <Text type="md-medium" style={[pal.text, s.mb2]}> + <Trans>Invite code</Trans> + </Text> + <TextInput + testID="inviteCodeInput" + icon="ticket" + placeholder={_(msg`Required for this provider`)} + value={uiState.inviteCode} + editable + onChange={value => uiDispatch({type: 'set-invite-code', value})} + accessibilityLabel={_(msg`Invite code`)} + accessibilityHint={_(msg`Input invite code to proceed`)} + autoCapitalize="none" + autoComplete="off" + autoCorrect={false} + autoFocus={true} /> </View> )} - </View> - </Option> - {uiState.error ? ( - <ErrorMessage message={uiState.error} style={styles.error} /> - ) : ( - <HelpTip text={_(msg`You can change hosting providers at any time.`)} /> - )} - </View> - ) -} -function Option({ - children, - isSelected, - label, - help, - onPress, - testID, -}: React.PropsWithChildren<{ - isSelected: boolean - label: string - help?: string - onPress: () => void - testID?: string -}>) { - const theme = useTheme() - const pal = usePalette('default') - const {_} = useLingui() - const circleFillStyle = React.useMemo( - () => ({ - backgroundColor: theme.palette.primary.background, - }), - [theme], - ) - - return ( - <View style={[styles.option, pal.border]}> - <TouchableWithoutFeedback - onPress={onPress} - testID={testID} - accessibilityRole="button" - accessibilityLabel={label} - accessibilityHint={_(msg`Sets hosting provider to ${label}`)}> - <View style={styles.optionHeading}> - <View style={[styles.circle, pal.border]}> - {isSelected ? ( - <View style={[circleFillStyle, styles.circleFill]} /> - ) : undefined} - </View> - <Text type="xl" style={pal.text}> - {label} - {help ? ( - <Text type="xl" style={pal.textLight}> - {help} + {!uiState.inviteCode && uiState.isInviteCodeRequired ? ( + <View style={[s.flexRow, s.alignCenter]}> + <Text style={pal.text}> + <Trans>Don't have an invite code?</Trans>{' '} </Text> - ) : undefined} - </Text> - </View> - </TouchableWithoutFeedback> - {isSelected && children} + <TouchableWithoutFeedback + onPress={onPressWaitlist} + accessibilityLabel={_(msg`Join the waitlist.`)} + accessibilityHint=""> + <View style={styles.touchable}> + <Text style={pal.link}> + <Trans>Join the waitlist.</Trans> + </Text> + </View> + </TouchableWithoutFeedback> + </View> + ) : ( + <> + <View style={s.pb20}> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="email"> + <Trans>Email address</Trans> + </Text> + <TextInput + testID="emailInput" + icon="envelope" + placeholder={_(msg`Enter your email address`)} + value={uiState.email} + editable + onChange={value => uiDispatch({type: 'set-email', value})} + accessibilityLabel={_(msg`Email`)} + accessibilityHint={_(msg`Input email for Bluesky account`)} + accessibilityLabelledBy="email" + autoCapitalize="none" + autoComplete="off" + autoCorrect={false} + autoFocus={!uiState.isInviteCodeRequired} + /> + </View> + + <View style={s.pb20}> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="password"> + <Trans>Password</Trans> + </Text> + <TextInput + testID="passwordInput" + icon="lock" + placeholder={_(msg`Choose your password`)} + value={uiState.password} + editable + secureTextEntry + onChange={value => uiDispatch({type: 'set-password', value})} + accessibilityLabel={_(msg`Password`)} + accessibilityHint={_(msg`Set password`)} + accessibilityLabelledBy="password" + autoCapitalize="none" + autoComplete="off" + autoCorrect={false} + /> + </View> + + <View style={s.pb20}> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="birthDate"> + <Trans>Your birth date</Trans> + </Text> + <DateInput + handleAsUTC + testID="birthdayInput" + value={birthDate} + onChange={value => + uiDispatch({type: 'set-birth-date', value}) + } + buttonType="default-light" + buttonStyle={[pal.border, styles.dateInputButton]} + buttonLabelType="lg" + accessibilityLabel={_(msg`Birthday`)} + accessibilityHint={_(msg`Enter your birth date`)} + accessibilityLabelledBy="birthDate" + /> + </View> + + {uiState.serviceDescription && ( + <Policies + serviceDescription={uiState.serviceDescription} + needsGuardian={!is18(uiState)} + /> + )} + </> + )} + </> + )} + {uiState.error ? ( + <ErrorMessage message={uiState.error} style={styles.error} /> + ) : undefined} </View> ) } @@ -165,34 +217,15 @@ function Option({ const styles = StyleSheet.create({ error: { borderRadius: 6, + marginTop: 10, }, - - option: { + dateInputButton: { borderWidth: 1, borderRadius: 6, - marginBottom: 10, - }, - optionHeading: { - flexDirection: 'row', - alignItems: 'center', - padding: 10, + paddingVertical: 14, }, - circle: { - width: 26, - height: 26, - borderRadius: 15, - padding: 4, - borderWidth: 1, - marginRight: 10, - }, - circleFill: { - width: 16, - height: 16, - borderRadius: 10, - }, - - otherForm: { - paddingBottom: 10, - paddingHorizontal: 12, + // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832. + touchable: { + ...(isWeb && {cursor: 'pointer'}), }, }) diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx index 53e1e02c9..f938bb9ce 100644 --- a/src/view/com/auth/create/Step2.tsx +++ b/src/view/com/auth/create/Step2.tsx @@ -1,39 +1,28 @@ import React from 'react' -import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' -import {CreateAccountState, CreateAccountDispatch, is18} from './state' +import { + ActivityIndicator, + StyleSheet, + TouchableWithoutFeedback, + View, +} from 'react-native' +import { + CreateAccountState, + CreateAccountDispatch, + requestVerificationCode, +} from './state' import {Text} from 'view/com/util/text/Text' -import {DateInput} from 'view/com/util/forms/DateInput' import {StepHeader} from './StepHeader' import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {TextInput} from '../util/TextInput' -import {Policies} from './Policies' +import {Button} from '../../util/forms/Button' import {ErrorMessage} from 'view/com/util/error/ErrorMessage' import {isWeb} from 'platform/detection' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import {logger} from '#/logger' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import parsePhoneNumber from 'libphonenumber-js' -function sanitizeDate(date: Date): Date { - if (!date || date.toString() === 'Invalid Date') { - logger.error(`Create account: handled invalid date for birthDate`, { - hasDate: !!date, - }) - return new Date() - } - return date -} - -/** STEP 2: Your account - * @field Invite code or waitlist - * @field Email address - * @field Email address - * @field Email address - * @field Password - * @field Birth date - * @readonly Terms of service & privacy policy - */ export function Step2({ uiState, uiDispatch, @@ -43,130 +32,155 @@ export function Step2({ }) { const pal = usePalette('default') const {_} = useLingui() - const {openModal} = useModalControls() + const {isMobile} = useWebMediaQueries() - const onPressWaitlist = React.useCallback(() => { - openModal({name: 'waitlist'}) - }, [openModal]) + const onPressRequest = React.useCallback(() => { + if ( + uiState.verificationPhone.length >= 9 && + parsePhoneNumber(uiState.verificationPhone, 'US') + ) { + requestVerificationCode({uiState, uiDispatch, _}) + } else { + uiDispatch({ + type: 'set-error', + value: _( + msg`There's something wrong with this number. Please include your country and/or area code!`, + ), + }) + } + }, [uiState, uiDispatch, _]) - const birthDate = React.useMemo(() => { - return sanitizeDate(uiState.birthDate) - }, [uiState.birthDate]) + const onPressRetry = React.useCallback(() => { + uiDispatch({type: 'set-has-requested-verification-code', value: false}) + }, [uiDispatch]) + + const phoneNumberFormatted = React.useMemo( + () => + uiState.hasRequestedVerificationCode + ? parsePhoneNumber( + uiState.verificationPhone, + 'US', + )?.formatInternational() + : '', + [uiState.hasRequestedVerificationCode, uiState.verificationPhone], + ) return ( <View> - <StepHeader step="2" title={_(msg`Your account`)} /> + <StepHeader uiState={uiState} title={_(msg`SMS verification`)} /> - {uiState.isInviteCodeRequired && ( - <View style={s.pb20}> - <Text type="md-medium" style={[pal.text, s.mb2]}> - <Trans>Invite code</Trans> - </Text> - <TextInput - testID="inviteCodeInput" - icon="ticket" - placeholder={_(msg`Required for this provider`)} - value={uiState.inviteCode} - editable - onChange={value => uiDispatch({type: 'set-invite-code', value})} - accessibilityLabel={_(msg`Invite code`)} - accessibilityHint={_(msg`Input invite code to proceed`)} - autoCapitalize="none" - autoComplete="off" - autoCorrect={false} - /> - </View> - )} - - {!uiState.inviteCode && uiState.isInviteCodeRequired ? ( - <Text style={[s.alignBaseline, pal.text]}> - <Trans>Don't have an invite code?</Trans>{' '} - <TouchableWithoutFeedback - onPress={onPressWaitlist} - accessibilityLabel={_(msg`Join the waitlist.`)} - accessibilityHint=""> - <View style={styles.touchable}> - <Text style={pal.link}> - <Trans>Join the waitlist.</Trans> - </Text> - </View> - </TouchableWithoutFeedback> - </Text> - ) : ( + {!uiState.hasRequestedVerificationCode ? ( <> <View style={s.pb20}> - <Text type="md-medium" style={[pal.text, s.mb2]} nativeID="email"> - <Trans>Email address</Trans> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="phoneNumber"> + <Trans>Phone number</Trans> </Text> <TextInput - testID="emailInput" - icon="envelope" - placeholder={_(msg`Enter your email address`)} - value={uiState.email} + testID="phoneInput" + icon="phone" + placeholder={_(msg`Enter your phone number`)} + value={uiState.verificationPhone} editable - onChange={value => uiDispatch({type: 'set-email', value})} + onChange={value => + uiDispatch({type: 'set-verification-phone', value}) + } accessibilityLabel={_(msg`Email`)} - accessibilityHint={_(msg`Input email for Bluesky waitlist`)} - accessibilityLabelledBy="email" + accessibilityHint={_( + msg`Input phone number for SMS verification`, + )} + accessibilityLabelledBy="phoneNumber" + keyboardType="phone-pad" autoCapitalize="none" - autoComplete="off" + autoComplete="tel" autoCorrect={false} + autoFocus={true} /> + <Text type="sm" style={[pal.textLight, s.mt5]}> + <Trans> + Please enter a phone number that can receive SMS text messages. + </Trans> + </Text> </View> + <View style={isMobile ? {} : {flexDirection: 'row'}}> + {uiState.isProcessing ? ( + <ActivityIndicator /> + ) : ( + <Button + testID="requestCodeBtn" + type="primary" + label={_(msg`Request code`)} + labelStyle={isMobile ? [s.flex1, s.textCenter, s.f17] : []} + style={ + isMobile ? {paddingVertical: 12, paddingHorizontal: 20} : {} + } + onPress={onPressRequest} + /> + )} + </View> + </> + ) : ( + <> <View style={s.pb20}> - <Text - type="md-medium" - style={[pal.text, s.mb2]} - nativeID="password"> - <Trans>Password</Trans> - </Text> + <View + style={[ + s.flexRow, + s.mb5, + s.alignCenter, + {justifyContent: 'space-between'}, + ]}> + <Text + type="md-medium" + style={pal.text} + nativeID="verificationCode"> + <Trans>Verification code</Trans>{' '} + </Text> + <TouchableWithoutFeedback + onPress={onPressRetry} + accessibilityLabel={_(msg`Retry.`)} + accessibilityHint=""> + <View style={styles.touchable}> + <Text + type="md-medium" + style={pal.link} + nativeID="verificationCode"> + <Trans>Retry</Trans> + </Text> + </View> + </TouchableWithoutFeedback> + </View> <TextInput - testID="passwordInput" - icon="lock" - placeholder={_(msg`Choose your password`)} - value={uiState.password} + testID="codeInput" + icon="hashtag" + placeholder={_(msg`XXXXXX`)} + value={uiState.verificationCode} editable - secureTextEntry - onChange={value => uiDispatch({type: 'set-password', value})} - accessibilityLabel={_(msg`Password`)} - accessibilityHint={_(msg`Set password`)} - accessibilityLabelledBy="password" + onChange={value => + uiDispatch({type: 'set-verification-code', value}) + } + accessibilityLabel={_(msg`Email`)} + accessibilityHint={_( + msg`Input the verification code we have texted to you`, + )} + accessibilityLabelledBy="verificationCode" + keyboardType="phone-pad" autoCapitalize="none" - autoComplete="off" + autoComplete="one-time-code" + textContentType="oneTimeCode" autoCorrect={false} + autoFocus={true} /> - </View> - - <View style={s.pb20}> - <Text - type="md-medium" - style={[pal.text, s.mb2]} - nativeID="birthDate"> - <Trans>Your birth date</Trans> + <Text type="sm" style={[pal.textLight, s.mt5]}> + <Trans>Please enter the verification code sent to</Trans>{' '} + {phoneNumberFormatted}. </Text> - <DateInput - handleAsUTC - testID="birthdayInput" - value={birthDate} - onChange={value => uiDispatch({type: 'set-birth-date', value})} - buttonType="default-light" - buttonStyle={[pal.border, styles.dateInputButton]} - buttonLabelType="lg" - accessibilityLabel={_(msg`Birthday`)} - accessibilityHint={_(msg`Enter your birth date`)} - accessibilityLabelledBy="birthDate" - /> </View> - - {uiState.serviceDescription && ( - <Policies - serviceDescription={uiState.serviceDescription} - needsGuardian={!is18(uiState)} - /> - )} </> )} + {uiState.error ? ( <ErrorMessage message={uiState.error} style={styles.error} /> ) : undefined} @@ -179,11 +193,6 @@ const styles = StyleSheet.create({ borderRadius: 6, marginTop: 10, }, - dateInputButton: { - borderWidth: 1, - borderRadius: 6, - paddingVertical: 14, - }, // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832. touchable: { ...(isWeb && {cursor: 'pointer'}), diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx index 2b2b9f7fe..bc7956da4 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/view/com/auth/create/Step3.tsx @@ -25,7 +25,7 @@ export function Step3({ const {_} = useLingui() return ( <View> - <StepHeader step="3" title={_(msg`Your user handle`)} /> + <StepHeader uiState={uiState} title={_(msg`Your user handle`)} /> <View style={s.pb10}> <TextInput testID="handleInput" diff --git a/src/view/com/auth/create/StepHeader.tsx b/src/view/com/auth/create/StepHeader.tsx index 41f912051..af6bf5478 100644 --- a/src/view/com/auth/create/StepHeader.tsx +++ b/src/view/com/auth/create/StepHeader.tsx @@ -3,27 +3,42 @@ import {StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {Trans} from '@lingui/macro' +import {CreateAccountState} from './state' -export function StepHeader({step, title}: {step: string; title: string}) { +export function StepHeader({ + uiState, + title, + children, +}: React.PropsWithChildren<{uiState: CreateAccountState; title: string}>) { const pal = usePalette('default') + const numSteps = uiState.isPhoneVerificationRequired ? 3 : 2 return ( <View style={styles.container}> - <Text type="lg" style={[pal.textLight]}> - {step === '3' ? ( - <Trans>Last step!</Trans> - ) : ( - <Trans>Step {step} of 3</Trans> - )} - </Text> - <Text style={[pal.text]} type="title-xl"> - {title} - </Text> + <View> + <Text type="lg" style={[pal.textLight]}> + {uiState.step === 3 ? ( + <Trans>Last step!</Trans> + ) : ( + <Trans> + Step {uiState.step} of {numSteps} + </Trans> + )} + </Text> + + <Text style={[pal.text]} type="title-xl"> + {title} + </Text> + </View> + {children} </View> ) } const styles = StyleSheet.create({ container: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', marginBottom: 20, }, }) diff --git a/src/view/com/auth/create/state.ts b/src/view/com/auth/create/state.ts index 62a8495b3..7e0310bb3 100644 --- a/src/view/com/auth/create/state.ts +++ b/src/view/com/auth/create/state.ts @@ -2,6 +2,7 @@ import {useReducer} from 'react' import { ComAtprotoServerDescribeServer, ComAtprotoServerCreateAccount, + BskyAgent, } from '@atproto/api' import {I18nContext, useLingui} from '@lingui/react' import {msg} from '@lingui/macro' @@ -13,6 +14,7 @@ import {cleanError} from '#/lib/strings/errors' import {DispatchContext as OnboardingDispatchContext} from '#/state/shell/onboarding' import {ApiContext as SessionApiContext} from '#/state/session' import {DEFAULT_SERVICE} from '#/lib/constants' +import parsePhoneNumber from 'libphonenumber-js' export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago @@ -27,6 +29,9 @@ export type CreateAccountAction = | {type: 'set-invite-code'; value: string} | {type: 'set-email'; value: string} | {type: 'set-password'; value: string} + | {type: 'set-verification-phone'; value: string} + | {type: 'set-verification-code'; value: string} + | {type: 'set-has-requested-verification-code'; value: boolean} | {type: 'set-handle'; value: string} | {type: 'set-birth-date'; value: Date} | {type: 'next'} @@ -43,6 +48,9 @@ export interface CreateAccountState { inviteCode: string email: string password: string + verificationPhone: string + verificationCode: string + hasRequestedVerificationCode: boolean handle: string birthDate: Date @@ -50,6 +58,7 @@ export interface CreateAccountState { canBack: boolean canNext: boolean isInviteCodeRequired: boolean + isPhoneVerificationRequired: boolean } export type CreateAccountDispatch = (action: CreateAccountAction) => void @@ -66,15 +75,51 @@ export function useCreateAccount() { inviteCode: '', email: '', password: '', + verificationPhone: '', + verificationCode: '', + hasRequestedVerificationCode: false, handle: '', birthDate: DEFAULT_DATE, canBack: false, canNext: false, isInviteCodeRequired: false, + isPhoneVerificationRequired: false, }) } +export async function requestVerificationCode({ + uiState, + uiDispatch, + _, +}: { + uiState: CreateAccountState + uiDispatch: CreateAccountDispatch + _: I18nContext['_'] +}) { + const phoneNumber = parsePhoneNumber(uiState.verificationPhone, 'US')?.number + if (!phoneNumber) { + return + } + uiDispatch({type: 'set-error', value: ''}) + uiDispatch({type: 'set-processing', value: true}) + uiDispatch({type: 'set-verification-phone', value: phoneNumber}) + try { + const agent = new BskyAgent({service: uiState.serviceUrl}) + await agent.com.atproto.temp.requestPhoneVerification({ + phoneNumber, + }) + uiDispatch({type: 'set-has-requested-verification-code', value: true}) + } catch (e: any) { + logger.error( + `Failed to request sms verification code (${e.status} status)`, + {error: e}, + ) + uiDispatch({type: 'set-error', value: cleanError(e.toString())}) + } + uiDispatch({type: 'set-processing', value: false}) +} + export async function submit({ createAccount, onboardingDispatch, @@ -89,26 +134,36 @@ export async function submit({ _: I18nContext['_'] }) { if (!uiState.email) { - uiDispatch({type: 'set-step', value: 2}) + uiDispatch({type: 'set-step', value: 1}) return uiDispatch({ type: 'set-error', value: _(msg`Please enter your email.`), }) } if (!EmailValidator.validate(uiState.email)) { - uiDispatch({type: 'set-step', value: 2}) + uiDispatch({type: 'set-step', value: 1}) return uiDispatch({ type: 'set-error', value: _(msg`Your email appears to be invalid.`), }) } if (!uiState.password) { - uiDispatch({type: 'set-step', value: 2}) + uiDispatch({type: 'set-step', value: 1}) return uiDispatch({ type: 'set-error', value: _(msg`Please choose your password.`), }) } + if ( + uiState.isPhoneVerificationRequired && + (!uiState.verificationPhone || !uiState.verificationCode) + ) { + uiDispatch({type: 'set-step', value: 2}) + return uiDispatch({ + type: 'set-error', + value: _(msg`Please enter the code you received by SMS.`), + }) + } if (!uiState.handle) { uiDispatch({type: 'set-step', value: 3}) return uiDispatch({ @@ -127,6 +182,8 @@ export async function submit({ handle: createFullHandle(uiState.handle, uiState.userDomain), password: uiState.password, inviteCode: uiState.inviteCode.trim(), + verificationPhone: uiState.verificationPhone.trim(), + verificationCode: uiState.verificationCode.trim(), }) } catch (e: any) { onboardingDispatch({type: 'skip'}) // undo starting the onboard @@ -135,6 +192,9 @@ export async function submit({ errMsg = _( msg`Invite code not accepted. Check that you input it correctly and try again.`, ) + uiDispatch({type: 'set-step', value: 1}) + } else if (e.error === 'InvalidPhoneVerification') { + uiDispatch({type: 'set-step', value: 2}) } if ([400, 429].includes(e.status)) { @@ -201,6 +261,19 @@ function createReducer({_}: {_: I18nContext['_']}) { case 'set-password': { return compute({...state, password: action.value}) } + case 'set-verification-phone': { + return compute({ + ...state, + verificationPhone: action.value, + hasRequestedVerificationCode: false, + }) + } + case 'set-verification-code': { + return compute({...state, verificationCode: action.value.trim()}) + } + case 'set-has-requested-verification-code': { + return compute({...state, hasRequestedVerificationCode: action.value}) + } case 'set-handle': { return compute({...state, handle: action.value}) } @@ -208,7 +281,7 @@ function createReducer({_}: {_: I18nContext['_']}) { return compute({...state, birthDate: action.value}) } case 'next': { - if (state.step === 2) { + if (state.step === 1) { if (!is13(state)) { return compute({ ...state, @@ -218,10 +291,18 @@ function createReducer({_}: {_: I18nContext['_']}) { }) } } - return compute({...state, error: '', step: state.step + 1}) + let increment = 1 + if (state.step === 1 && !state.isPhoneVerificationRequired) { + increment = 2 + } + return compute({...state, error: '', step: state.step + increment}) } case 'back': { - return compute({...state, error: '', step: state.step - 1}) + let decrement = 1 + if (state.step === 3 && !state.isPhoneVerificationRequired) { + decrement = 2 + } + return compute({...state, error: '', step: state.step - decrement}) } } } @@ -230,12 +311,16 @@ function createReducer({_}: {_: I18nContext['_']}) { function compute(state: CreateAccountState): CreateAccountState { let canNext = true if (state.step === 1) { - canNext = !!state.serviceDescription - } else if (state.step === 2) { canNext = + !!state.serviceDescription && (!state.isInviteCodeRequired || !!state.inviteCode) && !!state.email && !!state.password + } else if (state.step === 2) { + canNext = + !state.isPhoneVerificationRequired || + (!!state.verificationPhone && + isValidVerificationCode(state.verificationCode)) } else if (state.step === 3) { canNext = !!state.handle } @@ -244,5 +329,11 @@ function compute(state: CreateAccountState): CreateAccountState { canBack: state.step > 1, canNext, isInviteCodeRequired: !!state.serviceDescription?.inviteCodeRequired, + isPhoneVerificationRequired: + !!state.serviceDescription?.phoneVerificationRequired, } } + +function isValidVerificationCode(str: string): boolean { + return /[0-9]{6}/.test(str) +} diff --git a/src/view/icons/index.tsx b/src/view/icons/index.tsx index 221b9702c..be139d2f2 100644 --- a/src/view/icons/index.tsx +++ b/src/view/icons/index.tsx @@ -52,6 +52,7 @@ import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe' import {faHand} from '@fortawesome/free-solid-svg-icons/faHand' import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' +import {faHashtag} from '@fortawesome/free-solid-svg-icons/faHashtag' import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' @@ -71,6 +72,7 @@ import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' import {faPen} from '@fortawesome/free-solid-svg-icons/faPen' import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib' import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare' +import {faPhone} from '@fortawesome/free-solid-svg-icons/faPhone' import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay' import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus' import {faQuoteLeft} from '@fortawesome/free-solid-svg-icons/faQuoteLeft' @@ -78,6 +80,7 @@ import {faReply} from '@fortawesome/free-solid-svg-icons/faReply' import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet' import {faRss} from '@fortawesome/free-solid-svg-icons/faRss' import {faSatelliteDish} from '@fortawesome/free-solid-svg-icons/faSatelliteDish' +import {faServer} from '@fortawesome/free-solid-svg-icons/faServer' import {faShare} from '@fortawesome/free-solid-svg-icons/faShare' import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare' import {faShield} from '@fortawesome/free-solid-svg-icons/faShield' @@ -153,6 +156,7 @@ library.add( faGlobe, faHand, farHand, + faHashtag, faHeart, fasHeart, faHouse, @@ -172,6 +176,7 @@ library.add( faPen, faPenNib, faPenToSquare, + faPhone, faPlay, faPlus, faQuoteLeft, @@ -179,6 +184,7 @@ library.add( faRetweet, faRss, faSatelliteDish, + faServer, faShare, faShareFromSquare, faShield, diff --git a/yarn.lock b/yarn.lock index cc3c36031..3a7756939 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48,10 +48,10 @@ typed-emitter "^2.1.0" zod "^3.21.4" -"@atproto/api@^0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.8.0.tgz#57ef1f6292d05ba851e3acec575139cfc4fd7a7a" - integrity sha512-FgPOoij/PAEa0YoLKqj5NFYBvysdyb13gtS2XpJOdIvUZ2KehMlTrtj7g0AR78pRfME2jJjIgmAw6qpmSsjSTw== +"@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== dependencies: "@atproto/common-web" "^0.2.3" "@atproto/lexicon" "^0.3.1" @@ -15075,6 +15075,11 @@ levn@^0.4.1: prelude-ls "^1.2.1" type-check "~0.4.0" +libphonenumber-js@^1.10.53: + version "1.10.53" + resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.53.tgz#8dbfe1355ef1a3d8e13b8d92849f7db7ebddc98f" + integrity sha512-sDTnnqlWK4vH4AlDQuswz3n4Hx7bIQWTpIcScJX+Sp7St3LXHmfiax/ZFfyYxHmkdCvydOLSuvtAO/XpXiSySw== + lie@3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e" |