Add actually working login and logout

js/CommonComponents.js

@@ -15,6 +15,8 @@ import { connect } from 'react-redux'
 
 import React from "react";
 
+import { logout } from './api'
+
 export function BigImage(props) {
     return (
         <div className="big-image">
@@ -74,23 +76,14 @@ function Betabadge() {
 
 class InvisibleLoginLogoutButtons extends React.Component {
 
-    logoutClick() {
-        console.log("Logged out.");
-
-        /*
-        /users/sign_out <- DELETE Token invalidieren
-        /users/validate_token <- GET Token valide?
-        */
-    }
-
     render() {
-        const { isSignedIn, username, logout } = this.props
+        const { isSignedIn, username } = this.props
 
         if(isSignedIn) {
             return (
                 <ButtonGroup className="nav-item">
                     <Button href="/profile" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">{ username }</Button>
-                    <Button onClick={this.logoutClick} className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Logout</Button>
+                    <Button onClick={logout.bind(this)} className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Logout</Button>
                 </ButtonGroup>
             );
         } else {

js/api.js

@@ -17,6 +17,8 @@ const actiontypes_userinfo = {
     'LOGIN_RESULT_SUCCESS'      : 'LOGIN_RESULT_SUCCESS',
     'LOGIN_RESULT_ERROR'        : 'LOGIN_RESULT_ERROR',
 
+    'LOGOUT'                     : 'LOGOUT',
+
     'STORE_AUTH_HEADERS'        : 'STORE_AUTH_HEADERS',
 
     'REHYDRATE'                 : 'USERINFO_REHYDRATE',
@@ -34,31 +36,30 @@ const defaultstate_userinfo = {
     uid : null
 }
 
-export function postRequest(url, data) {
+export function postRequest(state, url, data) {
     return axios.post(api_url + url, data, {
-        headers : generateHeaders()
+        headers : generateHeaders(state)
     });
 }
 
-export function getRequest(url, data) {
+export function getRequest(state, url, data) {
     return axios.get(api_url + url, data, {
-        headers : generateHeaders()
+        headers : generateHeaders(state)
     });
 }
 
-export function deleteRequest(url, data) {
+export function deleteRequest(state, url, data) {
     return axios.delete(api_url + url, data, {
-        headers : generateHeaders()
+        headers : generateHeaders(state)
     });
 }
 
-function generateHeaders() {
+function generateHeaders(state) {
-    var userinfostate = __store.getState().userinfo;
+    if(state.isSignedIn) {
-    if(userinfostate.isSignedIn) {
         return {
-            'access-token' : userinfostate.accesstoken,
+            'access-token' : state.accesstoken,
-            'client' : userinfostate.client,
+            'client' : state.client,
-            'uid' : userinfostate.uid
+            'uid' : state.uid
         };
     } else {
         return {};
@@ -81,6 +82,9 @@ function storeOptionalToken(response) {
 
 function checkForAuthenticationHeaders(response) {
     if(response.headers) {
+
+        console.log(response);
+
         const requiredHeaders = [
             'access-token', 'client', 'uid', 'expiry', // TODO: Add last header that is required (I don't remember it right now lol) 
         ];
@@ -97,7 +101,7 @@ function checkForAuthenticationHeaders(response) {
 const reducer_userinfo = (state = defaultstate_userinfo, action) => {
     switch(action.type) {
         case actiontypes_userinfo.REGISTER:
-            postRequest('/users', {
+            postRequest(state, '/users', {
                 'username' : action.parameters.username,
                 'email' : action.parameters.email,
                 'password' : action.parameters.password
@@ -138,7 +142,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
                 errorMessages : action.parameters.errorMessages
             });
         case actiontypes_userinfo.LOGIN:
-            postRequest('/users/sign_in', {
+            postRequest(state, '/users/sign_in', {
                 email : action.parameters.email,
                 password : action.parameters.password
             }).then((resp) => {
@@ -180,7 +184,20 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
                 error : true,
                 errorMessages : action.parameters.errorMessages
             });
+        
+        case actiontypes_userinfo.LOGOUT:
+            return Object.assign({}, state, {
+                isSignedIn : false,
+                username : null,
+
+                accesstoken : null,
+                client : null,
+                expiry : null,
+                uid : null
+            });
+
         case actiontypes_userinfo.STORE_AUTH_HEADERS:
+            console.log("Token has been stored.");
             return Object.assign({}, state, {
                 accesstoken : action.parameters.accesstoken,
                 client : action.parameters.client,
@@ -242,6 +259,10 @@ export function login(email, password) {
     })
 }
 
+export function logout() {
+    __store.dispatch({ type : actiontypes_userinfo.LOGOUT });
+}
+
 export function getState() {
     return __store.getState();
 }

pages/login.js

@@ -3,6 +3,8 @@ import '../static/everypage.css'
 import {Footer, TurniereNavigation} 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'
 
 export default () => (
     <div className="main generic-fullpage-bg">
@@ -34,18 +36,75 @@ function Login() {
     );
 }
 
-function LoginForm() {
+class LoginErrorList extends React.Component {
-    return (
+
-        <Form>
+    render() {
-            <FormGroup>
+        const { error, errorMessages } = this.props;
-                <Label for="username">E-Mail-Adresse</Label>
+        if(error) {
-                <Input type="email" name="username"/>
+            return (
-            </FormGroup>
+                <ul>
-            <FormGroup>
+                    { errorMessages.map((message, index) => 
-                <Label for="password">Passwort</Label>
+                        <li key={index}>
-                <Input type="password" name="password"/>
+                            <style jsx>{`
-            </FormGroup>
+                                li {
-            <Button color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
+                                    color:red;
-        </Form>
+                                }
-    );
+                            `}</style>
+                            {message}
+                        </li>
+
+                    ) }
+                </ul>
+            );
+        } 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 (
+            <Form>
+                <FormGroup>
+                    <Label for="username">E-Mail-Adresse</Label>
+                    <Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
+                </FormGroup>
+                <FormGroup>
+                    <Label for="password">Passwort</Label>
+                    <Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
+                </FormGroup>
+                <Button onClick={login.bind(this, this.state.email, this.state.password)} color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
+                <VisibleLoginErrorList/>
+            </Form>
+        );
+    }
+
+    handlePasswordInput(input) {
+        this.setState({ password : input.target.value });
+    }
+
+    handleEmailInput(input) {
+        this.setState({ email : input.target.value });
+    }
 }

pages/register.js

@@ -3,6 +3,7 @@ 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'
 
 export default () => (
     <div className="main generic-fullpage-bg">
@@ -34,30 +35,65 @@ function Register() {
     );
 }
 
-function RegisterForm() {
+class RegisterForm extends React.Component {
-    return (
+
-        <Form>
+    constructor(props) {
-            <FormGroup>
+        super(props);
-                <Label for="username">Benutzername</Label>
+
-                <Input name="username"/>
+        this.state = {
-                <FormText>Wenn du anderen dein Turnier zeigst, können sie deinen Benutzernamen sehen.</FormText>
+            username : '',
-            </FormGroup>
+            email : '',
-            <FormGroup>
+            password : ''
-                <Label for="email">E-Mail-Adresse</Label>
+        };
-                <Input type="email" name="email"/>
+    }
-                <FormText>Deine E-Mail-Adresse kann nur von dir gesehen werden.</FormText>
+
-            </FormGroup>
+    handleRegisterClick(state) {
-            <FormGroup>
+        const { username, email, password } = state;
-                <Label for="password">Passwort</Label>
+
-                <Input type="password" name="password"/>
+        console.log(state);
-                <FormText>Dein Passwort muss mindestens 12 Zeichen lang sein. Alle Zeichen sind erlaubt.</FormText>
+
-            </FormGroup>
+        console.log(username);
-            <FormText className="mb-2 mt-4">
+        console.log(email);
-                Du akzeptierst die <a href="/privacy">Datenschutzbestimmungen</a>, wenn du auf Registrieren klickst.
+        console.log(password);
-            </FormText>
+    }
-            <Button color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
+
-        </Form>
+    render() {
-    );
+        return (
+            <Form>
+                <FormGroup>
+                    <Label for="username">Benutzername</Label>
+                    <Input name="username" value={this.state.username} onChange={ this.handleUsernameInput.bind(this) } />
+                    <FormText>Wenn du anderen dein Turnier zeigst, können sie deinen Benutzernamen sehen.</FormText>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="email">E-Mail-Adresse</Label>
+                    <Input type="email" name="email" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
+                    <FormText>Deine E-Mail-Adresse kann nur von dir gesehen werden.</FormText>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="password">Passwort</Label>
+                    <Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
+                    <FormText>Dein Passwort muss mindestens 12 Zeichen lang sein. Alle Zeichen sind erlaubt.</FormText>
+                </FormGroup>
+                <FormText className="mb-2 mt-4">
+                    Du akzeptierst die <a href="/privacy">Datenschutzbestimmungen</a>, wenn du auf Registrieren klickst.
+                </FormText>
+                <Button onClick={ this.handleRegisterClick.bind(this.state) /* register.bind(this.state.username, this.state.email, this.state.password) */ } color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
+            </Form>
+        );
+    }
+
+    handlePasswordInput(input) {
+        this.setState({ password : input.target.value });
+    }
+
+    handleEmailInput(input) {
+        this.setState({ email : input.target.value });
+    }
+
+    handleUsernameInput(input) {
+        this.setState({ username : input.target.value });
+    }
 }
 
 function AccountRequirementMarketing() {