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() {
|
||||
const { isSignedIn, children } = this.props;
|
||||
const { children } = this.props;
|
||||
|
||||
if(isSignedIn) {
|
||||
return children;
|
||||
} else {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
for(var i in children) {
|
||||
var c = children[i];
|
||||
|
||||
if(c.props.condition) {
|
||||
return c;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToSignedInEnforcerProperties = (state) => {
|
||||
const { isSignedIn } = state.userinfo;
|
||||
return { isSignedIn };
|
||||
export function Option(props) {
|
||||
return props.children;
|
||||
}
|
||||
|
||||
export const SignedInEnforcer = connect(
|
||||
mapStateToSignedInEnforcerProperties
|
||||
)(PrivateSignedInEnforcer);
|
||||
|
||||
export function Login(props) {
|
||||
return (
|
||||
<Container className="py-5">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import Head from 'next/head';
|
||||
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 { connect } from 'react-redux';
|
||||
|
||||
import {
|
||||
Button,
|
||||
|
|
@ -23,30 +24,56 @@ import {
|
|||
|
||||
import EditableStringList from '../js/EditableStringList';
|
||||
|
||||
export default class CreatePage extends React.Component {
|
||||
class PrivateCreatePage extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
verifyCredentials();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isSignedIn } = this.props;
|
||||
|
||||
return (
|
||||
<SignedInEnforcer>
|
||||
<div className="main generic-fullpage-bg">
|
||||
<Head>
|
||||
<title>Turnier erstellen: turnie.re</title>
|
||||
</Head>
|
||||
<TurniereNavigation/>
|
||||
<div>
|
||||
<CreateTournamentCard/>
|
||||
<UserRestrictor>
|
||||
<Option condition={isSignedIn}>
|
||||
<div className="main generic-fullpage-bg">
|
||||
<Head>
|
||||
<title>Turnier erstellen: turnie.re</title>
|
||||
</Head>
|
||||
<TurniereNavigation/>
|
||||
<div>
|
||||
<CreateTournamentCard/>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
</SignedInEnforcer>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToCreatePageProperties(state) {
|
||||
const { isSignedIn } = state.userinfo;
|
||||
return { isSignedIn };
|
||||
}
|
||||
|
||||
const CreatePage = connect(
|
||||
mapStateToCreatePageProperties
|
||||
)(PrivateCreatePage);
|
||||
|
||||
export default CreatePage;
|
||||
|
||||
function CreateTournamentCard() {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue