LoginForm.tsx (4633B)
1 import * as React from 'react'; 2 import { 3 View, 4 SafeAreaView, 5 Text, 6 TextInput, 7 ActivityIndicator, 8 StyleSheet, 9 Switch, 10 StatusBar, 11 TouchableOpacity 12 } from 'react-native'; 13 import { connect, ConnectedProps } from 'react-redux'; 14 import { StoreState } from '../../store'; 15 16 const connector = connect((state: StoreState) => ({ 17 hostname: state.connection.hostname || '', 18 password: state.connection.password || '', 19 ssl: state.connection.ssl, 20 filterBuffers: state.connection.filterBuffers 21 })); 22 23 type PropsFromRedux = ConnectedProps<typeof connector>; 24 25 type Props = PropsFromRedux & { 26 onConnect: (hostname: string, password: string, ssl: boolean) => void; 27 connecting: boolean; 28 }; 29 30 interface State { 31 hostname: string; 32 password: string; 33 ssl: boolean; 34 filterBuffers: boolean; 35 } 36 37 class LoginForm extends React.Component<Props, State> { 38 state: State = { 39 hostname: this.props.hostname, 40 password: this.props.password, 41 ssl: this.props.ssl, 42 filterBuffers: this.props.filterBuffers 43 }; 44 45 onPress = () => { 46 this.props.dispatch({ 47 type: 'SET_CONNECTION_INFO', 48 hostname: this.state.hostname, 49 password: this.state.password, 50 ssl: this.state.ssl, 51 filterBuffers: this.state.filterBuffers 52 }); 53 const { hostname, password, ssl } = this.state; 54 this.props.onConnect(hostname, password, ssl); 55 }; 56 57 setHostname = (hostname: string) => { 58 this.setState({ hostname }); 59 }; 60 61 setPassword = (password: string) => { 62 this.setState({ password }); 63 }; 64 65 setSSL = (ssl: boolean) => { 66 this.setState({ ssl }); 67 }; 68 69 setFilterBuffers = (filterBuffers: boolean) => { 70 this.setState({ filterBuffers }); 71 }; 72 73 render() { 74 const { connecting } = this.props; 75 const { hostname, password, ssl, filterBuffers } = this.state; 76 77 return ( 78 <View style={styles.container}> 79 <SafeAreaView> 80 <StatusBar barStyle="dark-content" /> 81 <Text style={styles.header}> 82 Connect to Weechat relay via websocket 83 </Text> 84 <TextInput 85 style={styles.input} 86 placeholderTextColor="#4157af" 87 keyboardType="url" 88 autoCapitalize="none" 89 placeholder="Hostname" 90 onChangeText={this.setHostname} 91 value={hostname} 92 autoCorrect={false} 93 /> 94 <TextInput 95 style={styles.input} 96 placeholderTextColor="#4157af" 97 autoCapitalize="none" 98 placeholder="Password" 99 secureTextEntry 100 onChangeText={this.setPassword} 101 value={password} 102 /> 103 <View 104 style={{ flexDirection: 'row', justifyContent: 'space-between' }} 105 > 106 <Text style={styles.text}>SSL</Text> 107 <Switch 108 style={{ margin: 10 }} 109 value={ssl} 110 onValueChange={this.setSSL} 111 /> 112 </View> 113 <View 114 style={{ flexDirection: 'row', justifyContent: 'space-between' }} 115 > 116 <Text style={styles.text}>Hide server buffers</Text> 117 <Switch 118 style={{ margin: 10 }} 119 value={filterBuffers} 120 onValueChange={this.setFilterBuffers} 121 /> 122 </View> 123 <View style={styles.centeredButton}> 124 <TouchableOpacity 125 disabled={connecting} 126 style={styles.button} 127 onPress={this.onPress} 128 > 129 {connecting ? ( 130 <ActivityIndicator color="#4157af" animating={connecting} /> 131 ) : ( 132 <Text style={styles.buttonText}>CONNECT</Text> 133 )} 134 </TouchableOpacity> 135 </View> 136 </SafeAreaView> 137 </View> 138 ); 139 } 140 } 141 142 export default connector(LoginForm); 143 144 const styles = StyleSheet.create({ 145 container: { 146 backgroundColor: '#f8f8f8', 147 flex: 1, 148 padding: 20 149 }, 150 header: { 151 textAlign: 'center', 152 color: '#4157af', 153 fontSize: 20 154 }, 155 text: { 156 padding: 10, 157 color: '#4157af', 158 fontSize: 18 159 }, 160 input: { 161 marginVertical: 10, 162 padding: 10, 163 borderBottomWidth: 2, 164 fontSize: 18, 165 borderColor: '#4157af', 166 color: '#4157af' 167 }, 168 centeredButton: { 169 flexDirection: 'row', 170 justifyContent: 'center' 171 }, 172 button: { 173 borderWidth: 2, 174 borderColor: '#4157af', 175 width: 200, 176 backgroundColor: '#f8f8f8', 177 paddingHorizontal: 20, 178 paddingVertical: 10, 179 borderRadius: 20 180 }, 181 buttonText: { 182 textAlign: 'center', 183 color: '#4157af', 184 fontWeight: '400', 185 fontSize: 18 186 } 187 });