__tests__/auth/__snapshots__/LoginForm.js.snap

@@ -324,5 +324,301 @@ exports[`LoginForm component should renders correctly 1`] = `
  FORGOT PASSWORD
  </Text>
  </View>
+ <View
+ style={
+ Array [
+ Object {
+ "flexDirection": "row",
+ "justifyContent": "center",
+ },
+ Object {
+ "paddingTop": 15,
+ },
+ Object {
+ "marginTop": 20,
+ },
+ ]
+ }
+ >
+ <Text
+ allowFontScaling={false}
+ style={
+ Array [
+ Object {
+ "color": "white",
+ "fontSize": 18,
+ },
+ Object {
+ "paddingTop": 1,
+ },
+ Object {
+ "fontFamily": "Ionicons",
+ "fontStyle": "normal",
+ "fontWeight": "normal",
+ },
+ Object {},
+ ]
+ }
+ >
+ 
+ </Text>
+ <Text
+ onPress={[Function]}
+ style={
+ Array [
+ Object {
+ "color": "white",
+ },
+ ]
+ }
+ >
+ 
+ English
+ </Text>
+ </View>
+ <Modal
+ animationType="none"
+ hardwareAccelerated={false}
+ hideModalContentWhileAnimating={false}
+ onModalHide={[Function]}
+ onModalWillHide={[Function]}
+ onModalWillShow={[Function]}
+ onRequestClose={[Function]}
+ scrollOffset={0}
+ scrollOffsetMax={0}
+ scrollTo={null}
+ supportedOrientations={
+ Array [
+ "portrait",
+ "landscape",
+ ]
+ }
+ swipeThreshold={100}
+ transparent={true}
+ visible={false}
+ >
+ <View
+ accessible={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "backgroundColor": "black",
+ "bottom": 0,
+ "height": 1334,
+ "left": 0,
+ "opacity": 0,
+ "position": "absolute",
+ "right": 0,
+ "top": 0,
+ "width": 750,
+ }
+ }
+ />
+ <View
+ hideModalContentWhileAnimating={false}
+ onModalHide={[Function]}
+ onModalWillHide={[Function]}
+ onModalWillShow={[Function]}
+ pointerEvents="box-none"
+ scrollOffset={0}
+ scrollOffsetMax={0}
+ scrollTo={null}
+ style={
+ Object {
+ "flex": 1,
+ "justifyContent": "center",
+ "margin": 37.5,
+ "transform": Array [
+ Object {
+ "translateY": 0,
+ },
+ ],
+ }
+ }
+ supportedOrientations={
+ Array [
+ "portrait",
+ "landscape",
+ ]
+ }
+ swipeThreshold={100}
+ >
+ <View
+ style={
+ Array [
+ Object {
+ "backgroundColor": "white",
+ },
+ Object {
+ "height": 300,
+ "paddingBottom": 8,
+ },
+ ]
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 16,
+ },
+ Object {
+ "textAlign": "center",
+ },
+ Object {
+ "backgroundColor": "#4690D6",
+ },
+ Object {
+ "padding": 10,
+ },
+ Object {
+ "color": "white",
+ },
+ ]
+ }
+ >
+ Language
+ </Text>
+ <View
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "flex": 1,
+ }
+ }
+ >
+ <RCTPicker
+ items={
+ Array [
+ Object {
+ "label": "Spanish",
+ "textColor": undefined,
+ "value": "es",
+ },
+ Object {
+ "label": "English",
+ "textColor": undefined,
+ "value": "en",
+ },
+ ]
+ }
+ onChange={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ selectedIndex={1}
+ style={
+ Array [
+ Object {
+ "height": 216,
+ },
+ Object {
+ "fontSize": 14,
+ },
+ ]
+ }
+ />
+ </View>
+ <View
+ style={
+ Array [
+ Object {
+ "flexDirection": "row",
+ "justifyContent": "center",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ isTVSelectable={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "backgroundColor": "white",
+ "borderColor": "#777777",
+ "borderRadius": 15,
+ "borderWidth": 1,
+ "margin": 4,
+ "opacity": 1,
+ "padding": 4,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "color": "#777777",
+ },
+ undefined,
+ ]
+ }
+ >
+ 
+ Cancel
+ 
+ </Text>
+ </View>
+ <View
+ accessible={true}
+ isTVSelectable={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "backgroundColor": "white",
+ "borderColor": "#4690D6",
+ "borderRadius": 15,
+ "borderWidth": 1,
+ "margin": 4,
+ "opacity": 1,
+ "padding": 4,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "color": "#4690D6",
+ },
+ undefined,
+ ]
+ }
+ >
+ 
+ Ok
+ 
+ </Text>
+ </View>
+ </View>
+ </View>
+ </View>
+ </View>
+ </Modal>
 </View>
 `;

src/auth/LoginForm.js

@@ -12,6 +12,8 @@ import {
  KeyboardAvoidingView,
 } from 'react-native';
 
+import Icon from 'react-native-vector-icons/Ionicons';
+
 import authService from './AuthService';
 import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
@@ -21,6 +23,7 @@ import { Button } from 'react-native-elements'
 import i18n from '../common/services/i18n.service';
 import testID from '../common/helpers/testID';
 import logService from '../common/services/log.service';
+import ModalPicker from '../common/components/ModalPicker';
 
 /**
  * Login Form
@@ -33,9 +36,17 @@ export default class LoginForm extends Component {
  msg: '',
  twoFactorToken: '',
  twoFactorCode: '',
- inProgress: false
+ inProgress: false,
+ showLanguages: false,
  };
 
+ componentWillMount() {
+ this.setState({
+ language: i18n.getCurrentLocale()
+ });
+ }
+
+
  /**
  * Render
  */
@@ -56,10 +67,40 @@ export default class LoginForm extends Component {
  <View style={[CommonStyle.rowJustifyEnd, CommonStyle.paddingTop3x]}>
  <Text style={[CommonStyle.colorWhite, ComponentsStyle.link]} onPress={this.onForgotPress}>{i18n.t('auth.forgot')}</Text>
  </View>
+ <View style={[CommonStyle.rowJustifyCenter, CommonStyle.paddingTop3x, CommonStyle.marginTop4x]}>
+ <Icon name="md-flag" size={18} color="white" style={{paddingTop:1}}/>
+ <Text style={[CommonStyle.colorWhite]} onPress={this.showLanguages}> {i18n.getCurrentLanguageName()}</Text>
+ </View>
+ <ModalPicker
+ onSelect={this.languageSelected}
+ onCancel={this.cancel}
+ show={this.state.showLanguages}
+ title={i18n.t('language')}
+ valueField="value"
+ labelField="name"
+ value={this.state.language}
+ items={i18n.getSupportedLocales()}
+ />
  </KeyboardAvoidingView>
  );
  }
 
+ showLanguages = () => {
+ this.setState({showLanguages: true});
+ }
+
+ /**
+ * Language selected
+ */
+ languageSelected = (language) => {
+ this.setState({language, showLanguages: false});
+ i18n.setLocale(language);
+ }
+
+ cancel = () => {
+ this.setState({showLanguages: false});
+ }
+
  getButtons() {
  const buttons = [
  <Button

src/common/services/i18n.service.js

@@ -115,6 +115,13 @@ class I18nService {
  i18n.locale = locale;
  }
 
+ getCurrentLanguageName() {
+ const locale = i18n.currentLocale();
+ const obj = this.getSupportedLocales().find(l => l.value === locale);
+ if (obj) return obj.name;
+ return '';
+ }
+
  /**
  * get supported locales
  */