diff options
Diffstat (limited to 'src/view/com/modals/ServerInput.tsx')
| -rw-r--r-- | src/view/com/modals/ServerInput.tsx | 189 |
1 files changed, 0 insertions, 189 deletions
diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx deleted file mode 100644 index 550dffa1c..000000000 --- a/src/view/com/modals/ServerInput.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import React, {useState} from 'react' -import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {ScrollView, TextInput} from './util' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'lib/constants' -import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' - -export const snapPoints = ['80%'] - -export function Component({onSelect}: {onSelect: (url: string) => void}) { - const theme = useTheme() - const pal = usePalette('default') - const [customUrl, setCustomUrl] = useState<string>('') - const {_} = useLingui() - const {closeModal} = useModalControls() - - const doSelect = (url: string) => { - if (!url.startsWith('http://') && !url.startsWith('https://')) { - url = `https://${url}` - } - closeModal() - onSelect(url) - } - - return ( - <View style={[pal.view, s.flex1]} testID="serverInputModal"> - <Text type="2xl-bold" style={[pal.text, s.textCenter]}> - <Trans>Choose Service</Trans> - </Text> - <ScrollView style={styles.inner}> - <View style={styles.group}> - {LOGIN_INCLUDE_DEV_SERVERS ? ( - <> - <TouchableOpacity - testID="localDevServerButton" - style={styles.btn} - onPress={() => doSelect(LOCAL_DEV_SERVICE)} - accessibilityRole="button"> - <Text style={styles.btnText}> - <Trans>Local dev server</Trans> - </Text> - <FontAwesomeIcon - icon="arrow-right" - style={s.white as FontAwesomeIconStyle} - /> - </TouchableOpacity> - <TouchableOpacity - style={styles.btn} - onPress={() => doSelect(STAGING_SERVICE)} - accessibilityRole="button"> - <Text style={styles.btnText}> - <Trans>Staging</Trans> - </Text> - <FontAwesomeIcon - icon="arrow-right" - style={s.white as FontAwesomeIconStyle} - /> - </TouchableOpacity> - </> - ) : undefined} - <TouchableOpacity - style={styles.btn} - onPress={() => doSelect(PROD_SERVICE)} - accessibilityRole="button" - accessibilityLabel={_(msg`Select Bluesky Social`)} - accessibilityHint="Sets Bluesky Social as your service provider"> - <Text style={styles.btnText}> - <Trans>Bluesky.Social</Trans> - </Text> - <FontAwesomeIcon - icon="arrow-right" - style={s.white as FontAwesomeIconStyle} - /> - </TouchableOpacity> - </View> - <View style={styles.group}> - <Text style={[pal.text, styles.label]}> - <Trans>Other service</Trans> - </Text> - <View style={s.flexRow}> - <TextInput - testID="customServerTextInput" - style={[pal.borderDark, pal.text, styles.textInput]} - placeholder="e.g. https://bsky.app" - placeholderTextColor={colors.gray4} - autoCapitalize="none" - autoComplete="off" - autoCorrect={false} - keyboardAppearance={theme.colorScheme} - value={customUrl} - onChangeText={setCustomUrl} - accessibilityLabel={_(msg`Custom domain`)} - // TODO: Simplify this wording further to be understandable by everyone - accessibilityHint={_( - msg`Use your domain as your Bluesky client service provider`, - )} - /> - <TouchableOpacity - testID="customServerSelectBtn" - style={[pal.borderDark, pal.text, styles.textInputBtn]} - onPress={() => doSelect(customUrl)} - accessibilityRole="button" - accessibilityLabel={`Confirm service. ${ - customUrl === '' - ? _(msg`Button disabled. Input custom domain to proceed.`) - : '' - }`} - accessibilityHint="" - // TODO - accessibility: Need to inform state change on failure - disabled={customUrl === ''}> - <FontAwesomeIcon - icon="check" - style={[pal.text as FontAwesomeIconStyle, styles.checkIcon]} - size={18} - /> - </TouchableOpacity> - </View> - </View> - </ScrollView> - </View> - ) -} - -const styles = StyleSheet.create({ - inner: { - padding: 14, - }, - group: { - marginBottom: 20, - }, - label: { - fontWeight: 'bold', - paddingHorizontal: 4, - paddingBottom: 4, - }, - textInput: { - flex: 1, - borderWidth: 1, - borderTopLeftRadius: 6, - borderBottomLeftRadius: 6, - paddingHorizontal: 14, - paddingVertical: 12, - fontSize: 16, - }, - textInputBtn: { - borderWidth: 1, - borderLeftWidth: 0, - borderTopRightRadius: 6, - borderBottomRightRadius: 6, - paddingHorizontal: 14, - paddingVertical: 10, - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: colors.blue3, - borderRadius: 6, - paddingHorizontal: 14, - paddingVertical: 10, - marginBottom: 6, - }, - btnText: { - flex: 1, - fontSize: 18, - fontWeight: '500', - color: colors.white, - }, - checkIcon: { - position: 'relative', - ...Platform.select({ - android: { - top: 8, - }, - ios: { - top: 2, - }, - }), - }, -}) |