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>
2023-07-05 19:56:42 -05:00 · 2023-07-05 19:56:42 -05:00 · 3a6073abb8
parent fe32730025
commit 3a6073abb8
3 changed files with 170 additions and 107 deletions
--- 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}
-          </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,
--- a/src/view/com/util/forms/SelectableBtn.tsx
+++ 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,
+  },
+})
--- 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',