Change the SignedInEnforcer to a more flexible and versatile UserRestrictor
This commit is contained in:
JP1998
parent
4dc55a93d2
commit
110f862bc3
|
|
@ -133,39 +133,56 @@ export function Footer() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
class PrivateSignedInEnforcer extends React.Component {
|
/**
|
||||||
|
* This component works just like a switch statement, although the conditions of the first items
|
||||||
|
* are checked first, and the first component with a condition that is true will be shown.
|
||||||
|
*
|
||||||
|
* For single conditions and options any kind of component can be taken, while the Option-component
|
||||||
|
* is dedicated for this job. The only important thing is that this component has to have a condition property.
|
||||||
|
*
|
||||||
|
* You should also give a default option with a condition that always evaluates to true.
|
||||||
|
*
|
||||||
|
* A quick example would be some content that is only to be shown when the user is logged in:
|
||||||
|
*
|
||||||
|
* function SomeRestrictedContent(props) {
|
||||||
|
* const { isSignedIn } = props;
|
||||||
|
*
|
||||||
|
* return (
|
||||||
|
* <UserRestrictor>
|
||||||
|
* <Option condition={isSignedIn}>
|
||||||
|
* < The restricted content >
|
||||||
|
* </Option>
|
||||||
|
* <Option condition={true}>
|
||||||
|
* < Some default content; in this case some kind of login >
|
||||||
|
* </Option>
|
||||||
|
* </UserRestrictor>
|
||||||
|
* );
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* In the example you'll have to note that the default option is at the bottom of all the options
|
||||||
|
* since it would always be taken otherwise (the options' conditions are checked from top to bottom)
|
||||||
|
*/
|
||||||
|
export class UserRestrictor extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isSignedIn, children } = this.props;
|
const { children } = this.props;
|
||||||
|
|
||||||
if(isSignedIn) {
|
for(var i in children) {
|
||||||
return children;
|
var c = children[i];
|
||||||
} else {
|
|
||||||
return (
|
if(c.props.condition) {
|
||||||
<div className="main generic-fullpage-bg">
|
return c;
|
||||||
<Head>
|
}
|
||||||
<title>Anmeldung</title>
|
|
||||||
</Head>
|
|
||||||
<TurniereNavigation/>
|
|
||||||
<div>
|
|
||||||
<Login hint="Sie müssen angemeldet sein, um diesen Inhalt anzuzeigen!"/>
|
|
||||||
</div>
|
|
||||||
<Footer/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToSignedInEnforcerProperties = (state) => {
|
export function Option(props) {
|
||||||
const { isSignedIn } = state.userinfo;
|
return props.children;
|
||||||
return { isSignedIn };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SignedInEnforcer = connect(
|
|
||||||
mapStateToSignedInEnforcerProperties
|
|
||||||
)(PrivateSignedInEnforcer);
|
|
||||||
|
|
||||||
export function Login(props) {
|
export function Login(props) {
|
||||||
return (
|
return (
|
||||||
<Container className="py-5">
|
<Container className="py-5">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import '../static/everypage.css';
|
import '../static/everypage.css';
|
||||||
import { Footer, TurniereNavigation, SignedInEnforcer } from '../js/CommonComponents';
|
import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
|
@ -23,30 +24,56 @@ import {
|
||||||
|
|
||||||
import EditableStringList from '../js/EditableStringList';
|
import EditableStringList from '../js/EditableStringList';
|
||||||
|
|
||||||
export default class CreatePage extends React.Component {
|
class PrivateCreatePage extends React.Component {
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
verifyCredentials();
|
verifyCredentials();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { isSignedIn } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SignedInEnforcer>
|
<UserRestrictor>
|
||||||
<div className="main generic-fullpage-bg">
|
<Option condition={isSignedIn}>
|
||||||
<Head>
|
<div className="main generic-fullpage-bg">
|
||||||
<title>Turnier erstellen: turnie.re</title>
|
<Head>
|
||||||
</Head>
|
<title>Turnier erstellen: turnie.re</title>
|
||||||
<TurniereNavigation/>
|
</Head>
|
||||||
<div>
|
<TurniereNavigation/>
|
||||||
<CreateTournamentCard/>
|
<div>
|
||||||
|
<CreateTournamentCard/>
|
||||||
|
</div>
|
||||||
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
<Footer/>
|
</Option>
|
||||||
</div>
|
<Option condition={true}>
|
||||||
</SignedInEnforcer>
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function mapStateToCreatePageProperties(state) {
|
||||||
|
const { isSignedIn } = state.userinfo;
|
||||||
|
return { isSignedIn };
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreatePage = connect(
|
||||||
|
mapStateToCreatePageProperties
|
||||||
|
)(PrivateCreatePage);
|
||||||
|
|
||||||
|
export default CreatePage;
|
||||||
|
|
||||||
function CreateTournamentCard() {
|
function CreateTournamentCard() {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue