working navigation and code editor

app/navigation/EditUserNavigation.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import PropTypes from 'prop-types';
+
+import ChangeLoginScreen from '../screens/EditUser/ChangeLoginScreen.js';
+import UserScreen from '../screens/EditUser/UserScreen.js';
+
+const Stack = createStackNavigator();
+const navbarHeight = 65;
+
+export default class EditUserNavigation extends React.Component
+{
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Stack.Navigator initialRouteName="Profile">
+        <Stack.Screen name="Profile" options={{ headerStyle: { height: navbarHeight },
+          title: '', headerTransparent: true }}>
+          {props => <UserScreen {...props} logout={() => this.props.logout()}
+            token={this.props.token} url={this.props.url} />}
+        </Stack.Screen>
+        <Stack.Screen name="Edit" options={{ headerStyle: { height: navbarHeight },
+          title: 'Edit Username & Password', headerTransparent: true }}>
+          {props => <ChangeLoginScreen {...props} logout={() => this.props.logout()}
+            token={this.props.token} url={this.props.url} />}
+        </Stack.Screen>
+      </Stack.Navigator>
+    );
+  }
+}
+
+EditUserNavigation.propTypes = {
+  url: PropTypes.String,
+  token: PropTypes.string,
+  logout: PropTypes.function,
+}
+
+
+

app/navigation/MainNavigator.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import PropTypes from 'prop-types';
 
-import UserScreen from '../screens/UserScreen.js';
+import EditUserNavigation from './EditUserNavigation.js';
 import FavoritesScreen from '../screens/FavoritesScreen.js';
+import CodeScreen from '../screens/CodeScreen.js';
 import NotificationScreen from '../screens/NotificationScreen.js';
 import HelpScreen from '../screens/HelpScreen.js';
 
@@ -31,8 +32,12 @@ export default class MainNavigator extends React.Component
           {props => <FavoritesScreen {...props} logout={() => this.props.logout()}
           token={this.props.token} url={this.props.url} />}
         </Drawer.Screen>
+        <Drawer.Screen name="Code">
+          {props => <CodeScreen {...props} logout={() => this.props.logout()}
+          token={this.props.token} url={this.props.url} />}
+        </Drawer.Screen>
         <Drawer.Screen name="Account">
-          {props => <UserScreen {...props} logout={() => this.props.logout()}
+          {props => <EditUserNavigation {...props} logout={() => this.props.logout()}
           token={this.props.token} url={this.props.url} />}
         </Drawer.Screen>
         <Drawer.Screen name="Help">

app/screens/CodeScreen.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
+import Textarea from 'react-native-textarea';
+
+import TextButton from '../components/TextButton.js';
+
+import PropTypes from 'prop-types';
+
+export default class HomeScreen extends React.Component
+{
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      code: `functiom some_js_code() {
+  console.log(document.cookie);
+}`,
+    };
+
+    this.changeCode = this.changeCode.bind(this);
+    this.onRefresh = this.onRefresh.bind(this);
+    this.save = this.save.bind(this);
+  }
+
+  save() {
+    fetch(`${this.props.url}user/set_code`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      },
+      body: JSON.stringify({
+        code: this.state.code,
+      }),
+    }).then((response) => response.json()).then((body) => {
+      alert(body.msg);
+    }).catch((err) => {
+      console.error(err);
+      alert("Error: please check url format");
+    });
+  }
+
+  changeCode(text) {
+    this.setState({ code: text });
+  }
+
+  onRefresh() {
+    this.setState({refreshing: true});
+    fetch(`${this.props.url}user/get_code`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      },
+    }).then((response) => response.json()).then((body) => {
+      this.setState({code: body.code});
+      this.setState({refreshing: false});
+    }).catch((err) => {
+      console.error(err);
+      this.setState({refreshing: false});
+      alert("Error: please check url format");
+    });
+  }
+
+  componentDidMount() {
+    this.onRefresh();
+  }
+
+  render () {
+    return (
+      <View style={styles.container}>
+        <ScrollView contentContainerStyle={styles.container} style={{width: '100%', height: '100%'}}
+          refreshControl={<RefreshControl refreshing={this.state.refreshing}
+          onRefresh={this.onRefresh}/>}>
+            <Textarea containerStyle={styles.textareaContainer}
+              style={styles.textarea}
+              onChangeText={this.changeCode}
+              defaultValue={this.state.code}
+              placeholder={this.state.code}
+              placeholderTextColor={'#c7c7c7'}
+              underlineColorAndroid={'transparent'}
+            />
+          <TextButton text="Save" run={() => {this.save()}} />
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+HomeScreen.propTypes = {
+  url: PropTypes.string,
+  token: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#444333',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textareaContainer: {
+    height: '70%',
+    width: '90%',
+    padding: 5,
+    backgroundColor: '#444666',
+  },
+  textarea: {
+    textAlignVertical: 'top',  // hack android
+    height: '100%',
+    fontSize: 14,
+    color: '#fff',
+  },
+});

