Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-05-15 22:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme parameter

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-06 21:08:11 +02:00
parent afdc52dd61
commit f51242959a
1 changed files with 82 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,33 +1,40 @@
import { Button, ButtonBase, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material"; import {
import { forwardRef, useState } from 'react' ButtonBase,
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; InputAdornment,
import VisibilityIcon from '@mui/icons-material/Visibility'; TextField,
export const CustomInput = styled(TextField)({ TextFieldProps,
width: "183px", // Adjust the width as needed styled,
} from "@mui/material";
import { forwardRef, useState } from "react";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import VisibilityIcon from "@mui/icons-material/Visibility";
export const CustomInput = styled(TextField)(({ theme }) => ({
width: "183px",
borderRadius: "5px", borderRadius: "5px",
// backgroundColor: "rgba(30, 30, 32, 1)", backgroundColor: theme.palette.background.paper,
outline: "none", outline: "none",
input: { input: {
fontSize: 10, fontSize: 10,
fontFamily: "Inter", fontFamily: "Inter",
fontWeight: 400, fontWeight: 400,
color: "white", color: theme.palette.text.primary,
"&::placeholder": { "&::placeholder": {
fontSize: 16, fontSize: 16,
color: "rgba(255, 255, 255, 0.2)", color: theme.palette.text.disabled,
}, },
outline: "none", outline: "none",
padding: "10px", padding: "10px",
}, },
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {
"& fieldset": { "& fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)', border: `0.5px solid ${theme.palette.divider}`,
}, },
"&:hover fieldset": { "&:hover fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)', border: `0.5px solid ${theme.palette.divider}`,
}, },
"&.Mui-focused fieldset": { "&.Mui-focused fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)', border: `0.5px solid ${theme.palette.divider}`,
}, },
}, },
"& .MuiInput-underline:before": { "& .MuiInput-underline:before": {
@ -39,29 +46,52 @@ export const CustomInput = styled(TextField)({
"& .MuiInput-underline:after": { "& .MuiInput-underline:after": {
borderBottom: "none", borderBottom: "none",
}, },
}); }));
export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>(
export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>( ({ ...props }, ref) => { ({ ...props }, ref) => {
const [canViewPassword, setCanViewPassword] = useState(false); const [canViewPassword, setCanViewPassword] = useState(false);
return ( return (
<CustomInput <CustomInput
type={canViewPassword ? 'text' : 'password'} type={canViewPassword ? "text" : "password"}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment position="end" data-testid="toggle-view-password-btn" onClick={() => { <InputAdornment
setCanViewPassword((prevState) => !prevState) position="end"
}}> data-testid="toggle-view-password-btn"
{canViewPassword ? <ButtonBase data-testid="plain-text-indicator" sx={{ minWidth: 0, p: 0 }}><VisibilityOffIcon sx={{ onClick={() => {
color: 'white' setCanViewPassword((prevState) => !prevState);
}}/></ButtonBase> : <ButtonBase data-testid="password-text-indicator" sx={{ minWidth: 0, p: 0 }}><VisibilityIcon sx={{ }}
color: 'white' >
}} /></ButtonBase>} {canViewPassword ? (
<ButtonBase
data-testid="plain-text-indicator"
sx={{ minWidth: 0, p: 0 }}
>
<VisibilityOffIcon
sx={{
color: "white",
}}
/>
</ButtonBase>
) : (
<ButtonBase
data-testid="password-text-indicator"
sx={{ minWidth: 0, p: 0 }}
>
<VisibilityIcon
sx={{
color: "white",
}}
/>
</ButtonBase>
)}
</InputAdornment> </InputAdornment>
) ),
}} }}
inputRef={ref} inputRef={ref}
{...props} {...props}
/> />
) );
}); }
);