diff --git a/js/CommonComponents.js b/js/CommonComponents.js
deleted file mode 100644
index b32d412..0000000
--- a/js/CommonComponents.js
+++ /dev/null
@@ -1,282 +0,0 @@
-import {
- Badge,
- Button,
- ButtonGroup,
- Card,
- CardBody,
- Container,
- Collapse,
- Form,
- FormGroup,
- Nav,
- Navbar,
- NavbarBrand,
- NavbarToggler,
- NavItem,
- NavLink,
- Input,
- Label
-} from 'reactstrap';
-
-import { connect } from 'react-redux';
-
-import React from 'react';
-
-import { login, logout } from './api';
-
-export function BigImage(props) {
- return (
-
-
{props.text}
-
- );
-}
-
-export class TurniereNavigation extends React.Component {
-
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
-
- this.state = {
- collapsed: true
- };
- }
-
- toggle() {
- this.setState({
- collapsed: !this.state.collapsed
- });
- }
-
- render() {
- return (
-
- turnie.re
-
-
-
-
-
- );
- }
-}
-
-function Navlink(props) {
- return (
-
- {props.text}
-
- );
-}
-
-function Betabadge() {
- return (BETA );
-}
-
-class InvisibleLoginLogoutButtons extends React.Component {
-
- render() {
- const { isSignedIn, username } = this.props;
-
- if(isSignedIn) {
- return (
-
- { username }
- Logout
-
- );
- } else {
- return (
-
- Login
- Registrieren
-
- );
- }
- }
-}
-
-const mapStateToLoginLogoutButtonProperties = (state) => {
- const { isSignedIn, username } = state.userinfo;
- return { isSignedIn, username };
-};
-
-const LoginLogoutButtons = connect(
- mapStateToLoginLogoutButtonProperties
-)(InvisibleLoginLogoutButtons);
-
-export function Footer() {
- return (
-
- );
-}
-
-/**
- * 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 (
- *
- *
- * < The restricted content >
- *
- *
- * < Some default content; in this case some kind of login >
- *
- *
- * );
- * }
- *
- * 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 { children } = this.props;
-
- for(var i in children) {
- var c = children[i];
-
- if(c.props.condition) {
- return c;
- }
- }
-
- return null;
- }
-}
-
-export function Option(props) {
- return props.children;
-}
-
-export function Login(props) {
- 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 });
- }
-}
-
-function Hint(props) {
- if(props.hint != null) {
- return (
- { props.hint }
- );
- } else {
- return null;
- }
-}
diff --git a/js/api.js b/js/api.js
index 92b9753..84ae430 100644
--- a/js/api.js
+++ b/js/api.js
@@ -1,7 +1,12 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux';
+import {
+ createStore,
+ applyMiddleware,
+ combineReducers
+} from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
-import thunkMiddleware from 'redux-thunk';
-import { errorMessages } from './constants';
+import thunkMiddleware from 'redux-thunk';
+
+import { errorMessages } from './constants';
const axios = require('axios');
diff --git a/js/EditableStringList.js b/js/components/EditableStringList.js
similarity index 96%
rename from js/EditableStringList.js
rename to js/components/EditableStringList.js
index 64ef704..08bf284 100644
--- a/js/EditableStringList.js
+++ b/js/components/EditableStringList.js
@@ -1,5 +1,11 @@
import React from 'react';
-import { Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import {
+ Alert,
+ Button,
+ Input,
+ InputGroup,
+ InputGroupAddon
+} from 'reactstrap';
export default class EditableStringList extends React.Component {
constructor(props) {
diff --git a/js/components/ErrorComponents.js b/js/components/ErrorComponents.js
index 2e84ee9..beb7a0d 100644
--- a/js/components/ErrorComponents.js
+++ b/js/components/ErrorComponents.js
@@ -1,8 +1,12 @@
-import Head from 'next/head';
-import React from 'react';
-import {Footer, TurniereNavigation} from '../CommonComponents';
+import Head from 'next/head';
+import React from 'react';
+import { Container } from 'reactstrap';
+
+import { TurniereNavigation } from './Navigation';
+import { Footer } from './Footer';
+
import 'bootstrap/dist/css/bootstrap.min.css';
-import {Container} from 'reactstrap';
+
import '../../static/everypage.css';
import '../../static/css/error.css';
diff --git a/js/components/Footer.js b/js/components/Footer.js
new file mode 100644
index 0000000..9d39ad7
--- /dev/null
+++ b/js/components/Footer.js
@@ -0,0 +1,19 @@
+
+
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/js/components/Login.js b/js/components/Login.js
new file mode 100644
index 0000000..f447f90
--- /dev/null
+++ b/js/components/Login.js
@@ -0,0 +1,113 @@
+import {
+ Container,
+ Card,
+ CardBody,
+ Form,
+ FormGroup,
+ Label,
+ Input,
+ Button
+} from 'reactstrap';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { login } from '../api';
+
+export function Login(props) {
+ 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 });
+ }
+}
+
+function Hint(props) {
+ if(props.hint != null) {
+ return (
+ { props.hint }
+ );
+ } else {
+ return null;
+ }
+}
diff --git a/js/components/Navigation.js b/js/components/Navigation.js
new file mode 100644
index 0000000..b9d0775
--- /dev/null
+++ b/js/components/Navigation.js
@@ -0,0 +1,98 @@
+import {
+ Badge,
+ Button,
+ ButtonGroup,
+ Collapse,
+ Nav,
+ Navbar,
+ NavbarBrand,
+ NavbarToggler,
+ NavItem,
+ NavLink
+} from 'reactstrap';
+import { connect } from 'react-redux';
+import React from 'react';
+
+import { logout } from '../api';
+
+export class TurniereNavigation extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.toggle = this.toggle.bind(this);
+
+ this.state = {
+ collapsed: true
+ };
+ }
+
+ toggle() {
+ this.setState({
+ collapsed: !this.state.collapsed
+ });
+ }
+
+ render() {
+ return (
+
+ turnie.re
+
+
+
+
+
+ );
+ }
+}
+
+function Navlink(props) {
+ return (
+
+ {props.text}
+
+ );
+}
+
+function Betabadge() {
+ return (BETA );
+}
+
+class InvisibleLoginLogoutButtons extends React.Component {
+
+ render() {
+ const { isSignedIn, username } = this.props;
+
+ if(isSignedIn) {
+ return (
+
+ { username }
+ Logout
+
+ );
+ } else {
+ return (
+
+ Login
+ Registrieren
+
+ );
+ }
+ }
+}
+
+const mapStateToLoginLogoutButtonProperties = (state) => {
+ const { isSignedIn, username } = state.userinfo;
+ return { isSignedIn, username };
+};
+
+const LoginLogoutButtons = connect(
+ mapStateToLoginLogoutButtonProperties
+)(InvisibleLoginLogoutButtons);
+
diff --git a/js/components/UserRestrictor.js b/js/components/UserRestrictor.js
new file mode 100644
index 0000000..84daeb7
--- /dev/null
+++ b/js/components/UserRestrictor.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+/**
+ * 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 (
+ *
+ *
+ * < The restricted content >
+ *
+ *
+ * < Some default content; in this case some kind of login >
+ *
+ *
+ * );
+ * }
+ *
+ * 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 { children } = this.props;
+
+ for(var i in children) {
+ var c = children[i];
+
+ if(c.props.condition) {
+ return c;
+ }
+ }
+
+ return null;
+ }
+}
+
+export function Option(props) {
+ return props.children;
+}
diff --git a/js/redux/reduxStoreBinder.js b/js/redux/reduxStoreBinder.js
index 179d2a0..fe4499e 100644
--- a/js/redux/reduxStoreBinder.js
+++ b/js/redux/reduxStoreBinder.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
import { initializeStore } from '../api';
const isServer = typeof window === 'undefined';
diff --git a/pages/_app.js b/pages/_app.js
index 892f891..1b508c4 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,9 +1,10 @@
-import App, {Container} from 'next/app';
-import React from 'react';
-import { Provider } from 'react-redux';
-import withReduxStore from '../js/redux/reduxStoreBinder';
-import Notifications from 'react-notify-toast';
-import Favicon from 'react-favicon';
+import App, { Container } from 'next/app';
+import React from 'react';
+import { Provider } from 'react-redux';
+import Notifications from 'react-notify-toast';
+import Favicon from 'react-favicon';
+
+import withReduxStore from '../js/redux/reduxStoreBinder';
class TurniereApp extends App {
diff --git a/pages/_error.js b/pages/_error.js
index c0babdc..29a2c44 100644
--- a/pages/_error.js
+++ b/pages/_error.js
@@ -1,9 +1,7 @@
-import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
-import React from 'react';
+import React from 'react';
-import {
- verifyCredentials
-} from '../js/api';
+import { ErrorPageComponent } from '../js/components/ErrorComponents';
+import { verifyCredentials } from '../js/api';
export default class Error extends React.Component {
static getInitialProps({ res, err }) {
diff --git a/pages/create.js b/pages/create.js
index 3a25a0b..b8ad288 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -1,8 +1,6 @@
-import Head from 'next/head';
-import '../static/everypage.css';
-import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents';
-import React from 'react';
-import { connect } from 'react-redux';
+import Head from 'next/head';
+import React from 'react';
+import { connect } from 'react-redux';
import {
Button,
@@ -17,11 +15,14 @@ import {
Label
} from 'reactstrap';
-import {
- verifyCredentials
-} from '../js/api';
+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 { verifyCredentials } from '../js/api';
+import EditableStringList from '../js/components/EditableStringList';
-import EditableStringList from '../js/EditableStringList';
+import '../static/everypage.css';
class PrivateCreatePage extends React.Component {
diff --git a/pages/faq.js b/pages/faq.js
index d747e7d..c861b13 100644
--- a/pages/faq.js
+++ b/pages/faq.js
@@ -1,13 +1,15 @@
-import Head from 'next/head';
-import React from 'react';
-import {Col, Container, Row} from 'reactstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
-import '../static/everypage.css';
+import Head from 'next/head';
+import React from 'react';
+import { Col, Container, Row } from 'reactstrap';
-import {
- verifyCredentials
-} from '../js/api';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer';
+import { verifyCredentials } from '../js/api';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import '../static/everypage.css';
function Main() {
return (
diff --git a/pages/imprint.js b/pages/imprint.js
index 34fb942..40d58a9 100644
--- a/pages/imprint.js
+++ b/pages/imprint.js
@@ -1,13 +1,14 @@
-import Head from 'next/head';
-import React from 'react';
-import {Container} from 'reactstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
-import '../static/everypage.css';
+import Head from 'next/head';
+import React from 'react';
+import { Container } from 'reactstrap';
-import {
- verifyCredentials
-} from '../js/api';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer';
+import { verifyCredentials } from '../js/api';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../static/everypage.css';
function Main() {
return (
diff --git a/pages/index.js b/pages/index.js
index b49f80d..77c93eb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,21 +1,25 @@
-import Head from 'next/head';
-import React from 'react';
-
-import { Alert, Button, Card, CardBody } from 'reactstrap';
-
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
-
-import '../static/everypage.css';
-import '../static/css/index.css';
-
-import { connect } from 'react-redux';
+import Head from 'next/head';
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+ Alert,
+ Button,
+ Card,
+ CardBody
+} from 'reactstrap';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer';
import {
verifyCredentials
} from '../js/api';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import '../static/everypage.css';
+import '../static/css/index.css';
+
function Main() {
return (
diff --git a/pages/list.js b/pages/list.js
index 200e412..7e9f018 100644
--- a/pages/list.js
+++ b/pages/list.js
@@ -1,8 +1,13 @@
-import Head from 'next/head';
-import React from 'react';
-import { Card, CardBody, Container } from 'reactstrap';
+import Head from 'next/head';
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Container
+} from 'reactstrap';
-import { Footer, TurniereNavigation } from '../js/CommonComponents';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer';
import {
getRequest,
getState,
diff --git a/pages/login.js b/pages/login.js
index aa43fa5..4bed1e0 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,11 +1,12 @@
-import Head from 'next/head';
-import '../static/everypage.css';
-import { Footer, TurniereNavigation, Login } from '../js/CommonComponents';
-import React from 'react';
+import Head from 'next/head';
+import React from 'react';
-import {
- verifyCredentials
-} from '../js/api';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer';
+import { Login } from '../js/components/Login';
+import { verifyCredentials } from '../js/api';
+
+import '../static/everypage.css';
export default class LoginPage extends React.Component {
diff --git a/pages/privacy.js b/pages/privacy.js
index e4263eb..42dca7f 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -1,13 +1,15 @@
-import Head from 'next/head';
-import React from 'react';
-import {Container} from 'reactstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
-import '../static/everypage.css';
+import Head from 'next/head';
+import React from 'react';
+import { Container } from 'reactstrap';
-import {
- verifyCredentials
-} from '../js/api';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer';
+import { verifyCredentials } from '../js/api';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import '../static/everypage.css';
function Main() {
return (
diff --git a/pages/register.js b/pages/register.js
index 096d6c1..91ebc81 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -1,14 +1,24 @@
-import Head from 'next/head';
-import '../static/everypage.css';
-import {Footer, TurniereNavigation} from '../js/CommonComponents';
-import React from 'react';
-import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label } from 'reactstrap';
-import { register } from '../js/api';
-import { connect } from 'react-redux';
-
+import Head from 'next/head';
+import React from 'react';
+import { connect } from 'react-redux';
import {
- verifyCredentials
-} from '../js/api';
+ Button,
+ Card,
+ CardBody,
+ Container,
+ Form,
+ FormGroup,
+ FormText,
+ Input,
+ Label
+} from 'reactstrap';
+
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer';
+import { register } from '../js/api';
+import { verifyCredentials } from '../js/api';
+
+import '../static/everypage.css';
export default class RegisterPage extends React.Component {
diff --git a/pages/tournament-edit.js b/pages/tournament-edit.js
index 1d147c1..8b0dfae 100644
--- a/pages/tournament-edit.js
+++ b/pages/tournament-edit.js
@@ -1,13 +1,7 @@
-import Head from 'next/head';
-import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { connect } from 'react-redux';
-import { notify } from 'react-notify-toast';
-
-import { requestTournament } from '../js/api';
-import { BigImage, Footer, TurniereNavigation, Login, UserRestrictor, Option } from '../js/CommonComponents.js';
-import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
-
+import Head from 'next/head';
+import React from 'react';
+import { connect } from 'react-redux';
+import { notify } from 'react-notify-toast';
import {
Container,
Button,
@@ -16,11 +10,20 @@ import {
Table
} from 'reactstrap';
+import { requestTournament } from '../js/api';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { UserRestrictor, Option } from '../js/components/UserRestrictor';
+import { Footer } from '../js/components/Footer';
+import { Login } from '../js/components/Login';
+import { ErrorPageComponent } from '../js/components/ErrorComponents';
import {
verifyCredentials,
updateTeamName
} from '../js/api';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
import '../static/everypage.css';
import '../static/css/index.css';
diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js
index 21fddff..a7b79d3 100644
--- a/pages/tournament-fullscreen.js
+++ b/pages/tournament-fullscreen.js
@@ -1,4 +1,4 @@
-import Head from 'next/head';
+import Head from 'next/head';
import React from 'react';
import {
diff --git a/pages/tournament.js b/pages/tournament.js
index 779a0ba..1b12687 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -1,5 +1,6 @@
-import Head from 'next/head';
-import React from 'react';
+import Head from 'next/head';
+import React from 'react';
+import { connect } from 'react-redux';
import {
Button,
Card,
@@ -18,19 +19,22 @@ import {
Row,
Table
} from 'reactstrap';
-import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
-import '../static/everypage.css';
-import '../static/css/tournament.css';
-import { connect } from 'react-redux';
+import { ErrorPageComponent } from '../js/components/ErrorComponents';
+import { Footer } from '../js/components/Footer';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
import {
getRequest,
getState,
verifyCredentials
} from '../js/api';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import '../static/everypage.css';
+import '../static/css/tournament.css';
+
class TournamentPage extends React.Component {
render() {