ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-08-28 03:30:05 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

autofocus inputs

Browse Source
This commit is contained in:
Jamie Curnow
2021-07-18 22:08:09 +10:00
parent b616988f7e
commit b9b5cc70bc
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/pages/Login/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, ChangeEvent } from "react"; import React, { useEffect, useRef, useState, ChangeEvent } from "react";
import { Alert, Button } from "components"; import { Alert, Button } from "components";
import { useAuthState } from "context"; import { useAuthState } from "context";
@@ -6,6 +6,7 @@ import { useAuthState } from "context";
import logo from "../../img/logo-text-vertical-grey.png"; import logo from "../../img/logo-text-vertical-grey.png";
function Login() { function Login() {
const emailRef = useRef(null);
const { login } = useAuthState(); const { login } = useAuthState();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
@@ -31,6 +32,11 @@ function Login() {
setFormData({ ...formData, [target.name]: target.value }); setFormData({ ...formData, [target.name]: target.value });
}; };
useEffect(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
emailRef.current.focus();
}, []);
return ( return (
<div className="container-tight py-4"> <div className="container-tight py-4">
<div className="text-center mb-4"> <div className="text-center mb-4">
@@ -46,6 +52,7 @@ function Login() {
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Email address</label> <label className="form-label">Email address</label>
<input <input
ref={emailRef}
type="email" type="email"
onChange={onChange} onChange={onChange}
className="form-control" className="form-control"

9
frontend/src/pages/Setup/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, ChangeEvent } from "react"; import React, { useEffect, useRef, useState, ChangeEvent } from "react";
import { createUser } from "api/npm"; import { createUser } from "api/npm";
import { Alert, Button } from "components"; import { Alert, Button } from "components";
@@ -7,6 +7,7 @@ import { useAuthState, useHealthState } from "context";
import logo from "../../img/logo-text-vertical-grey.png"; import logo from "../../img/logo-text-vertical-grey.png";
function Setup() { function Setup() {
const nameRef = useRef(null);
const { refreshHealth } = useHealthState(); const { refreshHealth } = useHealthState();
const { login } = useAuthState(); const { login } = useAuthState();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -62,6 +63,11 @@ function Setup() {
setFormData({ ...formData, [target.name]: target.value }); setFormData({ ...formData, [target.name]: target.value });
}; };
useEffect(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
nameRef.current.focus();
}, []);
return ( return (
<div className="page page-center"> <div className="page page-center">
<div className="container-tight py-4"> <div className="container-tight py-4">
@@ -86,6 +92,7 @@ function Setup() {
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Name</label> <label className="form-label">Name</label>
<input <input
ref={nameRef}
onChange={onChange} onChange={onChange}
className="form-control" className="form-control"
name="name" name="name"