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

+91 -30

src/view/com/modals/ChangeHandle.tsx

··· 11 11 import {ScrollView, TextInput} from './util' 12 12 import {Text} from '../util/text/Text' 13 13 import {Button} from '../util/forms/Button' 14 + import {SelectableBtn} from '../util/forms/SelectableBtn' 14 15 import {ErrorMessage} from '../util/error/ErrorMessage' 15 16 import {useStores} from 'state/index' 16 17 import {ServiceDescription} from 'state/models/session' 17 18 import {s} from 'lib/styles' 18 - import {makeValidHandle, createFullHandle} from 'lib/strings/handles' 19 + import {createFullHandle, makeValidHandle} from 'lib/strings/handles' 19 20 import {usePalette} from 'lib/hooks/usePalette' 20 21 import {useTheme} from 'lib/ThemeContext' 21 22 import {useAnalytics} from 'lib/analytics/analytics' ··· 311 312 const theme = useTheme() 312 313 const [isVerifying, setIsVerifying] = React.useState(false) 313 314 const [error, setError] = React.useState<string>('') 314 - 315 + const [isDNSForm, setDNSForm] = React.useState<boolean>(true) 315 316 // events 316 317 // = 317 318 const onPressCopy = React.useCallback(() => { ··· 332 333 try { 333 334 setIsVerifying(true) 334 335 setError('') 335 - const res = await store.agent.com.atproto.identity.resolveHandle({handle}) 336 + const res = await store.agent.com.atproto.identity.resolveHandle({ 337 + handle, 338 + }) 336 339 if (res.data.did === store.me.did) { 337 340 setCanSave(true) 338 341 } else { ··· 384 387 /> 385 388 </View> 386 389 <View style={styles.spacer} /> 387 - <Text type="md" style={[pal.text, s.pb5, s.pl5]}> 388 - Add the following record to your domain: 389 - </Text> 390 - <View style={[styles.dnsTable, pal.btn]}> 391 - <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 392 - Domain: 393 - </Text> 394 - <View style={[styles.dnsValue]}> 395 - <Text type="mono" style={[styles.monoText, pal.text]}> 396 - _atproto.{handle} 390 + 391 + <View style={[styles.selectableBtns]}> 392 + <SelectableBtn 393 + selected={isDNSForm} 394 + label="DNS Panel" 395 + left 396 + onSelect={() => setDNSForm(true)} 397 + accessibilityHint="Use the DNS panel" 398 + style={s.flex1} 399 + /> 400 + <SelectableBtn 401 + selected={!isDNSForm} 402 + label="No DNS Panel" 403 + right 404 + onSelect={() => setDNSForm(false)} 405 + accessibilityHint="Use a file on your server" 406 + style={s.flex1} 407 + /> 408 + </View> 409 + <View style={styles.spacer} /> 410 + {isDNSForm ? ( 411 + <> 412 + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> 413 + Add the following record to your domain: 397 414 </Text> 398 - </View> 399 - <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 400 - Type: 401 - </Text> 402 - <View style={[styles.dnsValue]}> 403 - <Text type="mono" style={[styles.monoText, pal.text]}> 404 - TXT 415 + <View style={[styles.dnsTable, pal.btn]}> 416 + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 417 + Domain: 418 + </Text> 419 + <View style={[styles.dnsValue]}> 420 + <Text type="mono" style={[styles.monoText, pal.text]}> 421 + _atproto. 422 + </Text> 423 + </View> 424 + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 425 + Type: 426 + </Text> 427 + <View style={[styles.dnsValue]}> 428 + <Text type="mono" style={[styles.monoText, pal.text]}> 429 + TXT 430 + </Text> 431 + </View> 432 + <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 433 + Value: 434 + </Text> 435 + <View style={[styles.dnsValue]}> 436 + <Text type="mono" style={[styles.monoText, pal.text]}> 437 + did={store.me.did} 438 + </Text> 439 + </View> 440 + </View> 441 + </> 442 + ) : ( 443 + <> 444 + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> 445 + Upload a text file to: 405 446 </Text> 406 - </View> 407 - <Text type="md-medium" style={[styles.dnsLabel, pal.text]}> 408 - Value: 409 - </Text> 410 - <View style={[styles.dnsValue]}> 411 - <Text type="mono" style={[styles.monoText, pal.text]}> 412 - did={store.me.did} 447 + <View style={[styles.valueContainer, pal.btn]}> 448 + <View style={[styles.dnsValue]}> 449 + <Text type="mono" style={[styles.monoText, pal.text]}> 450 + https://{handle}/.well-known/atproto-did 451 + </Text> 452 + </View> 453 + </View> 454 + <View style={styles.spacer} /> 455 + <Text type="md" style={[pal.text, s.pb5, s.pl5]}> 456 + That contains the following: 413 457 </Text> 414 - </View> 415 - </View> 458 + <View style={[styles.valueContainer, pal.btn]}> 459 + <View style={[styles.dnsValue]}> 460 + <Text type="mono" style={[styles.monoText, pal.text]}> 461 + {store.me.did} 462 + </Text> 463 + </View> 464 + </View> 465 + </> 466 + )} 467 + 416 468 <View style={styles.spacer} /> 417 469 <Button type="default" style={[s.p20, s.mb10]} onPress={onPressCopy}> 418 470 <Text type="xl" style={[pal.link, s.textCenter]}> 419 - Copy Domain Value 471 + Copy {isDNSForm ? 'Domain Value' : 'File Contents'} 420 472 </Text> 421 473 </Button> 422 474 {canSave === true && ( ··· 472 524 opacity: 0.7, 473 525 }, 474 526 527 + selectableBtns: { 528 + flexDirection: 'row', 529 + }, 530 + 475 531 title: { 476 532 flexDirection: 'row', 477 533 alignItems: 'center', ··· 511 567 letterSpacing: 0.25, 512 568 fontWeight: '400', 513 569 borderRadius: 10, 570 + }, 571 + 572 + valueContainer: { 573 + borderRadius: 4, 574 + paddingVertical: 16, 514 575 }, 515 576 516 577 dnsTable: {

