+1 -1

package.json

··· 25 25 "build:apk": "eas build -p android --profile dev-android-apk" 26 26 }, 27 27 "dependencies": { 28 28 - "@atproto/api": "^0.6.16", 28 28 + "@atproto/api": "^0.6.20", 29 29 "@bam.tech/react-native-image-resizer": "^3.0.4", 30 30 "@braintree/sanitize-url": "^6.0.2", 31 31 "@emoji-mart/react": "^1.1.1",

+17

src/lib/strings/helpers.ts

··· 15 15 } 16 16 return str 17 17 } 18 18 + 19 19 + // https://stackoverflow.com/a/52171480 20 20 + export function toHashCode(str: string, seed = 0): number { 21 21 + let h1 = 0xdeadbeef ^ seed, 22 22 + h2 = 0x41c6ce57 ^ seed 23 23 + for (let i = 0, ch; i < str.length; i++) { 24 24 + ch = str.charCodeAt(i) 25 25 + h1 = Math.imul(h1 ^ ch, 2654435761) 26 26 + h2 = Math.imul(h2 ^ ch, 1597334677) 27 27 + } 28 28 + h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) 29 29 + h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909) 30 30 + h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) 31 31 + h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909) 32 32 + 33 33 + return 4294967296 * (2097151 & h2) + (h1 >>> 0) 34 34 + }

+6

src/state/models/root-store.ts

··· 21 21 import {resetToTab} from '../../Navigation' 22 22 import {ImageSizesCache} from './cache/image-sizes' 23 23 import {MutedThreads} from './muted-threads' 24 24 + import {Reminders} from './ui/reminders' 24 25 import {reset as resetNavigation} from '../../Navigation' 25 26 26 27 // TEMPORARY (APP-700) ··· 53 54 linkMetas = new LinkMetasCache(this) 54 55 imageSizes = new ImageSizesCache() 55 56 mutedThreads = new MutedThreads() 57 57 + reminders = new Reminders(this) 56 58 57 59 constructor(agent: BskyAgent) { 58 60 this.agent = agent ··· 77 79 preferences: this.preferences.serialize(), 78 80 invitedUsers: this.invitedUsers.serialize(), 79 81 mutedThreads: this.mutedThreads.serialize(), 82 82 + reminders: this.reminders.serialize(), 80 83 } 81 84 } 82 85 ··· 108 111 } 109 112 if (hasProp(v, 'mutedThreads')) { 110 113 this.mutedThreads.hydrate(v.mutedThreads) 114 114 + } 115 115 + if (hasProp(v, 'reminders')) { 116 116 + this.reminders.hydrate(v.reminders) 111 117 } 112 118 } 113 119 }

+16

src/state/models/session.ts

··· 30 30 email: z.string().optional(), 31 31 displayName: z.string().optional(), 32 32 aviUrl: z.string().optional(), 33 33 + emailConfirmed: z.boolean().optional(), 33 34 }) 34 35 export type AccountData = z.infer<typeof accountData> 35 36 ··· 104 105 105 106 get switchableAccounts() { 106 107 return this.accounts.filter(acct => acct.did !== this.data?.did) 108 108 + } 109 109 + 110 110 + get emailNeedsConfirmation() { 111 111 + return !this.currentSession?.emailConfirmed 107 112 } 108 113 109 114 get isSandbox() { ··· 217 222 ? addedInfo.displayName 218 223 : existingAccount?.displayName || '', 219 224 aviUrl: addedInfo ? addedInfo.aviUrl : existingAccount?.aviUrl || '', 225 225 + emailConfirmed: session?.emailConfirmed, 220 226 } 221 227 if (!existingAccount) { 222 228 this.accounts.push(newAccount) ··· 246 252 did: acct.did, 247 253 displayName: acct.displayName, 248 254 aviUrl: acct.aviUrl, 255 255 + email: acct.email, 256 256 + emailConfirmed: acct.emailConfirmed, 249 257 })) 250 258 } 251 259 ··· 297 305 refreshJwt: account.refreshJwt || '', 298 306 did: account.did, 299 307 handle: account.handle, 308 308 + email: account.email, 309 309 + emailConfirmed: account.emailConfirmed, 300 310 }), 301 311 ) 302 312 const addedInfo = await this.loadAccountInfo(agent, account.did) ··· 451 461 }) 452 462 await this.rootStore.me.load() 453 463 } 464 464 + } 465 465 + 466 466 + updateLocalAccountData(changes: Partial<AccountData>) { 467 467 + this.accounts = this.accounts.map(acct => 468 468 + acct.did === this.data?.did ? {...acct, ...changes} : acct, 469 469 + ) 454 470 } 455 471 }

+65

src/state/models/ui/reminders.ts