app/screens/EditUser/ChangeLoginScreen.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Text, StyleSheet, TextInput, View } from 'react-native';
+import PropTypes from 'prop-types';
+import TextButton from '../../components/TextButton.js';
+
+export default class ChangeLoginScreen extends React.Component
+{
+  constructor(props) {
+    super(props);
+    this.state = {
+      register: false,
+      user: '',
+      pass: ''
+    }
+
+    this.setUser = this.setUser.bind(this);
+    this.setPass = this.setPass.bind(this);
+    this.login = this.login.bind(this);
+  }
+
+  setUser(text) {
+    this.setState({ user: text });
+  }
+
+  setPass(text) {
+    this.setState({ pass: text });
+  }
+
+  login() {
+    if (this.state.user.length > 0) {
+      fetch(`${this.props.url}user/change_username`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'authorization': `Bearer ${this.props.token}`
+        },
+        body: JSON.stringify({
+          username: this.state.user,
+        }),
+      }).then((response) => response.json()).then((json) => {
+        alert(json.msg);
+        this.props.logout();
+      }).catch((err) => {
+        console.error(err);
+        alert("Error: Could not connect");
+        this.props.logout();
+      });
+    }
+    if (this.state.pass.length > 0) {
+      fetch(`${this.props.url}user/change_password`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'authorization': `Bearer ${this.props.token}`
+        },
+        body: JSON.stringify({
+          password: this.state.pass,
+        }),
+      }).then((response) => response.json()).then((json) => {
+        alert(json.msg);
+        this.props.logout();
+      }).catch((err) => {
+        console.error(err);
+        alert("Error: Could not connect");
+        this.props.logout();
+      });
+    }
+  }
+
+  render () {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.header}>Warning</Text>
+        <Text style={styles.para}>On modification you will be asked to login with your new Id</Text>
+        <TextInput style={styles.input} onChangeText={text => this.setUser(text)}
+          placeholderTextColor={'#fff'} placeholder={"new username"} value={this.state.user} />
+        <TextInput style={styles.input} secureTextEntry={true} placeholder={"new password"}
+          placeholderTextColor={'#fff'} onChangeText={text => this.setPass(text)} value={this.state.pass} />
+        <TextButton text="Change" run={() => {this.login()}} />
+      </View>
+    );
+  }
+}
+
+ChangeLoginScreen.propTypes = {
+  url: PropTypes.string,
+  token: PropTypes.string,
+  logout: PropTypes.function,
+  navigation: PropTypes.object
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#444333',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    fontSize: 25,
+    color: '#fff',
+    paddingLeft: 5,
+    paddingRight: 10,
+    borderBottomWidth: 1,
+    borderColor: '#fff',
+    marginBottom: 15,
+    width: '90%',
+  },
+  header: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#fff',
+    paddingLeft: 5,
+    paddingRight: 10,
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  para: {
+    fontSize: 15,
+    color: '#aaaaaa',
+    paddingLeft: 5,
+    paddingRight: 10,
+    marginBottom: 35,
+    marginRight: 10,
+    marginLeft: 10,
+    textAlign: 'center',
+  },
+});