Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-20 10:05:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4 from QuickMythril/focus-password-on-start

Browse Source 
Focus password field when login page loads
This commit is contained in:
Phillip 2024-12-03 12:18:01 +02:00 committed by GitHub
commit 64e06ba89e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.tsx
View File

@ -395,6 +395,12 @@ function App() {
const seedPhrase = generatorRef.current.parsedString
saveSeedPhraseToDisk(seedPhrase)
}
const passwordRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (extState === "wallet-dropped" && passwordRef.current) {
passwordRef.current.focus();
}
}, [extState]);
useEffect(() => {
const isDevModeFromStorage = localStorage.getItem("isEnabledDevMode");
if (isDevModeFromStorage) {
@ -2318,6 +2324,7 @@ function App() {
authenticateWallet();
}
}}
ref={passwordRef}
/>
<Spacer height="20px" />
<CustomButton onClick={authenticateWallet}>

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

@ -1,5 +1,5 @@
import { Button, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
import { useState } from 'react'
import { forwardRef, useState } from 'react'
export const CustomInput = styled(TextField)({
width: "183px", // Adjust the width as needed
@ -41,7 +41,7 @@ export const CustomInput = styled(TextField)({
});
export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...props }) => {
export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>( ({ ...props }, ref) => {
const [canViewPassword, setCanViewPassword] = useState(false);
return (
<CustomInput
@ -55,7 +55,8 @@ export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...prop
</InputAdornment>
)
}}
inputRef={ref}
{...props}
/>
)
}
});