··· 1 1 + import {makeAutoObservable} from 'mobx' 2 2 + import {isObj, hasProp} from 'lib/type-guards' 3 3 + import {RootStoreModel} from '../root-store' 4 4 + import {toHashCode} from 'lib/strings/helpers' 5 5 + 6 6 + const DAY = 60e3 * 24 * 1 // 1 day (ms) 7 7 + 8 8 + export class Reminders { 9 9 + // NOTE 10 10 + // by defaulting to the current date, we ensure that the user won't be nagged 11 11 + // on first run (aka right after creating an account) 12 12 + // -prf 13 13 + lastEmailConfirm: Date = new Date() 14 14 + 15 15 + constructor(public rootStore: RootStoreModel) { 16 16 + makeAutoObservable( 17 17 + this, 18 18 + {serialize: false, hydrate: false}, 19 19 + {autoBind: true}, 20 20 + ) 21 21 + } 22 22 + 23 23 + serialize() { 24 24 + return { 25 25 + lastEmailConfirm: this.lastEmailConfirm 26 26 + ? this.lastEmailConfirm.toISOString() 27 27 + : undefined, 28 28 + } 29 29 + } 30 30 + 31 31 + hydrate(v: unknown) { 32 32 + if ( 33 33 + isObj(v) && 34 34 + hasProp(v, 'lastEmailConfirm') && 35 35 + typeof v.lastEmailConfirm === 'string' 36 36 + ) { 37 37 + this.lastEmailConfirm = new Date(v.lastEmailConfirm) 38 38 + } 39 39 + } 40 40 + 41 41 + get shouldRequestEmailConfirmation() { 42 42 + const sess = this.rootStore.session.currentSession 43 43 + if (!sess) { 44 44 + return false 45 45 + } 46 46 + if (sess.emailConfirmed) { 47 47 + return false 48 48 + } 49 49 + const today = new Date() 50 50 + // shard the users into 2 day of the week buckets 51 51 + // (this is to avoid a sudden influx of email updates when 52 52 + // this feature rolls out) 53 53 + const code = toHashCode(sess.did) % 7 54 54 + if (code !== today.getDay() && code !== (today.getDay() + 1) % 7) { 55 55 + return false 56 56 + } 57 57 + // only ask once a day at most, but because of the bucketing 58 58 + // this will be more like weekly 59 59 + return Number(today) - Number(this.lastEmailConfirm) > DAY 60 60 + } 61 61 + 62 62 + setEmailConfirmationRequested() { 63 63 + this.lastEmailConfirm = new Date() 64 64 + } 65 65 + }

+22

src/state/models/ui/shell.ts

··· 24 24 onPressCancel?: () => void | Promise<void> 25 25 confirmBtnText?: string 26 26 confirmBtnStyle?: StyleProp<ViewStyle> 27 27 + cancelBtnText?: string 27 28 } 28 29 29 30 export interface EditProfileModal { ··· 140 141 name: 'birth-date-settings' 141 142 } 142 143 144 144 + export interface VerifyEmailModal { 145 145 + name: 'verify-email' 146 146 + showReminder?: boolean 147 147 + } 148 148 + 149 149 + export interface ChangeEmailModal { 150 150 + name: 'change-email' 151 151 + } 152 152 + 143 153 export type Modal = 144 154 // Account 145 155 | AddAppPasswordModal ··· 148 158 | EditProfileModal 149 159 | ProfilePreviewModal 150 160 | BirthDateSettingsModal 161 161 + | VerifyEmailModal 162 162 + | ChangeEmailModal 151 163 152 164 // Curation 153 165 | ContentFilteringSettingsModal ··· 250 262 }) 251 263 252 264 this.setupClock() 265 265 + this.setupLoginModals() 253 266 } 254 267 255 268 serialize(): unknown { ··· 374 387 this.tickEveryMinute = Date.now() 375 388 }) 376 389 }, 60_000) 390 390 + } 391 391 + 392 392 + setupLoginModals() { 393 393 + this.rootStore.onSessionReady(() => { 394 394 + if (this.rootStore.reminders.shouldRequestEmailConfirmation) { 395 395 + this.openModal({name: 'verify-email', showReminder: true}) 396 396 + this.rootStore.reminders.setEmailConfirmationRequested() 397 397 + } 398 398 + }) 377 399 } 378 400 }

+280

src/view/com/modals/ChangeEmail.tsx

