Improving Login Page

functions/handlers/post.js

@@ -17,7 +17,6 @@ exports.putPost = (req, res) => {
 
     admin.firestore().collection('posts').add(newPost)
     .then((doc) => {
-        doc.update({postId: doc.id})
         const resPost = newPost;
         resPost.postId = doc.id;
         return res.status(200).json(resPost);
@@ -68,36 +67,4 @@ exports.getallPosts = (req, res) => {
 
 exports.getFilteredPosts = (req, res) => {
     admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
-};
-
-exports.getFilteredPostsOnTopics = (req, res) => {
-    
-    // get topics that user follows
-    // make a set storing all topics
-    // for each post, make a set of topics and if A and B != 0, you can display post
-    var queryTopics = admin.firestore().collection('users').where('userHandle', '==', req.userHandle)
-    var topics = new Set();
-    topics.add(queryTopics.get().microBlogTopics)
-    
-    //console.log(topics);
-    
-    var queryPosts = admin.firestore().collection('posts').where('microBlogTopics','==', topics);
-    
-    console.log(queryPosts);
-    
-    queryPosts.get()
-    .then(function(Posts) {
-        let posts = [];
-        Posts.forEach(function(doc){
-            posts.push(doc.data());
-        });
-        return res.status(200).json(posts);
-    })
-    .then(function() {
-        res.status(200).send("Successfully retrieved filtered posts from database.");
-        return;
-    })
-    .catch(function(err) {
-        res.status(500).send("Failed to retrieve posts from database.", err);
-    });
-}
+};

functions/handlers/users.js

@@ -77,8 +77,7 @@ exports.signup = (req, res) => {
         createdAt: newUser.createdAt,
         userId,
         followedTopics: [],
-        imageUrl: defaultImageUrl,
-        verified: false
+        imageUrl: defaultImageUrl
       };
       return db.doc(`/users/${newUser.handle}`).set(userCred);
     })
@@ -347,59 +346,6 @@ exports.getAuthenticatedUser = (req, res) => {
     });
 };
 
-// Verifies the user sent to the request
-// Must be run by the Admin user
-exports.verifyUser = (req, res) => {
-  if (req.userData.handle !== "Admin") {
-    return res.status(403).json({error: "This must be done as Admin"});
-  }
-
-  db.doc(`/users/${req.body.user}`)
-    .get()
-    .then((doc) => {
-      if (doc.exists) {
-        let verifiedUser = doc.data();
-        verifiedUser.verified = true;
-        return db.doc(`/users/${req.body.user}`).set(verifiedUser, {merge: true});
-      } else {
-        return res.status(400).json({error: `User ${req.body.user} was not found`});
-      }
-    })
-    .then(() => {
-      return res.status(201).json({message: `${req.body.user} is now verified`});
-    })
-    .catch((err) => {
-      console.error(err);
-      return res.status(500).json({error: err.code});
-    });
-}
-
-// Unverifies the user sent to the request
-// Must be run by admin
-exports.unverifyUser = (req, res) => {
-  if (req.userData.handle !== "Admin") {
-    return res.status(403).json({error: "This must be done as Admin"});
-  }
-
-  db.doc(`/users/${req.body.user}`)
-    .get()
-    .then((doc) => {
-      if (doc.exists) {
-        let unverifiedUser = doc.data();
-        unverifiedUser.verified = false;
-        return db.doc(`/users/${req.body.user}`).set(unverifiedUser, {merge: true});
-      } else {
-        return res.status(400).json({error: `User ${req.body.user} was not found`});
-      }
-    })
-    .then(() => {
-      return res.status(201).json({message: `${req.body.user} is no longer verified`});
-    })
-    .catch((err) => {
-      console.error(err);
-      return res.status(500).json({error: err.code});
-    });
-}
 exports.getUserHandles = (req, res) => {
   admin
     .firestore()

functions/index.js

@@ -17,8 +17,6 @@ const {
   signup,
   deleteUser,
   updateProfileInfo,
-  verifyUser,
-  unverifyUser,
   getUserHandles
 } = require("./handlers/users");
 
@@ -44,28 +42,18 @@ app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
 app.get("/user", fbAuth, getAuthenticatedUser);
 
-// Verifies the user sent to the request
-// Must be run by the Admin user
-app.post("/verifyUser", fbAuth, verifyUser);
-
-// Unverifies the user sent to the request
-// Must be run by admin
-app.post("/unverifyUser", fbAuth, unverifyUser);
-
 // get user handles with search phase
 app.get("/getUserHandles", fbAuth, getUserHandles);
 
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, getFilteredPostsOnTopics } = require("./handlers/post");
+const { getallPostsforUser, getallPosts, putPost } = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
 app.get("/getallPosts", getallPosts);
 
