Merge pull request #27 from sahilit/leaderboard

Fixed Sort on Button Bug, Improved UI and added dropdown navbar at Admin and User page
darthgera123 · Apr 13, 2019 · 26bbfc2 · 26bbfc2
2 parents ded09eb + 3237a0f
commit 26bbfc2
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 104 deletions.
diff --git a/go/src/gorm.db b/go/src/gorm.db
diff --git a/react-app/src/components/Admin/Admin.js b/react-app/src/components/Admin/Admin.js
@@ -31,24 +31,39 @@ class Admin extends Component {
       <div>
         <Router>
           <div>
-            <nav className="navbar navbar-default">
+            <nav id="menu-bar" className="navbar navbar-default">
               <div className="container-fluid">
                 <div className="navbar-header">
-                  <Link className="navbar-brand" to={'/'}>React App</Link>
+                  <Link className="navbar-brand" to={'/'}>Quiz App</Link>
+
+                  <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNav">
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                  </button>
                 </div>
-                <ul className="nav navbar-nav">
-                  <li><Link to={'/'}>Home</Link></li>
-                  <li><Link to={'/DeletePerson'}>Delete Person</Link></li>
-                  <li><Link to={'/ViewPeople'}>View People</Link></li>
-                  <li><Link to={'/CreateQuestion'}>Create Quiz</Link></li>
-                  <li><Link to={'/ViewQuestion'}>View Quiz</Link></li>
-                  <li><Link to={'/DeleteQuiz'}>Delete Quiz</Link></li>
-                  <li><Link to={'/PlayQuiz'}>Play Quiz</Link></li>
-                  <li><Link to={'/EditQuestion'}>Edit Question</Link></li>
-                  <li><Link to={'/Leaderboard'}>Leaderboard</Link></li>
-                  <li><Link to={'/'}><button className="btn btn-danger" onClick={this.HandleSignOut}>Sign Out</button></Link></li>
+                <div className="collapse-navbar-collapse" id="myNav">
+                  <ul className="nav navbar-nav">
+                    <li><Link to={'/'}>Home</Link></li>
+                    <li><Link to={'/DeletePerson'}>Delete Person</Link></li>
+                    <li><Link to={'/ViewPeople'}>View People</Link></li>
+                    <li><Link to={'/CreateQuestion'}>Create Quiz</Link></li>
+                    <li><Link to={'/ViewQuestion'}>View Quiz</Link></li>
+                    <li><Link to={'/DeleteQuiz'}>Delete Quiz</Link></li>
+                    <li><Link to={'/PlayQuiz'}>Play Quiz</Link></li>
+                    <li><Link to={'/EditQuestion'}>Edit Question</Link></li>
+                    <li><Link to={'/Leaderboard'}>Leaderboard</Link></li>
+                  </ul>
 
-                </ul>
+                  <ul className="nav navbar-nav navbar-right">
+                    <li>
+                      <Link to={'/'}> 
+                        <b>{JSON.parse(localStorage.getItem('user')).username.toUpperCase()}</b>
+                        <button className="btn btn-danger" onClick={this.HandleSignOut}>Sign Out</button>
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </nav>
             <Switch>

diff --git a/react-app/src/components/Login.js b/react-app/src/components/Login.js
@@ -59,13 +59,13 @@ class Login extends Component {
 
         return (
             <div className="App">
-                <header className="App-header">
-                    <h1 className="App-title">Login User</h1>
-                </header>
-                <br />
-                <br />
-                <div id="signup" className="formContainer container">
-                    <form name="SignIn" onSubmit={this.handleSubmit}>
+                <div id="login" className="formContainer container">
+                    <h1>Login</h1>
+
+                    {this.state.submitted && 
+                        <div className="error">Login Failed: Check Your Credentials</div>}
+                    
+                    <form name="LogIn" onSubmit={this.handleSubmit}>
                         <div className="form-group">
                             <label>Username</label>
                             <input type="text" required className="form-control" name="username" value={this.state.username} onChange={this.handleUChange} />
@@ -74,10 +74,8 @@ class Login extends Component {
                             <label>Password</label>
                             <input type="password" required className="form-control" name="password" value={this.state.password} onChange={this.handlePChange} />
                         </div>
-                        <button type="submit" className="btn btn-success">Sign In</button>
+                        <button type="submit" className="btn btn-primary">Sign In</button>
                     </form>
-                    {this.state.submitted &&
-                        <h4 className="text-danger">Login Failed   Check Your Credentials</h4>}
                 </div>
 
             </div>

diff --git a/react-app/src/components/NewPerson.css b/react-app/src/components/NewPerson.css
@@ -1,7 +1,63 @@
 .formContainer {
-  width: 200px
+  width: 350px;
+  margin: 10vh auto;
+  overflow: hidden;
+  border-radius: 7px;
+  padding: 0 0 10px;
+  box-shadow: 0 27px 55px 0 #00000033, 0 17px 17px 0 #00000015;
 }
 
-.red {
-  color: red;
+.formContainer h1 {
+  background: #337ab7;
+  color: #fff;
+  padding: 15px 20px;
+  text-align: center;
+  margin: 0;
+}
+
+.formContainer form {
+  padding: 20px 40px;
+}
+
+.formContainer .error, .formErrors {
+  width: 80%;
+  margin: 20px auto 0;
+  padding: 10px;
+  border: 1px solid #a94442;
+  color: #a94442;
+  background: #f2dede;
+  border-radius: 5px;
+  text-align: left;
+}
+
+.formContainer .success {
+  width: 80%;
+  margin: 20px auto 0;
+  padding: 10px;
+  border: 1px solid #07500a;
+  color: #07500a;
+  background: #f2ffde;
+  border-radius: 5px;
+  text-align: left;
+}
+
+
+#menu-bar {
+  background: #337ab7;
+}
+
+#menu-bar a {
+  color: #fff;
+}
+
+#menu-bar .active a {
+  background: #004b6f;
+}
+
+#menu-bar .navbar-right a {
+  padding: 8px 15px;
+}
+
+#menu-bar .navbar-right a b {
+  margin-right: 15px;
 }