··· 1 1 + import React, {useState} from 'react' 2 2 + import { 3 3 + ActivityIndicator, 4 4 + KeyboardAvoidingView, 5 5 + SafeAreaView, 6 6 + StyleSheet, 7 7 + View, 8 8 + } from 'react-native' 9 9 + import {ScrollView, TextInput} from './util' 10 10 + import {observer} from 'mobx-react-lite' 11 11 + import {Text} from '../util/text/Text' 12 12 + import {Button} from '../util/forms/Button' 13 13 + import {ErrorMessage} from '../util/error/ErrorMessage' 14 14 + import * as Toast from '../util/Toast' 15 15 + import {useStores} from 'state/index' 16 16 + import {s, colors} from 'lib/styles' 17 17 + import {usePalette} from 'lib/hooks/usePalette' 18 18 + import {isWeb} from 'platform/detection' 19 19 + import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 20 20 + import {cleanError} from 'lib/strings/errors' 21 21 + 22 22 + enum Stages { 23 23 + InputEmail, 24 24 + ConfirmCode, 25 25 + Done, 26 26 + } 27 27 + 28 28 + export const snapPoints = ['90%'] 29 29 + 30 30 + export const Component = observer(function Component({}: {}) { 31 31 + const pal = usePalette('default') 32 32 + const store = useStores() 33 33 + const [stage, setStage] = useState<Stages>(Stages.InputEmail) 34 34 + const [email, setEmail] = useState<string>( 35 35 + store.session.currentSession?.email || '', 36 36 + ) 37 37 + const [confirmationCode, setConfirmationCode] = useState<string>('') 38 38 + const [isProcessing, setIsProcessing] = useState<boolean>(false) 39 39 + const [error, setError] = useState<string>('') 40 40 + const {isMobile} = useWebMediaQueries() 41 41 + 42 42 + const onRequestChange = async () => { 43 43 + if (email === store.session.currentSession?.email) { 44 44 + setError('Enter your new email above') 45 45 + return 46 46 + } 47 47 + setError('') 48 48 + setIsProcessing(true) 49 49 + try { 50 50 + const res = await store.agent.com.atproto.server.requestEmailUpdate() 51 51 + if (res.data.tokenRequired) { 52 52 + setStage(Stages.ConfirmCode) 53 53 + } else { 54 54 + await store.agent.com.atproto.server.updateEmail({email: email.trim()}) 55 55 + store.session.updateLocalAccountData({ 56 56 + email: email.trim(), 57 57 + emailConfirmed: false, 58 58 + }) 59 59 + Toast.show('Email updated') 60 60 + setStage(Stages.Done) 61 61 + } 62 62 + } catch (e) { 63 63 + let err = cleanError(String(e)) 64 64 + // TEMP 65 65 + // while rollout is occuring, we're giving a temporary error message 66 66 + // you can remove this any time after Oct2023 67 67 + // -prf 68 68 + if (err === 'email must be confirmed (temporary)') { 69 69 + err = `Please confirm your email before changing it. This is a temporary requirement while email-updating tools are added, and it will soon be removed.` 70 70 + } 71 71 + setError(err) 72 72 + } finally { 73 73 + setIsProcessing(false) 74 74 + } 75 75 + } 76 76 + 77 77 + const onConfirm = async () => { 78 78 + setError('') 79 79 + setIsProcessing(true) 80 80 + try { 81 81 + await store.agent.com.atproto.server.updateEmail({ 82 82 + email: email.trim(), 83 83 + token: confirmationCode.trim(), 84 84 + }) 85 85 + store.session.updateLocalAccountData({ 86 86 + email: email.trim(), 87 87 + emailConfirmed: false, 88 88 + }) 89 89 + Toast.show('Email updated') 90 90 + setStage(Stages.Done) 91 91 + } catch (e) { 92 92 + setError(cleanError(String(e))) 93 93 + } finally { 94 94 + setIsProcessing(false) 95 95 + } 96 96 + } 97 97 + 98 98 + const onVerify = async () => { 99 99 + store.shell.closeModal() 100 100 + store.shell.openModal({name: 'verify-email'}) 101 101 + } 102 102 + 103 103 + return ( 104 104 + <KeyboardAvoidingView 105 105 + behavior="padding" 106 106 + style={[pal.view, styles.container]}> 107 107 + <SafeAreaView style={s.flex1}> 108 108 + <ScrollView 109 109 + testID="changeEmailModal" 110 110 + style={[s.flex1, isMobile && {paddingHorizontal: 18}]}> 111 111 + <View style={styles.titleSection}> 112 112 + <Text type="title-lg" style={[pal.text, styles.title]}> 113 113 + {stage === Stages.InputEmail ? 'Change Your Email' : ''} 114 114 + {stage === Stages.ConfirmCode ? 'Security Step Required' : ''} 115 115 + {stage === Stages.Done ? 'Email Updated' : ''} 116 116 + </Text> 117 117 + </View> 118 118 + 119 119 + <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}> 120 120 + {stage === Stages.InputEmail ? ( 121 121 + <>Enter your new email address below.</> 122 122 + ) : stage === Stages.ConfirmCode ? ( 123 123 + <> 124 124 + An email has been sent to your previous address,{' '} 125 125 + {store.session.currentSession?.email || ''}. It includes a 126 126 + confirmation code which you can enter below. 127 127 + </> 128 128 + ) : ( 129 129 + <> 130 130 + Your email has been updated but not verified. As a next step, 131 131 + please verify your new email. 132 132 + </> 133 133 + )} 134 134 + </Text> 135 135 + 136 136 + {stage === Stages.InputEmail && ( 137 137 + <TextInput 138 138 + testID="emailInput" 139 139 + style={[styles.textInput, pal.border, pal.text]} 140 140 + placeholder="alice@mail.com" 141 141 + placeholderTextColor={pal.colors.textLight} 142 142 + value={email} 143 143 + onChangeText={setEmail} 144 144 + accessible={true} 145 145 + accessibilityLabel="Email" 146 146 + accessibilityHint="" 147 147 + autoCapitalize="none" 148 148 + autoComplete="email" 149 149 + autoCorrect={false} 150 150 + /> 151 151 + )} 152 152 + {stage === Stages.ConfirmCode && ( 153 153 + <TextInput 154 154 + testID="confirmCodeInput" 155 155 + style={[styles.textInput, pal.border, pal.text]} 156 156 + placeholder="XXXXX-XXXXX" 157 157 + placeholderTextColor={pal.colors.textLight} 158 158 + value={confirmationCode} 159 159 + onChangeText={setConfirmationCode} 160 160 + accessible={true} 161 161 + accessibilityLabel="Confirmation code" 162 162 + accessibilityHint="" 163 163 + autoCapitalize="none" 164 164 + autoComplete="off" 165 165 + autoCorrect={false} 166 166 + /> 167 167 + )} 168 168 + 169 169 + {error ? ( 170 170 + <ErrorMessage message={error} style={styles.error} /> 171 171 + ) : undefined} 172 172 + 173 173 + <View style={[styles.btnContainer]}> 174 174 + {isProcessing ? ( 175 175 + <View style={styles.btn}> 176 176 + <ActivityIndicator color="#fff" /> 177 177 + </View> 178 178 + ) : ( 179 179 + <View style={{gap: 6}}> 180 180 + {stage === Stages.InputEmail && ( 181 181 + <Button 182 182 + testID="requestChangeBtn" 183 183 + type="primary" 184 184 + onPress={onRequestChange} 185 185 + accessibilityLabel="Request Change" 186 186 + accessibilityHint="" 187 187 + label="Request Change" 188 188 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 189 189 + labelStyle={[s.f18]} 190 190 + /> 191 191 + )} 192 192 + {stage === Stages.ConfirmCode && ( 193 193 + <Button 194 194 + testID="confirmBtn" 195 195 + type="primary" 196 196 + onPress={onConfirm} 197 197 + accessibilityLabel="Confirm Change" 198 198 + accessibilityHint="" 199 199 + label="Confirm Change" 200 200 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 201 201 + labelStyle={[s.f18]} 202 202 + /> 203 203 + )} 204 204 + {stage === Stages.Done && ( 205 205 + <Button 206 206 + testID="verifyBtn" 207 207 + type="primary" 208 208 + onPress={onVerify} 209 209 + accessibilityLabel="Verify New Email" 210 210 + accessibilityHint="" 211 211 + label="Verify New Email" 212 212 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 213 213 + labelStyle={[s.f18]} 214 214 + /> 215 215 + )} 216 216 + <Button 217 217 + testID="cancelBtn" 218 218 + type="default" 219 219 + onPress={() => store.shell.closeModal()} 220 220 + accessibilityLabel="Cancel" 221 221 + accessibilityHint="" 222 222 + label="Cancel" 223 223 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 224 224 + labelStyle={[s.f18]} 225 225 + /> 226 226 + </View> 227 227 + )} 228 228 + </View> 229 229 + </ScrollView> 230 230 + </SafeAreaView> 231 231 + </KeyboardAvoidingView> 232 232 + ) 233 233 + }) 234 234 + 235 235 + const styles = StyleSheet.create({ 236 236 + container: { 237 237 + flex: 1, 238 238 + paddingBottom: isWeb ? 0 : 40, 239 239 + }, 240 240 + titleSection: { 241 241 + paddingTop: isWeb ? 0 : 4, 242 242 + paddingBottom: isWeb ? 14 : 10, 243 243 + }, 244 244 + title: { 245 245 + textAlign: 'center', 246 246 + fontWeight: '600', 247 247 + marginBottom: 5, 248 248 + }, 249 249 + error: { 250 250 + borderRadius: 6, 251 251 + marginTop: 10, 252 252 + }, 253 253 + emailContainer: { 254 254 + flexDirection: 'row', 255 255 + alignItems: 'center', 256 256 + gap: 6, 257 257 + borderWidth: 1, 258 258 + borderRadius: 6, 259 259 + paddingHorizontal: 14, 260 260 + paddingVertical: 12, 261 261 + }, 262 262 + textInput: { 263 263 + borderWidth: 1, 264 264 + borderRadius: 6, 265 265 + paddingHorizontal: 14, 266 266 + paddingVertical: 10, 267 267 + fontSize: 16, 268 268 + }, 269 269 + btn: { 270 270 + flexDirection: 'row', 271 271 + alignItems: 'center', 272 272 + justifyContent: 'center', 273 273 + borderRadius: 32, 274 274 + padding: 14, 275 275 + backgroundColor: colors.blue3, 276 276 + }, 277 277 + btnContainer: { 278 278 + paddingTop: 20, 279 279 + }, 280 280 + })

+2 -1

src/view/com/modals/Confirm.tsx

··· 23 23 onPressCancel, 24 24 confirmBtnText, 25 25 confirmBtnStyle, 26 26 + cancelBtnText, 26 27 }: ConfirmModal) { 27 28 const pal = usePalette('default') 28 29 const store = useStores() ··· 84 85 accessibilityLabel="Cancel" 85 86 accessibilityHint=""> 86 87 <Text type="button-lg" style={pal.textLight}> 87 87 - Cancel 88 88 + {cancelBtnText ?? 'Cancel'} 88 89 </Text> 89 90 </TouchableOpacity> 90 91 )}

+8

src/view/com/modals/Modal.tsx

··· 30 30 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' 31 31 import * as ModerationDetailsModal from './ModerationDetails' 32 32 import * as BirthDateSettingsModal from './BirthDateSettings' 33 33 + import * as VerifyEmailModal from './VerifyEmail' 34 34 + import * as ChangeEmailModal from './ChangeEmail' 33 35 34 36 const DEFAULT_SNAPPOINTS = ['90%'] 35 37 ··· 136 138 } else if (activeModal?.name === 'birth-date-settings') { 137 139 snapPoints = BirthDateSettingsModal.snapPoints 138 140 element = <BirthDateSettingsModal.Component /> 141 141 + } else if (activeModal?.name === 'verify-email') { 142 142 + snapPoints = VerifyEmailModal.snapPoints 143 143 + element = <VerifyEmailModal.Component {...activeModal} /> 144 144 + } else if (activeModal?.name === 'change-email') { 145 145 + snapPoints = ChangeEmailModal.snapPoints 146 146 + element = <ChangeEmailModal.Component /> 139 147 } else { 140 148 return null 141 149 }

+6

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

··· 28 28 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' 29 29 import * as ModerationDetailsModal from './ModerationDetails' 30 30 import * as BirthDateSettingsModal from './BirthDateSettings' 31 31 + import * as VerifyEmailModal from './VerifyEmail' 32 32 + import * as ChangeEmailModal from './ChangeEmail' 31 33 32 34 export const ModalsContainer = observer(function ModalsContainer() { 33 35 const store = useStores() ··· 110 112 element = <ModerationDetailsModal.Component {...modal} /> 111 113 } else if (modal.name === 'birth-date-settings') { 112 114 element = <BirthDateSettingsModal.Component /> 115 115 + } else if (modal.name === 'verify-email') { 116 116 + element = <VerifyEmailModal.Component {...modal} /> 117 117 + } else if (modal.name === 'change-email') { 118 118 + element = <ChangeEmailModal.Component /> 113 119 } else { 114 120 return null 115 121 }

+296

src/view/com/modals/VerifyEmail.tsx

··· 1 1 + import React, {useState} from 'react' 2 2 + import { 3 3 + ActivityIndicator, 4 4 + KeyboardAvoidingView, 5 5 + Pressable, 6 6 + SafeAreaView, 7 7 + StyleSheet, 8 8 + View, 9 9 + } from 'react-native' 10 10 + import {ScrollView, TextInput} from './util' 11 11 + import {observer} from 'mobx-react-lite' 12 12 + import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 13 13 + import {Text} from '../util/text/Text' 14 14 + import {Button} from '../util/forms/Button' 15 15 + import {ErrorMessage} from '../util/error/ErrorMessage' 16 16 + import * as Toast from '../util/Toast' 17 17 + import {useStores} from 'state/index' 18 18 + import {s, colors} from 'lib/styles' 19 19 + import {usePalette} from 'lib/hooks/usePalette' 20 20 + import {isWeb} from 'platform/detection' 21 21 + import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 22 22 + import {cleanError} from 'lib/strings/errors' 23 23 + 24 24 + export const snapPoints = ['90%'] 25 25 + 26 26 + enum Stages { 27 27 + Reminder, 28 28 + Email, 29 29 + ConfirmCode, 30 30 + } 31 31 + 32 32 + export const Component = observer(function Component({ 33 33 + showReminder, 34 34 + }: { 35 35 + showReminder?: boolean 36 36 + }) { 37 37 + const pal = usePalette('default') 38 38 + const store = useStores() 39 39 + const [stage, setStage] = useState<Stages>( 40 40 + showReminder ? Stages.Reminder : Stages.Email, 41 41 + ) 42 42 + const [confirmationCode, setConfirmationCode] = useState<string>('') 43 43 + const [isProcessing, setIsProcessing] = useState<boolean>(false) 44 44 + const [error, setError] = useState<string>('') 45 45 + const {isMobile} = useWebMediaQueries() 46 46 + 47 47 + const onSendEmail = async () => { 48 48 + setError('') 49 49 + setIsProcessing(true) 50 50 + try { 51 51 + await store.agent.com.atproto.server.requestEmailConfirmation() 52 52 + setStage(Stages.ConfirmCode) 53 53 + } catch (e) { 54 54 + setError(cleanError(String(e))) 55 55 + } finally { 56 56 + setIsProcessing(false) 57 57 + } 58 58 + } 59 59 + 60 60 + const onConfirm = async () => { 61 61 + setError('') 62 62 + setIsProcessing(true) 63 63 + try { 64 64 + await store.agent.com.atproto.server.confirmEmail({ 65 65 + email: (store.session.currentSession?.email || '').trim(), 66 66 + token: confirmationCode.trim(), 67 67 + }) 68 68 + store.session.updateLocalAccountData({emailConfirmed: true}) 69 69 + Toast.show('Email verified') 70 70 + store.shell.closeModal() 71 71 + } catch (e) { 72 72 + setError(cleanError(String(e))) 73 73 + } finally { 74 74 + setIsProcessing(false) 75 75 + } 76 76 + } 77 77 + 78 78 + const onEmailIncorrect = () => { 79 79 + store.shell.closeModal() 80 80 + store.shell.openModal({name: 'change-email'}) 81 81 + } 82 82 + 83 83 + return ( 84 84 + <KeyboardAvoidingView 85 85 + behavior="padding" 86 86 + style={[pal.view, styles.container]}> 87 87 + <SafeAreaView style={s.flex1}> 88 88 + <ScrollView 89 89 + testID="verifyEmailModal" 90 90 + style={[s.flex1, isMobile && {paddingHorizontal: 18}]}> 91 91 + <View style={styles.titleSection}> 92 92 + <Text type="title-lg" style={[pal.text, styles.title]}> 93 93 + {stage === Stages.Reminder ? 'Please Verify Your Email' : ''} 94 94 + {stage === Stages.ConfirmCode ? 'Enter Confirmation Code' : ''} 95 95 + {stage === Stages.Email ? 'Verify Your Email' : ''} 96 96 + </Text> 97 97 + </View> 98 98 + 99 99 + <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}> 100 100 + {stage === Stages.Reminder ? ( 101 101 + <> 102 102 + Your email has not yet been verified. This is an important 103 103 + security step which we recommend. 104 104 + </> 105 105 + ) : stage === Stages.Email ? ( 106 106 + <> 107 107 + This is important in case you ever need to change your email or 108 108 + reset your password. 109 109 + </> 110 110 + ) : stage === Stages.ConfirmCode ? ( 111 111 + <> 112 112 + An email has been sent to{' '} 113 113 + {store.session.currentSession?.email || ''}. It includes a 114 114 + confirmation code which you can enter below. 115 115 + </> 116 116 + ) : ( 117 117 + '' 118 118 + )} 119 119 + </Text> 120 120 + 121 121 + {stage === Stages.Email ? ( 122 122 + <> 123 123 + <View style={styles.emailContainer}> 124 124 + <FontAwesomeIcon 125 125 + icon="envelope" 126 126 + color={pal.colors.text} 127 127 + size={16} 128 128 + /> 129 129 + <Text 130 130 + type="xl-medium" 131 131 + style={[pal.text, s.flex1, {minWidth: 0}]}> 132 132 + {store.session.currentSession?.email || ''} 133 133 + </Text> 134 134 + </View> 135 135 + <Pressable 136 136 + accessibilityRole="link" 137 137 + accessibilityLabel="Change my email" 138 138 + accessibilityHint="" 139 139 + onPress={onEmailIncorrect} 140 140 + style={styles.changeEmailLink}> 141 141 + <Text type="lg" style={pal.link}> 142 142 + Change 143 143 + </Text> 144 144 + </Pressable> 145 145 + </> 146 146 + ) : stage === Stages.ConfirmCode ? ( 147 147 + <TextInput 148 148 + testID="confirmCodeInput" 149 149 + style={[styles.textInput, pal.border, pal.text]} 150 150 + placeholder="XXXXX-XXXXX" 151 151 + placeholderTextColor={pal.colors.textLight} 152 152 + value={confirmationCode} 153 153 + onChangeText={setConfirmationCode} 154 154 + accessible={true} 155 155 + accessibilityLabel="Confirmation code" 156 156 + accessibilityHint="" 157 157 + autoCapitalize="none" 158 158 + autoComplete="off" 159 159 + autoCorrect={false} 160 160 + /> 161 161 + ) : undefined} 162 162 + 163 163 + {error ? ( 164 164 + <ErrorMessage message={error} style={styles.error} /> 165 165 + ) : undefined} 166 166 + 167 167 + <View style={[styles.btnContainer]}> 168 168 + {isProcessing ? ( 169 169 + <View style={styles.btn}> 170 170 + <ActivityIndicator color="#fff" /> 171 171 + </View> 172 172 + ) : ( 173 173 + <View style={{gap: 6}}> 174 174 + {stage === Stages.Reminder && ( 175 175 + <Button 176 176 + testID="getStartedBtn" 177 177 + type="primary" 178 178 + onPress={() => setStage(Stages.Email)} 179 179 + accessibilityLabel="Get Started" 180 180 + accessibilityHint="" 181 181 + label="Get Started" 182 182 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 183 183 + labelStyle={[s.f18]} 184 184 + /> 185 185 + )} 186 186 + {stage === Stages.Email && ( 187 187 + <> 188 188 + <Button 189 189 + testID="sendEmailBtn" 190 190 + type="primary" 191 191 + onPress={onSendEmail} 192 192 + accessibilityLabel="Send Confirmation Email" 193 193 + accessibilityHint="" 194 194 + label="Send Confirmation Email" 195 195 + labelContainerStyle={{ 196 196 + justifyContent: 'center', 197 197 + padding: 4, 198 198 + }} 199 199 + labelStyle={[s.f18]} 200 200 + /> 201 201 + <Button 202 202 + testID="haveCodeBtn" 203 203 + type="default" 204 204 + accessibilityLabel="I have a code" 205 205 + accessibilityHint="" 206 206 + label="I have a confirmation code" 207 207 + labelContainerStyle={{ 208 208 + justifyContent: 'center', 209 209 + padding: 4, 210 210 + }} 211 211 + labelStyle={[s.f18]} 212 212 + onPress={() => setStage(Stages.ConfirmCode)} 213 213 + /> 214 214 + </> 215 215 + )} 216 216 + {stage === Stages.ConfirmCode && ( 217 217 + <Button 218 218 + testID="confirmBtn" 219 219 + type="primary" 220 220 + onPress={onConfirm} 221 221 + accessibilityLabel="Confirm" 222 222 + accessibilityHint="" 223 223 + label="Confirm" 224 224 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 225 225 + labelStyle={[s.f18]} 226 226 + /> 227 227 + )} 228 228 + <Button 229 229 + testID="cancelBtn" 230 230 + type="default" 231 231 + onPress={() => store.shell.closeModal()} 232 232 + accessibilityLabel={ 233 233 + stage === Stages.Reminder ? 'Not right now' : 'Cancel' 234 234 + } 235 235 + accessibilityHint="" 236 236 + label={stage === Stages.Reminder ? 'Not right now' : 'Cancel'} 237 237 + labelContainerStyle={{justifyContent: 'center', padding: 4}} 238 238 + labelStyle={[s.f18]} 239 239 + /> 240 240 + </View> 241 241 + )} 242 242 + </View> 243 243 + </ScrollView> 244 244 + </SafeAreaView> 245 245 + </KeyboardAvoidingView> 246 246 + ) 247 247 + }) 248 248 + 249 249 + const styles = StyleSheet.create({ 250 250 + container: { 251 251 + flex: 1, 252 252 + paddingBottom: isWeb ? 0 : 40, 253 253 + }, 254 254 + titleSection: { 255 255 + paddingTop: isWeb ? 0 : 4, 256 256 + paddingBottom: isWeb ? 14 : 10, 257 257 + }, 258 258 + title: { 259 259 + textAlign: 'center', 260 260 + fontWeight: '600', 261 261 + marginBottom: 5, 262 262 + }, 263 263 + error: { 264 264 + borderRadius: 6, 265 265 + marginTop: 10, 266 266 + }, 267 267 + emailContainer: { 268 268 + flexDirection: 'row', 269 269 + alignItems: 'center', 270 270 + gap: 6, 271 271 + paddingHorizontal: 14, 272 272 + marginTop: 10, 273 273 + }, 274 274 + changeEmailLink: { 275 275 + marginHorizontal: 12, 276 276 + marginBottom: 12, 277 277 + }, 278 278 + textInput: { 279 279 + borderWidth: 1, 280 280 + borderRadius: 6, 281 281 + paddingHorizontal: 14, 282 282 + paddingVertical: 10, 283 283 + fontSize: 16, 284 284 + }, 285 285 + btn: { 286 286 + flexDirection: 'row', 287 287 + alignItems: 'center', 288 288 + justifyContent: 'center', 289 289 + borderRadius: 32, 290 290 + padding: 14, 291 291 + backgroundColor: colors.blue3, 292 292 + }, 293 293 + btnContainer: { 294 294 + paddingTop: 20, 295 295 + }, 296 296 + })

