Advertisement
Guest User

Untitled

a guest
Jan 17th, 2018
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.61 KB | None | 0 0
  1. // General Modules
  2. import React from "react";
  3. import { Link } from "react-router-dom";
  4.  
  5. // Material-Ui components
  6. import { withStyles } from "material-ui/styles";
  7. import { FormControl } from "material-ui/Form";
  8. import Input, { InputLabel, InputAdornment } from "material-ui/Input";
  9. import Button from "material-ui/Button";
  10. import { red, grey } from "material-ui/colors";
  11.  
  12. // Icons
  13. import EmailIcon from "material-ui-icons/Email";
  14. import PasswordIcon from "material-ui-icons/VpnKey";
  15.  
  16. // JSS
  17. const styles = {
  18. labelRoot: {
  19. color: "white"
  20. },
  21. inputRoot: {
  22. color: "white"
  23. },
  24. inputUnderline: {
  25. "&:before": {
  26. backgroundColor: "white"
  27. },
  28. "&:hover:not(.foo):before": {
  29. backgroundColor: "white"
  30. }
  31. },
  32. inputInkbar: {
  33. "&:after": {
  34. backgroundColor: "white"
  35. }
  36. },
  37. rootButton: {
  38. backgroundColor: "white",
  39. color: red[500],
  40. "&:hover": {
  41. backgroundColor: grey[100]
  42. }
  43. },
  44. link:{
  45. color: grey[100],
  46. textDecoration: 'none'
  47. }
  48. };
  49.  
  50. // Component class definition
  51. class SignIn extends React.Component {
  52. render() {
  53. const { classes } = this.props; // Injected by withStyles
  54.  
  55. return (
  56. <div className="sign-in">
  57. <h1>Or sign in your account</h1>
  58. <FormControl>
  59. <InputLabel htmlFor="email" classes={{ root: classes.labelRoot }}>
  60. Your email
  61. </InputLabel>
  62. <Input
  63. type="email"
  64. classes={{
  65. root: classes.inputRoot,
  66. underline: classes.inputUnderline,
  67. inkbar: classes.inputInkbar
  68. }}
  69. endAdornment={
  70. <InputAdornment position="end">
  71. <EmailIcon />
  72. </InputAdornment>
  73. }
  74. />
  75. </FormControl>
  76. <FormControl>
  77. <InputLabel htmlFor="password" classes={{ root: classes.labelRoot }}>
  78. Password
  79. </InputLabel>
  80. <Input
  81. type="password"
  82. classes={{
  83. root: classes.inputRoot,
  84. underline: classes.inputUnderline,
  85. inkbar: classes.inputInkbar
  86. }}
  87. endAdornment={
  88. <InputAdornment position="end">
  89. <PasswordIcon />
  90. </InputAdornment>
  91. }
  92. />
  93. </FormControl>
  94. <div>
  95. <Button raised>Sign In</Button>
  96. <Link to="/recover-password" classes={{link: classes.link}}>Forgot password?</Link>
  97. </div>
  98. </div>
  99. );
  100. }
  101. }
  102.  
  103. // Export
  104. export default withStyles(styles)(SignIn);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement