Skip to content

Commit

Permalink
Set focus to password field when login_hint is given
Browse files Browse the repository at this point in the history
To improve usability when the RP provides the login_hint parameter, this
change automatically sets the input focus to the password field when a
login_hint is provided.
  • Loading branch information
longsleep committed Dec 9, 2024
1 parent 50cbe01 commit c9c4b9f
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions identifier/src/containers/Login/Login.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useMemo } from 'react';
import React, { useEffect, useMemo, useRef } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

Expand Down Expand Up @@ -73,6 +73,7 @@ function Login(props) {
const { t } = useTranslation();

const [showPassword, setShowPassword] = React.useState(false);
const passwordInputRef = useRef();

useEffect(() => {
if (hello && hello.state && history.action !== 'PUSH') {
Expand All @@ -89,7 +90,10 @@ function Login(props) {
if (query && query.login_hint) {
if (isEmail(query.login_hint) || isEmail(`${query.login_hint}@example.com`)) {
dispatch(updateInput("username", query.login_hint));
}
setTimeout(() => {
passwordInputRef.current.focus();
}, 0);
}
}
}, [ /* no dependencies */ ]); // eslint-disable-line react-hooks/exhaustive-deps

Expand Down Expand Up @@ -148,6 +152,7 @@ function Login(props) {
className={classes.usernameInputField}
/>
<TextField
inputRef={passwordInputRef}
type={showPassword ? "text" : "password"}
label={t("konnect.login.passwordField.label", "Password")}
error={!!errors.password}
Expand Down

0 comments on commit c9c4b9f

Please sign in to comment.