90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import CloseIcon from "@material-ui/icons/Close";
|
|
import LockIcon from "@material-ui/icons/Lock";
|
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
|
|
|
export default function PasswordConfirmation(props) {
|
|
const [password, setPassword] = useState("");
|
|
|
|
const loginStyles = makeStyles((theme) => ({
|
|
root: {
|
|
zIndex: "5 !important",
|
|
textAlign: "center",
|
|
"& .MuiPaper-root": {
|
|
backgroundColor: "#262626",
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
closeButton: {
|
|
color: "#bbbbbb",
|
|
position: "absolute",
|
|
right: theme.spacing(1),
|
|
top: theme.spacing(1),
|
|
},
|
|
textInput: {
|
|
marginTop: "20px",
|
|
marginBottom: "10px",
|
|
width: "90%",
|
|
"& .MuiInputBase-root": {
|
|
color: "#01c3a9",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
}));
|
|
|
|
const loginClass = loginStyles();
|
|
|
|
return (
|
|
<Dialog
|
|
className={loginClass.root}
|
|
onClose={props.onCancel}
|
|
open={props.open}
|
|
aria-labelledby="login-title"
|
|
>
|
|
<DialogTitle id="login-title">Potwierdź hasłem</DialogTitle>
|
|
<IconButton
|
|
className={loginClass.closeButton}
|
|
onClick={props.onCancel}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Divider />
|
|
<DialogContent>
|
|
<TextField
|
|
className={loginClass.textInput}
|
|
id="password"
|
|
label="Hasło"
|
|
type="password"
|
|
value={password}
|
|
variant="outlined"
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LockIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<div className="login-dialog-buttons">
|
|
<ButtonSecondary
|
|
onClick={() => props.onSubmit(password)}
|
|
text="Potwierdź"
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|