Add mail address change form with corresponding backend calls

js/api.js

@@ -7,7 +7,7 @@ import {errorMessages} from './constants';
 import {actionTypesUserinfo, defaultStateUserinfo} from './redux/userInfo';
 import {actionTypesTournamentinfo, defaultStateTournamentinfo} from './redux/tournamentInfo';
 import {actionTypesTournamentlist, defaultStateTournamentlist} from './redux/tournamentList';
-import {deleteRequest, getRequest, patchRequest, postRequest} from './redux/backendApi';
+import {deleteRequest, getRequest, patchRequest, postRequest, putRequest} from './redux/backendApi';
 
 
 function storeOptionalToken(response) {
@@ -149,6 +149,16 @@ const reducerUserinfo = (state = defaultStateUserinfo, action) => {
             __store.dispatch({type: actionTypesUserinfo.CLEAR});
         });
         return Object.assign({}, state, {});
+    case actionTypesUserinfo.CHANGE_MAIL:
+        putRequest(action.state, '/users', {
+            email: action.parameters.newMail
+        }).then(resp => {
+            storeOptionalToken(resp);
+            action.parameters.successCallback();
+        }).catch(() => {
+            action.parameters.errorCallback();
+        });
+        return Object.assign({}, state, {});
     case actionTypesUserinfo.REHYDRATE:
         return Object.assign({}, state, action.parameters, {error: false, errorMessages: []});
     case actionTypesUserinfo.CLEAR:
@@ -353,6 +363,18 @@ export function logout(successCallback) {
     });
 }
 
+export function changeMail(newMail, successCallback, errorCallback) {
+    __store.dispatch({
+        type: actionTypesUserinfo.CHANGE_MAIL,
+        parameters: {
+            newMail: newMail,
+            successCallback: successCallback,
+            errorCallback: errorCallback
+        },
+        state: __store.getState()
+    });
+}
+
 export function createTournament(data, successCallback, errorCallback) {
     __store.dispatch({
         type: actionTypesTournamentinfo.CREATE_TOURNAMENT,

js/redux/backendApi.js

@@ -29,6 +29,12 @@ export function patchRequest(state, url, data) {
     });
 }
 
+export function putRequest(state, url, data) {
+    return axios.put(apiUrl + url, data, {
+        headers: generateHeaders(state)
+    });
+}
+
 function generateHeaders(state) {
     if (state.userinfo.isSignedIn) {
         return {

js/redux/userInfo.js

@@ -13,6 +13,8 @@ export const actionTypesUserinfo = {
     'VERIFY_CREDENTIALS_SUCCESS': 'VERIFY_CREDENTIALS_SUCCESS',
     'VERIFY_CREDENTIALS_ERROR': 'VERIFY_CREDENTIALS_ERROR',
 
+    'CHANGE_MAIL': 'CHANGE_MAIL',
+
     'STORE_AUTH_HEADERS': 'STORE_AUTH_HEADERS',
 
     'REHYDRATE': 'USERINFO_REHYDRATE',

pages/profile.js

@@ -1,6 +1,6 @@
 import Head from 'next/head';
-import React from 'react';
+import React, {Component} from 'react';
-import {Container, Table} from 'reactstrap';
+import {Button, Container, Form, Input, InputGroup, InputGroupAddon, Table} from 'reactstrap';
 
 import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
@@ -11,13 +11,15 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '../static/css/everypage.css';
 import '../static/css/profile.css';
 import {connect} from 'react-redux';
+import {changeMail} from '../js/api';
+import {notify} from 'react-notify-toast';
 
-function Main() {
+function ContentContainer(props) {
-    return (<div className="main">
+    return (<Container className="pb-5">
-        <Container className="pb-5">
+        <UserData name={props.name} email={props.email}/>
-            <UserData/>
+        <h3 className='custom-font mt-5'>E-Mail-Adresse ändern</h3>
-        </Container>
+        <NewMailAddressInput email={props.email}/>
-    </div>);
+    </Container>);
 }
 
 export default class ProfilePage extends React.Component {
@@ -28,17 +30,19 @@ export default class ProfilePage extends React.Component {
             </Head>
             <TurniereNavigation/>
             <BigImage text="turnie.re-Account"/>
-            <Main/>
+            <div className='main'>
+                <Content/>
+            </div>
             <Footer/>
         </div>);
     }
 }
 
-const UserData = connect(state => {
+const Content = connect(state => {
     return {email: state.userinfo.uid, name: state.userinfo.username};
-})(UserDataTable);
+})(ContentContainer);
 
-function UserDataTable(props) {
+function UserData(props) {
     return (<Table>
         <tbody>
             <tr>
@@ -52,3 +56,44 @@ function UserDataTable(props) {
         </tbody>
     </Table>);
 }
+
+class NewMailAddressInput extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {email: ''};
+        this.submit = this.submit.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.onSubmitSuccess = this.onSubmitSuccess.bind(this);
+        NewMailAddressInput.onSubmitError = NewMailAddressInput.onSubmitError.bind(this);
+    }
+
+    submit(event) {
+        event.preventDefault();
+        changeMail(this.state.email, this.onSubmitSuccess, NewMailAddressInput.onSubmitError);
+    }
+
+    onSubmitSuccess() {
+        this.setState({email: ''});
+        notify.show('E-Mail-Adresse geändert.', 'success', 2500);
+    }
+
+    static onSubmitError() {
+        notify.show('Die E-Mail-Adresse konnte nicht geändert werden.', 'error', 3000);
+    }
+
+    onChange(input) {
+        this.setState({email: input.target.value});
+    }
+
+    render() {
+        return (<Form onSubmit={this.submit}>
+            <InputGroup>
+                <Input type='email' placeholder={this.props.email} onChange={this.onChange} value={this.state.email}
+                    required/>
+                <InputGroupAddon addonType='append'>
+                    <Button color='primary' type='submit'>eintragen</Button>
+                </InputGroupAddon>
+            </InputGroup>
+        </Form>);
+    }
+}