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

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

@ -1,67 +1,97 @@
import { Button, ButtonBase, InputAdornment, TextField, TextFieldProps, 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)({
width: "183px", // Adjust the width as needed
import {
ButtonBase,
InputAdornment,
TextField,
TextFieldProps,
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",
// backgroundColor: "rgba(30, 30, 32, 1)",
backgroundColor: theme.palette.background.paper,
outline: "none",
input: {
fontSize: 10,
fontFamily: "Inter",
fontWeight: 400,
color: "white",
"&::placeholder": {
fontSize: 16,
color: "rgba(255, 255, 255, 0.2)",
},
outline: "none",
padding: "10px",
fontSize: 10,
fontFamily: "Inter",
fontWeight: 400,
color: theme.palette.text.primary,
"&::placeholder": {
fontSize: 16,
color: theme.palette.text.disabled,
},
outline: "none",
padding: "10px",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)',
},
"&:hover fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)',
},
"&.Mui-focused fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)',
},
"& fieldset": {
border: `0.5px solid ${theme.palette.divider}`,
},
"&:hover fieldset": {
border: `0.5px solid ${theme.palette.divider}`,
},
"&.Mui-focused fieldset": {
border: `0.5px solid ${theme.palette.divider}`,
},
},
"& .MuiInput-underline:before": {
borderBottom: "none",
borderBottom: "none",
},
"& .MuiInput-underline:hover:not(.Mui-disabled):before": {
borderBottom: "none",
borderBottom: "none",
},
"& .MuiInput-underline:after": {
borderBottom: "none",
borderBottom: "none",
},
});
}));
export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>( ({ ...props }, ref) => {
export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>(
({ ...props }, ref) => {
const [canViewPassword, setCanViewPassword] = useState(false);
return (
<CustomInput
type={canViewPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end" data-testid="toggle-view-password-btn" onClick={() => {
setCanViewPassword((prevState) => !prevState)
}}>
{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>
)
}}
inputRef={ref}
{...props}
/>
)
});
<CustomInput
type={canViewPassword ? "text" : "password"}
InputProps={{
endAdornment: (
<InputAdornment
position="end"
data-testid="toggle-view-password-btn"
onClick={() => {
setCanViewPassword((prevState) => !prevState);
}}
>
{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>
),
}}
inputRef={ref}
{...props}
/>
);
}
);