+2 -25

src/view/com/auth/create/Step1.tsx

··· 4 4 Keyboard, 5 5 StyleSheet, 6 6 TouchableOpacity, 7 7 - TouchableWithoutFeedback, 8 7 View, 9 8 } from 'react-native' 10 9 import {CreateAccountState, CreateAccountDispatch, is18} from './state' ··· 19 18 import {isWeb} from 'platform/detection' 20 19 import {Trans, msg} from '@lingui/macro' 21 20 import {useLingui} from '@lingui/react' 22 22 - import {useModalControls} from '#/state/modals' 23 21 import {logger} from '#/logger' 24 22 import { 25 23 FontAwesomeIcon, ··· 49 47 }) { 50 48 const pal = usePalette('default') 51 49 const {_} = useLingui() 52 52 - const {openModal} = useModalControls() 53 50 const serverInputControl = useDialogControl() 54 51 55 52 const onPressSelectService = React.useCallback(() => { 56 53 serverInputControl.open() 57 54 Keyboard.dismiss() 58 55 }, [serverInputControl]) 59 59 - 60 60 - const onPressWaitlist = React.useCallback(() => { 61 61 - openModal({name: 'waitlist'}) 62 62 - }, [openModal]) 63 56 64 57 const birthDate = React.useMemo(() => { 65 58 return sanitizeDate(uiState.birthDate) ··· 164 157 </View> 165 158 )} 166 159 167 167 - {!uiState.inviteCode && uiState.isInviteCodeRequired ? ( 168 168 - <View style={[s.flexRow, s.alignCenter]}> 169 169 - <Text style={pal.text}> 170 170 - <Trans>Don't have an invite code?</Trans>{' '} 171 171 - </Text> 172 172 - <TouchableWithoutFeedback 173 173 - onPress={onPressWaitlist} 174 174 - accessibilityLabel={_(msg`Join the waitlist.`)} 175 175 - accessibilityHint=""> 176 176 - <View style={styles.touchable}> 177 177 - <Text style={pal.link}> 178 178 - <Trans>Join the waitlist.</Trans> 179 179 - </Text> 180 180 - </View> 181 181 - </TouchableWithoutFeedback> 182 182 - </View> 183 183 - ) : ( 160 160 + {uiState.inviteCode ? ( 184 161 <> 185 162 <View style={s.pb20}> 186 163 <Text ··· 260 237 /> 261 238 )} 262 239 </> 263 263 - )} 240 240 + ) : undefined} 264 241 </> 265 242 )} 266 243 </View>

-4

src/view/com/modals/Modal.tsx

··· 20 20 import * as AppealLabelModal from './AppealLabel' 21 21 import * as DeleteAccountModal from './DeleteAccount' 22 22 import * as ChangeHandleModal from './ChangeHandle' 23 23 - import * as WaitlistModal from './Waitlist' 24 23 import * as InviteCodesModal from './InviteCodes' 25 24 import * as AddAppPassword from './AddAppPasswords' 26 25 import * as ContentFilteringSettingsModal from './ContentFilteringSettings' ··· 109 108 } else if (activeModal?.name === 'change-handle') { 110 109 snapPoints = ChangeHandleModal.snapPoints 111 110 element = <ChangeHandleModal.Component {...activeModal} /> 112 112 - } else if (activeModal?.name === 'waitlist') { 113 113 - snapPoints = WaitlistModal.snapPoints 114 114 - element = <WaitlistModal.Component /> 115 111 } else if (activeModal?.name === 'invite-codes') { 116 112 snapPoints = InviteCodesModal.snapPoints 117 113 element = <InviteCodesModal.Component />

-3

src/view/com/modals/Modal.web.tsx

··· 22 22 import * as AltTextImageModal from './AltImage' 23 23 import * as EditImageModal from './EditImage' 24 24 import * as ChangeHandleModal from './ChangeHandle' 25 25 - import * as WaitlistModal from './Waitlist' 26 25 import * as InviteCodesModal from './InviteCodes' 27 26 import * as AddAppPassword from './AddAppPasswords' 28 27 import * as ContentFilteringSettingsModal from './ContentFilteringSettings' ··· 105 104 element = <ThreadgateModal.Component {...modal} /> 106 105 } else if (modal.name === 'change-handle') { 107 106 element = <ChangeHandleModal.Component {...modal} /> 108 108 - } else if (modal.name === 'waitlist') { 109 109 - element = <WaitlistModal.Component /> 110 107 } else if (modal.name === 'invite-codes') { 111 108 element = <InviteCodesModal.Component /> 112 109 } else if (modal.name === 'add-app-password') {

-190

src/view/com/modals/Waitlist.tsx

··· 1 1 - import React from 'react' 2 2 - import { 3 3 - ActivityIndicator, 4 4 - StyleSheet, 5 5 - TouchableOpacity, 6 6 - View, 7 7 - } from 'react-native' 8 8 - import {TextInput} from './util' 9 9 - import { 10 10 - FontAwesomeIcon, 11 11 - FontAwesomeIconStyle, 12 12 - } from '@fortawesome/react-native-fontawesome' 13 13 - import LinearGradient from 'react-native-linear-gradient' 14 14 - import {Text} from '../util/text/Text' 15 15 - import {s, gradients} from 'lib/styles' 16 16 - import {usePalette} from 'lib/hooks/usePalette' 17 17 - import {useTheme} from 'lib/ThemeContext' 18 18 - import {ErrorMessage} from '../util/error/ErrorMessage' 19 19 - import {cleanError} from 'lib/strings/errors' 20 20 - import {Trans, msg} from '@lingui/macro' 21 21 - import {useLingui} from '@lingui/react' 22 22 - import {useModalControls} from '#/state/modals' 23 23 - 24 24 - export const snapPoints = ['80%'] 25 25 - 26 26 - export function Component({}: {}) { 27 27 - const pal = usePalette('default') 28 28 - const theme = useTheme() 29 29 - const {_} = useLingui() 30 30 - const {closeModal} = useModalControls() 31 31 - const [email, setEmail] = React.useState<string>('') 32 32 - const [isEmailSent, setIsEmailSent] = React.useState<boolean>(false) 33 33 - const [isProcessing, setIsProcessing] = React.useState<boolean>(false) 34 34 - const [error, setError] = React.useState<string>('') 35 35 - 36 36 - const onPressSignup = async () => { 37 37 - setError('') 38 38 - setIsProcessing(true) 39 39 - try { 40 40 - const res = await fetch('https://bsky.app/api/waitlist', { 41 41 - method: 'POST', 42 42 - headers: {'Content-Type': 'application/json'}, 43 43 - body: JSON.stringify({email}), 44 44 - }) 45 45 - const resBody = await res.json() 46 46 - if (resBody.success) { 47 47 - setIsEmailSent(true) 48 48 - } else { 49 49 - setError( 50 50 - resBody.error || 51 51 - _(msg`Something went wrong. Check your email and try again.`), 52 52 - ) 53 53 - } 54 54 - } catch (e: any) { 55 55 - setError(cleanError(e)) 56 56 - } 57 57 - setIsProcessing(false) 58 58 - } 59 59 - const onCancel = () => { 60 60 - closeModal() 61 61 - } 62 62 - 63 63 - return ( 64 64 - <View style={[styles.container, pal.view]}> 65 65 - <View style={[styles.innerContainer, pal.view]}> 66 66 - <Text type="title-xl" style={[styles.title, pal.text]}> 67 67 - <Trans>Join the waitlist</Trans> 68 68 - </Text> 69 69 - <Text type="lg" style={[styles.description, pal.text]}> 70 70 - <Trans> 71 71 - Bluesky uses invites to build a healthier community. If you don't 72 72 - know anybody with an invite, you can sign up for the waitlist and 73 73 - we'll send one soon. 74 74 - </Trans> 75 75 - </Text> 76 76 - <TextInput 77 77 - style={[styles.textInput, pal.borderDark, pal.text, s.mb10, s.mt10]} 78 78 - placeholder={_(msg`Enter your email`)} 79 79 - placeholderTextColor={pal.textLight.color} 80 80 - autoCapitalize="none" 81 81 - autoCorrect={false} 82 82 - keyboardAppearance={theme.colorScheme} 83 83 - value={email} 84 84 - onChangeText={setEmail} 85 85 - onSubmitEditing={onPressSignup} 86 86 - enterKeyHint="done" 87 87 - accessible={true} 88 88 - accessibilityLabel={_(msg`Email`)} 89 89 - accessibilityHint={_( 90 90 - msg`Input your email to get on the Bluesky waitlist`, 91 91 - )} 92 92 - /> 93 93 - {error ? ( 94 94 - <View style={s.mt10}> 95 95 - <ErrorMessage message={error} style={styles.error} /> 96 96 - </View> 97 97 - ) : undefined} 98 98 - {isProcessing ? ( 99 99 - <View style={[styles.btn, s.mt10]}> 100 100 - <ActivityIndicator /> 101 101 - </View> 102 102 - ) : isEmailSent ? ( 103 103 - <View style={[styles.btn, s.mt10]}> 104 104 - <FontAwesomeIcon 105 105 - icon="check" 106 106 - style={pal.text as FontAwesomeIconStyle} 107 107 - /> 108 108 - <Text style={[s.ml10, pal.text]}> 109 109 - <Trans> 110 110 - Your email has been saved! We&apos;ll be in touch soon. 111 111 - </Trans> 112 112 - </Text> 113 113 - </View> 114 114 - ) : ( 115 115 - <> 116 116 - <TouchableOpacity 117 117 - onPress={onPressSignup} 118 118 - accessibilityRole="button" 119 119 - accessibilityHint={_( 120 120 - msg`Confirms signing up ${email} to the waitlist`, 121 121 - )}> 122 122 - <LinearGradient 123 123 - colors={[gradients.blueLight.start, gradients.blueLight.end]} 124 124 - start={{x: 0, y: 0}} 125 125 - end={{x: 1, y: 1}} 126 126 - style={[styles.btn]}> 127 127 - <Text type="button-lg" style={[s.white, s.bold]}> 128 128 - <Trans>Join Waitlist</Trans> 129 129 - </Text> 130 130 - </LinearGradient> 131 131 - </TouchableOpacity> 132 132 - <TouchableOpacity 133 133 - style={[styles.btn, s.mt10]} 134 134 - onPress={onCancel} 135 135 - accessibilityRole="button" 136 136 - accessibilityLabel={_(msg`Cancel waitlist signup`)} 137 137 - accessibilityHint={_( 138 138 - msg`Exits signing up for waitlist with ${email}`, 139 139 - )} 140 140 - onAccessibilityEscape={onCancel}> 141 141 - <Text type="button-lg" style={pal.textLight}> 142 142 - <Trans>Cancel</Trans> 143 143 - </Text> 144 144 - </TouchableOpacity> 145 145 - </> 146 146 - )} 147 147 - </View> 148 148 - </View> 149 149 - ) 150 150 - } 151 151 - 152 152 - const styles = StyleSheet.create({ 153 153 - container: { 154 154 - flex: 1, 155 155 - }, 156 156 - innerContainer: { 157 157 - paddingBottom: 20, 158 158 - }, 159 159 - title: { 160 160 - textAlign: 'center', 161 161 - marginTop: 12, 162 162 - marginBottom: 12, 163 163 - }, 164 164 - description: { 165 165 - textAlign: 'center', 166 166 - paddingHorizontal: 22, 167 167 - marginBottom: 10, 168 168 - }, 169 169 - textInput: { 170 170 - borderWidth: 1, 171 171 - borderRadius: 6, 172 172 - paddingHorizontal: 16, 173 173 - paddingVertical: 12, 174 174 - fontSize: 20, 175 175 - marginHorizontal: 20, 176 176 - }, 177 177 - btn: { 178 178 - flexDirection: 'row', 179 179 - alignItems: 'center', 180 180 - justifyContent: 'center', 181 181 - borderRadius: 32, 182 182 - padding: 14, 183 183 - marginHorizontal: 20, 184 184 - }, 185 185 - error: { 186 186 - borderRadius: 6, 187 187 - marginHorizontal: 20, 188 188 - marginBottom: 20, 189 189 - }, 190 190 - })