-app.get("/getFilteredPostsOnTopics", getFilteredPostsOnTopics);
-
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);
 

twistter-frontend/src/App.js

@@ -31,7 +31,6 @@ import Delete from "./pages/Delete";
 import writeMicroblog from "./Writing_Microblogs.js";
 import editProfile from "./pages/editProfile";
 import userLine from "./Userline.js";
-import verify from "./pages/verify";
 import Search from "./pages/Search.js";
 
 const theme = createMuiTheme(themeObject);
@@ -77,7 +76,6 @@ class App extends Component {
                 <Route exact path="/home" component={home} />
                 <Route exact path="/user" component={user} />
                 <Route exact path="/edit" component={editProfile} />
-                <Route exact path="/verify" component={verify}/>
                 <Route exact path="/search" component={Search} />
 
                 <AuthRoute exact path="/" component={home} />

twistter-frontend/src/pages/Login.js

@@ -24,7 +24,8 @@ const styles = {
     textAlign: "center"
   },
   textField: {
-    marginBottom: 20
+    marginBottom: 20,
+    border: ""
   },
   pageTitle: {
     // marginTop: 20,
@@ -39,6 +40,12 @@ const styles = {
   },
   p: {
     fontFamily: "cursive",
+    backgroundColor:  "lightgrey",
+  },
+  div: {
+    borderRadius: "5px",
+    backgroundColor: "#f2f2f2",
+    padding: "20px",
   }
 };
 

twistter-frontend/src/pages/user.js

@@ -16,9 +16,8 @@ import Grid from "@material-ui/core/Grid";
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
-import AddCircle from '@material-ui/icons/AddCircle';
-import TextField from '@material-ui/core/TextField';
-import VerifiedIcon from '@material-ui/icons/CheckSharp';
+import AddCircle from "@material-ui/icons/AddCircle";
+import TextField from "@material-ui/core/TextField";
 
 // component
 import '../App.css';
@@ -73,8 +72,7 @@ class user extends Component {
       .then(res => {
         this.setState({
           profile: res.data.credentials.handle,
-          imageUrl: res.data.credentials.imageUrl,
-          verified: res.data.credentials.verified ? res.data.credentials.verified : false
+          imageUrl: res.data.credentials.imageUrl
         });
       })
       .catch(err => console.log(err));
@@ -102,12 +100,10 @@ class user extends Component {
   render() {
     let authenticated = this.props.user.authenticated;
     let classes = this.props;
-
     let profileMarkup = this.state.profile ? (
-      <div>
-        <Typography variant='h5'>@{this.state.profile} {this.state.verified ? (<VerifiedIcon style={{fill: "#1397D5"}}/>): (null)}</Typography>
-      </div>) : (<p>loading username...</p>);
-    
+      <p>
+      <Typography variant='h5'>{this.state.profile}</Typography>
+      </p>) : (<p>loading username...</p>);
     let topicsMarkup = this.state.topics ? (
       this.state.topics.map(
         topic => (
@@ -170,36 +166,7 @@ class user extends Component {
             onClick={this.handleAddCircle}
           />
           <br />
-          <Grid container direction="column">
-            <Grid item>
-              {
-                authenticated && 
-                <Button 
-                style={{width:150, marginBottom: 10, marginTop: 5}}
-                component={ Link } 
-                to='/edit' 
-                variant="outlined" 
-                color="primary"
-                >
-                  Edit Profile
-                </Button>}
-            </Grid>
-            <Grid item>
-              {
-                authenticated && 
-                this.state.profile === 'Admin' && 
-                <Button
-                style={{width:150}}
-                component={ Link } 
-                variant="outlined" 
-                color="primary"
-                
-                to='/verify'
-                >
-                  Verify Users
-                </Button>}
-            </Grid>
-          </Grid>
+          {authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
         </Grid>
         <Grid item sm={4} xs={8}>
           {postMarkup}

twistter-frontend/src/pages/verify.js

@@ -1,153 +0,0 @@
-import React, { Component } from "react";
-import axios from "axios";
-import PropTypes from "prop-types";
-// TODO: Add a read-only '@' in the left side of the handle input
-// TODO: Add a cancel button, that takes the user back to their profile page
-
-// Material-UI stuff
-import Button from "@material-ui/core/Button";
-import { Link } from 'react-router-dom';
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import withStyles from "@material-ui/core/styles/withStyles";
-
-const styles = {
-  form: {
-    textAlign: "center"
-  },
-  textField: {
-    marginBottom: 30
-  },
-  pageTitle: {
-    // marginTop: 20,
-    marginBottom: 40
-  },
-  button: {
-    positon: "relative",
-    marginBottom: 10
-  },
-  progress: {
-    position: "absolute"
-  }
-};
-
-export class verify extends Component {
-
-  // Constructor for the state
-  constructor() {
-    super();
-    this.state = {
-      handle: "",
-      loading: false,
-      errors: {}
-    };
-  }
-
-//   // Runs whenever the submit button is clicked.
-  handleSubmit = (event) => {
-    event.preventDefault();
-    this.setState({
-      loading: true
-    });
-    const verifyHandle = {
-      user: this.state.handle
-    };
-      
-    axios
-      .post("/verifyUser", verifyHandle)
-      .then((res) => {
-        console.log(res);
-        this.setState({
-          loading: false
-        });
-        // this.props.history.push('/');
-        // TODO: Need to redirect user to their profile page
-      })
-      .catch((err) => {
-        console.log(err);
-        this.setState({
-          errors: err.response.data,
-          loading: false
-        });
-      });
-  };
-
-  // Updates the state whenever one of the textboxes changes.
-  // The key is the name of the textbox and the value is the
-  // value in the text box.
-  // Also sets errors to null of textboxes that have been edited
-  handleChange = (event) => {
-    this.setState({
-      [event.target.name]: event.target.value,
-      errors: {
-        [event.target.name]: null
-      }
-    });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { errors, loading } = this.state;
-
-    return (
-      <Grid container className={classes.form}>
-        <Grid item sm />
-        <Grid item sm>
-          <Typography variant="h4" className={classes.pageTitle}>
-            Verify Users
-          </Typography>
-          <form noValidate onSubmit={this.handleSubmit}>
-            <TextField
-              id="handle"
-              name="handle"
-              label="Username"
-              className={classes.textField}
-              value={this.state.handle}
-              // helperText={errors.handle}
-              // error={errors.handle ? true : false}
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-            />
-            <Grid container direction="column">
-              <Grid item>
-                <Button
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  className={classes.button}
-                  disabled={loading}
-                >
-                  Submit
-                  {loading && (
-                    <CircularProgress size={30} className={classes.progress} />
-                  )}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  variant="oulined"
-                  color="primary"
-                  // className={classes.button}
-                  component={ Link }
-                  to='/user'
-                >
-                  Back to Profile
-                </Button>
-              </Grid>
-            </Grid>
-          </form>
-        </Grid>
-        <Grid item sm />
-      </Grid>
-    );
-  }
-}
-
-verify.propTypes = {
-  classes: PropTypes.object.isRequired
-};
-
-export default withStyles(styles)(verify);