Verify users front-end

functions/handlers/users.js

@@ -238,7 +238,8 @@ exports.deleteUser = (req, res) => {
     .then((query) => {
       query.forEach((snap) => {
         snap.ref.delete();
-      })
+      });
+      return;
     })
 
   let promises = [

twistter-frontend/src/App.js

@@ -31,6 +31,7 @@ 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);
@@ -76,6 +77,7 @@ 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/user.js

@@ -102,6 +102,7 @@ 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>
@@ -169,7 +170,36 @@ class user extends Component {
             onClick={this.handleAddCircle}
           />
           <br />
-          {authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
+          <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>
         </Grid>
         <Grid item sm={4} xs={8}>
           {postMarkup}

twistter-frontend/src/pages/verify.js

@@ -0,0 +1,153 @@
+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);