Changeset 64dc53b for components/LoginScreen.jsx

Timestamp:

06/11/22 23:50:19 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

4a1a3ca

Parents:

87614a5

Message:

Code cleanings

File:

• components/LoginScreen.jsx (modified) (5 diffs)

components/LoginScreen.jsx

@@ -2 +2 @@
 
 import { useSelector, useDispatch } from 'react-redux'
+
+import { useRef } from 'react'
 
 import { setPlayer } from '../redux/reducers/playerSlice';
@@ -9 +11 @@
 
 const LoginScreen = () => {
+    const ref = useRef(null);
+
     const dispatch = useDispatch();
 
     const playerState = useSelector(state => state.player);
     const styleState = useSelector(state => state.style);
+
+    setTimeout(() => {
+        if (styleState.style.displayLoginScreen && styleState.style.loginScreenInfo.setFocus) {
+            ref.current.focus();
+            dispatch(setStyle({
+                ...styleState.style,
+                loginScreenInfo: {
+                    ...styleState.style.loginScreenInfo,
+                    setFocus: false
+                }
+            }))
+        }
+    }, 10);
 
     function onChangeUsername(e) {
@@ -34 +51 @@
     }
 
+    function keyUp(e) {
+        if (e.key === 'Enter') {
+            login();
+        }
+    }
+
     function closeForm() {
         dispatch(setStyle({
@@ -44 +67 @@
             inlineAlertText: '',
         }));
+
     }
-
     function login() {
         dispatch(setStyle({
@@ -119 +142 @@
                 <div>
                     <span>Username:</span>
-                    <input type="text" onChange={(e) => {onChangeUsername(e)}} value={styleState.style.loginScreenInfo.username}/>
+                    <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.loginScreenInfo.username} placeholder="your username..."/>
                     <span>Password:</span>
-                    <input type="password" onChange={(e) => {onChangePassword(e)}} value={styleState.style.loginScreenInfo.password}/>
+                    <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.loginScreenInfo.password} placeholder="your password..."/>
                     <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                         <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>