Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Broke up the home page

Browse Source
This commit is contained in:
Kayne Ruse
2019-05-26 04:28:40 +10:00
parent f949617284
commit 6095261c27
14 changed files with 233 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+14 -2
View File
@@ -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;
server/accounts.js
+3 -2
View File
@@ -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();
});
});
});
src/components/app.jsx
+14 -2
View File
@@ -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 {
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/signup' component={Signup} />
<Route path='/login' component={Login} />
<Route path='/passwordchange' component={PasswordChange} />
<Route path='/passwordrecover' component={PasswordRecover} />
<Route path='/passwordreset' component={PasswordReset} />
<Route path='/profile' component={Profile} />
<Route path='/ladder' component={Ladder} />
<Route path='/passwordreset' component={PasswordReset} />
<Route path='*' component={PageNotFound} />
</Switch>
</BrowserRouter>
src/components/pages/home.jsx
+20 -80
View File
@@ -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 (
<div className='sidePanel'>
<CommonLinks />
</div>
);
}
} else { //logged out
SidePanel = () => {
return (
<div className='sidePanel'>
<p><Link to='/signup'>Sign Up</Link></p>
<p><Link to='/login'>Login</Link></p>
<p><Link to='/passwordrecover'>Recover Password</Link></p>
</div>
);
}
}
//return the home page
@@ -47,77 +53,11 @@ class Home extends React.Component {
</div>
);
}
//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 (
<div className='sidePanel'>
<CommonLinks />
</div>
);
}
LoggedOutSidePanel() {
//build the signup panel
let SignupPanel;
if (!this.state.signupSent) {
SignupPanel = () => {
return (
<Signup onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />
);
}
} else {
SignupPanel = () => {
return (
<p>{this.state.signupMsg}</p>
);
}
}
//build the recover panel
let RecoverPanel;
if (!this.state.recoverSent) {
RecoverPanel = () => {
return (
<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
);
}
}
else {
RecoverPanel = () => {
return (
<p>{this.state.recoverMsg}</p>
);
}
}
//finally return the side panel
return (
<div className='sidePanel'>
<SignupPanel />
<Login onSubmit={() => {this.props.history.push('/profile');}} />
<RecoverPanel />
</div>
);
}
}
function mapStoreToProps(store) {
return {
id: store.account.id,
token: store.account.token
id: store.account.id
}
}
src/components/pages/login.jsx
+25
View File
@@ -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 (
<div className='page constrained'>
<LoginPanel onSubmit={() => this.props.history.push('/profile')} />
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
};
export default withRouter(Login);
src/components/pages/password_change.jsx
+59
View File
@@ -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 (<PasswordChangePanel onPasswordChange={(msg) => this.setState({ changeSent: true, changeMsg: msg }) } />);
}
} else {
Panel = () => {
return (<p>{this.state.changeMsg}</p>);
}
}
return (
<div className='page constrained'>
<Panel />
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
};
function mapStoreToProps(store) {
return {
id: store.account.id
}
}
function mapDispatchToProps(dispatch) {
return {
//
}
}
PasswordChange = connect(mapStoreToProps, mapDispatchToProps)(PasswordChange);
export default withRouter(PasswordChange);
src/components/pages/password_recover.jsx
+38
View File
@@ -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 (<PasswordRecoverPanel onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />);
}
} else {
Panel = () => {
return (<p>{this.state.recoverMsg}</p>);
}
}
return (
<div className='page constrained'>
<Panel />
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
};
export default withRouter(PasswordRecover);
src/components/pages/password_reset.jsx
+2 -2
View File
@@ -30,9 +30,9 @@ class PasswordReset extends React.Component {
}
return (
<div className='page centered'>
<div className='page constrained'>
<Panel />
<Link to='/'>Return Home</Link>
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
src/components/pages/profile.jsx
+1 -15
View File
@@ -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 (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
}
} else {
PasswordChangePanel = () => {
return (<p>Password changed!</p>);
}
}
//finally return the side panel
return (
<div className='sidePanel'>
<CommonLinks extra={() => <PasswordChangePanel />} />
<CommonLinks />
</div>
);
}
src/components/pages/signup.jsx
+40
View File
@@ -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 (<SignupPanel onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />);
}
} else {
Panel = () => {
return (<p>{this.state.signupMsg}</p>);
}
}
return (
<div className='page constrained'>
<Panel />
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
};
export default withRouter(Signup);
src/components/panels/common_links.jsx
+4 -3
View File
@@ -24,7 +24,7 @@ class CommonLinks extends React.Component {
//disable the profile link when logged out
let ProfileLink;
if (this.props.loggedIn) {
ProfileLink = () => <p>Go to <Link to='/profile' onClick={this.props.onClickProfile}>your profile</Link></p>;
ProfileLink = () => <p><Link to='/profile' onClick={this.props.onClickProfile}>Your Profile</Link></p>;
} else {
ProfileLink = () => null;
}
@@ -40,9 +40,10 @@ class CommonLinks extends React.Component {
return (
<div className='panel'>
<p>Return <Link to='/' onClick={this.props.onClickHome}>home</Link></p>
<p><Link to='/' onClick={this.props.onClickHome}>Return Home</Link></p>
<ProfileLink />
<p>Go to <Link to='/ladder' onClick={this.props.onClickLadder}>the game ladder</Link></p>
<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
<p><Link to='/passwordchange' onClick={this.props.onClickLadder}>Change Password</Link></p>
<Extra />
src/components/panels/login.jsx
+2
View File
@@ -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) {
src/components/panels/password_change.jsx
+1 -1
View File
@@ -65,7 +65,7 @@ class PasswordChange extends React.Component {
//DEBUGGING
if (this.props.onPasswordChange) {
this.props.onPasswordChange();
this.props.onPasswordChange(json.msg);
}
}
src/components/panels/signup.jsx
+10 -2
View File
@@ -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
});
}
}
}
Signup.propTypes = {
onSignup: PropTypes.func
};
export default Signup;