diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/view/com/modals/ChangeHandle.tsx | 121 | ||||
-rw-r--r-- | src/view/com/util/forms/SelectableBtn.tsx | 67 | ||||
-rw-r--r-- | src/view/screens/Settings.tsx | 85 |
3 files changed, 168 insertions, 105 deletions
diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index 961efc08c..a6010906c 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -11,11 +11,12 @@ 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 {SelectableBtn} from '../util/forms/SelectableBtn' 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 {createFullHandle, makeValidHandle} from 'lib/strings/handles' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' import {useAnalytics} from 'lib/analytics/analytics' @@ -311,7 +312,7 @@ function CustomHandleForm({ const theme = useTheme() const [isVerifying, setIsVerifying] = React.useState(false) const [error, setError] = React.useState<string>('') - + const [isDNSForm, setDNSForm] = React.useState<boolean>(true) // events // = const onPressCopy = React.useCallback(() => { @@ -332,7 +333,9 @@ function CustomHandleForm({ try { setIsVerifying(true) setError('') - const res = await store.agent.com.atproto.identity.resolveHandle({handle}) + const res = await store.agent.com.atproto.identity.resolveHandle({ + handle, + }) if (res.data.did === store.me.did) { setCanSave(true) } else { @@ -384,39 +387,88 @@ function CustomHandleForm({ /> </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, pal.text]}> - Domain: - </Text> - <View style={[styles.dnsValue]}> - <Text type="mono" style={[styles.monoText, pal.text]}> - _atproto.{handle} + + <View style={[styles.selectableBtns]}> + <SelectableBtn + selected={isDNSForm} + label="DNS Panel" + left + onSelect={() => setDNSForm(true)} + accessibilityHint="Use the DNS panel" + style={s.flex1} + /> + <SelectableBtn + selected={!isDNSForm} + label="No DNS Panel" + right + onSelect={() => setDNSForm(false)} + accessibilityHint="Use a file on your server" + style={s.flex1} + /> + </View> + <View style={styles.spacer} /> + {isDNSForm ? ( + <> + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> + Add the following record to your domain: </Text> - </View> - <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> - Type: - </Text> - <View style={[styles.dnsValue]}> - <Text type="mono" style={[styles.monoText, pal.text]}> - TXT + <View style={[styles.dnsTable, pal.btn]}> + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> + Domain: + </Text> + <View style={[styles.dnsValue]}> + <Text type="mono" style={[styles.monoText, pal.text]}> + _atproto. + </Text> + </View> + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> + Type: + </Text> + <View style={[styles.dnsValue]}> + <Text type="mono" style={[styles.monoText, pal.text]}> + TXT + </Text> + </View> + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> + Value: + </Text> + <View style={[styles.dnsValue]}> + <Text type="mono" style={[styles.monoText, pal.text]}> + did={store.me.did} + </Text> + </View> + </View> + </> + ) : ( + <> + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> + Upload a text file to: </Text> - </View> - <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> - Value: - </Text> - <View style={[styles.dnsValue]}> - <Text type="mono" style={[styles.monoText, pal.text]}> - did={store.me.did} + <View style={[styles.valueContainer, pal.btn]}> + <View style={[styles.dnsValue]}> + <Text type="mono" style={[styles.monoText, pal.text]}> + https://{handle}/.well-known/atproto-did + </Text> + </View> + </View> + <View style={styles.spacer} /> + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> + That contains the following: </Text> - </View> - </View> + <View style={[styles.valueContainer, pal.btn]}> + <View style={[styles.dnsValue]}> + <Text type="mono" style={[styles.monoText, pal.text]}> + {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 + Copy {isDNSForm ? 'Domain Value' : 'File Contents'} </Text> </Button> {canSave === true && ( @@ -472,6 +524,10 @@ const styles = StyleSheet.create({ opacity: 0.7, }, + selectableBtns: { + flexDirection: 'row', + }, + title: { flexDirection: 'row', alignItems: 'center', @@ -513,6 +569,11 @@ const styles = StyleSheet.create({ borderRadius: 10, }, + valueContainer: { + borderRadius: 4, + paddingVertical: 16, + }, + dnsTable: { borderRadius: 4, paddingTop: 2, diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx new file mode 100644 index 000000000..503c49b2f --- /dev/null +++ b/src/view/com/util/forms/SelectableBtn.tsx @@ -0,0 +1,67 @@ +import React from 'react' +import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native' +import {Text} from '../text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {isDesktopWeb} from 'platform/detection' + +interface SelectableBtnProps { + selected: boolean + label: string + left?: boolean + right?: boolean + onSelect: () => void + accessibilityHint?: string + style?: StyleProp<ViewStyle> +} + +export function SelectableBtn({ + selected, + label, + left, + right, + onSelect, + accessibilityHint, + style, +}: SelectableBtnProps) { + const pal = usePalette('default') + const palPrimary = usePalette('inverted') + return ( + <Pressable + style={[ + styles.selectableBtn, + left && styles.selectableBtnLeft, + right && styles.selectableBtnRight, + pal.border, + selected ? palPrimary.view : pal.view, + style, + ]} + onPress={onSelect} + accessibilityRole="button" + accessibilityLabel={label} + accessibilityHint={accessibilityHint}> + <Text style={selected ? palPrimary.text : pal.text}>{label}</Text> + </Pressable> + ) +} + +const styles = StyleSheet.create({ + selectableBtn: { + flex: isDesktopWeb ? undefined : 1, + width: isDesktopWeb ? 100 : undefined, + flexDirection: 'row', + justifyContent: 'center', + borderWidth: 1, + borderLeftWidth: 0, + paddingHorizontal: 10, + paddingVertical: 10, + }, + selectableBtnLeft: { + borderTopLeftRadius: 8, + borderBottomLeftRadius: 8, + borderLeftWidth: 1, + }, + selectableBtnRight: { + borderTopRightRadius: 8, + borderBottomRightRadius: 8, + }, +}) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 0057841b2..7a8c25c81 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -2,7 +2,6 @@ import React from 'react' import { ActivityIndicator, Platform, - Pressable, StyleSheet, TextStyle, TouchableOpacity, @@ -32,6 +31,7 @@ import * as Toast from '../com/util/Toast' import {UserAvatar} from '../com/util/UserAvatar' import {DropdownButton} from 'view/com/util/forms/DropdownButton' import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' import {usePalette} from 'lib/hooks/usePalette' import {useCustomPalette} from 'lib/hooks/useCustomPalette' import {AccountData} from 'state/models/session' @@ -40,7 +40,6 @@ import {NavigationProp} from 'lib/routes/types' import {isDesktopWeb} from 'platform/detection' import {pluralize} from 'lib/strings/helpers' import {formatCount} from 'view/com/util/numeric/format' -import {isColorMode} from 'state/models/ui/shell' import Clipboard from '@react-native-clipboard/clipboard' import {reset as resetNavigation} from '../../Navigation' @@ -352,30 +351,24 @@ export const SettingsScreen = withAuthRequired( <View> <View style={[styles.linkCard, pal.view, styles.selectableBtns]}> <SelectableBtn - current={store.shell.colorMode} - value="system" + selected={store.shell.colorMode === 'system'} label="System" left - onChange={(v: string) => - store.shell.setColorMode(isColorMode(v) ? v : 'system') - } + onSelect={() => store.shell.setColorMode('system')} + accessibilityHint="Set color theme to system setting" /> <SelectableBtn - current={store.shell.colorMode} - value="light" + selected={store.shell.colorMode === 'light'} label="Light" - onChange={(v: string) => - store.shell.setColorMode(isColorMode(v) ? v : 'system') - } + onSelect={() => store.shell.setColorMode('light')} + accessibilityHint="Set color theme to light" /> <SelectableBtn - current={store.shell.colorMode} - value="dark" + selected={store.shell.colorMode === 'dark'} label="Dark" right - onChange={(v: string) => - store.shell.setColorMode(isColorMode(v) ? v : 'system') - } + onSelect={() => store.shell.setColorMode('dark')} + accessibilityHint="Set color theme to dark" /> </View> </View> @@ -574,45 +567,6 @@ function AccountDropdownBtn({handle}: {handle: string}) { ) } -interface SelectableBtnProps { - current: string - value: string - label: string - left?: boolean - right?: boolean - onChange: (v: string) => void -} - -function SelectableBtn({ - current, - value, - label, - left, - right, - onChange, -}: SelectableBtnProps) { - const pal = usePalette('default') - const palPrimary = usePalette('inverted') - return ( - <Pressable - style={[ - styles.selectableBtn, - left && styles.selectableBtnLeft, - right && styles.selectableBtnRight, - pal.border, - current === value ? palPrimary.view : pal.view, - ]} - onPress={() => onChange(value)} - accessibilityRole="button" - accessibilityLabel={value} - accessibilityHint={`Set color theme to ${value}`}> - <Text style={current === value ? palPrimary.text : pal.text}> - {label} - </Text> - </Pressable> - ) -} - const styles = StyleSheet.create({ dimmed: { opacity: 0.5, @@ -678,25 +632,6 @@ const styles = StyleSheet.create({ selectableBtns: { flexDirection: 'row', }, - selectableBtn: { - flex: isDesktopWeb ? undefined : 1, - width: isDesktopWeb ? 100 : undefined, - flexDirection: 'row', - justifyContent: 'center', - borderWidth: 1, - borderLeftWidth: 0, - paddingHorizontal: 10, - paddingVertical: 10, - }, - selectableBtnLeft: { - borderTopLeftRadius: 8, - borderBottomLeftRadius: 8, - borderLeftWidth: 1, - }, - selectableBtnRight: { - borderTopRightRadius: 8, - borderBottomRightRadius: 8, - }, btn: { flexDirection: 'row', |