Skip to content

Commit

Permalink
- LoginPage is now on Hooks as well well well
Browse files Browse the repository at this point in the history
  • Loading branch information
@einazare
einazare committed Aug 13, 2019
1 parent 3120515 commit 705daf1
Showing 1 changed file with 127 additions and 146 deletions.
273 changes: 127 additions & 146 deletions src/views/LoginPage/LoginPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
Expand All @@ -21,153 +19,136 @@ import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomInput from "components/CustomInput/CustomInput.js";

import loginPageStyle from "assets/jss/material-kit-react/views/loginPage.js";
import styles from "assets/jss/material-kit-react/views/loginPage.js";

import image from "assets/img/bg7.jpg";

class LoginPage extends React.Component {
constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
cardAnimaton: "cardHidden"
};
}
componentDidMount() {
// we add a hidden class to the card and after 700 ms we delete it and the transition appears
setTimeout(
function() {
this.setState({ cardAnimaton: "" });
}.bind(this),
700
);
}
render() {
const { classes, ...rest } = this.props;
return (
<div>
<Header
absolute
color="transparent"
brand="Material Kit React"
rightLinks={<HeaderLinks />}
{...rest}
/>
<div
className={classes.pageHeader}
style={{
backgroundImage: "url(" + image + ")",
backgroundSize: "cover",
backgroundPosition: "top center"
}}
>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card className={classes[this.state.cardAnimaton]}>
<form className={classes.form}>
<CardHeader color="primary" className={classes.cardHeader}>
<h4>Login</h4>
<div className={classes.socialLine}>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-twitter"} />
</Button>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-facebook"} />
</Button>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-google-plus-g"} />
</Button>
</div>
</CardHeader>
<p className={classes.divider}>Or Be Classical</p>
<CardBody>
<CustomInput
labelText="First Name..."
id="first"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Email..."
id="email"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Password"
id="pass"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
lock_outline
</Icon>
</InputAdornment>
),
autoComplete: "off"
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button simple color="primary" size="lg">
Get started
const useStyles = makeStyles(styles);

export default function LoginPage(props) {
const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
setTimeout(function() {
setCardAnimation("");
}, 700);
const classes = useStyles();
const { ...rest } = props;
return (
<div>
<Header
absolute
color="transparent"
brand="Material Kit React"
rightLinks={<HeaderLinks />}
{...rest}
/>
<div
className={classes.pageHeader}
style={{
backgroundImage: "url(" + image + ")",
backgroundSize: "cover",
backgroundPosition: "top center"
}}
>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card className={classes[cardAnimaton]}>
<form className={classes.form}>
<CardHeader color="primary" className={classes.cardHeader}>
<h4>Login</h4>
<div className={classes.socialLine}>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-twitter"} />
</Button>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-facebook"} />
</Button>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={e => e.preventDefault()}
>
<i className={"fab fa-google-plus-g"} />
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
<Footer whiteFont />
</div>
</CardHeader>
<p className={classes.divider}>Or Be Classical</p>
<CardBody>
<CustomInput
labelText="First Name..."
id="first"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Email..."
id="email"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Password"
id="pass"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
lock_outline
</Icon>
</InputAdornment>
),
autoComplete: "off"
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button simple color="primary" size="lg">
Get started
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
<Footer whiteFont />
</div>
);
}
</div>
);
}

LoginPage.propTypes = {
classes: PropTypes.object
};

export default withStyles(loginPageStyle)(LoginPage);

0 comments on commit 705daf1

Please sign in to comment.