zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Added instructions for .well-known method (supersedes #887) (#979)

Browse source 
* Added instructions for .well-known method

* Factor out SelectableBtn

* Rework the ChangeHandle modal to be a little clearer

* Fix lint

* Fix desktop layout

---------

Co-authored-by: Haider Ali Punjabi <haiderali@cyberservices.com>
Co-authored-by: Haider Ali Punjabi <haideralipunjabi@hackesta.org>
This commit is contained in:
Paul Frazee 2023-07-05 19:56:42 -05:00 • committed by GitHub
parent fe32730025
commit 3a6073abb8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 170 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

125
src/view/com/modals/ChangeHandle.tsx
View file

@ -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}
</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 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 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 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 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,