Simplify the default usecase of UserRestrictor by creating RequireLogin and applying it to the create and private pages

This commit is contained in:
Felix Hamme 2019-06-06 18:23:58 +02:00
parent 4d1e9682ae
commit 0172625387
3 changed files with 55 additions and 61 deletions

View File

@ -0,0 +1,31 @@
import React from 'react';
import {connect} from 'react-redux';
import Head from 'next/head';
import {TurniereNavigation} from './Navigation';
import {Login} from './Login';
import {Footer} from './Footer';
class RequireLogin extends React.Component {
render() {
if (this.props.isSignedIn) {
return this.props.children;
}
const loginHint = this.props.loginMessage === undefined ?
'Sie müssen angemeldet sein, um diesen Inhalt anzuzeigen!' : this.props.loginMessage;
return (<div className="main generic-fullpage-bg">
<Head>
<title>Anmeldung</title>
</Head>
<TurniereNavigation/>
<div>
<Login hint={loginHint}/>
</div>
<Footer/>
</div>);
}
}
export default connect(state => {
return {isSignedIn: state.userinfo.isSignedIn};
})(RequireLogin);

View File

@ -4,49 +4,30 @@ import {notify} from 'react-notify-toast';
import {connect} from 'react-redux';
import posed from 'react-pose';
import {
Button, Card, CardBody, Container, CustomInput, Form, FormGroup, Input, Label
} from 'reactstrap';
import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import {Login} from '../js/components/Login';
import EditableStringList from '../js/components/EditableStringList';
import {createTournament} from '../js/api';
import '../static/css/everypage.css';
import RequireLogin from '../js/components/RequireLogin';
class CreatePage extends React.Component {
render() {
const {isSignedIn} = this.props;
return (<UserRestrictor>
<Option condition={isSignedIn}>
<div className="main generic-fullpage-bg">
<Head>
<title>Turnier erstellen: turnie.re</title>
</Head>
<TurniereNavigation/>
<div>
<CreateTournamentCard/>
</div>
<Footer/>
return (<RequireLogin loginMessage='Sie müssen angemeldet sein, um ein neues Turnier zu erstellen.'>
<div className="main generic-fullpage-bg">
<Head>
<title>Turnier erstellen: turnie.re</title>
</Head>
<TurniereNavigation/>
<div>
<CreateTournamentCard/>
</div>
</Option>
<Option condition={true}>
<div className="main generic-fullpage-bg">
<Head>
<title>Anmeldung</title>
</Head>
<TurniereNavigation/>
<div>
<Login hint="Sie müssen angemeldet sein, um diesen Inhalt anzuzeigen!"/>
</div>
<Footer/>
</div>
</Option>
</UserRestrictor>);
<Footer/>
</div>
</RequireLogin>);
}
}

View File

@ -6,41 +6,23 @@ import {Card, CardBody, Container} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
import {Option, UserRestrictor} from '../js/components/UserRestrictor';
import {Login} from '../js/components/Login';
import '../static/css/everypage.css';
import TournamentList from '../js/components/TournamentList';
import RequireLogin from '../js/components/RequireLogin';
class PrivateTournamentsPage extends React.Component {
render() {
const {isSignedIn} = this.props;
return (<UserRestrictor>
<Option condition={isSignedIn}>
<div className="main generic-fullpage-bg">
<Head>
<title>Private Turniere: turnie.re</title>
</Head>
<TurniereNavigation/>
<PrivateTournamentsPageContent/>
<Footer/>
</div>
</Option>
<Option condition={true}>
<div className="main generic-fullpage-bg">
<Head>
<title>Anmeldung</title>
</Head>
<TurniereNavigation/>
<div>
<Login
hint="Sie müssen angemeldet sein, um diesen Inhalt anzuzeigen!"/>
</div>
<Footer/>
</div>
</Option>
</UserRestrictor>);
return (<RequireLogin loginMessage='Sie müssen angemeldet sein, um Ihre privaten Turniere zu sehen.'>
<div className="main generic-fullpage-bg">
<Head>
<title>Private Turniere: turnie.re</title>
</Head>
<TurniereNavigation/>
<PrivateTournamentsPageContent/>
<Footer/>
</div>
</RequireLogin>);
}
}