From 6095261c2787e5e03d5db6a7d114ee32a082f1eb Mon Sep 17 00:00:00 2001 From: Kayne Ruse Date: Sun, 26 May 2019 04:28:40 +1000 Subject: [PATCH] Broke up the home page --- public/styles/shared.css | 16 +++- server/accounts.js | 5 +- src/components/app.jsx | 16 +++- src/components/pages/home.jsx | 100 +++++----------------- src/components/pages/login.jsx | 25 ++++++ src/components/pages/password_change.jsx | 59 +++++++++++++ src/components/pages/password_recover.jsx | 38 ++++++++ src/components/pages/password_reset.jsx | 4 +- src/components/pages/profile.jsx | 16 +--- src/components/pages/signup.jsx | 40 +++++++++ src/components/panels/common_links.jsx | 7 +- src/components/panels/login.jsx | 2 + src/components/panels/password_change.jsx | 2 +- src/components/panels/signup.jsx | 12 ++- 14 files changed, 233 insertions(+), 109 deletions(-) create mode 100644 src/components/pages/login.jsx create mode 100644 src/components/pages/password_change.jsx create mode 100644 src/components/pages/password_recover.jsx create mode 100644 src/components/pages/signup.jsx diff --git a/public/styles/shared.css b/public/styles/shared.css index dd768bf..fa43c4a 100644 --- a/public/styles/shared.css +++ b/public/styles/shared.css @@ -150,8 +150,8 @@ footer { display: flex; flex-direction: column; justify-content: flex-start; - min-width: 320px; - width: 320px; + min-width: 160px; + width: 160px; } @media screen and (max-width: 480px) { @@ -189,6 +189,18 @@ footer { } } +.constrained { + align-self: center; + max-width: 320px; +} + +@media screen and (max-width: 480px) { + .constrained { + align-self: stretch; + max-width: none; + } +} + /* main panel */ .mainPanel { margin-left: 30px; diff --git a/server/accounts.js b/server/accounts.js index 719164f..c5e029b 100644 --- a/server/accounts.js +++ b/server/accounts.js @@ -257,9 +257,10 @@ const passwordChangeRequest = (connection) => (req, res) => { //send json containing the account info res.status(200).json({ - token: rand + token: rand, + msg: log('Password changed!', fields.email) }); - log('Password changed', fields.email); + res.end(); }); }); }); diff --git a/src/components/app.jsx b/src/components/app.jsx index a1630bd..0ffb08d 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -3,9 +3,15 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom'; //include pages import Home from './pages/home.jsx'; +import Signup from './pages/signup.jsx'; +import Login from './pages/login.jsx'; +import PasswordChange from './pages/password_change.jsx'; +import PasswordRecover from './pages/password_recover.jsx'; +import PasswordReset from './pages/password_reset.jsx'; + import Profile from './pages/profile.jsx'; import Ladder from './pages/ladder.jsx'; -import PasswordReset from './pages/password_reset.jsx' + import PageNotFound from './pages/page_not_found.jsx'; //other stuff @@ -24,9 +30,15 @@ export default class App extends React.Component { + + + + + + - + diff --git a/src/components/pages/home.jsx b/src/components/pages/home.jsx index daef619..c492f11 100644 --- a/src/components/pages/home.jsx +++ b/src/components/pages/home.jsx @@ -4,21 +4,13 @@ import { withRouter, Link } from 'react-router-dom'; //panels import CommonLinks from '../panels/common_links.jsx'; - -import Signup from '../panels/signup.jsx'; -import Login from '../panels/login.jsx'; -import PasswordRecover from '../panels/password_recover.jsx'; - import NewsPanel from '../panels/news_panel.jsx'; class Home extends React.Component { constructor(props) { super(props); this.state = { - signupSent: false, - signupMsg: '', - recoverSent: false, - recoverMsg: '' + // }; } @@ -27,10 +19,24 @@ class Home extends React.Component { //get the correct side panel let SidePanel; - if (this.props.id) { - SidePanel = this.LoggedInSidePanel.bind(this); - } else { - SidePanel = this.LoggedOutSidePanel.bind(this); + if (this.props.id) { //logged in + SidePanel = () => { + return ( +
+ +
+ ); + } + } else { //logged out + SidePanel = () => { + return ( +
+

Sign Up

+

Login

+

Recover Password

+
+ ); + } } //return the home page @@ -47,77 +53,11 @@ class Home extends React.Component { ); } - - //panel functions - LoggedInSidePanel() { - //reset the other mode - if (this.state.signupSent) { - this.setState({ signupSent: false }); - } - - if (this.state.recoverSent) { - this.setState({ recoverSent: false }); - } - - //finally return the side panel - return ( -
- -
- ); - } - - LoggedOutSidePanel() { - //build the signup panel - let SignupPanel; - - if (!this.state.signupSent) { - SignupPanel = () => { - return ( - this.setState( {signupSent: true, signupMsg: msg} )} /> - ); - } - } else { - SignupPanel = () => { - return ( -

{this.state.signupMsg}

- ); - } - } - - //build the recover panel - let RecoverPanel; - - if (!this.state.recoverSent) { - RecoverPanel = () => { - return ( - this.setState( {recoverSent: true, recoverMsg: msg} )} /> - ); - } - } - else { - RecoverPanel = () => { - return ( -