+67

src/view/com/util/forms/SelectableBtn.tsx

··· 1 + import React from 'react' 2 + import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native' 3 + import {Text} from '../text/Text' 4 + import {usePalette} from 'lib/hooks/usePalette' 5 + import {isDesktopWeb} from 'platform/detection' 6 + 7 + interface SelectableBtnProps { 8 + selected: boolean 9 + label: string 10 + left?: boolean 11 + right?: boolean 12 + onSelect: () => void 13 + accessibilityHint?: string 14 + style?: StyleProp<ViewStyle> 15 + } 16 + 17 + export function SelectableBtn({ 18 + selected, 19 + label, 20 + left, 21 + right, 22 + onSelect, 23 + accessibilityHint, 24 + style, 25 + }: SelectableBtnProps) { 26 + const pal = usePalette('default') 27 + const palPrimary = usePalette('inverted') 28 + return ( 29 + <Pressable 30 + style={[ 31 + styles.selectableBtn, 32 + left && styles.selectableBtnLeft, 33 + right && styles.selectableBtnRight, 34 + pal.border, 35 + selected ? palPrimary.view : pal.view, 36 + style, 37 + ]} 38 + onPress={onSelect} 39 + accessibilityRole="button" 40 + accessibilityLabel={label} 41 + accessibilityHint={accessibilityHint}> 42 + <Text style={selected ? palPrimary.text : pal.text}>{label}</Text> 43 + </Pressable> 44 + ) 45 + } 46 + 47 + const styles = StyleSheet.create({ 48 + selectableBtn: { 49 + flex: isDesktopWeb ? undefined : 1, 50 + width: isDesktopWeb ? 100 : undefined, 51 + flexDirection: 'row', 52 + justifyContent: 'center', 53 + borderWidth: 1, 54 + borderLeftWidth: 0, 55 + paddingHorizontal: 10, 56 + paddingVertical: 10, 57 + }, 58 + selectableBtnLeft: { 59 + borderTopLeftRadius: 8, 60 + borderBottomLeftRadius: 8, 61 + borderLeftWidth: 1, 62 + }, 63 + selectableBtnRight: { 64 + borderTopRightRadius: 8, 65 + borderBottomRightRadius: 8, 66 + }, 67 + })

+10 -75

src/view/screens/Settings.tsx