+12 -2

src/view/com/util/forms/Button.tsx

··· 42 42 type = 'primary', 43 43 label, 44 44 style, 45 45 + labelContainerStyle, 45 46 labelStyle, 46 47 onPress, 47 48 children, ··· 55 56 type?: ButtonType 56 57 label?: string 57 58 style?: StyleProp<ViewStyle> 59 59 + labelContainerStyle?: StyleProp<ViewStyle> 58 60 labelStyle?: StyleProp<TextStyle> 59 61 onPress?: () => void | Promise<void> 60 62 testID?: string ··· 173 175 } 174 176 175 177 return ( 176 176 - <View style={styles.labelContainer}> 178 178 + <View style={[styles.labelContainer, labelContainerStyle]}> 177 179 {label && withLoading && isLoading ? ( 178 180 <ActivityIndicator size={12} color={typeLabelStyle.color} /> 179 181 ) : null} ··· 182 184 </Text> 183 185 </View> 184 186 ) 185 185 - }, [children, label, withLoading, isLoading, typeLabelStyle, labelStyle]) 187 187 + }, [ 188 188 + children, 189 189 + label, 190 190 + withLoading, 191 191 + isLoading, 192 192 + labelContainerStyle, 193 193 + typeLabelStyle, 194 194 + labelStyle, 195 195 + ]) 186 196 187 197 return ( 188 198 <Pressable

+80 -3

src/view/screens/Settings.tsx

··· 219 219 <View style={[styles.infoLine]}> 220 220 <Text type="lg-medium" style={pal.text}> 221 221 Email:{' '} 222 222 - <Text type="lg" style={pal.text}> 223 223 - {store.session.currentSession?.email} 224 224 - </Text> 225 222 </Text> 223 223 + {!store.session.emailNeedsConfirmation && ( 224 224 + <> 225 225 + <FontAwesomeIcon 226 226 + icon="check" 227 227 + size={10} 228 228 + style={{color: colors.green3, marginRight: 2}} 229 229 + /> 230 230 + </> 231 231 + )} 232 232 + <Text type="lg" style={pal.text}> 233 233 + {store.session.currentSession?.email}{' '} 234 234 + </Text> 235 235 + <Link 236 236 + onPress={() => store.shell.openModal({name: 'change-email'})}> 237 237 + <Text type="lg" style={pal.link}> 238 238 + Change 239 239 + </Text> 240 240 + </Link> 226 241 </View> 227 242 <View style={[styles.infoLine]}> 228 243 <Text type="lg-medium" style={pal.text}> ··· 238 253 </Link> 239 254 </View> 240 255 <View style={styles.spacer20} /> 256 256 + <EmailConfirmationNotice /> 241 257 </> 242 258 ) : null} 243 259 <View style={[s.flexRow, styles.heading]}> ··· 664 680 </Pressable> 665 681 ) 666 682 } 683 683 + 684 684 + const EmailConfirmationNotice = observer( 685 685 + function EmailConfirmationNoticeImpl() { 686 686 + const pal = usePalette('default') 687 687 + const palInverted = usePalette('inverted') 688 688 + const store = useStores() 689 689 + const {isMobile} = useWebMediaQueries() 690 690 + 691 691 + if (!store.session.emailNeedsConfirmation) { 692 692 + return null 693 693 + } 694 694 + 695 695 + return ( 696 696 + <View style={{marginBottom: 20}}> 697 697 + <Text type="xl-bold" style={[pal.text, styles.heading]}> 698 698 + Verify email 699 699 + </Text> 700 700 + <View 701 701 + style={[ 702 702 + { 703 703 + paddingVertical: isMobile ? 12 : 0, 704 704 + paddingHorizontal: 18, 705 705 + }, 706 706 + pal.view, 707 707 + ]}> 708 708 + <View style={{flexDirection: 'row', marginBottom: 8}}> 709 709 + <Pressable 710 710 + style={[ 711 711 + palInverted.view, 712 712 + { 713 713 + flexDirection: 'row', 714 714 + gap: 6, 715 715 + borderRadius: 6, 716 716 + paddingHorizontal: 12, 717 717 + paddingVertical: 10, 718 718 + alignItems: 'center', 719 719 + }, 720 720 + isMobile && {flex: 1}, 721 721 + ]} 722 722 + accessibilityRole="button" 723 723 + accessibilityLabel="Verify my email" 724 724 + accessibilityHint="" 725 725 + onPress={() => store.shell.openModal({name: 'verify-email'})}> 726 726 + <FontAwesomeIcon 727 727 + icon="envelope" 728 728 + color={palInverted.colors.text} 729 729 + size={16} 730 730 + /> 731 731 + <Text type="button" style={palInverted.text}> 732 732 + Verify My Email 733 733 + </Text> 734 734 + </Pressable> 735 735 + </View> 736 736 + <Text style={pal.textLight}> 737 737 + Protect your account by verifying your email. 738 738 + </Text> 739 739 + </View> 740 740 + </View> 741 741 + ) 742 742 + }, 743 743 + ) 667 744 668 745 const styles = StyleSheet.create({ 669 746 dimmed: {

+44 -8

yarn.lock

··· 47 47 tlds "^1.234.0" 48 48 typed-emitter "^2.1.0" 49 49 50 50 - "@atproto/api@^0.6.16": 51 51 - version "0.6.16" 52 52 - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.16.tgz#0e5f259a8eb8af239b4e77bf70d7e770b33f4eeb" 53 53 - integrity sha512-DpG994bdwk7NWJSb36Af+0+FRWMFZgzTcrK0rN2tvlsMh6wBF/RdErjHKuoL8wcogGzbI2yp8eOqsA00lyoisw== 50 50 + "@atproto/api@^0.6.20": 51 51 + version "0.6.20" 52 52 + resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.20.tgz#3a7eda60d73a5d5b6938e2dd016c24a7ba180c83" 53 53 + integrity sha512-+peoKgkaxbglXQg9qEZcZIvyWm39yj0+syV3TBDrz5cWK4OIsdOyYBg2iISy+jvB5RzEUMe2WvOojP6Nq34mOg== 54 54 dependencies: 55 55 - "@atproto/common-web" "^0.2.0" 56 56 - "@atproto/lexicon" "^0.2.1" 57 57 - "@atproto/syntax" "^0.1.1" 58 58 - "@atproto/xrpc" "^0.3.1" 55 55 + "@atproto/common-web" "^0.2.1" 56 56 + "@atproto/lexicon" "^0.2.2" 57 57 + "@atproto/syntax" "^0.1.2" 58 58 + "@atproto/xrpc" "^0.3.2" 59 59 multiformats "^9.9.0" 60 60 tlds "^1.234.0" 61 61 typed-emitter "^2.1.0" ··· 102 102 dependencies: 103 103 graphemer "^1.4.0" 104 104 multiformats "^9.6.4" 105 105 + uint8arrays "3.0.0" 106 106 + zod "^3.21.4" 107 107 + 108 108 + "@atproto/common-web@^0.2.1": 109 109 + version "0.2.1" 110 110 + resolved "https://registry.yarnpkg.com/@atproto/common-web/-/common-web-0.2.1.tgz#97412cb241321fc6c56a2b8c0b2416b3240caf50" 111 111 + integrity sha512-5AoDKkKz7JhXSiicjhPihA/MJMlSuTQ9Aed9fflPuoTuT6C3aXbxaUZEcqqipSwlCfGpOzPmJmWJjMWWsYr2ew== 112 112 + dependencies: 113 113 + graphemer "^1.4.0" 114 114 + multiformats "^9.9.0" 105 115 uint8arrays "3.0.0" 106 116 zod "^3.21.4" 107 117 ··· 209 219 multiformats "^9.9.0" 210 220 zod "^3.21.4" 211 221 222 222 + "@atproto/lexicon@^0.2.2": 223 223 + version "0.2.2" 224 224 + resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.2.2.tgz#938a39482ff41c6a908f4ad43274adba595f3643" 225 225 + integrity sha512-CvmjaSDavHMOJTuNYE8VjYhL7TVxBYV8QSWh2jHCpzfmj02DvVD9UBIfnoVv67POJkEtWXddjoV9beaIbaq/Xg== 226 226 + dependencies: 227 227 + "@atproto/common-web" "^0.2.1" 228 228 + "@atproto/syntax" "^0.1.2" 229 229 + iso-datestring-validator "^2.2.2" 230 230 + multiformats "^9.9.0" 231 231 + zod "^3.21.4" 232 232 + 212 233 "@atproto/pds@^0.1.14": 213 234 version "0.1.14" 214 235 resolved "https://registry.yarnpkg.com/@atproto/pds/-/pds-0.1.14.tgz#7c5a49e412d599d2105bb7ecd019832ab952b19f" ··· 276 297 dependencies: 277 298 "@atproto/common-web" "^0.2.0" 278 299 300 300 + "@atproto/syntax@^0.1.2": 301 301 + version "0.1.2" 302 302 + resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.1.2.tgz#417366d36b53ecf29d9d1f6e35179b1f3feef95b" 303 303 + integrity sha512-n6VSuccMGouwftCvZBq9WNwI0qYCMOH/lTHSV+/dT232lX7pIrqisOlErUSBoOJ49B1Wxy1DjeeBS26ap9SsGQ== 304 304 + dependencies: 305 305 + "@atproto/common-web" "^0.2.1" 306 306 + 279 307 "@atproto/xrpc-server@^0.3.1": 280 308 version "0.3.1" 281 309 resolved "https://registry.yarnpkg.com/@atproto/xrpc-server/-/xrpc-server-0.3.1.tgz#40eeae1dee79fcc835d7a0068ca90f9c91f0ba06" ··· 299 327 integrity sha512-VVoRC/omtXFMIDUyrkFjYkwJ3vevvsGH0L1UW6mTsL40DK3iJpi0GcdJlcqdMkIFJ+QLeAluEKgEcL7bAR5LiQ== 300 328 dependencies: 301 329 "@atproto/lexicon" "^0.2.1" 330 330 + zod "^3.21.4" 331 331 + 332 332 + "@atproto/xrpc@^0.3.2": 333 333 + version "0.3.2" 334 334 + resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.3.2.tgz#432a364be4b3bf8660a088a07dadecac10209763" 335 335 + integrity sha512-D9jGjcFnEMHuGQ56v6+78uX3RiytKLrA5ITLq6shy0Qj6Zvt5MqV+/cTFuNPKrNCrnWOtHFeRQwMqyGhNS9qZQ== 336 336 + dependencies: 337 337 + "@atproto/lexicon" "^0.2.2" 302 338 zod "^3.21.4" 303 339 304 340 "@babel/code-frame@7.10.4", "@babel/code-frame@~7.10.4":