268 lines
10 KiB
JavaScript
268 lines
10 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { connectMyBadges, disconnectMyBadges } from '../../actions/authActions';
|
|
|
|
import axios from 'axios';
|
|
import { withRouter } from 'react-router-dom';
|
|
|
|
import Breadcrumbs from '../Breadcrumbs';
|
|
import Alert from '../Alert';
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import TextField from '@material-ui/core/TextField';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import InputAdornment from '@material-ui/core/InputAdornment';
|
|
import Link from '@material-ui/core/Link';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Avatar from '@material-ui/core/Avatar';
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const styles = (theme) => ({
|
|
root: {
|
|
'& label.Mui-focused': {
|
|
color: '#aed9c8'
|
|
},
|
|
'& .MuiOutlinedInput-root': {
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: '#aed9c8'
|
|
},
|
|
borderRadius: '0.75rem'
|
|
}
|
|
},
|
|
text: {
|
|
fontFamily: [
|
|
'"Open Sans"',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
fontSize: 16
|
|
}
|
|
});
|
|
|
|
export class MyBadges extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
username: '',
|
|
password: '',
|
|
showPassword: false,
|
|
msg: '',
|
|
badges: [],
|
|
progress: false
|
|
};
|
|
}
|
|
|
|
componentDidMount(){
|
|
if(this.props.user.badge){
|
|
this.getBadges();
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(props){
|
|
const { message } = this.props;
|
|
if (message !== props.message) {
|
|
// Check for login error
|
|
if(message.id === 'MYBADGES_CONNECT_FAIL'){
|
|
this.setState({msg: 'Der Benutzername oder das Passwort ist nicht korrekt.', username: '', password: '', showPassword: false});
|
|
}
|
|
else if(message.id === 'MYBADGES_CONNECT_SUCCESS'){
|
|
this.getBadges();
|
|
}
|
|
else if(message.id === 'MYBADGES_DISCONNECT_SUCCESS' || message.id === 'MYBADGES_DISCONNECT_FAIL'){
|
|
this.setState({progress: false});
|
|
}
|
|
else {
|
|
this.setState({msg: null});
|
|
}
|
|
}
|
|
}
|
|
|
|
getBadges = () => {
|
|
this.setState({progress: true});
|
|
const config = {
|
|
success: res => {
|
|
this.setState({badges: res.data.badges, progress: false});
|
|
},
|
|
error: err => {
|
|
this.setState({progress: false});
|
|
}
|
|
};
|
|
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
|
|
.then(res => {
|
|
res.config.success(res);
|
|
})
|
|
.catch(err => {
|
|
err.config.error(err);
|
|
});
|
|
};
|
|
|
|
onChange = e => {
|
|
this.setState({ [e.target.name]: e.target.value, msg: '' });
|
|
};
|
|
|
|
onSubmit = e => {
|
|
e.preventDefault();
|
|
const {username, password} = this.state;
|
|
// create user object
|
|
const user = {
|
|
username,
|
|
password
|
|
};
|
|
this.props.connectMyBadges(user);
|
|
};
|
|
|
|
handleClickShowPassword = () => {
|
|
this.setState({ showPassword: !this.state.showPassword });
|
|
};
|
|
|
|
handleMouseDownPassword = (e) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
render(){
|
|
return(
|
|
<div>
|
|
<Breadcrumbs content={[{ link: '/user/badge', title: 'MyBadges' }]} />
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} style={{margin: '4px'}}>
|
|
{!this.props.user.badge ?
|
|
<Alert>
|
|
Du kannst dein Blockly-Konto mit deinem <Link href={`${process.env.REACT_APP_MYBADGES}`}>MyBadges</Link>-Konto verknüpfen, um Badges erwerben zu können.
|
|
</Alert>
|
|
: null}
|
|
<Paper style={{background: '#fffbf5'}}>
|
|
<div style={{display: 'flex', flexDirection: 'row', alignSelf: 'center', justifyContent: 'center', flexWrap: 'wrap'}}>
|
|
<div style={!this.props.user.badge ? {margin: '15px 15px 0px 15px'} : {margin: '15px'}}>
|
|
<img src={`${process.env.REACT_APP_MYBADGES}/static/media/Logo.d1c71fdf.png`} alt="My Badges" style={{maxWidth: '200px', maxHeight: '200px'}}></img>
|
|
</div>
|
|
{!this.props.user.badge ?
|
|
<div style={{maxWidth: '500px', alignSelf: 'center', textAlign: 'center', margin: '15px'}}>
|
|
{this.state.msg ?
|
|
<div style={{lineHeight: 1.43, borderRadius: '0.75rem', padding: '14px 16px', marginBottom: '10px', color: 'rgb(97, 26, 21)', backgroundColor: 'rgb(253, 236, 234)', fontFamily: `"Open Sans",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`}}>
|
|
{this.state.msg}
|
|
</div> : null
|
|
}
|
|
<TextField
|
|
style={{marginBottom: '10px'}}
|
|
classes={{root: this.props.classes.root}}
|
|
variant='outlined'
|
|
type='text'
|
|
label='Nutzername'
|
|
name='username'
|
|
value={this.state.username}
|
|
onChange={this.onChange}
|
|
fullWidth={true}
|
|
/>
|
|
<TextField
|
|
classes={{root: this.props.classes.root}}
|
|
variant='outlined'
|
|
type={this.state.showPassword ? 'text' : 'password'}
|
|
label='Passwort'
|
|
name='password'
|
|
value={this.state.password}
|
|
InputProps={{
|
|
endAdornment:
|
|
<InputAdornment
|
|
position="end"
|
|
>
|
|
<IconButton
|
|
onClick={this.handleClickShowPassword}
|
|
onMouseDown={this.handleMouseDownPassword}
|
|
edge="end"
|
|
>
|
|
<FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
}}
|
|
onChange={this.onChange}
|
|
fullWidth={true}
|
|
/>
|
|
<p>
|
|
<Button variant='contained' onClick={this.onSubmit} className={this.props.classes.text} style={{background: '#aed9c8', borderRadius: '0.75rem', width: '100%'}}>
|
|
Anmelden
|
|
</Button>
|
|
</p>
|
|
<p className={this.props.classes.text} style={{textAlign: 'center', fontSize: '0.8rem'}}>
|
|
<Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/user/password`}>Passwort vergessen?</Link>
|
|
</p>
|
|
<Divider variant='fullWidth'/>
|
|
<p className={this.props.classes.text} style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}>
|
|
Du hast noch kein Konto? <Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/register`}>Registrieren</Link>
|
|
</p>
|
|
</div>
|
|
: <div style={{margin: '15px', alignSelf: 'center'}}>
|
|
<Typography style={{fontWeight: 'bold', fontSize: '1.1rem'}}>MyBadges-Konto ist erfolgreich verknüpft.</Typography>
|
|
<Button variant='outlined' style={{borderColor: '#aed9c8'}} onClick={() => {this.props.disconnectMyBadges(); this.setState({badges: [], progress: true});}}>Konto trennen</Button>
|
|
</div>}
|
|
</div>
|
|
</Paper>
|
|
</Grid>
|
|
|
|
{this.props.user.badge && !this.state.progress ?
|
|
<Grid container item>
|
|
<Grid item style={{margin: '4px'}}>
|
|
{this.state.badges && this.state.badges.length > 0 ?
|
|
<Typography style={{fontWeight: 'bold'}}>
|
|
Du hast {this.state.badges.length} {this.state.badges.length === 1 ? 'Badge' : 'Badges'} im Kontext Blockly for senseBox erreicht.
|
|
</Typography>
|
|
: null}
|
|
</Grid>
|
|
<Grid container item>
|
|
{this.state.badges && this.state.badges.length > 0 ?
|
|
this.state.badges.map(badge => (
|
|
<Grid item xs={12} sm={6} md={4}>
|
|
<Paper style={{margin: '4px', textAlign: 'center'}}>
|
|
{badge.image && badge.image.path ?
|
|
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${badge.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/>
|
|
: <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>}
|
|
<Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}>
|
|
<div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{badge.name}</div>
|
|
</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
))
|
|
:
|
|
<Grid item style={{margin: '4px'}}>
|
|
<Typography style={{fontWeight: 'bold'}}>
|
|
Du hast noch keine Badges im Kontext senseBox for Blockly erreicht.
|
|
</Typography>
|
|
</Grid>}
|
|
</Grid>
|
|
</Grid>
|
|
: null}
|
|
</Grid>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
MyBadges.propTypes = {
|
|
connectMyBadges: PropTypes.func.isRequired,
|
|
disconnectMyBadges: PropTypes.func.isRequired,
|
|
message: PropTypes.object.isRequired,
|
|
user: PropTypes.object.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
message: state.message,
|
|
user: state.auth.user
|
|
});
|
|
|
|
export default connect(mapStateToProps, { connectMyBadges, disconnectMyBadges })(withStyles(styles, { withTheme: true })(withRouter(MyBadges)));
|