better help menu

p4p1 · Mar 1, 2021 · ba0e27e · ba0e27e
1 parent 899456e
commit ba0e27e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 9 deletions.
diff --git a/app/components/FavNotif.js b/app/components/FavNotif.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import Swipeout from 'react-native-swipeout';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-import { /*faQuestion,*/ faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faQuestion, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 import PropTypes from 'prop-types';
 
@@ -11,11 +11,11 @@ export default class FavNotif extends React.Component
   constructor(props) {
     super(props);
     this.swipeData = [
-      /*{ // TODO: add a more information feature to the notifications
+      { // TODO: add a more information feature to the notifications
         text: <FontAwesomeIcon color={'white'} icon={faQuestion} size={25} />,
         backgroundColor: 'blue',
         onPress: () => { this.props.info(this.props.data._id) }
-      },*/
+      },
       {
         text: <FontAwesomeIcon color={'white'} icon={faTrash} size={25} />,
         backgroundColor: 'red',

diff --git a/app/screens/FavoritesScreen.js b/app/screens/FavoritesScreen.js
@@ -35,8 +35,22 @@ export default class FavoritesScreen extends React.Component
   }
 
   info(key) {
-    console.log(key);
-    this.setState({modal: !this.state.modal});
+    fetch(`${this.props.url}user/get_notification/${key}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      }
+    }).then((response) => response.json()).then((json) => {
+      console.log(json);
+      this.setState({modal: !this.state.modal});
+      this.setState({selected: json[0]});
+    }).catch((err) => {
+      console.error(err);
+      alert("Error: Could not connect");
+      this.props.logout();
+    });
   }
 
   async remove(index) {
@@ -60,8 +74,26 @@ export default class FavoritesScreen extends React.Component
     return (
       <View style={styles.container}>
         <Modal animationType={"slide"} transparent={true}
-            visible={this.state.modal} onRequestClose={this.info}>
-          <Text>HELLO</Text>
+            visible={this.state.modal} onRequestClose={() =>
+            this.setState({modal: !this.state.modal})}>
+          <View style={styles.modealContainer}>
+            <View style={styles.inspector}>
+              <Text style={styles.header}>
+                {this.state.selected !== undefined ? this.state.selected.method : ""} 
+                {this.state.selected !== undefined ? this.state.selected.link: ""}
+              </Text>
+              <Text style={styles.para}>
+                {this.state.selected !== undefined && (this.state.selected.body !== undefined &&
+                this.state.selected.body.length == 0) ? this.state.selected.body : "The body is empty"}
+              </Text>
+              <Text style={styles.para}>
+                {this.state.selected !== undefined && this.state.selected.header[0]? this.state.selected.header[0].cookie : ""}
+              </Text>
+              <Text style={styles.para}>
+                {this.state.selected !== undefined && this.state.selected.header[0]? this.state.selected.header[0].referer: ""}
+              </Text>
+            </View>
+          </View>
         </Modal>
         <ScrollView style={{width:'90%', height:'80%' }}
           refreshControl={<RefreshControl refreshing={this.state.refreshing}
@@ -129,5 +161,16 @@ const styles = StyleSheet.create({
     height: 150,
     marginBottom: 50,
     borderRadius: 30,
+  },
+  inspector: {
+    width: '85%',
+    backgroundColor: '#222222',
+    height: '95%'
+  },
+  modealContainer: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
   }
 });
diff --git a/app/screens/HelpScreen.js b/app/screens/HelpScreen.js
@@ -1,10 +1,14 @@
 import React from 'react';
-import { Text, StyleSheet, Image, View, ScrollView } from 'react-native';
+import { Text, Linking, Button, StyleSheet, Image, View, ScrollView } from 'react-native';
 import PropTypes from 'prop-types';
 
 import SplashScreen from './SplashScreen';
 
 const logo = '../assets/icon.png';
+const githubURL = "https://github.com/p4p1/xss_bomb";
+const wikiURL= "https://github.com/p4p1/xss_bomb/wiki";
+const trelloURL= "https://github.com/p4p1/xss_bomb/projects";
+const meURL = "https://leosmith.xyz";
 
 export default class HelpScreen extends React.Component
 {
@@ -13,6 +17,18 @@ export default class HelpScreen extends React.Component
     this.state = {
       api_id: undefined,
     };
+
+    this.openURL = this.openURL.bind(this);
+  }
+
+  async openURL(url) {
+    const supported = await Linking.canOpenURL(url)
+
+    if (supported) {
+      await Linking.openURL(url);
+    } else {
+      alert("This link is not supported by your device");
+    }
   }
 
   componentDidMount() {
@@ -55,21 +71,39 @@ export default class HelpScreen extends React.Component
             receives a request it will send you a notification and you will be able to
             inspect it on your mobile device.
           </Text>
+          <Button title={"Open wiki"} onPress={() => this.openURL(wikiURL)}/>
+          <View style={styles.padding}></View>
           <Text style={styles.header}>Who built this?</Text>
           <Text style={styles.para}>
             This app was built by me (p4p1) over on github and is provided for free
             there if you wish to support me this app will probably be on the store for
             $2 ish.
           </Text>
+          <Button title={"About author"} onPress={() => this.openURL(meURL)}/>
+          <View style={styles.padding}></View>
           <Text style={styles.header}>Is this open source?</Text>
           <Text style={styles.para}>
             Yes this app is open source and you can contribute over on github.
           </Text>
+          <Button title={"View on github"} onPress={() => this.openURL(githubURL)}/>
+          <View style={styles.padding}></View>
           <Text style={styles.header}>Can I host my own instance?</Text>
           <Text style={styles.para}>
             Yes you can host your own instance of this app and it's backend there
             is a tutorial on the official wiki of the app over on github.
           </Text>
+          <Text style={styles.header}>Updates?</Text>
+          <Text style={styles.para}>
+            All of the updates are first pushed on github then the rest. If you wish
+            to see how this app is evolving you can view the project page.
+          </Text>
+          <Button title={"Open project logs"} onPress={() => this.openURL(trelloURL)}/>
+          <View style={styles.padding}></View>
+          <Text style={styles.header}>Bugs or an idea?</Text>
+          <Text style={styles.para}>
+            If you find a bug or you just have and idea for the app please open
+            an issue on github so that I can fix it as soon as possible.
+          </Text>
         </ScrollView>
       </View>
     );
@@ -120,5 +154,8 @@ const styles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  padding: {
+    marginBottom: 20,
   }
 });
diff --git a/app/screens/NotificationScreen.js b/app/screens/NotificationScreen.js
@@ -110,7 +110,7 @@ export default class HomeScreen extends React.Component
     }).catch((err) => {
       console.error(err);
       alert("Error: Could not connect");
-      //this.props.logout();
+      this.props.logout();
     });
   }
 
@@ -151,6 +151,12 @@ export default class HomeScreen extends React.Component
                 {this.state.selected !== undefined && (this.state.selected.body !== undefined &&
                 this.state.selected.body.length == 0) ? this.state.selected.body : "The body is empty"}
               </Text>
+              <Text style={styles.para}>
+                {this.state.selected !== undefined && this.state.selected.header[0]? this.state.selected.header[0].cookie : ""}
+              </Text>
+              <Text style={styles.para}>
+                {this.state.selected !== undefined && this.state.selected.header[0]? this.state.selected.header[0].referer: ""}
+              </Text>
             </View>
           </View>
         </Modal>