Improvements to service selection during login
parent
b2239228e7
commit
470f444eed
|
@ -205,12 +205,19 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
</View>
|
||||
<View style={styles.group}>
|
||||
<TouchableOpacity
|
||||
style={styles.groupTitle}
|
||||
style={[styles.groupTitle, {paddingRight: 0, paddingVertical: 6}]}
|
||||
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)}
|
||||
</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>
|
||||
<View style={styles.groupContent}>
|
||||
<FontAwesomeIcon icon="at" style={styles.groupContentIcon} />
|
||||
|
@ -288,6 +295,7 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
useEffect(() => {
|
||||
let aborted = false
|
||||
setError('')
|
||||
setServiceDescription(undefined)
|
||||
console.log('Fetching service description', serviceUrl)
|
||||
store.session.describeService(serviceUrl).then(
|
||||
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 = () => {
|
||||
if (!serviceDescription) {
|
||||
return <View />
|
||||
|
@ -426,16 +410,10 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
<View style={styles.logoHero}>
|
||||
<Logo />
|
||||
</View>
|
||||
{serviceDescription ? (
|
||||
<>
|
||||
{error ? (
|
||||
<View style={[styles.error, styles.errorFloating]}>
|
||||
<View style={styles.errorIcon}>
|
||||
<FontAwesomeIcon
|
||||
icon="exclamation"
|
||||
style={s.white}
|
||||
size={10}
|
||||
/>
|
||||
<FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
|
||||
</View>
|
||||
<View style={s.flex1}>
|
||||
<Text style={[s.white, s.bold]}>{error}</Text>
|
||||
|
@ -444,9 +422,7 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
) : undefined}
|
||||
<View style={[styles.group]}>
|
||||
<View style={styles.groupTitle}>
|
||||
<Text style={[s.white, s.f18, s.bold]}>
|
||||
Create a new account
|
||||
</Text>
|
||||
<Text style={[s.white, s.f18, s.bold]}>Create a new account</Text>
|
||||
</View>
|
||||
<View style={styles.groupContent}>
|
||||
<FontAwesomeIcon icon="globe" style={styles.groupContentIcon} />
|
||||
|
@ -456,13 +432,18 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
<Text style={styles.textBtnLabel}>
|
||||
{toNiceDomain(serviceUrl)}
|
||||
</Text>
|
||||
<View style={styles.textBtnFakeInnerBtn}>
|
||||
<FontAwesomeIcon
|
||||
icon="pen"
|
||||
size={12}
|
||||
style={styles.textBtnIcon}
|
||||
style={styles.textBtnFakeInnerBtnIcon}
|
||||
/>
|
||||
<Text style={styles.textBtnFakeInnerBtnLabel}>Change</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{serviceDescription ? (
|
||||
<>
|
||||
{serviceDescription?.inviteCodeRequired ? (
|
||||
<View style={styles.groupContent}>
|
||||
<FontAwesomeIcon
|
||||
|
@ -512,7 +493,11 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
editable={!isProcessing}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
) : undefined}
|
||||
</View>
|
||||
{serviceDescription ? (
|
||||
<>
|
||||
<View style={styles.group}>
|
||||
<View style={styles.groupTitle}>
|
||||
<Text style={[s.white, s.f18, s.bold]}>
|
||||
|
@ -561,11 +546,14 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
</View>
|
||||
</View>
|
||||
<Policies />
|
||||
</>
|
||||
) : undefined}
|
||||
<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" />
|
||||
|
@ -573,11 +561,8 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
|
|||
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
) : undefined}
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<InitialLoadView />
|
||||
)}
|
||||
</KeyboardAvoidingView>
|
||||
</ScrollView>
|
||||
)
|
||||
|
@ -732,6 +717,22 @@ const styles = StyleSheet.create({
|
|||
color: colors.white,
|
||||
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: {
|
||||
flex: 1,
|
||||
width: '100%',
|
||||
|
|
Loading…
Reference in New Issue