diff --git a/js/CommonComponents.js b/js/CommonComponents.js index 87791dd..3fa9cad 100644 --- a/js/CommonComponents.js +++ b/js/CommonComponents.js @@ -2,20 +2,29 @@ import { Badge, Button, ButtonGroup, + Card, + CardBody, + Container, Collapse, + Form, + FormGroup, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, - NavLink + NavLink, + Input, + Label } from 'reactstrap'; +import Head from 'next/head'; + import { connect } from 'react-redux'; import React from 'react'; -import { logout } from './api'; +import { login, logout } from './api'; export function BigImage(props) { return ( @@ -95,7 +104,6 @@ class InvisibleLoginLogoutButtons extends React.Component { ); } } - } const mapStateToLoginLogoutButtonProperties = (state) => { @@ -124,3 +132,134 @@ export function Footer() { ); } + +class PrivateSignedInEnforcer extends React.Component { + + render() { + const { isSignedIn, children } = this.props; + + if(isSignedIn) { + return children; + } else { + return ( +
+ + Anmeldung + + +
+ +
+
+ ); + } + } +} + +const mapStateToSignedInEnforcerProperties = (state) => { + const { isSignedIn } = state.userinfo; + return { isSignedIn }; +} + +export const SignedInEnforcer = connect( + mapStateToSignedInEnforcerProperties +)(PrivateSignedInEnforcer); + +export function Login(props) { + return ( + + + +

Login

+ + + +
+
+
+ ); +} + +class LoginErrorList extends React.Component { + render() { + const { error, errorMessages } = this.props; + if(error) { + return ( + + ); + } else { + return null; + } + } +} + +const mapStateToErrorMessages = (state) => { + const { errorMessages, error } = state.userinfo; + return { errorMessages, error }; +}; + +const VisibleLoginErrorList = connect( + mapStateToErrorMessages +)(LoginErrorList); + + +class LoginForm extends React.Component { + + constructor(props) { + super(props); + + this.state = { + email : '', + password : '' + }; + } + + render() { + return ( +
+ + + + + + + + + + + + ); + } + + handlePasswordInput(input) { + this.setState({ password : input.target.value }); + } + + handleEmailInput(input) { + this.setState({ email : input.target.value }); + } +} + +function Hint(props) { + if(props.hint != null) { + return ( +

{ props.hint }

+ ); + } +} diff --git a/pages/create.js b/pages/create.js index b1606f4..79e5c33 100644 --- a/pages/create.js +++ b/pages/create.js @@ -1,6 +1,6 @@ import Head from 'next/head'; import '../static/everypage.css'; -import { Footer, TurniereNavigation } from '../js/CommonComponents'; +import { Footer, TurniereNavigation, SignedInEnforcer } from '../js/CommonComponents'; import React from 'react'; import { @@ -17,7 +17,8 @@ import { } from 'reactstrap'; import { - verifyCredentials + verifyCredentials, + getState } from '../js/api'; import EditableStringList from '../js/EditableStringList'; @@ -30,16 +31,18 @@ export default class CreatePage extends React.Component { render() { return ( -
- - Turnier erstellen: turnie.re - - -
- + +
+ + Turnier erstellen: turnie.re + + +
+ +
+
-
-
+ ); } } diff --git a/pages/login.js b/pages/login.js index 1a58e49..aa43fa5 100644 --- a/pages/login.js +++ b/pages/login.js @@ -1,10 +1,7 @@ import Head from 'next/head'; import '../static/everypage.css'; -import {Footer, TurniereNavigation} from '../js/CommonComponents'; +import { Footer, TurniereNavigation, Login } from '../js/CommonComponents'; import React from 'react'; -import { Button, Card, CardBody, Container, Form, FormGroup, Input, Label } from 'reactstrap'; -import { login } from '../js/api'; -import { connect } from 'react-redux'; import { verifyCredentials @@ -31,92 +28,3 @@ export default class LoginPage extends React.Component { ); } } - -function Login() { - return ( - - - -

Login

- - -
-
-
- ); -} - -class LoginErrorList extends React.Component { - render() { - const { error, errorMessages } = this.props; - if(error) { - return ( -
    - { errorMessages.map((message, index) => -
  • - - {message} -
  • - - ) } -
- ); - } else { - return null; - } - } -} - -const mapStateToErrorMessages = (state) => { - const { errorMessages, error } = state.userinfo; - return { errorMessages, error }; -}; - -const VisibleLoginErrorList = connect( - mapStateToErrorMessages -)(LoginErrorList); - - -class LoginForm extends React.Component { - - constructor(props) { - super(props); - - this.state = { - email : '', - password : '' - }; - } - - render() { - return ( -
- - - - - - - - - - - - ); - } - - handlePasswordInput(input) { - this.setState({ password : input.target.value }); - } - - handleEmailInput(input) { - this.setState({ email : input.target.value }); - } -} \ No newline at end of file