{this.state.recoverMsg}

- ); - } - } - - //finally return the side panel - return ( -
- - {this.props.history.push('/profile');}} /> - -
- ); - } } function mapStoreToProps(store) { return { - id: store.account.id, - token: store.account.token + id: store.account.id } } diff --git a/src/components/pages/login.jsx b/src/components/pages/login.jsx new file mode 100644 index 0000000..2f41743 --- /dev/null +++ b/src/components/pages/login.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { withRouter, Link } from 'react-router-dom'; + +//panels +import LoginPanel from '../panels/login.jsx'; + +class Login extends React.Component { + constructor(props) { + super(props); + this.state = { + // + } + } + + render() { + return ( +
+ this.props.history.push('/profile')} /> + Return Home +
+ ); + } +}; + +export default withRouter(Login); \ No newline at end of file diff --git a/src/components/pages/password_change.jsx b/src/components/pages/password_change.jsx new file mode 100644 index 0000000..915c555 --- /dev/null +++ b/src/components/pages/password_change.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { withRouter, Link } from 'react-router-dom'; +import { connect } from 'react-redux'; + +//panels +import PasswordChangePanel from '../panels/password_change.jsx'; + +class PasswordChange extends React.Component { + constructor(props) { + super(props); + this.state = { + changeSent: false, + changeMsg: '' + } + } + + componentDidMount() { + if (!this.props.id) { + this.props.history.push('/'); + } + } + + render() { + let Panel; + + if (!this.state.changeSent) { + Panel = () => { + return ( this.setState({ changeSent: true, changeMsg: msg }) } />); + } + } else { + Panel = () => { + return (

{this.state.changeMsg}

); + } + } + + return ( +
+ + Return Home +
+ ); + } +}; + +function mapStoreToProps(store) { + return { + id: store.account.id + } +} + +function mapDispatchToProps(dispatch) { + return { + // + } +} + +PasswordChange = connect(mapStoreToProps, mapDispatchToProps)(PasswordChange); + +export default withRouter(PasswordChange); \ No newline at end of file diff --git a/src/components/pages/password_recover.jsx b/src/components/pages/password_recover.jsx new file mode 100644 index 0000000..9a9b9bc --- /dev/null +++ b/src/components/pages/password_recover.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { withRouter, Link } from 'react-router-dom'; + +//panels +import PasswordRecoverPanel from '../panels/password_recover.jsx'; + +class PasswordRecover extends React.Component { + constructor(props) { + super(props); + this.state = { + recoverSent: false, + recoverMsg: '' + } + } + + render() { + let Panel; + + if (!this.state.recoverSent) { + Panel = () => { + return ( this.setState( {recoverSent: true, recoverMsg: msg} )} />); + } + } else { + Panel = () => { + return (

{this.state.recoverMsg}

); + } + } + + return ( +
+ + Return Home +
+ ); + } +}; + +export default withRouter(PasswordRecover); \ No newline at end of file diff --git a/src/components/pages/password_reset.jsx b/src/components/pages/password_reset.jsx index 6785d21..5870ef2 100644 --- a/src/components/pages/password_reset.jsx +++ b/src/components/pages/password_reset.jsx @@ -30,9 +30,9 @@ class PasswordReset extends React.Component { } return ( -
+
- Return Home + Return Home
); } diff --git a/src/components/pages/profile.jsx b/src/components/pages/profile.jsx index 8b3d9eb..9227ddf 100644 --- a/src/components/pages/profile.jsx +++ b/src/components/pages/profile.jsx @@ -6,7 +6,6 @@ import queryString from 'query-string'; //panels import CommonLinks from '../panels/common_links.jsx'; -import PasswordChange from '../panels/password_change.jsx'; class Profile extends React.Component { constructor(props) { @@ -124,23 +123,10 @@ class Profile extends React.Component { //panel functions MyProfileSidePanel() { - //build the password change panel - let PasswordChangePanel; - - if (!this.state.changedPassword) { - PasswordChangePanel = () => { - return ( { this.setState({changedPassword: true}) }} />); - } - } else { - PasswordChangePanel = () => { - return (

Password changed!

); - } - } - //finally return the side panel return (
- } /> +
); } diff --git a/src/components/pages/signup.jsx b/src/components/pages/signup.jsx new file mode 100644 index 0000000..52a523b --- /dev/null +++ b/src/components/pages/signup.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { withRouter, Link } from 'react-router-dom'; + +//panels +import SignupPanel from '../panels/signup.jsx'; + +class Signup extends React.Component { + constructor(props) { + super(props); + this.state = { + signupSent: false, + signupMsg: '' + } + + //TODO: referral links + } + + render() { + let Panel; + + if (!this.state.signupSent) { + Panel = () => { + return ( this.setState( {signupSent: true, signupMsg: msg} )} />); + } + } else { + Panel = () => { + return (

{this.state.signupMsg}

); + } + } + + return ( +
+ + Return Home +
+ ); + } +}; + +export default withRouter(Signup); \ No newline at end of file diff --git a/src/components/panels/common_links.jsx b/src/components/panels/common_links.jsx index 11f2e37..abffe14 100644 --- a/src/components/panels/common_links.jsx +++ b/src/components/panels/common_links.jsx @@ -24,7 +24,7 @@ class CommonLinks extends React.Component { //disable the profile link when logged out let ProfileLink; if (this.props.loggedIn) { - ProfileLink = () =>

Go to your profile

; + ProfileLink = () =>

Your Profile

; } else { ProfileLink = () => null; } @@ -40,9 +40,10 @@ class CommonLinks extends React.Component { return (
-

Return home

+

Return Home

-

Go to the game ladder

+

Game Ladder

+

Change Password

diff --git a/src/components/panels/login.jsx b/src/components/panels/login.jsx index 733e7dc..ef95e07 100644 --- a/src/components/panels/login.jsx +++ b/src/components/panels/login.jsx @@ -75,6 +75,8 @@ class Login extends React.Component { //send the XHR xhr.open('POST', form.action, true); xhr.send(formData); + + this.clearInput(); } validateInput(e) { diff --git a/src/components/panels/password_change.jsx b/src/components/panels/password_change.jsx index c7d8d22..032939d 100644 --- a/src/components/panels/password_change.jsx +++ b/src/components/panels/password_change.jsx @@ -65,7 +65,7 @@ class PasswordChange extends React.Component { //DEBUGGING if (this.props.onPasswordChange) { - this.props.onPasswordChange(); + this.props.onPasswordChange(json.msg); } } diff --git a/src/components/panels/signup.jsx b/src/components/panels/signup.jsx index ccdd59d..bba489c 100644 --- a/src/components/panels/signup.jsx +++ b/src/components/panels/signup.jsx @@ -1,7 +1,8 @@ import React from 'react'; import { validateEmail } from '../../../common/utilities.js'; +import PropTypes from 'prop-types'; -export default class Signup extends React.Component { +class Signup extends React.Component { constructor(props) { super(props); this.state = { @@ -70,6 +71,7 @@ export default class Signup extends React.Component { if (xhr.status === 200) { if (this.props.onSignup) { this.props.onSignup(xhr.responseText); + console.log('trying to...'); } } @@ -150,4 +152,10 @@ export default class Signup extends React.Component { retype: evt.target.value }); } -} \ No newline at end of file +} + +Signup.propTypes = { + onSignup: PropTypes.func +}; + +export default Signup; \ No newline at end of file