zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Improvements to service selection during login

zio/stable
Paul Frazee 2022-12-12 15:13:45 -06:00
parent b2239228e7
commit 470f444eed
1 changed files with 81 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/view/screens/Login.tsx
View File

@ -205,12 +205,19 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
</View> </View>
<View style={styles.group}> <View style={styles.group}>
<TouchableOpacity <TouchableOpacity
style={styles.groupTitle} style={[styles.groupTitle, {paddingRight: 0, paddingVertical: 6}]}
onPress={onPressSelectService}> onPress={onPressSelectService}>
<Text style={[s.white, s.f18, s.bold]} numberOfLines={1}> <Text style={[s.flex1, s.white, s.f18, s.bold]} numberOfLines={1}>
Sign in to {toNiceDomain(serviceUrl)} Sign in to {toNiceDomain(serviceUrl)}
</Text> </Text>
<FontAwesomeIcon icon="pen" size={10} style={styles.groupTitleIcon} /> <View style={styles.textBtnFakeInnerBtn}>
<FontAwesomeIcon
icon="pen"
size={12}
style={styles.textBtnFakeInnerBtnIcon}
/>
<Text style={styles.textBtnFakeInnerBtnLabel}>Change</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.groupContent}> <View style={styles.groupContent}>
<FontAwesomeIcon icon="at" style={styles.groupContentIcon} /> <FontAwesomeIcon icon="at" style={styles.groupContentIcon} />
@ -288,6 +295,7 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
useEffect(() => { useEffect(() => {
let aborted = false let aborted = false
setError('') setError('')
setServiceDescription(undefined)
console.log('Fetching service description', serviceUrl) console.log('Fetching service description', serviceUrl)
store.session.describeService(serviceUrl).then( store.session.describeService(serviceUrl).then(
desc => { desc => {
@ -347,30 +355,6 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
} }
} }
const InitialLoadView = () => (
<>
{error ? (
<>
<View style={[styles.error, styles.errorFloating]}>
<View style={styles.errorIcon}>
<FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
</View>
<View style={s.flex1}>
<Text style={[s.white, s.bold]}>{error}</Text>
</View>
</View>
<View style={[s.flexRow, s.pl20, s.pr20]}>
<TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity>
</View>
</>
) : (
<ActivityIndicator color="#fff" />
)}
</>
)
const Policies = () => { const Policies = () => {
if (!serviceDescription) { if (!serviceDescription) {
return <View /> return <View />
@ -426,43 +410,40 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
<View style={styles.logoHero}> <View style={styles.logoHero}>
<Logo /> <Logo />
</View> </View>
{serviceDescription ? ( {error ? (
<> <View style={[styles.error, styles.errorFloating]}>
{error ? ( <View style={styles.errorIcon}>
<View style={[styles.error, styles.errorFloating]}> <FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
<View style={styles.errorIcon}> </View>
<FontAwesomeIcon <View style={s.flex1}>
icon="exclamation" <Text style={[s.white, s.bold]}>{error}</Text>
style={s.white} </View>
size={10} </View>
/> ) : undefined}
</View> <View style={[styles.group]}>
<View style={s.flex1}> <View style={styles.groupTitle}>
<Text style={[s.white, s.bold]}>{error}</Text> <Text style={[s.white, s.f18, s.bold]}>Create a new account</Text>
</View> </View>
</View> <View style={styles.groupContent}>
) : undefined} <FontAwesomeIcon icon="globe" style={styles.groupContentIcon} />
<View style={[styles.group]}> <TouchableOpacity
<View style={styles.groupTitle}> style={styles.textBtn}
<Text style={[s.white, s.f18, s.bold]}> onPress={onPressSelectService}>
Create a new account <Text style={styles.textBtnLabel}>
</Text> {toNiceDomain(serviceUrl)}
</View> </Text>
<View style={styles.groupContent}> <View style={styles.textBtnFakeInnerBtn}>
<FontAwesomeIcon icon="globe" style={styles.groupContentIcon} /> <FontAwesomeIcon
<TouchableOpacity icon="pen"
style={styles.textBtn} size={12}
onPress={onPressSelectService}> style={styles.textBtnFakeInnerBtnIcon}
<Text style={styles.textBtnLabel}> />
{toNiceDomain(serviceUrl)} <Text style={styles.textBtnFakeInnerBtnLabel}>Change</Text>
</Text>
<FontAwesomeIcon
icon="pen"
size={12}
style={styles.textBtnIcon}
/>
</TouchableOpacity>
</View> </View>
</TouchableOpacity>
</View>
{serviceDescription ? (
<>
{serviceDescription?.inviteCodeRequired ? ( {serviceDescription?.inviteCodeRequired ? (
<View style={styles.groupContent}> <View style={styles.groupContent}>
<FontAwesomeIcon <FontAwesomeIcon
@ -512,7 +493,11 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
editable={!isProcessing} editable={!isProcessing}
/> />
</View> </View>
</View> </>
) : undefined}
</View>
{serviceDescription ? (
<>
<View style={styles.group}> <View style={styles.group}>
<View style={styles.groupTitle}> <View style={styles.groupTitle}>
<Text style={[s.white, s.f18, s.bold]}> <Text style={[s.white, s.f18, s.bold]}>
@ -561,23 +546,23 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
</View> </View>
</View> </View>
<Policies /> <Policies />
<View style={[s.flexRow, s.pl20, s.pr20, {paddingBottom: 200}]}>
<TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity>
<View style={s.flex1} />
<TouchableOpacity onPress={onPressNext}>
{isProcessing ? (
<ActivityIndicator color="#fff" />
) : (
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)}
</TouchableOpacity>
</View>
</> </>
) : ( ) : undefined}
<InitialLoadView /> <View style={[s.flexRow, s.pl20, s.pr20, {paddingBottom: 200}]}>
)} <TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity>
<View style={s.flex1} />
{serviceDescription ? (
<TouchableOpacity onPress={onPressNext}>
{isProcessing ? (
<ActivityIndicator color="#fff" />
) : (
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)}
</TouchableOpacity>
) : undefined}
</View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</ScrollView> </ScrollView>
) )
@ -732,6 +717,22 @@ const styles = StyleSheet.create({
color: colors.white, color: colors.white,
marginHorizontal: 12, marginHorizontal: 12,
}, },
textBtnFakeInnerBtn: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.blue2,
borderRadius: 6,
paddingVertical: 6,
paddingHorizontal: 8,
marginHorizontal: 6,
},
textBtnFakeInnerBtnIcon: {
color: colors.white,
marginRight: 4,
},
textBtnFakeInnerBtnLabel: {
color: colors.white,
},
picker: { picker: {
flex: 1, flex: 1,
width: '100%', width: '100%',