Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated PasswordField Icons and made it accessible

Browse Source
This commit is contained in:
Simon 2024-07-02 19:01:35 -04:00
parent 373370f80e
commit 431c1fe9b3
1 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/PasswordField/PasswordField.tsx
View File

@ -1,4 +1,4 @@
import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material"; import { Button, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
import { useState } from 'react' import { useState } from 'react'
export const CustomInput = styled(TextField)({ export const CustomInput = styled(TextField)({
@ -48,12 +48,10 @@ export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...prop
type={canViewPassword ? 'text' : 'password'} type={canViewPassword ? 'text' : 'password'}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment position="end" data-testid="toggle-view-password-btn" style={{ <InputAdornment position="end" data-testid="toggle-view-password-btn" onClick={() => {
cursor: 'pointer'
}} onClick={() => {
setCanViewPassword((prevState) => !prevState) setCanViewPassword((prevState) => !prevState)
}}> }}>
{canViewPassword ? <span data-testid="plain-text-indicator">🙀</span> : <span data-testid="password-text-indicator">😸</span>} {canViewPassword ? <Button data-testid="plain-text-indicator" sx={{ minWidth: 0, p: 0 }}>👁️</Button> : <Button data-testid="password-text-indicator" sx={{ minWidth: 0, p: 0 }}>👁️‍🗨️</Button>}
</InputAdornment> </InputAdornment>
) )
}} }}