import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { Field, Form } from 'react-final-form'
import Avatar from '@material-ui/core/Avatar'
import Button from '@material-ui/core/Button'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CircularProgress from '@material-ui/core/CircularProgress'
import TextField from '@material-ui/core/TextField'
import { createMuiTheme, makeStyles } from '@material-ui/core/styles'
import { ThemeProvider } from '@material-ui/styles'
import LockIcon from '@material-ui/icons/Lock'
import { Notification, useLogin, useNotify, useTranslate } from 'react-admin'
import { LightTheme } from './Themes'
const useStyles = makeStyles((theme) => ({
main: {
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
alignItems: 'center',
justifyContent: 'flex-start',
background: 'url(https://source.unsplash.com/random/1600x900?music)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center'
},
card: {
minWidth: 300,
marginTop: '6em'
},
avatar: {
margin: '1em',
display: 'flex',
justifyContent: 'center'
},
icon: {
backgroundColor: theme.palette.secondary.main
},
systemName: {
marginTop: '1em',
display: 'flex',
justifyContent: 'center',
color: 'blue' //theme.palette.grey[500]
},
form: {
padding: '0 1em 1em 1em'
},
input: {
marginTop: '1em'
},
actions: {
padding: '0 1em 1em 1em'
}
}))
const renderInput = ({
meta: { touched, error } = {},
input: { ...inputProps },
...props
}) => (