diff --git a/react-app/src/components/NewPerson.js b/react-app/src/components/NewPerson.js
@@ -34,30 +34,35 @@ class NewPerson extends Component {
       passwordValid: false,
       correct: false,
       submitted: false,
+      formValid: false
     }
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   /* This will check for submission. It will send a post request, based on response print message */
   handleSubmit(event) {
     event.preventDefault();
-    let formData = { password: this.state.password, username: this.state.username, email: this.state.email }
 
-    fetch('http://localhost:8080/people', {
-      method: 'POST',
-      body: JSON.stringify(formData),
-    })
-      .then(response => {
-        console.log(response.status)
-        if (response.status === 400) {
-          this.setState({ correct: true });
-          console.log(this.state.correct);
-        }
-        else {
-          this.setState({ submitted: true });
-          console.log('Hello');
-        }
-      });
+    if(this.state.formValid) {
+      let formData = { password: this.state.password, username: this.state.username, email: this.state.email }
+
+      fetch('http://localhost:8080/people', {
+        method: 'POST',
+        body: JSON.stringify(formData),
+      })
+        .then(response => {
+          console.log(response.status)
+          if (response.status === 400) {
+            this.setState({ correct: true, submitted: false });
+            console.log(this.state.correct);
+          }
+          else {
+            this.setState({ submitted: true, correct: false });
+            console.log('Hello');
+          }
+        });
+    }
+
   }
   /* The given set of functions will be used for validating user inputs */
   handleUserInput = (e) => {
@@ -77,14 +82,14 @@ class NewPerson extends Component {
         usernameValid = value.length > 0;
         fieldValError.username = usernameValid ? '' : ' enter a valid username';
         break;
-      case 'email':
-        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-        fieldValError.email = emailValid ? '' : ' enter a valid email address';
-        break;
       case 'password':
         /* Password must have 1 lowercase character, 1 number and length >6 */
         passwordValid = value.match(/^(?=.*[a-z])+(?=.*[0-9])+(?=.*[!@#\$%\^&\*])+(?=.{6,})/);
-        fieldValError.password = passwordValid ? '' : '  must have 1 lowercase character, 1 number and length >6'
+        fieldValError.password = passwordValid ? '' : '  must have 1 symbol, 1 lowercase character, 1 number and length >6'
+        break;
+      case 'email':
+        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+        fieldValError.email = emailValid ? '' : ' enter a valid email address';
         break;
       default:
         break;
@@ -100,57 +105,53 @@ class NewPerson extends Component {
 
   validateForm() {
     this.setState({ formValid: this.state.emailValid && this.state.passwordValid && this.state.usernameValid });
+    console.log(this.state.formValid)
   }
   /* The main piece of code */
   render() {
 
+    const { formErrors, submitted, correct, username, password, email } = this.state;
+
     return (
       <div className="App">
-        <header className="App-header">
-          <h1 className="App-title">Sign-Up</h1>
-        </header>
-        <br /><br />
-        <div className="panel panel-default red">
-          <FormErrors formErrors={this.state.formErrors} />
-        </div>
         <div className="formContainer container">
+          <h1>Sign Up</h1>
+
+          {(formErrors.username !== '' || formErrors.password !== '' || formErrors.email !== '') &&
+            <FormErrors formErrors={formErrors} />}
+
+          {submitted &&
+              <div className="success">Registered Succesfully</div>}
+
+          {correct &&
+            <div className="error">Username exists already</div> }
+
           <form onSubmit={this.handleSubmit}>
             <div className="form-group">
               <label>Username</label>
               <input type="text" required className="form-control" name="username"
                 placeholder="Username"
-                value={this.state.username}
+                value={username}
                 onChange={this.handleUserInput} />
             </div>
             <div className="form-group">
               <label>Password</label>
               <input type="password" className="form-control" name="password"
                 placeholder="Password"
-                value={this.state.password}
+                value={password}
                 onChange={this.handleUserInput} />
             </div>
             <div className="form-group">
               <label>Email</label>
               <input type="email" required className="form-control" name="email"
                 placeholder="Email"
-                value={this.state.email}
+                value={email}
                 onChange={this.handleUserInput} />
             </div>
-            <button type="submit" className="btn btn-success">Register</button>
+            <button type="submit" className="btn btn-primary">Register</button>
           </form>
         </div>
 
-        {this.state.submitted &&
-          <div>
-            <h3 className="text-primary">Registered Succesfully</h3>
-          </div>
-        }
-        {this.state.correct &&
-          <div>
-            <h3 className="text-danger">Username exists already</h3>
-          </div>
-        }
-
       </div>
     );
   }

diff --git a/react-app/src/components/NewUser.js b/react-app/src/components/NewUser.js
@@ -11,32 +11,30 @@ class App extends Component {
       <div>
         <Router>
           <div>
-            <nav className="navbar navbar-default">
+            <nav id="menu-bar" className="navbar navbar-default">
               <div className="container-fluid">
                 <div className="navbar-header">
-                  <Link className="navbar-brand" to={'/'}>React App</Link>
+                  <Link className="navbar-brand" to={'/'}>Quiz App</Link>
 
                 <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNav">
-                        <span className="icon-bar"></span>
-                        <span className="icon-bar"></span>
-                        <span className="icon-bar"></span>
+                  <span className="icon-bar"></span>
+                  <span className="icon-bar"></span>
+                  <span className="icon-bar"></span>
                 </button>
                 </div>
                 <div className="collapse-navbar-collapse" id="myNav">
                 <ul className="nav navbar-nav">
                   <li className="active"><Link to={'/'}>Home</Link></li>
-
                   <li><Link to={'/NewPerson'}>Sign-Up</Link></li>
                   <li><Link to={'/Login'}>Login</Link></li>
                 </ul>
                 </div>
               </div>
             </nav>
             <Switch>
-                 <Route exact path='/' component={Home} />
-                 <Route exact path='/NewPerson' component={NewPerson} />
-                 <Route exact path='/Login' component={Login} />
-
+              <Route exact path='/' component={Home} />
+              <Route exact path='/NewPerson' component={NewPerson} />
+              <Route exact path='/Login' component={Login} />        
             </Switch>
           </div>
         </Router>

diff --git a/react-app/src/components/User/App.js b/react-app/src/components/User/App.js
@@ -28,18 +28,33 @@ class App extends Component {
       <div>
         <Router>
           <div>
-            <nav className="navbar navbar-default">
+            <nav id="menu-bar" className="navbar navbar-default">
               <div className="container-fluid">
                 <div className="navbar-header">
                   <Link className="navbar-brand" to={'/'}>Quiz App</Link>
+
+                  <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNav">
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                  </button>
                 </div>
-                <ul className="nav navbar-nav">
-                  <li><Link to={'/'}>Home</Link></li>
-                  <li><Link to={'/PlayQuiz'}>Play Quiz</Link></li>
-                  <li><Link to={'/Leaderboard'}>Leaderboard</Link></li>
-                  <li><Link to={'/'}><button className="btn btn-danger" onClick={this.HandleSignOut}>Sign Out</button></Link></li>
+                <div className="collapse-navbar-collapse" id="myNav">
+                  <ul className="nav navbar-nav">
+                    <li><Link to={'/'}>Home</Link></li>
+                    <li><Link to={'/PlayQuiz'}>Play Quiz</Link></li>
+                    <li><Link to={'/Leaderboard'}>Leaderboard</Link></li>
+                  </ul>
 
-                </ul>
+                  <ul className="nav navbar-nav navbar-right">
+                    <li>
+                      <Link to={'/'}> 
+                        <b>{JSON.parse(localStorage.getItem('user')).username.toUpperCase()}</b>
+                        <button className="btn btn-danger" onClick={this.HandleSignOut}>Sign Out</button>
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </nav>
             <Switch>