verdnatura-chat/app/views/NewServerView.js

359 lines
9.7 KiB
JavaScript
Raw Normal View History

2017-08-03 18:23:43 +00:00
import React from 'react';
2017-08-05 18:16:32 +00:00
import PropTypes from 'prop-types';
import {
Text, Keyboard, StyleSheet, TouchableOpacity, View, Alert, BackHandler
} from 'react-native';
import { connect } from 'react-redux';
import * as FileSystem from 'expo-file-system';
import DocumentPicker from 'react-native-document-picker';
import ActionSheet from 'react-native-action-sheet';
import RNUserDefaults from 'rn-user-defaults';
import { encode } from 'base-64';
import parse from 'url-parse';
Beta (#265) * Fabric iOS * Fabric configured on iOS and Android * - react-native-fabric configured - login tracked * README updated * Run scripts from README updated * README scripts * get rooms and messages by rest * user status * more improves * more improves * send pong on timeout * fix some methods * more tests * rest messages * Room actions (#266) * Toggle notifications * Search messages * Invite users * Mute/Unmute users in room * rocket.cat messages * Room topic layout fixed * Starred messages loading onEndReached * Room actions onEndReached * Unnecessary login request * Login loading * Login services fixed * User presence layout * ïmproves on room actions view * Removed unnecessary data from SelectedUsersView * load few messages on open room, search message improve * fix loading messages forever * Removed state from search * Custom message time format * secureTextEntry layout * Reduce android app size * Roles subscription fix * Public routes navigation * fix reconnect * - New login/register, login, register * proguard * Login flux * App init/restore * Android layout fixes * Multiple meteor connection requests fixed * Nested attachments * Nested attachments * fix check status * New login layout (#269) * Public routes navigation * New login/register, login, register * Multiple meteor connection requests fixed * Nested attachments * Button component * TextInput android layout fixed * Register fixed * Thinner close modal button * Requests /me after login only one time * Static images moved * fix reconnect * fix ddp * fix custom emoji * New message layout (#273) * Grouping messages * Message layout * Users typing animation * Image attachment layout
2018-04-24 19:34:03 +00:00
import EventEmitter from '../utils/events';
import {
selectServerRequest, serverRequest, serverInitAdd, serverFinishAdd
} from '../actions/server';
import { appStart as appStartAction } from '../actions';
import sharedStyles from './Styles';
Beta (#265) * Fabric iOS * Fabric configured on iOS and Android * - react-native-fabric configured - login tracked * README updated * Run scripts from README updated * README scripts * get rooms and messages by rest * user status * more improves * more improves * send pong on timeout * fix some methods * more tests * rest messages * Room actions (#266) * Toggle notifications * Search messages * Invite users * Mute/Unmute users in room * rocket.cat messages * Room topic layout fixed * Starred messages loading onEndReached * Room actions onEndReached * Unnecessary login request * Login loading * Login services fixed * User presence layout * ïmproves on room actions view * Removed unnecessary data from SelectedUsersView * load few messages on open room, search message improve * fix loading messages forever * Removed state from search * Custom message time format * secureTextEntry layout * Reduce android app size * Roles subscription fix * Public routes navigation * fix reconnect * - New login/register, login, register * proguard * Login flux * App init/restore * Android layout fixes * Multiple meteor connection requests fixed * Nested attachments * Nested attachments * fix check status * New login layout (#269) * Public routes navigation * New login/register, login, register * Multiple meteor connection requests fixed * Nested attachments * Button component * TextInput android layout fixed * Register fixed * Thinner close modal button * Requests /me after login only one time * Static images moved * fix reconnect * fix ddp * fix custom emoji * New message layout (#273) * Grouping messages * Message layout * Users typing animation * Image attachment layout
2018-04-24 19:34:03 +00:00
import Button from '../containers/Button';
import TextInput from '../containers/TextInput';
[NEW] Livechat (#2004) * [WIP][NEW] Livechat info/actions * [IMPROVEMENT] RoomActionsView * [NEW] Visitor Navigation * [NEW] Get Department REST * [FIX] Borders * [IMPROVEMENT] Refactor RoomInfo View * [FIX] Error while navigate from mention -> roomInfo * [NEW] Livechat Fields * [NEW] Close Livechat * [WIP] Forward livechat * [NEW] Return inquiry * [WIP] Comment when close livechat * [WIP] Improve roomInfo * [IMPROVEMENT] Forward room * [FIX] Department picker * [FIX] Picker without results * [FIX] Superfluous argument * [FIX] Check permissions on RoomActionsView * [FIX] Livechat permissions * [WIP] Show edit to livechat * [I18N] Add pt-br translations * [WIP] Livechat Info * [IMPROVEMENT] Livechat info * [WIP] Livechat Edit * [WIP] Livechat edit * [WIP] Livechat Edit * [WIP] Livechat edit scroll * [FIX] Edit customFields * [FIX] Clean livechat customField * [FIX] Visitor Navigation * [NEW] Next input logic LivechatEdit * [FIX] Add livechat data to subscription * [FIX] Revert change * [NEW] Livechat user Status * [WIP] Livechat tags * [NEW] Edit livechat tags * [FIX] Prevent some crashes * [FIX] Forward * [FIX] Return Livechat error * [FIX] Prevent livechat info crash * [IMPROVEMENT] Use input style on forward chat * OnboardingSeparator -> OrSeparator * [FIX] Go to next input * [NEW] Added some icons * [NEW] Livechat close * [NEW] Forward Room Action * [FIX] Livechat edit style * [FIX] Change status logic * [CHORE] Remove unnecessary logic * [CHORE] Remove unnecessary code * [CHORE] Remove unecessary case * [FIX] Superfluous argument * [IMPROVEMENT] Submit livechat edit * [CHORE] Remove textInput type * [FIX] Livechat edit * [FIX] Livechat Edit * [FIX] Use same effect * [IMPROVEMENT] Tags input * [FIX] Add empty tag * Fix minor issues * Fix typo * insert livechat room data to our room object * review * add method calls server version Co-authored-by: Diego Mello <diegolmello@gmail.com>
2020-05-08 17:36:10 +00:00
import OrSeparator from '../containers/OrSeparator';
import FormContainer, { FormContainerInner } from '../containers/FormContainer';
2018-06-01 17:38:13 +00:00
import I18n from '../i18n';
import { isIOS } from '../utils/deviceInfo';
2019-12-04 16:39:53 +00:00
import { themes } from '../constants/colors';
import log from '../utils/log';
import { animateNextTransition } from '../utils/layoutAnimation';
2019-12-04 16:39:53 +00:00
import { withTheme } from '../theme';
import { setBasicAuth, BASIC_AUTH_KEY } from '../utils/fetch';
import { themedHeader } from '../utils/navigation';
import { CloseModalButton } from '../containers/HeaderButton';
const styles = StyleSheet.create({
title: {
...sharedStyles.textBold,
fontSize: 22
},
inputContainer: {
marginTop: 24,
marginBottom: 32
},
certificatePicker: {
marginBottom: 32,
alignItems: 'center',
justifyContent: 'flex-end'
},
chooseCertificateTitle: {
fontSize: 13,
2019-12-04 16:39:53 +00:00
...sharedStyles.textRegular
},
chooseCertificate: {
fontSize: 13,
2019-12-04 16:39:53 +00:00
...sharedStyles.textSemibold
},
description: {
...sharedStyles.textRegular,
fontSize: 14,
textAlign: 'left',
marginBottom: 24
},
connectButton: {
marginBottom: 0
}
});
class NewServerView extends React.Component {
static navigationOptions = ({ screenProps, navigation }) => {
const previousServer = navigation.getParam('previousServer', null);
const close = navigation.getParam('close', () => {});
return {
2020-05-14 15:55:03 +00:00
headerLeft: previousServer ? <CloseModalButton navigation={navigation} onPress={close} testID='new-server-view-close' /> : undefined,
title: I18n.t('Workspaces'),
...themedHeader(screenProps.theme)
};
}
2017-08-05 18:16:32 +00:00
static propTypes = {
2019-03-12 16:23:06 +00:00
navigation: PropTypes.object,
2019-12-04 16:39:53 +00:00
theme: PropTypes.string,
connecting: PropTypes.bool.isRequired,
connectServer: PropTypes.func.isRequired,
selectServer: PropTypes.func.isRequired,
currentServer: PropTypes.string,
initAdd: PropTypes.func,
finishAdd: PropTypes.func
2017-08-05 18:16:32 +00:00
}
constructor(props) {
super(props);
this.previousServer = props.navigation.getParam('previousServer');
props.navigation.setParams({ close: this.close, previousServer: this.previousServer });
// Cancel
this.options = [I18n.t('Cancel')];
this.CANCEL_INDEX = 0;
// Delete
this.options.push(I18n.t('Delete'));
this.DELETE_INDEX = 1;
this.state = {
text: '',
connectingOpen: false,
certificate: null
};
EventEmitter.addEventListener('NewServer', this.handleNewServerEvent);
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentDidMount() {
const { initAdd } = this.props;
if (this.previousServer) {
initAdd();
}
}
componentWillUnmount() {
EventEmitter.removeListener('NewServer', this.handleNewServerEvent);
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress = () => {
const { navigation } = this.props;
if (navigation.isFocused() && this.previousServer) {
this.close();
return true;
}
return false;
}
onChangeText = (text) => {
this.setState({ text });
}
close = () => {
const { selectServer, currentServer, finishAdd } = this.props;
if (this.previousServer !== currentServer) {
selectServer(this.previousServer);
}
finishAdd();
}
handleNewServerEvent = (event) => {
let { server } = event;
const { connectServer } = this.props;
this.setState({ text: server });
server = this.completeUrl(server);
connectServer(server);
}
submit = async() => {
const { text, certificate } = this.state;
const { connectServer } = this.props;
let cert = null;
this.setState({ connectingOpen: false });
if (certificate) {
const certificatePath = `${ FileSystem.documentDirectory }/${ certificate.name }`;
try {
await FileSystem.copyAsync({ from: certificate.path, to: certificatePath });
} catch (e) {
log(e);
}
cert = {
path: this.uriToPath(certificatePath), // file:// isn't allowed by obj-C
password: certificate.password
};
}
if (text) {
Keyboard.dismiss();
const server = this.completeUrl(text);
await this.basicAuth(server, text);
connectServer(server, cert);
}
}
connectOpen = () => {
this.setState({ connectingOpen: true });
const { connectServer } = this.props;
connectServer('https://open.rocket.chat');
}
basicAuth = async(server, text) => {
try {
const parsedUrl = parse(text, true);
if (parsedUrl.auth.length) {
const credentials = encode(parsedUrl.auth);
await RNUserDefaults.set(`${ BASIC_AUTH_KEY }-${ server }`, credentials);
setBasicAuth(credentials);
}
} catch {
// do nothing
}
}
chooseCertificate = async() => {
try {
const res = await DocumentPicker.pick({
type: ['com.rsa.pkcs-12']
});
const { uri: path, name } = res;
Alert.prompt(
I18n.t('Certificate_password'),
I18n.t('Whats_the_password_for_your_certificate'),
[
{
text: 'OK',
onPress: password => this.saveCertificate({ path, name, password })
}
],
'secure-text'
);
} catch (e) {
if (!DocumentPicker.isCancel(e)) {
log(e);
}
}
}
completeUrl = (url) => {
const parsedUrl = parse(url, true);
if (parsedUrl.auth.length) {
url = parsedUrl.origin;
}
url = url && url.replace(/\s/g, '');
Beta (#265) * Fabric iOS * Fabric configured on iOS and Android * - react-native-fabric configured - login tracked * README updated * Run scripts from README updated * README scripts * get rooms and messages by rest * user status * more improves * more improves * send pong on timeout * fix some methods * more tests * rest messages * Room actions (#266) * Toggle notifications * Search messages * Invite users * Mute/Unmute users in room * rocket.cat messages * Room topic layout fixed * Starred messages loading onEndReached * Room actions onEndReached * Unnecessary login request * Login loading * Login services fixed * User presence layout * ïmproves on room actions view * Removed unnecessary data from SelectedUsersView * load few messages on open room, search message improve * fix loading messages forever * Removed state from search * Custom message time format * secureTextEntry layout * Reduce android app size * Roles subscription fix * Public routes navigation * fix reconnect * - New login/register, login, register * proguard * Login flux * App init/restore * Android layout fixes * Multiple meteor connection requests fixed * Nested attachments * Nested attachments * fix check status * New login layout (#269) * Public routes navigation * New login/register, login, register * Multiple meteor connection requests fixed * Nested attachments * Button component * TextInput android layout fixed * Register fixed * Thinner close modal button * Requests /me after login only one time * Static images moved * fix reconnect * fix ddp * fix custom emoji * New message layout (#273) * Grouping messages * Message layout * Users typing animation * Image attachment layout
2018-04-24 19:34:03 +00:00
if (/^(\w|[0-9-_]){3,}$/.test(url)
&& /^(htt(ps?)?)|(loca((l)?|(lh)?|(lho)?|(lhos)?|(lhost:?\d*)?)$)/.test(url) === false) {
url = `${ url }.rocket.chat`;
}
2019-09-16 21:04:20 +00:00
if (/^(https?:\/\/)?(((\w|[0-9-_])+(\.(\w|[0-9-_])+)+)|localhost)(:\d+)?$/.test(url)) {
if (/^localhost(:\d+)?/.test(url)) {
url = `http://${ url }`;
} else if (/^https?:\/\//.test(url) === false) {
2017-08-07 00:34:35 +00:00
url = `https://${ url }`;
}
}
2017-08-03 18:23:43 +00:00
return url.replace(/\/+$/, '').replace(/\\/g, '/');
}
uriToPath = uri => uri.replace('file://', '');
saveCertificate = (certificate) => {
animateNextTransition();
this.setState({ certificate });
}
handleDelete = () => this.setState({ certificate: null }); // We not need delete file from DocumentPicker because it is a temp file
showActionSheet = () => {
ActionSheet.showActionSheetWithOptions({
options: this.options,
cancelButtonIndex: this.CANCEL_INDEX,
destructiveButtonIndex: this.DELETE_INDEX
}, (actionIndex) => {
if (actionIndex === this.DELETE_INDEX) { this.handleDelete(); }
});
}
renderCertificatePicker = () => {
const { certificate } = this.state;
2019-12-04 16:39:53 +00:00
const { theme } = this.props;
return (
<View style={styles.certificatePicker}>
2019-12-04 16:39:53 +00:00
<Text
style={[
styles.chooseCertificateTitle,
{ color: themes[theme].auxiliaryText }
]}
>
{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
</Text>
<TouchableOpacity
onPress={certificate ? this.showActionSheet : this.chooseCertificate}
testID='new-server-choose-certificate'
>
<Text
style={[
styles.chooseCertificate,
{ color: themes[theme].tintColor }
]}
>
{certificate ? certificate.name : I18n.t('Apply_Your_Certificate')}
</Text>
</TouchableOpacity>
</View>
);
}
2017-08-03 18:23:43 +00:00
render() {
2019-12-04 16:39:53 +00:00
const { connecting, theme } = this.props;
const { text, connectingOpen } = this.state;
2017-08-03 18:23:43 +00:00
return (
2020-05-14 15:55:03 +00:00
<FormContainer theme={theme} testID='new-server-view'>
<FormContainerInner>
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
<TextInput
label='Enter workspace URL'
placeholder='Ex. your-company.rocket.chat'
containerStyle={styles.inputContainer}
value={text}
returnKeyType='send'
onChangeText={this.onChangeText}
testID='new-server-view-input'
onSubmitEditing={this.submit}
clearButtonMode='while-editing'
keyboardType='url'
textContentType='URL'
theme={theme}
/>
<Button
title={I18n.t('Connect')}
type='primary'
onPress={this.submit}
disabled={!text || connecting}
loading={!connectingOpen && connecting}
style={styles.connectButton}
theme={theme}
2020-05-14 15:55:03 +00:00
testID='new-server-view-button'
/>
[NEW] Livechat (#2004) * [WIP][NEW] Livechat info/actions * [IMPROVEMENT] RoomActionsView * [NEW] Visitor Navigation * [NEW] Get Department REST * [FIX] Borders * [IMPROVEMENT] Refactor RoomInfo View * [FIX] Error while navigate from mention -> roomInfo * [NEW] Livechat Fields * [NEW] Close Livechat * [WIP] Forward livechat * [NEW] Return inquiry * [WIP] Comment when close livechat * [WIP] Improve roomInfo * [IMPROVEMENT] Forward room * [FIX] Department picker * [FIX] Picker without results * [FIX] Superfluous argument * [FIX] Check permissions on RoomActionsView * [FIX] Livechat permissions * [WIP] Show edit to livechat * [I18N] Add pt-br translations * [WIP] Livechat Info * [IMPROVEMENT] Livechat info * [WIP] Livechat Edit * [WIP] Livechat edit * [WIP] Livechat Edit * [WIP] Livechat edit scroll * [FIX] Edit customFields * [FIX] Clean livechat customField * [FIX] Visitor Navigation * [NEW] Next input logic LivechatEdit * [FIX] Add livechat data to subscription * [FIX] Revert change * [NEW] Livechat user Status * [WIP] Livechat tags * [NEW] Edit livechat tags * [FIX] Prevent some crashes * [FIX] Forward * [FIX] Return Livechat error * [FIX] Prevent livechat info crash * [IMPROVEMENT] Use input style on forward chat * OnboardingSeparator -> OrSeparator * [FIX] Go to next input * [NEW] Added some icons * [NEW] Livechat close * [NEW] Forward Room Action * [FIX] Livechat edit style * [FIX] Change status logic * [CHORE] Remove unnecessary logic * [CHORE] Remove unnecessary code * [CHORE] Remove unecessary case * [FIX] Superfluous argument * [IMPROVEMENT] Submit livechat edit * [CHORE] Remove textInput type * [FIX] Livechat edit * [FIX] Livechat Edit * [FIX] Use same effect * [IMPROVEMENT] Tags input * [FIX] Add empty tag * Fix minor issues * Fix typo * insert livechat room data to our room object * review * add method calls server version Co-authored-by: Diego Mello <diegolmello@gmail.com>
2020-05-08 17:36:10 +00:00
<OrSeparator theme={theme} />
<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_join_open_description')}</Text>
<Button
title={I18n.t('Join_our_open_workspace')}
type='secondary'
backgroundColor={themes[theme].chatComponentBackground}
onPress={this.connectOpen}
disabled={connecting}
loading={connectingOpen && connecting}
theme={theme}
2020-05-14 15:55:03 +00:00
testID='new-server-view-open'
/>
</FormContainerInner>
{ isIOS ? this.renderCertificatePicker() : null }
</FormContainer>
2017-08-03 18:23:43 +00:00
);
}
}
const mapStateToProps = state => ({
connecting: state.server.connecting
});
const mapDispatchToProps = dispatch => ({
connectServer: (server, certificate) => dispatch(serverRequest(server, certificate)),
initAdd: () => dispatch(serverInitAdd()),
finishAdd: () => dispatch(serverFinishAdd()),
selectServer: server => dispatch(selectServerRequest(server)),
appStart: root => dispatch(appStartAction(root))
});
2019-12-04 16:39:53 +00:00
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NewServerView));