··· 2 2 import { 3 3 ActivityIndicator, 4 4 Platform, 5 - Pressable, 6 5 StyleSheet, 7 6 TextStyle, 8 7 TouchableOpacity, ··· 32 31 import {UserAvatar} from '../com/util/UserAvatar' 33 32 import {DropdownButton} from 'view/com/util/forms/DropdownButton' 34 33 import {ToggleButton} from 'view/com/util/forms/ToggleButton' 34 + import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' 35 35 import {usePalette} from 'lib/hooks/usePalette' 36 36 import {useCustomPalette} from 'lib/hooks/useCustomPalette' 37 37 import {AccountData} from 'state/models/session' ··· 40 40 import {isDesktopWeb} from 'platform/detection' 41 41 import {pluralize} from 'lib/strings/helpers' 42 42 import {formatCount} from 'view/com/util/numeric/format' 43 - import {isColorMode} from 'state/models/ui/shell' 44 43 import Clipboard from '@react-native-clipboard/clipboard' 45 44 import {reset as resetNavigation} from '../../Navigation' 46 45 ··· 352 351 <View> 353 352 <View style={[styles.linkCard, pal.view, styles.selectableBtns]}> 354 353 <SelectableBtn 355 - current={store.shell.colorMode} 356 - value="system" 354 + selected={store.shell.colorMode === 'system'} 357 355 label="System" 358 356 left 359 - onChange={(v: string) => 360 - store.shell.setColorMode(isColorMode(v) ? v : 'system') 361 - } 357 + onSelect={() => store.shell.setColorMode('system')} 358 + accessibilityHint="Set color theme to system setting" 362 359 /> 363 360 <SelectableBtn 364 - current={store.shell.colorMode} 365 - value="light" 361 + selected={store.shell.colorMode === 'light'} 366 362 label="Light" 367 - onChange={(v: string) => 368 - store.shell.setColorMode(isColorMode(v) ? v : 'system') 369 - } 363 + onSelect={() => store.shell.setColorMode('light')} 364 + accessibilityHint="Set color theme to light" 370 365 /> 371 366 <SelectableBtn 372 - current={store.shell.colorMode} 373 - value="dark" 367 + selected={store.shell.colorMode === 'dark'} 374 368 label="Dark" 375 369 right 376 - onChange={(v: string) => 377 - store.shell.setColorMode(isColorMode(v) ? v : 'system') 378 - } 370 + onSelect={() => store.shell.setColorMode('dark')} 371 + accessibilityHint="Set color theme to dark" 379 372 /> 380 373 </View> 381 374 </View> ··· 574 567 ) 575 568 } 576 569 577 - interface SelectableBtnProps { 578 - current: string 579 - value: string 580 - label: string 581 - left?: boolean 582 - right?: boolean 583 - onChange: (v: string) => void 584 - } 585 - 586 - function SelectableBtn({ 587 - current, 588 - value, 589 - label, 590 - left, 591 - right, 592 - onChange, 593 - }: SelectableBtnProps) { 594 - const pal = usePalette('default') 595 - const palPrimary = usePalette('inverted') 596 - return ( 597 - <Pressable 598 - style={[ 599 - styles.selectableBtn, 600 - left && styles.selectableBtnLeft, 601 - right && styles.selectableBtnRight, 602 - pal.border, 603 - current === value ? palPrimary.view : pal.view, 604 - ]} 605 - onPress={() => onChange(value)} 606 - accessibilityRole="button" 607 - accessibilityLabel={value} 608 - accessibilityHint={`Set color theme to ${value}`}> 609 - <Text style={current === value ? palPrimary.text : pal.text}> 610 - {label} 611 - </Text> 612 - </Pressable> 613 - ) 614 - } 615 - 616 570 const styles = StyleSheet.create({ 617 571 dimmed: { 618 572 opacity: 0.5, ··· 677 631 678 632 selectableBtns: { 679 633 flexDirection: 'row', 680 - }, 681 - selectableBtn: { 682 - flex: isDesktopWeb ? undefined : 1, 683 - width: isDesktopWeb ? 100 : undefined, 684 - flexDirection: 'row', 685 - justifyContent: 'center', 686 - borderWidth: 1, 687 - borderLeftWidth: 0, 688 - paddingHorizontal: 10, 689 - paddingVertical: 10, 690 - }, 691 - selectableBtnLeft: { 692 - borderTopLeftRadius: 8, 693 - borderBottomLeftRadius: 8, 694 - borderLeftWidth: 1, 695 - }, 696 - selectableBtnRight: { 697 - borderTopRightRadius: 8, 698 - borderBottomRightRadius: 8, 699 634 }, 700 635 701 636 btn: {

Configure Feed

Configure Feed