From a6f6185f60859035c7f5f223c6b61b2d9c0feb83 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Thu, 21 Mar 2019 02:04:20 +0530 Subject: [PATCH 1/9] Fixed Sort on Button Bug --- react-app/src/components/Leaderboard.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/react-app/src/components/Leaderboard.js b/react-app/src/components/Leaderboard.js index c08fbcf..ca41833 100644 --- a/react-app/src/components/Leaderboard.js +++ b/react-app/src/components/Leaderboard.js @@ -22,8 +22,7 @@ class Leaderboard extends Component{ .then(genres => this.setState({genres: genres})); fetch('http://127.0.0.1:8080/score/') .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } showTable(event){ @@ -32,24 +31,19 @@ class Leaderboard extends Component{ { fetch('http://127.0.0.1:8080/score/') .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } else{ fetch('http://127.0.0.1:8080/score-genre/'+genre) .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } } - sortTable(event){ - this.setState(prevState => { - this.state.tables.sort((a, b) => (b.total - a.total)) - }); - - } + // sortTable(event){ + // this.setState({table: this.state.tables.sort((a, b) => (b.total - a.total))}); + // } render(){ return( @@ -68,7 +62,7 @@ class Leaderboard extends Component{

- + {/* */}
From 6cc903863418888bfd2f30f0fa0c75a7832e0749 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Thu, 21 Mar 2019 02:08:28 +0530 Subject: [PATCH 2/9] minor fix --- react-app/src/components/Leaderboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-app/src/components/Leaderboard.js b/react-app/src/components/Leaderboard.js index ca41833..01459c7 100644 --- a/react-app/src/components/Leaderboard.js +++ b/react-app/src/components/Leaderboard.js @@ -11,7 +11,7 @@ class Leaderboard extends Component{ } this.showTable = this.showTable.bind(this); - this.sortTable = this.sortTable.bind(this); + // this.sortTable = this.sortTable.bind(this); } componentDidMount() { From 77bbedb21cbbdb8cd7a561fcce4c1568d368cd89 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Sun, 31 Mar 2019 00:53:20 +0530 Subject: [PATCH 3/9] Fixed Sort on Button Bug --- react-app/src/components/User/Leaderboard.js | 24 ++++++++------------ 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/react-app/src/components/User/Leaderboard.js b/react-app/src/components/User/Leaderboard.js index 302cbb4..d0d9d82 100644 --- a/react-app/src/components/User/Leaderboard.js +++ b/react-app/src/components/User/Leaderboard.js @@ -11,7 +11,7 @@ class Leaderboard extends Component{ } this.showTable = this.showTable.bind(this); - this.sortTable = this.sortTable.bind(this); + // this.sortTable = this.sortTable.bind(this); } componentDidMount() { @@ -22,8 +22,7 @@ class Leaderboard extends Component{ .then(genres => this.setState({genres: genres})); fetch('http://127.0.0.1:8080/score/') .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } showTable(event){ @@ -32,24 +31,21 @@ class Leaderboard extends Component{ { fetch('http://127.0.0.1:8080/score/') .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } else{ fetch('http://127.0.0.1:8080/score-genre/'+genre) .then(response => response.json()) - .then(tables => this.setState({tables:tables})) - .then(this.setState(tables => {this.state.tables.sort((a,b) => (a.total - b.total))})) + .then(tables => this.setState({ tables: tables.sort((a, b) => (b.total - a.total)) })) } } - sortTable(event){ - this.setState(prevState => { - this.state.tables.sort((a, b) => (b.total - a.total)) - }); - - } + // sortTable(event){ + // this.setState(prevState => { + // this.state.tables.sort((a, b) => (b.total - a.total)) + // }); + // } render(){ return( @@ -68,7 +64,7 @@ class Leaderboard extends Component{

- + {/* */}
From 14bca75c65e320c44f2a49fd6ae14e7be6f18292 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Sun, 31 Mar 2019 03:35:38 +0530 Subject: [PATCH 4/9] Improved Login and SignUp page UI --- react-app/src/components/Login.js | 18 +++--- react-app/src/components/NewPerson.css | 41 +++++++++++- react-app/src/components/NewPerson.js | 87 +++++++++++++------------- react-app/src/components/NewUser.js | 16 +++-- 4 files changed, 97 insertions(+), 65 deletions(-) diff --git a/react-app/src/components/Login.js b/react-app/src/components/Login.js index a74acab..d3ce8ab 100644 --- a/react-app/src/components/Login.js +++ b/react-app/src/components/Login.js @@ -59,13 +59,13 @@ class Login extends Component { return (
-
-

Login User

-
-
-
-
-
+
+

Login

+ + {this.state.submitted && +
Login Failed: Check Your Credentials
} + +
@@ -74,10 +74,8 @@ class Login extends Component {
- + - {this.state.submitted && -

Login Failed Check Your Credentials

}
diff --git a/react-app/src/components/NewPerson.css b/react-app/src/components/NewPerson.css index d56c80a..5b0975f 100644 --- a/react-app/src/components/NewPerson.css +++ b/react-app/src/components/NewPerson.css @@ -1,7 +1,42 @@ .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; } \ No newline at end of file diff --git a/react-app/src/components/NewPerson.js b/react-app/src/components/NewPerson.js index a4e7c44..9132b28 100644 --- a/react-app/src/components/NewPerson.js +++ b/react-app/src/components/NewPerson.js @@ -34,6 +34,7 @@ class NewPerson extends Component { passwordValid: false, correct: false, submitted: false, + formValid: false } this.handleSubmit = this.handleSubmit.bind(this); } @@ -41,23 +42,27 @@ class NewPerson extends Component { /* 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 (
-
-

Sign-Up

-
-

-
- -
+

Sign Up

+ + {(formErrors.username !== '' || formErrors.password !== '' || formErrors.email !== '') && + } + + {submitted && +
Registered Succesfully
} + + {correct && +
Username exists already
} +
- +
- {this.state.submitted && -
-

Registered Succesfully

-
- } - {this.state.correct && -
-

Username exists already

-
- } -
); } diff --git a/react-app/src/components/NewUser.js b/react-app/src/components/NewUser.js index 99264ca..4b0a65e 100644 --- a/react-app/src/components/NewUser.js +++ b/react-app/src/components/NewUser.js @@ -14,18 +14,17 @@ class App extends Component { - - - - + + +
From 9bb811478de35fc133c8d4c5b295d3540c74ffdf Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Sun, 31 Mar 2019 04:28:34 +0530 Subject: [PATCH 5/9] Navbar look changes --- react-app/src/components/NewPerson.css | 13 +++++++++++++ react-app/src/components/NewUser.js | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/react-app/src/components/NewPerson.css b/react-app/src/components/NewPerson.css index 5b0975f..3e47159 100644 --- a/react-app/src/components/NewPerson.css +++ b/react-app/src/components/NewPerson.css @@ -39,4 +39,17 @@ background: #f2ffde; border-radius: 5px; text-align: left; +} + + +#menu-bar { + background: #337ab7; +} + +#menu-bar a { + color: #fff; +} + +#menu-bar .active a { + background: #004b6f; } \ No newline at end of file diff --git a/react-app/src/components/NewUser.js b/react-app/src/components/NewUser.js index 4b0a65e..aa95711 100644 --- a/react-app/src/components/NewUser.js +++ b/react-app/src/components/NewUser.js @@ -11,7 +11,7 @@ class App extends Component {
- From 7d3298a19b8ea1e99aee2475102a16167aa07fb1 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Sun, 31 Mar 2019 12:30:27 +0530 Subject: [PATCH 8/9] Fixed "Unexpected token p in JSON at position 4" error --- react-app/src/components/User/Home.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/react-app/src/components/User/Home.js b/react-app/src/components/User/Home.js index 6e87a23..866cf7f 100644 --- a/react-app/src/components/User/Home.js +++ b/react-app/src/components/User/Home.js @@ -16,9 +16,12 @@ class Home extends Component { const request = new Request( "http://127.0.0.1:8080/score-users/" + this.state.username ); - fetch(request) - .then(response => response.json()) - .then(quizzes => this.setState({ quizzes: quizzes })); + + if(this.state.username !== "") { + fetch(request) + .then(response => response.json()) + .then(quizzes => this.setState({ quizzes: quizzes })); + } console.log(this.state.username); } From 3237a0f73a4d586d75c8a2dc0bc23855ebf3e000 Mon Sep 17 00:00:00 2001 From: Sahil Singh Date: Sun, 31 Mar 2019 12:50:12 +0530 Subject: [PATCH 9/9] Added UserName to the Navbar and right alignment of name and signout button --- react-app/src/components/Admin/Admin.js | 10 +++++++++- react-app/src/components/NewPerson.css | 8 ++++++++ react-app/src/components/User/App.js | 10 +++++++++- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/react-app/src/components/Admin/Admin.js b/react-app/src/components/Admin/Admin.js index de6a84b..cb946b1 100644 --- a/react-app/src/components/Admin/Admin.js +++ b/react-app/src/components/Admin/Admin.js @@ -53,7 +53,15 @@ class Admin extends Component {
  • Play Quiz
  • Edit Question
  • Leaderboard
    • -
    • + + +
      +
    • + + {JSON.parse(localStorage.getItem('user')).username.toUpperCase()} + + +
    diff --git a/react-app/src/components/NewPerson.css b/react-app/src/components/NewPerson.css index 3e47159..1a81320 100644 --- a/react-app/src/components/NewPerson.css +++ b/react-app/src/components/NewPerson.css @@ -52,4 +52,12 @@ #menu-bar .active a { background: #004b6f; +} + +#menu-bar .navbar-right a { + padding: 8px 15px; +} + +#menu-bar .navbar-right a b { + margin-right: 15px; } \ No newline at end of file diff --git a/react-app/src/components/User/App.js b/react-app/src/components/User/App.js index 80b5e45..500d3ce 100644 --- a/react-app/src/components/User/App.js +++ b/react-app/src/components/User/App.js @@ -44,7 +44,15 @@ class App extends Component {
  • Home
  • Play Quiz
  • Leaderboard
    • -
    • + + +
      +
    • + + {JSON.parse(localStorage.getItem('user')).username.toUpperCase()} + + +