%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/common/components/Password/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/common/components/Password/PasswordField.jsx |
import React, { cloneElement, useContext } from "react"; import { node, object } from "prop-types"; import { IconButton } from "@material-ui/core"; import { Visibility, VisibilityOff } from "@material-ui/icons"; import { withStyles } from "@material-ui/core/styles"; import PasswordContext from "./context"; const styles = () => ({ wrapper: { position: "relative", }, toggleButton: { marginTop: "-4px", position: "absolute", right: 0, top: 0, zIndex: 1, }, }); function PasswordField({ children, classes, }) { const [passwordVisible, togglePasswordVisibility] = useContext(PasswordContext); const type = passwordVisible ? "text" : "password"; return ( <div className={classes.wrapper}> <div className={classes.toggleButton}> <IconButton aria-label="toggle password visibility" onClick={togglePasswordVisibility} disableFocusRipple tabIndex="-1" > {passwordVisible ? <VisibilityOff /> : <Visibility />} </IconButton> </div> {cloneElement(children, { type })} </div> ); } PasswordField.propTypes = { children: node.isRequired, classes: object.isRequired, }; export default withStyles(styles)(PasswordField);