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

* 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>

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

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,
+  },
+})