PLT-5634 Add account settings scene (#297)

* PLT-5634 RN: Add account settings scene

* Rebase

app/actions/navigation/index.js

@@ -172,3 +172,12 @@ export function closeModal() {
         }, getState);
     };
 }
+
+export function goToModalAccountSettings() {
+    return async (dispatch, getState) => {
+        dispatch({
+            type: NavigationTypes.NAVIGATION_MODAL,
+            route: Routes.AccountSettings
+        }, getState);
+    };
+}

app/navigation/routes.js

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import {
+    AccountSettings,
     ChannelView,
     ChannelDrawer,
     ChannelInfo,
@@ -29,6 +30,14 @@ export const RouteTransitions = keyMirror({
 });
 
 export const Routes = {
+    AccountSettings: {
+        key: 'AccountSettings',
+        transition: RouteTransitions.Horizontal,
+        component: AccountSettings,
+        navigationProps: {
+            title: {id: 'user.settings.modal.title', defaultMessage: 'Account Settings'}
+        }
+    },
     ChannelInfo: {
         key: 'ChannelInfo',
         transition: RouteTransitions.Horizontal,

app/scenes/account_settings/account_settings.js

@@ -0,0 +1,152 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {PropTypes, PureComponent} from 'react';
+import {
+    StyleSheet,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import FormattedText from 'app/components/formatted_text';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.03)
+        },
+        item: {
+            height: 45,
+            flexDirection: 'row',
+            alignItems: 'center'
+        },
+        itemLeftIcon: {
+            color: changeOpacity(theme.centerChannelColor, 0.5)
+        },
+        itemLeftIconContainer: {
+            width: 18,
+            marginRight: 15,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        itemText: {
+            fontSize: 16,
+            color: theme.centerChannelColor,
+            flex: 1
+        },
+        itemRightIcon: {
+            color: changeOpacity(theme.centerChannelColor, 0.5)
+        },
+        itemsContainer: {
+            marginTop: 30,
+            backgroundColor: theme.centerChannelBg,
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
+            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1)
+        },
+        itemWrapper: {
+            marginHorizontal: 15
+        },
+        separator: {
+            height: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1)
+        },
+        wrapper: {
+            flex: 1,
+            backgroundColor: theme.centerChannelBg
+        }
+    });
+});
+
+export default class AccountSettings extends PureComponent {
+    static propTypes = {
+        theme: PropTypes.object.isRequired
+    }
+
+    static navigationProps = {
+        renderLeftComponent: (props, emitter, theme) => {
+            return (
+                <TouchableOpacity
+                    style={{flex: 1, paddingHorizontal: 15, justifyContent: 'center'}}
+                    onPress={props.onNavigateBack}
+                >
+                    <FormattedText
+                        id='admin.select_team.close'
+                        defaultMessage='Close'
+                        style={{color: theme.sidebarHeaderTextColor}}
+                    />
+                </TouchableOpacity>
+            );
+        }
+    };
+
+    // The enabled arg can be removed once all the scenes have been implemented.
+    buildItemRow = (icon, id, defaultMessage, action, separator = true, enabled = false) => {
+        if (!enabled) {
+            return null;
+        }
+
+        const {theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <View
+                key={id}
+                style={style.itemWrapper}
+            >
+                <TouchableOpacity
+                    style={style.item}
+                    onPress={action}
+                >
+                    <View style={style.itemLeftIconContainer}>
+                        <Icon
+                            name={icon}
+                            size={18}
+                            style={style.itemLeftIcon}
+                        />
+                    </View>
+                    <FormattedText
+                        id={id}
+                        defaultMessage={defaultMessage}
+                        style={style.itemText}
+                    />
+                    <Icon
+                        name='angle-right'
+                        size={18}
+                        style={style.itemRightIcon}
+                    />
+                </TouchableOpacity>
+                {separator && <View style={style.separator}/>}
+            </View>
+        );
+    }
+
+    renderItems = () => {
+        return [
+            this.buildItemRow('gear', 'user.settings.modal.general', 'General', () => true, true, true),
+            this.buildItemRow('lock', 'user.settings.modal.security', 'Security', () => true, true, true),
+            this.buildItemRow('bell', 'user.settings.modal.notifications', 'Notifications', () => true, true, false),
+            this.buildItemRow('mobile', 'user.settings.modal.display', 'Display', () => true, true, false),
+            this.buildItemRow('wrench', 'user.settings.modal.advanced', 'Advanced', () => true, false, false)
+        ];
+    }
+
+    render() {
+        const {theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <View style={style.wrapper}>
+                <View style={style.container}>
+                    <View style={style.itemsContainer}>
+                        {this.renderItems()}
+                    </View>
+                </View>
+            </View>
+        );
+    }
+}

app/scenes/account_settings/account_settings_container.js

@@ -0,0 +1,25 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+
+import {getTheme} from 'service/selectors/entities/preferences';
+
+import navigationSceneConnect from '../navigationSceneConnect';
+import AccountSettings from './account_settings';
+
+function mapStateToProps(state) {
+    return {
+        theme: getTheme(state)
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+
+        }, dispatch)
+    };
+}
+
+export default navigationSceneConnect(mapStateToProps, mapDispatchToProps)(AccountSettings);

app/scenes/account_settings/index.js

@@ -0,0 +1,6 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import AccountSettingsContainer from './account_settings_container';
+
+export default AccountSettingsContainer;

app/scenes/index.js

@@ -1,6 +1,7 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import AccountSettings from './account_settings';
 import Channel from './channel';
 import ChannelDrawer from './channel_drawer';
 import ChannelInfo from './channel_info';
@@ -21,6 +22,7 @@ import Thread from './thread';
 import UserProfile from './user_profile';
 
 module.exports = {
+    AccountSettings,
     ChannelView: Channel, // Special case the name for this one to avoid ambiguity
     ChannelDrawer,
     ChannelInfo,

app/scenes/right_menu_drawer/right_menu_drawer.js

@@ -50,6 +50,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
 export default class RightMenuDrawer extends React.Component {
     static propTypes = {
         actions: React.PropTypes.shape({
+            goToModalAccountSettings: React.PropTypes.func.isRequired,
             goToModalSelectTeam: React.PropTypes.func.isRequired,
             logout: React.PropTypes.func.isRequired
         }).isRequired,
@@ -62,7 +63,7 @@ export default class RightMenuDrawer extends React.Component {
         return (
             <ScrollView style={Styles.container}>
                 <Divider style={Styles.divider}/>
-                <RightMenuDrawerItem>
+                <RightMenuDrawerItem onPress={this.props.actions.goToModalAccountSettings}>
                     <Icon
                         style={Styles.icon}
                         name='cog'

app/scenes/right_menu_drawer/right_menu_drawer_container.js

@@ -4,7 +4,7 @@
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
-import {goBack, goToModalSelectTeam} from 'app/actions/navigation';
+import {goToModalAccountSettings, goBack, goToModalSelectTeam} from 'app/actions/navigation';
 
 import {logout} from 'service/actions/users';
 import {getTheme} from 'service/selectors/entities/preferences';
@@ -21,6 +21,7 @@ function mapStateToProps(state, ownProps) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
+            goToModalAccountSettings,
             goBack,
             goToModalSelectTeam,
             logout