Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // General Modules
- import React from "react";
- import { Link } from "react-router-dom";
- // Material-Ui components
- import { withStyles } from "material-ui/styles";
- import { FormControl } from "material-ui/Form";
- import Input, { InputLabel, InputAdornment } from "material-ui/Input";
- import Button from "material-ui/Button";
- import { red, grey } from "material-ui/colors";
- // Icons
- import EmailIcon from "material-ui-icons/Email";
- import PasswordIcon from "material-ui-icons/VpnKey";
- // JSS
- const styles = {
- labelRoot: {
- color: "white"
- },
- inputRoot: {
- color: "white"
- },
- inputUnderline: {
- "&:before": {
- backgroundColor: "white"
- },
- "&:hover:not(.foo):before": {
- backgroundColor: "white"
- }
- },
- inputInkbar: {
- "&:after": {
- backgroundColor: "white"
- }
- },
- rootButton: {
- backgroundColor: "white",
- color: red[500],
- "&:hover": {
- backgroundColor: grey[100]
- }
- },
- link:{
- color: grey[100],
- textDecoration: 'none'
- }
- };
- // Component class definition
- class SignIn extends React.Component {
- render() {
- const { classes } = this.props; // Injected by withStyles
- return (
- <div className="sign-in">
- <h1>Or sign in your account</h1>
- <FormControl>
- <InputLabel htmlFor="email" classes={{ root: classes.labelRoot }}>
- Your email
- </InputLabel>
- <Input
- type="email"
- classes={{
- root: classes.inputRoot,
- underline: classes.inputUnderline,
- inkbar: classes.inputInkbar
- }}
- endAdornment={
- <InputAdornment position="end">
- <EmailIcon />
- </InputAdornment>
- }
- />
- </FormControl>
- <FormControl>
- <InputLabel htmlFor="password" classes={{ root: classes.labelRoot }}>
- Password
- </InputLabel>
- <Input
- type="password"
- classes={{
- root: classes.inputRoot,
- underline: classes.inputUnderline,
- inkbar: classes.inputInkbar
- }}
- endAdornment={
- <InputAdornment position="end">
- <PasswordIcon />
- </InputAdornment>
- }
- />
- </FormControl>
- <div>
- <Button raised>Sign In</Button>
- <Link to="/recover-password" classes={{link: classes.link}}>Forgot password?</Link>
- </div>
- </div>
- );
- }
- }
- // Export
- export default withStyles(styles)(SignIn);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement