add autofocus in auth form

matteo-convertino · Jan 26, 2024 · ce1819c · ce1819c
1 parent 9347650
commit ce1819c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/appinfo/info.xml b/appinfo/info.xml
@@ -33,7 +33,7 @@ This way, the migration from Google Authenticator to OTP Manager will be quick a
 * [Official iOS App](https://apps.apple.com/us/app/nextcloud-otp-manager/id6471510170)
 ]]>
   </description>
-  <version>0.3.4</version>
+  <version>0.3.5</version>
   <licence>agpl</licence>
   <author mail="[email protected]" homepage="https://www.convertino.cloud">Matteo Convertino</author>
   <namespace>OtpManager</namespace>

diff --git a/js/otpmanager-main.js b/js/otpmanager-main.js
diff --git a/js/otpmanager-main.js.map b/js/otpmanager-main.js.map
diff --git a/src/js/utils/PasswordForm.js b/src/js/utils/PasswordForm.js
@@ -1,5 +1,5 @@
 import { useDisclosure } from "@mantine/hooks";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 
 import {
   Box,
@@ -54,6 +54,7 @@ function getStrength(password) {
 export default function PasswordForm({ exists, onSubmit, isChanging }) {
   const [popoverOpened, setPopoverOpened] = useState(false);
   const [visible, { toggle }] = useDisclosure(false);
+  const autoFocus = useCallback((inputElement) => inputElement && inputElement.focus(), []);
 
   const form = useForm({
     initialValues: {
@@ -119,6 +120,7 @@ export default function PasswordForm({ exists, onSubmit, isChanging }) {
                   }
                   visible={visible}
                   onVisibilityChange={toggle}
+                  ref={autoFocus}
                   {...form.getInputProps("password")}
                 />
               </Box>