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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
| import React from 'react'
// @material-ui/core components
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
// core components
/*import Header from "components/Header/Header.jsx";
import HeaderLinks from "components/Header/HeaderLinks.jsx";*/
import Footer from "components/Footer/Footer.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Button from "components/CustomButtons/Button.jsx";
import Card from "components/Card/Card.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import { FormattedMessage } from 'react-intl';
import TextField from '@material-ui/core/TextField';
export default function () {
const {classes, ...rest } = this.props;
const {authentification} = this.state;
console.log(authentification);
return (
<div>
{/* <Header
absolute
color="transparent"
brand="Material Kit React"
rightLinks={<HeaderLinks />}
{...rest}
/> */}
<div className={classes.pageHeader}
style={{
backgroundSize: "cover",
backgroundPosition: "top center"
}}
>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card>
<form onSubmit={this.handleSubmit} className={classes.form} onError={errors => console.log(errors)}>
<CardHeader color="primary" className={classes.cardHeader}>
<h2>
<FormattedMessage id="LoginTemplate.title" defaultMessage="Login"/>
</h2>
<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}>
<FormattedMessage id="LoginTemplate.classical" defaultMessage="Or Be Classical"/>
</p>
<CardBody>
<TextField fullWidth={true}
className={classes.margin}
label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email"/>}
id="email"
ref="email"
name="eamil"
type="email"
error={authentification.email === "" ? true : false}
onChange={this.handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor}/>
</InputAdornment>
),
}}
/>
<CustomInput
labelText={<FormattedMessage id="LoginTemplate.password" defaultMessage="Password"/>}
id="password"
formControlProps={{fullWidth: true}}
inputProps={{
onChange:this.handleChange,
type: "password",
name:"password",
value:authentification.password,
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>lock_outline</Icon>
</InputAdornment>
)
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button type="submit" simple color="primary" size="lg">
<FormattedMessage id="LoginTemplate.getStarted" defaultMessage="Get started"/>
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
<Footer whiteFont />
</div>
</div>
)
} |
Partager