mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-14 11:15:49 +00:00
PasswordField Initial Functionality completed
This commit is contained in:
parent
6f0453ab1d
commit
a098f99c2d
@ -1,4 +1,4 @@
|
||||
import { TextField, styled } from "@mui/material";
|
||||
import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
|
||||
import { useState } from 'react'
|
||||
|
||||
export const CustomInput = styled(TextField)({
|
||||
@ -41,7 +41,7 @@ export const CustomInput = styled(TextField)({
|
||||
});
|
||||
|
||||
|
||||
export const PasswordField = ({ ...props }) => {
|
||||
export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...props }) => {
|
||||
const [canViewPassword, setCanViewPassword] = useState(false);
|
||||
return (
|
||||
<div style={{
|
||||
@ -50,15 +50,20 @@ export const PasswordField = ({ ...props }) => {
|
||||
<CustomInput
|
||||
type={canViewPassword ? 'text' : 'password'}
|
||||
id="standard-adornment-password"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" style={{
|
||||
cursor: 'pointer'
|
||||
}} onClick={() => {
|
||||
setCanViewPassword((prevState) => !prevState)
|
||||
}}>
|
||||
{canViewPassword ? '🙀' : '😸'}
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
<button type='button' style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%'
|
||||
}} onClick={() => {
|
||||
setCanViewPassword((prevState) => !prevState)
|
||||
}}>{canViewPassword ? '🙀' : '😸'}</button>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
1
src/components/index.ts
Normal file
1
src/components/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './PasswordField/PasswordField';
|
Loading…
x
Reference in New Issue
Block a user