diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index d307e9ba..a8c38761 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -30,6 +30,8 @@ export const colors = {
red3: '#ec4899',
red4: '#d1106f',
red5: '#97074e',
+ red6: '#690436',
+ red7: '#4F0328',
pink1: '#f8ccff',
pink2: '#e966ff',
diff --git a/src/state/models/session.ts b/src/state/models/session.ts
index b15c866f..b79283be 100644
--- a/src/state/models/session.ts
+++ b/src/state/models/session.ts
@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
import {
AtpAgent,
AtpSessionEvent,
@@ -368,4 +368,45 @@ export class SessionModel {
this.clearSessionTokens()
this.rootStore.clearAllSessionState()
}
+
+ /**
+ * Removes an account from the list of stored accounts.
+ */
+ removeAccount(handle: string) {
+ this.accounts = this.accounts.filter(acc => acc.handle !== handle)
+ }
+
+ /**
+ * Reloads the session from the server. Useful when account details change, like the handle.
+ */
+ async reloadFromServer() {
+ const sess = this.currentSession
+ if (!sess) {
+ return
+ }
+ const res = await this.rootStore.api.app.bsky.actor
+ .getProfile({actor: sess.did})
+ .catch(_e => undefined)
+ if (res?.success) {
+ const updated = {
+ ...sess,
+ handle: res.data.handle,
+ displayName: res.data.displayName,
+ aviUrl: res.data.avatar,
+ }
+ runInAction(() => {
+ this.accounts = [
+ updated,
+ ...this.accounts.filter(
+ account =>
+ !(
+ account.service === updated.service &&
+ account.did === updated.did
+ ),
+ ),
+ ]
+ })
+ await this.rootStore.me.load()
+ }
+ }
}
diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts
index 0dad2bd9..68d9cd3d 100644
--- a/src/state/models/shell-ui.ts
+++ b/src/state/models/shell-ui.ts
@@ -51,6 +51,11 @@ export interface RepostModal {
isReposted: boolean
}
+export interface ChangeHandleModal {
+ name: 'change-handle'
+ onChanged: () => void
+}
+
export type Modal =
| ConfirmModal
| EditProfileModal
@@ -60,6 +65,7 @@ export type Modal =
| CropImageModal
| DeleteAccountModal
| RepostModal
+ | ChangeHandleModal
interface LightboxModel {}
diff --git a/src/view/com/login/Signin.tsx b/src/view/com/login/Signin.tsx
index 78b24e68..4f994f83 100644
--- a/src/view/com/login/Signin.tsx
+++ b/src/view/com/login/Signin.tsx
@@ -296,6 +296,7 @@ const LoginForm = ({
let fullIdent = identifier
if (
!identifier.includes('@') && // not an email
+ !identifier.includes('.') && // not a domain
serviceDescription &&
serviceDescription.availableUserDomains.length > 0
) {
diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx
new file mode 100644
index 00000000..519be7b2
--- /dev/null
+++ b/src/view/com/modals/ChangeHandle.tsx
@@ -0,0 +1,518 @@
+import React, {useState} from 'react'
+import Clipboard from '@react-native-clipboard/clipboard'
+import * as Toast from '../util/Toast'
+import {
+ ActivityIndicator,
+ StyleSheet,
+ TouchableOpacity,
+ View,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {ScrollView, TextInput} from './util'
+import {Text} from '../util/text/Text'
+import {Button} from '../util/forms/Button'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {useStores} from 'state/index'
+import {ServiceDescription} from 'state/models/session'
+import {s} from 'lib/styles'
+import {makeValidHandle, createFullHandle} from 'lib/strings/handles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useAnalytics} from 'lib/analytics'
+import {cleanError} from 'lib/strings/errors'
+
+export const snapPoints = ['100%']
+
+export function Component({onChanged}: {onChanged: () => void}) {
+ const store = useStores()
+ const [error, setError] = useState<string>('')
+ const pal = usePalette('default')
+ const {track} = useAnalytics()
+
+ const [isProcessing, setProcessing] = useState<boolean>(false)
+ const [retryDescribeTrigger, setRetryDescribeTrigger] = React.useState<any>(
+ {},
+ )
+ const [serviceDescription, setServiceDescription] = React.useState<
+ ServiceDescription | undefined
+ >(undefined)
+ const [userDomain, setUserDomain] = React.useState<string>('')
+ const [isCustom, setCustom] = React.useState<boolean>(false)
+ const [handle, setHandle] = React.useState<string>('')
+ const [canSave, setCanSave] = React.useState<boolean>(false)
+
+ // init
+ // =
+ React.useEffect(() => {
+ let aborted = false
+ setError('')
+ setServiceDescription(undefined)
+ setProcessing(true)
+
+ // load the service description so we can properly provision handles
+ store.session.describeService(String(store.agent.service)).then(
+ desc => {
+ if (aborted) {
+ return
+ }
+ setServiceDescription(desc)
+ setUserDomain(desc.availableUserDomains[0])
+ setProcessing(false)
+ },
+ err => {
+ if (aborted) {
+ return
+ }
+ setProcessing(false)
+ store.log.warn(
+ `Failed to fetch service description for ${String(
+ store.agent.service,
+ )}`,
+ err,
+ )
+ setError(
+ 'Unable to contact your service. Please check your Internet connection.',
+ )
+ },
+ )
+ return () => {
+ aborted = true
+ }
+ }, [store.agent.service, store.session, store.log, retryDescribeTrigger])
+
+ // events
+ // =
+ const onPressCancel = React.useCallback(() => {
+ store.shell.closeModal()
+ }, [store])
+ const onPressRetryConnect = React.useCallback(
+ () => setRetryDescribeTrigger({}),
+ [setRetryDescribeTrigger],
+ )
+ const onToggleCustom = React.useCallback(() => {
+ // toggle between a provided domain vs a custom one
+ setHandle('')
+ setCanSave(false)
+ setCustom(!isCustom)
+ track(
+ isCustom ? 'EditHandle:ViewCustomForm' : 'EditHandle:ViewProvidedForm',
+ )
+ }, [setCustom, isCustom, track])
+ const onPressSave = React.useCallback(async () => {
+ setError('')
+ setProcessing(true)
+ try {
+ track('EditHandle:SetNewHandle')
+ const newHandle = isCustom ? handle : createFullHandle(handle, userDomain)
+ store.log.debug(`Updating handle to ${newHandle}`)
+ await store.api.com.atproto.handle.update({
+ handle: newHandle,
+ })
+ store.shell.closeModal()
+ onChanged()
+ } catch (err: any) {
+ setError(cleanError(err))
+ store.log.error('Failed to update handle', {handle, err})
+ } finally {
+ setProcessing(false)
+ }
+ }, [
+ setError,
+ setProcessing,
+ handle,
+ userDomain,
+ store,
+ isCustom,
+ onChanged,
+ track,
+ ])
+
+ // rendering
+ // =
+ return (
+ <View style={[s.flex1, pal.view]}>
+ <View style={[styles.title, pal.border]}>
+ <View style={styles.titleLeft}>
+ <TouchableOpacity onPress={onPressCancel}>
+ <Text type="lg" style={pal.textLight}>
+ Cancel
+ </Text>
+ </TouchableOpacity>
+ </View>
+ <Text type="2xl-bold" style={[styles.titleMiddle, pal.text]}>
+ Change my handle
+ </Text>
+ <View style={styles.titleRight}>
+ {isProcessing ? (
+ <ActivityIndicator />
+ ) : error && !serviceDescription ? (
+ <TouchableOpacity
+ testID="retryConnectButton"
+ onPress={onPressRetryConnect}>
+ <Text type="xl-bold" style={[pal.link, s.pr5]}>
+ Retry
+ </Text>
+ </TouchableOpacity>
+ ) : canSave ? (
+ <TouchableOpacity onPress={onPressSave}>
+ <Text type="2xl-medium" style={pal.link}>
+ Save
+ </Text>
+ </TouchableOpacity>
+ ) : undefined}
+ </View>
+ </View>
+ <ScrollView style={styles.inner}>
+ {error !== '' && (
+ <View style={styles.errorContainer}>
+ <ErrorMessage message={error} />
+ </View>
+ )}
+
+ {isCustom ? (
+ <CustomHandleForm
+ handle={handle}
+ isProcessing={isProcessing}
+ canSave={canSave}
+ onToggleCustom={onToggleCustom}
+ setHandle={setHandle}
+ setCanSave={setCanSave}
+ onPressSave={onPressSave}
+ />
+ ) : (
+ <ProvidedHandleForm
+ handle={handle}
+ userDomain={userDomain}
+ isProcessing={isProcessing}
+ onToggleCustom={onToggleCustom}
+ setHandle={setHandle}
+ setCanSave={setCanSave}
+ />
+ )}
+ </ScrollView>
+ </View>
+ )
+}
+
+/**
+ * The form for using a domain allocated by the PDS
+ */
+function ProvidedHandleForm({
+ userDomain,
+ handle,
+ isProcessing,
+ setHandle,
+ onToggleCustom,
+ setCanSave,
+}: {
+ userDomain: string
+ handle: string
+ isProcessing: boolean
+ setHandle: (v: string) => void
+ onToggleCustom: () => void
+ setCanSave: (v: boolean) => void
+}) {
+ const pal = usePalette('default')
+
+ // events
+ // =
+ const onChangeHandle = React.useCallback(
+ (v: string) => {
+ const newHandle = makeValidHandle(v)
+ setHandle(newHandle)
+ setCanSave(newHandle.length > 0)
+ },
+ [setHandle, setCanSave],
+ )
+
+ // rendering
+ // =
+ return (
+ <>
+ <View style={[pal.btn, styles.textInputWrapper]}>
+ <FontAwesomeIcon
+ icon="at"
+ style={[pal.textLight, styles.textInputIcon]}
+ />
+ <TextInput
+ testID="setHandleInput"
+ style={[pal.text, styles.textInput]}
+ placeholder="eg alice"
+ placeholderTextColor={pal.colors.textLight}
+ autoCapitalize="none"
+ value={handle}
+ onChangeText={onChangeHandle}
+ editable={!isProcessing}
+ />
+ </View>
+ <Text type="md" style={[pal.textLight, s.pl10, s.pt10]}>
+ Your full handle will be{' '}
+ <Text type="md-bold" style={pal.textLight}>
+ @{createFullHandle(handle, userDomain)}
+ </Text>
+ </Text>
+ <TouchableOpacity onPress={onToggleCustom}>
+ <Text type="md-medium" style={[pal.link, s.pl10, s.pt5]}>
+ I have my own domain
+ </Text>
+ </TouchableOpacity>
+ </>
+ )
+}
+
+/**
+ * The form for using a custom domain
+ */
+function CustomHandleForm({
+ handle,
+ canSave,
+ isProcessing,
+ setHandle,
+ onToggleCustom,
+ onPressSave,
+ setCanSave,
+}: {
+ handle: string
+ canSave: boolean
+ isProcessing: boolean
+ setHandle: (v: string) => void
+ onToggleCustom: () => void
+ onPressSave: () => void
+ setCanSave: (v: boolean) => void
+}) {
+ const store = useStores()
+ const pal = usePalette('default')
+ const palSecondary = usePalette('secondary')
+ const palError = usePalette('error')
+ const [isVerifying, setIsVerifying] = React.useState(false)
+ const [error, setError] = React.useState<string>('')
+
+ // events
+ // =
+ const onPressCopy = React.useCallback(() => {
+ Clipboard.setString(`did=${store.me.did}`)
+ Toast.show('Copied to clipboard')
+ }, [store.me.did])
+ const onChangeHandle = React.useCallback(
+ (v: string) => {
+ setHandle(v)
+ setCanSave(false)
+ },
+ [setHandle, setCanSave],
+ )
+ const onPressVerify = React.useCallback(async () => {
+ if (canSave) {
+ onPressSave()
+ }
+ try {
+ setIsVerifying(true)
+ setError('')
+ const res = await store.api.com.atproto.handle.resolve({handle})
+ if (res.data.did === store.me.did) {
+ setCanSave(true)
+ } else {
+ setError(`Incorrect DID returned (got ${res.data.did})`)
+ }
+ } catch (err: any) {
+ setError(cleanError(err))
+ store.log.error('Failed to verify domain', {handle, err})
+ } finally {
+ setIsVerifying(false)
+ }
+ }, [
+ handle,
+ store.me.did,
+ setIsVerifying,
+ setCanSave,
+ setError,
+ canSave,
+ onPressSave,
+ store.log,
+ store.api,
+ ])
+
+ // rendering
+ // =
+ return (
+ <>
+ <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
+ Enter the domain you want to use
+ </Text>
+ <View style={[pal.btn, styles.textInputWrapper]}>
+ <FontAwesomeIcon
+ icon="at"
+ style={[pal.textLight, styles.textInputIcon]}
+ />
+ <TextInput
+ testID="setHandleInput"
+ style={[pal.text, styles.textInput]}
+ placeholder="eg alice.com"
+ placeholderTextColor={pal.colors.textLight}
+ autoCapitalize="none"
+ value={handle}
+ onChangeText={onChangeHandle}
+ editable={!isProcessing}
+ />
+ </View>
+ <View style={styles.spacer} />
+ <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
+ Add the following record to your domain:
+ </Text>
+ <View style={[styles.dnsTable, pal.btn]}>
+ <Text type="md-medium" style={styles.dnsLabel}>
+ Domain:
+ </Text>
+ <View style={[styles.dnsValue]}>
+ <Text type="mono" style={[styles.monoText, pal.text]}>
+ _atproto.{handle}
+ </Text>
+ </View>
+ <Text type="md-medium" style={styles.dnsLabel}>
+ Type:
+ </Text>
+ <View style={[styles.dnsValue]}>
+ <Text type="mono" style={[styles.monoText, pal.text]}>
+ TXT
+ </Text>
+ </View>
+ <Text type="md-medium" style={styles.dnsLabel}>
+ Value:
+ </Text>
+ <View style={[styles.dnsValue]}>
+ <Text type="mono" style={[styles.monoText, pal.text]}>
+ did={store.me.did}
+ </Text>
+ </View>
+ </View>
+ <View style={styles.spacer} />
+ <Button type="default" style={[s.p20, s.mb10]} onPress={onPressCopy}>
+ <Text type="xl" style={[pal.link, s.textCenter]}>
+ Copy Domain Value
+ </Text>
+ </Button>
+ {canSave === true && (
+ <View style={[styles.message, palSecondary.view]}>
+ <Text type="md-medium" style={palSecondary.text}>
+ Domain verified!
+ </Text>
+ </View>
+ )}
+ {error && (
+ <View style={[styles.message, palError.view]}>
+ <Text type="md-medium" style={palError.text}>
+ {error}
+ </Text>
+ </View>
+ )}
+ <Button
+ type="primary"
+ style={[s.p20, isVerifying && styles.dimmed]}
+ onPress={onPressVerify}>
+ {isVerifying ? (
+ <ActivityIndicator color="white" />
+ ) : (
+ <Text type="xl-medium" style={[pal.textInverted, s.textCenter]}>
+ {canSave ? `Update to ${handle}` : 'Verify DNS Record'}
+ </Text>
+ )}
+ </Button>
+ <View style={styles.spacer} />
+ <TouchableOpacity onPress={onToggleCustom}>
+ <Text type="md-medium" style={[pal.link, s.pl10, s.pt5]}>
+ Nevermind, create a handle for me
+ </Text>
+ </TouchableOpacity>
+ </>
+ )
+}
+
+const styles = StyleSheet.create({
+ inner: {
+ padding: 14,
+ },
+ footer: {
+ padding: 14,
+ },
+ spacer: {
+ height: 20,
+ },
+ dimmed: {
+ opacity: 0.7,
+ },
+
+ title: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingTop: 25,
+ paddingHorizontal: 20,
+ paddingBottom: 15,
+ borderBottomWidth: 1,
+ },
+ titleLeft: {
+ width: 80,
+ },
+ titleRight: {
+ width: 80,
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ },
+ titleMiddle: {
+ flex: 1,
+ textAlign: 'center',
+ fontSize: 21,
+ },
+
+ textInputWrapper: {
+ borderRadius: 8,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ textInputIcon: {
+ marginLeft: 12,
+ },
+ textInput: {
+ flex: 1,
+ width: '100%',
+ paddingVertical: 10,
+ paddingHorizontal: 8,
+ fontSize: 17,
+ letterSpacing: 0.25,
+ fontWeight: '400',
+ borderRadius: 10,
+ },
+
+ dnsTable: {
+ borderRadius: 4,
+ paddingTop: 2,
+ paddingBottom: 16,
+ },
+ dnsLabel: {
+ paddingHorizontal: 14,
+ paddingTop: 10,
+ },
+ dnsValue: {
+ paddingHorizontal: 14,
+ borderRadius: 4,
+ },
+ monoText: {
+ fontSize: 18,
+ lineHeight: 20,
+ },
+
+ message: {
+ paddingHorizontal: 12,
+ paddingVertical: 10,
+ borderRadius: 8,
+ marginBottom: 10,
+ },
+
+ btn: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100%',
+ borderRadius: 32,
+ padding: 10,
+ marginBottom: 10,
+ },
+ errorContainer: {marginBottom: 10},
+})
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index 1346f12f..d3a02e0d 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -12,6 +12,7 @@ import * as ReportPostModal from './ReportPost'
import * as RepostModal from './Repost'
import * as ReportAccountModal from './ReportAccount'
import * as DeleteAccountModal from './DeleteAccount'
+import * as ChangeHandleModal from './ChangeHandle'
import {usePalette} from 'lib/hooks/usePalette'
import {StyleSheet} from 'react-native'
@@ -65,8 +66,11 @@ export const ModalsContainer = observer(function ModalsContainer() {
} else if (activeModal?.name === 'repost') {
snapPoints = RepostModal.snapPoints
element = <RepostModal.Component {...activeModal} />
+ } else if (activeModal?.name === 'change-handle') {
+ snapPoints = ChangeHandleModal.snapPoints
+ element = <ChangeHandleModal.Component {...activeModal} />
} else {
- element = <View />
+ return <View />
}
return (
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index b10b60be..dd9a3aa6 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -12,6 +12,7 @@ import * as ReportPostModal from './ReportPost'
import * as ReportAccountModal from './ReportAccount'
import * as RepostModal from './Repost'
import * as CropImageModal from './crop-image/CropImage.web'
+import * as ChangeHandleModal from './ChangeHandle'
export const ModalsContainer = observer(function ModalsContainer() {
const store = useStores()
@@ -62,6 +63,8 @@ function Modal({modal}: {modal: ModalIface}) {
element = <CropImageModal.Component {...modal} />
} else if (modal.name === 'repost') {
element = <RepostModal.Component {...modal} />
+ } else if (modal.name === 'change-handle') {
+ element = <ChangeHandleModal.Component {...modal} />
} else {
return null
}
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 9332b515..47e76a12 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -13,13 +13,15 @@ import {observer} from 'mobx-react-lite'
import * as AppInfo from 'lib/app-info'
import {useStores} from 'state/index'
import {ScreenParams} from '../routes'
-import {s} from 'lib/styles'
+import {s, colors} from 'lib/styles'
import {ScrollView} from '../com/util/Views'
import {ViewHeader} from '../com/util/ViewHeader'
import {Link} from '../com/util/Link'
import {Text} from '../com/util/text/Text'
import * as Toast from '../com/util/Toast'
import {UserAvatar} from '../com/util/UserAvatar'
+import {DropdownButton} from 'view/com/util/forms/DropdownButton'
+import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
import {AccountData} from 'state/models/session'
import {useAnalytics} from 'lib/analytics'
@@ -28,6 +30,7 @@ export const Settings = observer(function Settings({
navIdx,
visible,
}: ScreenParams) {
+ const theme = useTheme()
const pal = usePalette('default')
const store = useStores()
const {screen, track} = useAnalytics()
@@ -63,6 +66,28 @@ export const Settings = observer(function Settings({
track('Settings:AddAccountButtonClicked')
store.session.clear()
}
+ const onPressChangeHandle = () => {
+ track('Settings:ChangeHandleButtonClicked')
+ store.shell.openModal({
+ name: 'change-handle',
+ onChanged() {
+ setIsSwitching(true)
+ store.session.reloadFromServer().then(
+ () => {
+ setIsSwitching(false)
+ Toast.show('Your handle has been updated')
+ },
+ err => {
+ store.log.error(
+ 'Failed to reload from server after handle update',
+ {err},
+ )
+ setIsSwitching(false)
+ },
+ )
+ },
+ })
+ }
const onPressSignout = () => {
track('Settings:SignOutButtonClicked')
store.session.logout()
@@ -75,145 +100,207 @@ export const Settings = observer(function Settings({
<View style={[s.hContentRegion]} testID="settingsScreen">
<ViewHeader title="Settings" />
<ScrollView style={s.hContentRegion}>
- <View style={[s.mt10, s.pl10, s.pr10]}>
- <View style={[s.flexRow]}>
- <Text type="xl-bold" style={pal.text}>
- Signed in as
- </Text>
- <View style={s.flex1} />
- <TouchableOpacity
- testID="signOutBtn"
- onPress={isSwitching ? undefined : onPressSignout}>
- <Text type="xl-medium" style={pal.link}>
- Sign out
- </Text>
- </TouchableOpacity>
+ <View style={styles.spacer20} />
+ <View style={[s.flexRow, styles.heading]}>
+ <Text type="xl-bold" style={pal.text}>
+ Signed in as
+ </Text>
+ <View style={s.flex1} />
+ </View>
+ {isSwitching ? (
+ <View style={[pal.view, styles.linkCard]}>
+ <ActivityIndicator />
</View>
- {isSwitching ? (
- <View style={[pal.view, styles.profile]}>
- <ActivityIndicator />
- </View>
- ) : (
- <Link
- href={`/profile/${store.me.handle}`}
- title="Your profile"
- noFeedback>
- <View style={[pal.view, styles.profile]}>
+ ) : (
+ <Link
+ href={`/profile/${store.me.handle}`}
+ title="Your profile"
+ noFeedback>
+ <View style={[pal.view, styles.linkCard]}>
+ <View style={styles.avi}>
<UserAvatar
size={40}
displayName={store.me.displayName}
handle={store.me.handle || ''}
avatar={store.me.avatar}
/>
- <View style={[s.ml10]}>
- <Text type="xl-bold" style={pal.text}>
- {store.me.displayName || store.me.handle}
- </Text>
- <Text style={pal.textLight}>@{store.me.handle}</Text>
- </View>
</View>
- </Link>
- )}
- <Text type="sm-medium" style={pal.text}>
- Switch to:
- </Text>
- {store.session.switchableAccounts.map(account => (
- <TouchableOpacity
- testID={`switchToAccountBtn-${account.handle}`}
- key={account.did}
- style={[
- pal.view,
- styles.profile,
- s.mb2,
- isSwitching && styles.dimmed,
- ]}
- onPress={
- isSwitching ? undefined : () => onPressSwitchAccount(account)
- }>
+ <View style={[s.flex1]}>
+ <Text type="md-bold" style={pal.text} numberOfLines={1}>
+ {store.me.displayName || store.me.handle}
+ </Text>
+ <Text type="sm" style={pal.textLight} numberOfLines={1}>
+ {store.me.handle}
+ </Text>
+ </View>
+ <TouchableOpacity
+ testID="signOutBtn"
+ onPress={isSwitching ? undefined : onPressSignout}>
+ <Text type="lg" style={pal.link}>
+ Sign out
+ </Text>
+ </TouchableOpacity>
+ </View>
+ </Link>
+ )}
+ {store.session.switchableAccounts.map(account => (
+ <TouchableOpacity
+ testID={`switchToAccountBtn-${account.handle}`}
+ key={account.did}
+ style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
+ onPress={
+ isSwitching ? undefined : () => onPressSwitchAccount(account)
+ }>
+ <View style={styles.avi}>
<UserAvatar
size={40}
displayName={account.displayName}
handle={account.handle || ''}
avatar={account.aviUrl}
/>
- <View style={[s.ml10]}>
- <Text type="xl-bold" style={pal.text}>
- {account.displayName || account.handle}
- </Text>
- <Text style={pal.textLight}>@{account.handle}</Text>
- </View>
- </TouchableOpacity>
- ))}
- <TouchableOpacity
- testID="switchToNewAccountBtn"
- style={[
- pal.view,
- styles.profile,
- styles.alignCenter,
- s.mb2,
- isSwitching && styles.dimmed,
- ]}
- onPress={isSwitching ? undefined : onPressAddAccount}>
+ </View>
+ <View style={[s.flex1]}>
+ <Text type="md-bold" style={pal.text}>
+ {account.displayName || account.handle}
+ </Text>
+ <Text type="sm" style={pal.textLight}>
+ {account.handle}
+ </Text>
+ </View>
+ <AccountDropdownBtn handle={account.handle} />
+ </TouchableOpacity>
+ ))}
+ <TouchableOpacity
+ testID="switchToNewAccountBtn"
+ style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+ onPress={isSwitching ? undefined : onPressAddAccount}>
+ <View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon
icon="plus"
style={pal.text as FontAwesomeIconStyle}
/>
- <View style={[s.ml5]}>
- <Text type="md-medium" style={pal.text}>
- Add account
- </Text>
- </View>
- </TouchableOpacity>
+ </View>
+ <Text type="lg" style={pal.text}>
+ Add account
+ </Text>
+ </TouchableOpacity>
- <View style={styles.spacer} />
- <Text type="sm-medium" style={[s.mb5, pal.text]}>
- Danger zone
+ <View style={styles.spacer20} />
+
+ <Text type="xl-bold" style={[pal.text, styles.heading]}>
+ Advanced
+ </Text>
+ <TouchableOpacity
+ testID="changeHandleBtn"
+ style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+ onPress={isSwitching ? undefined : onPressChangeHandle}>
+ <View style={[styles.iconContainer, pal.btn]}>
+ <FontAwesomeIcon
+ icon="at"
+ style={pal.text as FontAwesomeIconStyle}
+ />
+ </View>
+ <Text type="lg" style={pal.text}>
+ Change my handle
</Text>
- <TouchableOpacity
- style={[pal.view, s.p10, s.mb10]}
- onPress={onPressDeleteAccount}>
- <Text style={pal.textLight}>Delete my account</Text>
- </TouchableOpacity>
- <Text type="sm-medium" style={[s.mt10, s.mb5, pal.text]}>
- Developer tools
+ </TouchableOpacity>
+
+ <View style={styles.spacer20} />
+
+ <Text type="xl-bold" style={[pal.text, styles.heading]}>
+ Danger zone
+ </Text>
+ <TouchableOpacity
+ style={[pal.view, styles.linkCard]}
+ onPress={onPressDeleteAccount}>
+ <View
+ style={[
+ styles.iconContainer,
+ theme.colorScheme === 'dark'
+ ? styles.trashIconContainerDark
+ : styles.trashIconContainerLight,
+ ]}>
+ <FontAwesomeIcon
+ icon={['far', 'trash-can']}
+ style={
+ theme.colorScheme === 'dark'
+ ? styles.dangerDark
+ : styles.dangerLight
+ }
+ size={21}
+ />
+ </View>
+ <Text
+ type="lg"
+ style={
+ theme.colorScheme === 'dark'
+ ? styles.dangerDark
+ : styles.dangerLight
+ }>
+ Delete my account
</Text>
- <Link
- style={[pal.view, s.p10, s.mb2]}
- href="/sys/log"
- title="System log">
- <Text style={pal.textLight}>System log</Text>
- </Link>
- <Link
- style={[pal.view, s.p10, s.mb2]}
- href="/sys/debug"
- title="Debug tools">
- <Text style={pal.textLight}>Storybook</Text>
- </Link>
- <Text type="sm" style={[s.mt10, pal.textLight]}>
- Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+ </TouchableOpacity>
+
+ <View style={styles.spacer20} />
+
+ <Text type="xl-bold" style={[pal.text, styles.heading]}>
+ Developer tools
+ </Text>
+ <Link
+ style={[pal.view, styles.linkCardNoIcon]}
+ href="/sys/log"
+ title="System log">
+ <Text type="lg" style={pal.text}>
+ System log
</Text>
- <View style={s.footerSpacer} />
- </View>
+ </Link>
+ <Link
+ style={[pal.view, styles.linkCardNoIcon]}
+ href="/sys/debug"
+ title="Debug tools">
+ <Text type="lg" style={pal.text}>
+ Storybook
+ </Text>
+ </Link>
+ <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+ Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+ </Text>
+ <View style={s.footerSpacer} />
</ScrollView>
</View>
)
})
+function AccountDropdownBtn({handle}: {handle: string}) {
+ const store = useStores()
+ const items = [
+ {
+ label: 'Remove account',
+ onPress: () => {
+ store.session.removeAccount(handle)
+ Toast.show('Account removed from quick access')
+ },
+ },
+ ]
+ return (
+ <View style={s.pl10}>
+ <DropdownButton type="bare" items={items}>
+ <FontAwesomeIcon icon="ellipsis-h" />
+ </DropdownButton>
+ </View>
+ )
+}
+
const styles = StyleSheet.create({
dimmed: {
opacity: 0.5,
},
- spacer: {
- height: 50,
+ spacer20: {
+ height: 20,
},
- alignCenter: {
- alignItems: 'center',
- },
- title: {
- fontSize: 32,
- fontWeight: 'bold',
- marginTop: 20,
- marginBottom: 14,
+ heading: {
+ paddingHorizontal: 18,
+ paddingBottom: 6,
},
profile: {
flexDirection: 'row',
@@ -222,10 +309,45 @@ const styles = StyleSheet.create({
paddingVertical: 10,
paddingHorizontal: 10,
},
+ linkCard: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingVertical: 12,
+ paddingHorizontal: 18,
+ marginBottom: 1,
+ },
+ linkCardNoIcon: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingVertical: 20,
+ paddingHorizontal: 18,
+ marginBottom: 1,
+ },
avi: {
+ marginRight: 12,
+ },
+ iconContainer: {
+ alignItems: 'center',
+ justifyContent: 'center',
width: 40,
height: 40,
borderRadius: 30,
- marginRight: 8,
+ marginRight: 12,
+ },
+ trashIconContainerDark: {
+ backgroundColor: colors.red7,
+ },
+ trashIconContainerLight: {
+ backgroundColor: colors.red1,
+ },
+ dangerLight: {
+ color: colors.red4,
+ },
+ dangerDark: {
+ color: colors.red2,
+ },
+ buildInfo: {
+ paddingVertical: 8,
+ paddingHorizontal: 18,
},
})