From ba7463cadf15bd5420e1a8cc46952bde2c81cad9 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 12 Feb 2024 13:36:20 -0800
Subject: Improved server selector during account creation and signin (#2840)

* Replace the ServerInput modal with a new dialog based on alf that remembers your server address history and doesnt put staging and localdev in the options

* Update the server selector during account creation

* dont apply capitalization, use url keyboard

* Apply insets to dialog top

* Improve padding of dialogs on native

* Fix race condition in dialog close; also fix fire of the onClose event in dialogs

---------

Co-authored-by: Hailey <me@haileyok.com>
---
 src/view/com/modals/ServerInput.tsx | 189 ------------------------------------
 1 file changed, 189 deletions(-)
 delete mode 100644 src/view/com/modals/ServerInput.tsx

(limited to 'src/view/com/modals/ServerInput.tsx')

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,
-      },
-    }),
-  },
-})
-- 
cgit 1.4.1