ref

usereducer-starting-project/.eslintcache

@@ -1 +1 @@
-[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js":"10"},{"size":322,"mtime":1663949419058,"results":"11","hashOfConfig":"12"},{"size":514,"mtime":1663949472127,"results":"13","hashOfConfig":"12"},{"size":458,"mtime":1663949557069,"results":"14","hashOfConfig":"12"},{"size":333,"mtime":1663948682144,"results":"15","hashOfConfig":"12"},{"size":3659,"mtime":1663951992597,"results":"16","hashOfConfig":"12"},{"size":828,"mtime":1663949120275,"results":"17","hashOfConfig":"12"},{"size":218,"mtime":1663942019122,"results":"18","hashOfConfig":"12"},{"size":353,"mtime":1663942019122,"results":"19","hashOfConfig":"12"},{"size":1036,"mtime":1663949348496,"results":"20","hashOfConfig":"12"},{"size":560,"mtime":1663951798324,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["43","44"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",["45"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":8,"column":10,"nodeType":"52","messageId":"53","endLine":8,"endColumn":19},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"no-unused-vars","'toBeValid' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js":"10"},{"size":322,"mtime":1663949419058,"results":"11","hashOfConfig":"12"},{"size":514,"mtime":1663949472127,"results":"13","hashOfConfig":"12"},{"size":458,"mtime":1663949557069,"results":"14","hashOfConfig":"12"},{"size":333,"mtime":1663948682144,"results":"15","hashOfConfig":"12"},{"size":3908,"mtime":1663952805085,"results":"16","hashOfConfig":"12"},{"size":828,"mtime":1663949120275,"results":"17","hashOfConfig":"12"},{"size":218,"mtime":1663942019122,"results":"18","hashOfConfig":"12"},{"size":353,"mtime":1663942019122,"results":"19","hashOfConfig":"12"},{"size":1036,"mtime":1663949348496,"results":"20","hashOfConfig":"12"},{"size":850,"mtime":1663952769772,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["43","44"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",["45"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":14,"column":10,"nodeType":"52","messageId":"53","endLine":14,"endColumn":19},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"no-unused-vars","'toBeValid' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

usereducer-starting-project/src/components/Login/Login.js

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useReducer, useContext } from "react"
+import React, {
+    useState,
+    useEffect,
+    useReducer,
+    useContext,
+    useRef,
+} from "react"
 
 import Card from "../UI/Card/Card"
 import classes from "./Login.module.css"
@@ -30,6 +36,8 @@ const passwordReducer = (state, action) => {
 const Login = (props) => {
     const [formIsValid, setFormIsValid] = useState(false)
     const authCtx = useContext(AuthContext)
+    const emailInputRef = useRef()
+    const passwordInputRef = useRef()
 
     const [emailState, dispatchEmail] = useReducer(emailReducer, {
         value: "",
@@ -76,13 +84,20 @@ const Login = (props) => {
 
     const submitHandler = (event) => {
         event.preventDefault()
+        if (formIsValid) {
             authCtx.onLogin(emailState.value, passwordState.value)
+        } else if (!emailIsValid) {
+            emailInputRef.current.focus()
+        } else {
+            passwordInputRef.current.focus()
+        }
     }
 
     return (
         <Card className={classes.login}>
             <form onSubmit={submitHandler}>
                 <Input
+                    ref={emailInputRef}
                     id="email"
                     type="email"
                     label="E-Mail"
@@ -92,6 +107,7 @@ const Login = (props) => {
                     onBlur={validateEmailHandler}
                 />
                 <Input
+                    ref={passwordInputRef}
                     id="password"
                     type="password"
                     label="Password"
@@ -101,11 +117,7 @@ const Login = (props) => {
                     onBlur={validatePasswordHandler}
                 />
                 <div className={classes.actions}>
-                    <Button
+                    <Button type="submit" className={classes.btn}>
-                        type="submit"
-                        className={classes.btn}
-                        disabled={!formIsValid}
-                    >
                         Login
                     </Button>
                 </div>

usereducer-starting-project/src/components/UI/Input/Input.js

@@ -1,7 +1,18 @@
-import React from "react"
+import React, { useRef, useImperativeHandle } from "react"
 import classes from "./Input.module.css"
 
-function Input(props) {
+const Input = React.forwardRef((props, ref) => {
+    const inputRef = useRef()
+    const activate = () => {
+        inputRef.current.focus()
+    }
+
+    useImperativeHandle(ref, () => {
+        return {
+            focus: activate,
+        }
+    })
+
     return (
         <div
             className={`${classes.control} ${
@@ -10,6 +21,7 @@ function Input(props) {
         >
             <label htmlFor="email">{props.label}</label>
             <input
+                ref={inputRef}
                 type={props.type}
                 id={props.id}
                 value={props.value}
@@ -18,6 +30,6 @@ function Input(props) {
             />
         </div>
     )
-}
+})
 
 export default Input