Changeset 64dc53b for components/RegisterScreen.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/RegisterScreen.jsx (modified) (5 diffs)

components/RegisterScreen.jsx

@@ -2 +2 @@
 
 import { useSelector, useDispatch } from 'react-redux'
+
+import { useRef } from 'react'
 
 import { setStyle } from '../redux/reducers/styleSlice';
@@ -8 +10 @@
 
 const RegisterScreen = () => {
+    const ref = useRef(null);
+
     const dispatch = useDispatch();
 
     const styleState = useSelector(state => state.style);
+
+    setTimeout(() => {
+        if (styleState.style.displayRegisterScreen && styleState.style.registerScreenInfo.setFocus) {
+            ref.current.focus();
+            dispatch(setStyle({
+                ...styleState.style,
+                registerScreenInfo: {
+                    ...styleState.style.registerScreenInfo,
+                    setFocus: false
+                }
+            }))
+        }
+    }, 10);
 
     function onChangeUsername(e) {
@@ -40 +57 @@
             }
         }))
+    }
+
+    function keyUp(e) {
+        if (e.key === 'Enter') {
+            register();
+        }
     }
 
@@ -89 +112 @@
                             status: 'success',
                         },
+                        inlineAlertText: '',
                     }));
                 }
@@ -107 +131 @@
                 <div>
                     <span>Username:</span>
-                    <input type="text" onChange={(e) => {onChangeUsername(e)}} value={styleState.style.registerScreenInfo.username}/>
+                    <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.username} placeholder="your username..."/>
                     <span>Display Name:</span>
-                    <input type="text" onChange={(e) => {onChangeDisplayName(e)}} value={styleState.style.registerScreenInfo.displayName}/>
+                    <input type="text" onChange={(e) => {onChangeDisplayName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.displayName} placeholder="your display name..."/>
                     <span>Password:</span>
-                    <input type="password" onChange={(e) => {onChangePassword(e)}} value={styleState.style.registerScreenInfo.password}/>
+                    <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.password} placeholder="your password..."/>
                     <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                         <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>