Merge pull request #19 from turniere/ticket/TURNIERE-145

Greet the user with a toast notification when he logs in or out

js/api.js

@@ -189,6 +189,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
                 type : actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
                 parameters : {
                     username : resp.data.username,
+                    successCallback: action.parameters.successCallback
                 }
             });
             storeOptionalToken(resp);
@@ -212,6 +213,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
         });
         return Object.assign({}, state, {});
     case actiontypes_userinfo.LOGIN_RESULT_SUCCESS:
+        action.parameters.successCallback(action.parameters.username);
         return Object.assign({}, state, {
             isSignedIn : true,
             error : false,
@@ -230,6 +232,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
         });
     case actiontypes_userinfo.LOGOUT:
         deleteRequest(action.state, '/users/sign_out').then(() => {
+            action.parameters.successCallback();
             __store.dispatch({ type : actiontypes_userinfo.CLEAR });
         }).catch(() => {
             __store.dispatch({ type : actiontypes_userinfo.CLEAR });
@@ -385,20 +388,24 @@ export function register(username, email, password) {
     });
 }
 
-export function login(email, password) {
+export function login(email, password, successCallback) {
     __store.dispatch({
         type: actiontypes_userinfo.LOGIN,
         parameters: {
             email: email,
-            password: password
+            password: password,
+            successCallback: successCallback
         },
         state: __store.getState()
     });
 }
 
-export function logout() {
+export function logout(successCallback) {
     __store.dispatch({
         type : actiontypes_userinfo.LOGOUT,
+        parameters: {
+            successCallback: successCallback
+        },
         state: __store.getState()
     });
 }

js/components/Login.js

@@ -9,6 +9,7 @@ import {
 } from '../api';
 
 import '../../static/css/errormessages.css';
+import {notify} from 'react-notify-toast';
 
 export function Login(props) {
     return (
@@ -90,7 +91,7 @@ class LoginForm extends React.Component {
 
     tryLogin(event) {
         event.preventDefault();
-        login(this.state.email, this.state.password);
+        login(this.state.email, this.state.password, (username) => notify.show('Willkommen, ' + username + '!', 'success', 2500));
     }
 
     render() {

js/components/Navigation.js

@@ -14,6 +14,7 @@ import { connect } from 'react-redux';
 import React       from 'react';
 
 import { logout }  from '../api';
+import {notify} from 'react-notify-toast';
 
 export class TurniereNavigation extends React.Component {
 
@@ -66,6 +67,10 @@ function Betabadge() {
 
 class InvisibleLoginLogoutButtons extends React.Component {
 
+    logout(){
+        logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
+    }
+
     render() {
         const { isSignedIn, username } = this.props;
 
@@ -73,7 +78,7 @@ class InvisibleLoginLogoutButtons extends React.Component {
             return (
                 <ButtonGroup className="nav-item">
                     <Button outline color="success"  href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
-                    <Button outline color="success" onClick={logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
+                    <Button outline color="success" onClick={this.logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
                 </ButtonGroup>
             );
         } else {