diff options
Diffstat (limited to 'src/view/com/modals/ChangeHandle.tsx')
| -rw-r--r-- | src/view/com/modals/ChangeHandle.tsx | 121 |
1 files changed, 91 insertions, 30 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, |