turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add actually working login and logout

This commit is contained in:
JP1998 2018-12-03 14:30:48 +01:00
parent 9dd2466e10
commit d0337fb640
4 changed files with 172 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/CommonComponents.js
View File

@ -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 {

49
js/api.js
View File

@ -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() {
var userinfostate = __store.getState().userinfo;
if(userinfostate.isSignedIn) {
function generateHeaders(state) {
if(state.isSignedIn) {
return {
'access-token' : userinfostate.accesstoken,
'client' : userinfostate.client,
'uid' : userinfostate.uid
'access-token' : state.accesstoken,
'client' : state.client,
'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();
}

87
pages/login.js
View File

@ -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() {
return (
<Form>
<FormGroup>
<Label for="username">E-Mail-Adresse</Label>
<Input type="email" name="username"/>
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password"/>
</FormGroup>
<Button color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
</Form>
);
class LoginErrorList extends React.Component {
render() {
const { error, errorMessages } = this.props;
if(error) {
return (
<ul>
{ errorMessages.map((message, index) =>
<li key={index}>
<style jsx>{`
li {
color:red;
}
`}</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 });
}
}

84
pages/register.js
View File

@ -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() {
return (
<Form>
<FormGroup>
<Label for="username">Benutzername</Label>
<Input name="username"/>
<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"/>
<FormText>Deine E-Mail-Adresse kann nur von dir gesehen werden.</FormText>
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password"/>
<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 color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
</Form>
);
class RegisterForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username : '',
email : '',
password : ''
};
}
handleRegisterClick(state) {
const { username, email, password } = state;
console.log(state);
console.log(username);
console.log(email);
console.log(password);
}
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() {