All files / src/components LoginPage.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from "react";
import Card, { CardActions, CardContent, CardMedia } from "material-ui/Card";
import Button from "material-ui/Button";
import Typography from "material-ui/Typography";
import { withStyles } from "material-ui/styles";
import logo from "../spotify-logo.png";
 
const styles = theme => ({
  card: {
    display: "flex",
    margin: theme.spacing.unit
  },
  details: {
    display: "flex",
    flexDirection: "column",
    "max-width": "390px"
  },
  content: {
    flex: "1 0 auto"
  },
  controls: {
    display: "flex",
    alignItems: "center",
    paddingLeft: theme.spacing.unit,
    paddingBottom: theme.spacing.unit
  },
  cover: {
    marginLeft: 2 * theme.spacing.unit,
    marginRight: theme.spacing.unit,
    marginTop: 4 * theme.spacing.unit,
    minWidth: "50px",
    height: "50px"
  }
});
 
class LoginPage extends Component {
  render() {
    const { classes, login_url } = this.props;
    return (
      <div>
        <Card className={classes.card}>
          <CardMedia className={classes.cover} image={logo} title="" />
          <div className={classes.details}>
            <CardContent className={classes.content}>
              <Typography type="body1">
                To use this app you need to have a Spotify account. Please use
                the button below to login to Spotify.
              </Typography>
            </CardContent>
            <div className={classes.controls}>
              <CardActions>
                <Button raised color="primary" href={login_url}>
                  Login to Spotify
                </Button>
              </CardActions>
            </div>
          </div>
        </Card>
      </div>
    );
  }
}
 
export default withStyles(styles, { withTheme: true })(LoginPage);