diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js index 07deed61d..89f550330 100644 --- a/native/account/registration/keyserver-selection.react.js +++ b/native/account/registration/keyserver-selection.react.js @@ -1,113 +1,128 @@ // @flow import * as React from 'react'; import { Text, TextInput } from 'react-native'; import RegistrationContainer from './registration-container.react.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; import { RegistrationTile, RegistrationTileHeader, } from './registration-tile.react.js'; import CommIcon from '../../components/comm-icon.react.js'; import type { NavigationRoute } from '../../navigation/route-names.js'; import { useStyles, useColors } from '../../themes/colors.js'; type Selection = 'ashoat' | 'custom'; type Props = { +navigation: RegistrationNavigationProp<'KeyserverSelection'>, +route: NavigationRoute<'KeyserverSelection'>, }; // eslint-disable-next-line no-unused-vars function KeyserverSelection(props: Props): React.Node { + const [customKeyserver, setCustomKeyserver] = React.useState(''); + const customKeyserverTextInputRef = React.useRef(); + const [currentSelection, setCurrentSelection] = React.useState(); const selectAshoat = React.useCallback(() => { setCurrentSelection('ashoat'); + customKeyserverTextInputRef.current?.blur(); }, []); + const customKeyserverEmpty = !customKeyserver; const selectCustom = React.useCallback(() => { setCurrentSelection('custom'); + if (customKeyserverEmpty) { + customKeyserverTextInputRef.current?.focus(); + } + }, [customKeyserverEmpty]); + const onCustomKeyserverFocus = React.useCallback(() => { + setCurrentSelection('custom'); }, []); const styles = useStyles(unboundStyles); const colors = useColors(); return ( Select a keyserver to join Chat communities on Comm are hosted on keyservers, which are user-operated backends. Keyservers allow Comm to offer strong privacy guarantees without sacrificing functionality. ashoat Ashoat is Comm’s founder, and his keyserver currently hosts most of the communities on Comm. Enter a keyserver ); } const unboundStyles = { header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, tileTitleText: { flex: 1, fontSize: 18, color: 'panelForegroundLabel', }, tileBody: { fontSize: 13, color: 'panelForegroundSecondaryLabel', }, cloud: { marginRight: 8, }, keyserverInput: { color: 'panelForegroundLabel', borderColor: 'panelSecondaryForegroundBorder', borderWidth: 1, borderRadius: 4, padding: 12, }, }; export default KeyserverSelection;