From b85ce62b2f0e3f7687adbeaf57df33353ed77e16 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 23 Apr 2019 15:41:43 +0200 Subject: [PATCH 1/5] Greet the user after login with a toast --- js/api.js | 17 ++++++++++++++++- js/components/Navigation.js | 14 ++++++++++---- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/js/api.js b/js/api.js index 7877298..d178f70 100644 --- a/js/api.js +++ b/js/api.js @@ -20,7 +20,8 @@ const actiontypes_userinfo = { 'LOGIN' : 'LOGIN', 'LOGIN_RESULT_SUCCESS' : 'LOGIN_RESULT_SUCCESS', 'LOGIN_RESULT_ERROR' : 'LOGIN_RESULT_ERROR', - + 'GREET' : 'GREET', + 'CLEAR_ERRORS' : 'CLEAR_ERRORS', 'LOGOUT' : 'LOGOUT', @@ -37,6 +38,7 @@ const actiontypes_userinfo = { const defaultstate_userinfo = { isSignedIn : false, + wasGreeted : false, username : null, error : false, errorMessages : [], @@ -214,6 +216,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { case actiontypes_userinfo.LOGIN_RESULT_SUCCESS: return Object.assign({}, state, { isSignedIn : true, + wasGreeted : false, error : false, errorMessages : [], username : action.parameters.username, @@ -235,6 +238,10 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { __store.dispatch({ type : actiontypes_userinfo.CLEAR }); }); return Object.assign({}, state, {}); + case actiontypes_userinfo.GREET: + return Object.assign({}, state, { + wasGreeted : true, + }); case actiontypes_userinfo.STORE_AUTH_HEADERS: return Object.assign({}, state, { accesstoken : action.parameters.accesstoken, @@ -396,6 +403,14 @@ export function login(email, password) { }); } +export function greet() { + __store.dispatch({ + type: actiontypes_userinfo.GREET, + parameters: {}, + state: __store.getState() + }); +} + export function logout() { __store.dispatch({ type : actiontypes_userinfo.LOGOUT, diff --git a/js/components/Navigation.js b/js/components/Navigation.js index b9d0775..a1bbb77 100644 --- a/js/components/Navigation.js +++ b/js/components/Navigation.js @@ -13,7 +13,8 @@ import { import { connect } from 'react-redux'; import React from 'react'; -import { logout } from '../api'; +import {greet, logout} from '../api'; +import {notify} from "react-notify-toast"; export class TurniereNavigation extends React.Component { @@ -67,7 +68,12 @@ function Betabadge() { class InvisibleLoginLogoutButtons extends React.Component { render() { - const { isSignedIn, username } = this.props; + const {isSignedIn, username, wasGreeted} = this.props; + + if (isSignedIn && !wasGreeted) { + notify.show('Willkommen, ' + username + '!', 'success', 3000); + greet(); + } if(isSignedIn) { return ( @@ -88,8 +94,8 @@ class InvisibleLoginLogoutButtons extends React.Component { } const mapStateToLoginLogoutButtonProperties = (state) => { - const { isSignedIn, username } = state.userinfo; - return { isSignedIn, username }; + const {isSignedIn, username, wasGreeted} = state.userinfo; + return {isSignedIn, username, wasGreeted}; }; const LoginLogoutButtons = connect( From 7b38b503ef5030d18a8a5734ae1dae163b6d8f96 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 23 Apr 2019 20:47:07 +0200 Subject: [PATCH 2/5] Say goodbye to the user when he logs out --- js/api.js | 3 ++- js/components/Navigation.js | 17 +++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/js/api.js b/js/api.js index d178f70..aae8724 100644 --- a/js/api.js +++ b/js/api.js @@ -38,7 +38,7 @@ const actiontypes_userinfo = { const defaultstate_userinfo = { isSignedIn : false, - wasGreeted : false, + wasGreeted : true, username : null, error : false, errorMessages : [], @@ -261,6 +261,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { case actiontypes_userinfo.CLEAR: return Object.assign({}, state, { isSignedIn : false, + wasGreeted : false, username : null, error : false, errorMessages : [], diff --git a/js/components/Navigation.js b/js/components/Navigation.js index a1bbb77..cc4b07a 100644 --- a/js/components/Navigation.js +++ b/js/components/Navigation.js @@ -14,7 +14,7 @@ import { connect } from 'react-redux'; import React from 'react'; import {greet, logout} from '../api'; -import {notify} from "react-notify-toast"; +import {notify} from 'react-notify-toast'; export class TurniereNavigation extends React.Component { @@ -70,12 +70,12 @@ class InvisibleLoginLogoutButtons extends React.Component { render() { const {isSignedIn, username, wasGreeted} = this.props; - if (isSignedIn && !wasGreeted) { - notify.show('Willkommen, ' + username + '!', 'success', 3000); - greet(); - } - if(isSignedIn) { + if (!wasGreeted) { + notify.show('Willkommen, ' + username + '!', 'success', 2500); + greet(); + } + return ( @@ -83,6 +83,11 @@ class InvisibleLoginLogoutButtons extends React.Component { ); } else { + if (!wasGreeted) { + notify.show('Du bist jetzt abgemeldet!', 'success', 2500); + greet(); + } + return ( From bf8a9431bfb42fadb564b7800c8681d4980303e9 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Sat, 27 Apr 2019 13:27:11 +0200 Subject: [PATCH 3/5] Revert "Say goodbye to the user when he logs out" This reverts commit 7b38b503 --- js/api.js | 3 +-- js/components/Navigation.js | 17 ++++++----------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/js/api.js b/js/api.js index aae8724..d178f70 100644 --- a/js/api.js +++ b/js/api.js @@ -38,7 +38,7 @@ const actiontypes_userinfo = { const defaultstate_userinfo = { isSignedIn : false, - wasGreeted : true, + wasGreeted : false, username : null, error : false, errorMessages : [], @@ -261,7 +261,6 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { case actiontypes_userinfo.CLEAR: return Object.assign({}, state, { isSignedIn : false, - wasGreeted : false, username : null, error : false, errorMessages : [], diff --git a/js/components/Navigation.js b/js/components/Navigation.js index cc4b07a..a1bbb77 100644 --- a/js/components/Navigation.js +++ b/js/components/Navigation.js @@ -14,7 +14,7 @@ import { connect } from 'react-redux'; import React from 'react'; import {greet, logout} from '../api'; -import {notify} from 'react-notify-toast'; +import {notify} from "react-notify-toast"; export class TurniereNavigation extends React.Component { @@ -70,12 +70,12 @@ class InvisibleLoginLogoutButtons extends React.Component { render() { const {isSignedIn, username, wasGreeted} = this.props; - if(isSignedIn) { - if (!wasGreeted) { - notify.show('Willkommen, ' + username + '!', 'success', 2500); - greet(); - } + if (isSignedIn && !wasGreeted) { + notify.show('Willkommen, ' + username + '!', 'success', 3000); + greet(); + } + if(isSignedIn) { return ( @@ -83,11 +83,6 @@ class InvisibleLoginLogoutButtons extends React.Component { ); } else { - if (!wasGreeted) { - notify.show('Du bist jetzt abgemeldet!', 'success', 2500); - greet(); - } - return ( From f243b69a5efd0920f412216f185966192a759fa3 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Sat, 27 Apr 2019 13:27:26 +0200 Subject: [PATCH 4/5] Revert "Greet the user after login with a toast" This reverts commit b85ce62b --- js/api.js | 17 +---------------- js/components/Navigation.js | 14 ++++---------- 2 files changed, 5 insertions(+), 26 deletions(-) diff --git a/js/api.js b/js/api.js index d178f70..7877298 100644 --- a/js/api.js +++ b/js/api.js @@ -20,8 +20,7 @@ const actiontypes_userinfo = { 'LOGIN' : 'LOGIN', 'LOGIN_RESULT_SUCCESS' : 'LOGIN_RESULT_SUCCESS', 'LOGIN_RESULT_ERROR' : 'LOGIN_RESULT_ERROR', - 'GREET' : 'GREET', - + 'CLEAR_ERRORS' : 'CLEAR_ERRORS', 'LOGOUT' : 'LOGOUT', @@ -38,7 +37,6 @@ const actiontypes_userinfo = { const defaultstate_userinfo = { isSignedIn : false, - wasGreeted : false, username : null, error : false, errorMessages : [], @@ -216,7 +214,6 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { case actiontypes_userinfo.LOGIN_RESULT_SUCCESS: return Object.assign({}, state, { isSignedIn : true, - wasGreeted : false, error : false, errorMessages : [], username : action.parameters.username, @@ -238,10 +235,6 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => { __store.dispatch({ type : actiontypes_userinfo.CLEAR }); }); return Object.assign({}, state, {}); - case actiontypes_userinfo.GREET: - return Object.assign({}, state, { - wasGreeted : true, - }); case actiontypes_userinfo.STORE_AUTH_HEADERS: return Object.assign({}, state, { accesstoken : action.parameters.accesstoken, @@ -403,14 +396,6 @@ export function login(email, password) { }); } -export function greet() { - __store.dispatch({ - type: actiontypes_userinfo.GREET, - parameters: {}, - state: __store.getState() - }); -} - export function logout() { __store.dispatch({ type : actiontypes_userinfo.LOGOUT, diff --git a/js/components/Navigation.js b/js/components/Navigation.js index a1bbb77..b9d0775 100644 --- a/js/components/Navigation.js +++ b/js/components/Navigation.js @@ -13,8 +13,7 @@ import { import { connect } from 'react-redux'; import React from 'react'; -import {greet, logout} from '../api'; -import {notify} from "react-notify-toast"; +import { logout } from '../api'; export class TurniereNavigation extends React.Component { @@ -68,12 +67,7 @@ function Betabadge() { class InvisibleLoginLogoutButtons extends React.Component { render() { - const {isSignedIn, username, wasGreeted} = this.props; - - if (isSignedIn && !wasGreeted) { - notify.show('Willkommen, ' + username + '!', 'success', 3000); - greet(); - } + const { isSignedIn, username } = this.props; if(isSignedIn) { return ( @@ -94,8 +88,8 @@ class InvisibleLoginLogoutButtons extends React.Component { } const mapStateToLoginLogoutButtonProperties = (state) => { - const {isSignedIn, username, wasGreeted} = state.userinfo; - return {isSignedIn, username, wasGreeted}; + const { isSignedIn, username } = state.userinfo; + return { isSignedIn, username }; }; const LoginLogoutButtons = connect( From 60c8bff55d36cf9ea19d289a879f44eb0e8af0c7 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Sat, 27 Apr 2019 13:30:34 +0200 Subject: [PATCH 5/5] Greet the user with a toast notification when he logs in or out [now done with success callback methods] --- js/api.js | 13 ++++++++++--- js/components/Login.js | 3 ++- js/components/Navigation.js | 7 ++++++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/js/api.js b/js/api.js index 7877298..f5991ff 100644 --- a/js/api.js +++ b/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() }); } diff --git a/js/components/Login.js b/js/components/Login.js index 2d2b599..7a9430d 100644 --- a/js/components/Login.js +++ b/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() { diff --git a/js/components/Navigation.js b/js/components/Navigation.js index b9d0775..8c86753 100644 --- a/js/components/Navigation.js +++ b/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 ( - + ); } else {