source: components/RegisterScreen.jsx@ b13f93b

main
Last change on this file since b13f93b was 64dc53b, checked in by anastasovv <simon@…>, 2 years ago

Code cleanings

  • Property mode set to 100644
File size: 5.1 KB
Line 
1import React from 'react'
2
3import { useSelector, useDispatch } from 'react-redux'
4
5import { useRef } from 'react'
6
7import { setStyle } from '../redux/reducers/styleSlice';
8
9import axios from 'axios';
10
11const RegisterScreen = () => {
12 const ref = useRef(null);
13
14 const dispatch = useDispatch();
15
16 const styleState = useSelector(state => state.style);
17
18 setTimeout(() => {
19 if (styleState.style.displayRegisterScreen && styleState.style.registerScreenInfo.setFocus) {
20 ref.current.focus();
21 dispatch(setStyle({
22 ...styleState.style,
23 registerScreenInfo: {
24 ...styleState.style.registerScreenInfo,
25 setFocus: false
26 }
27 }))
28 }
29 }, 10);
30
31 function onChangeUsername(e) {
32 dispatch(setStyle({
33 ...styleState.style,
34 registerScreenInfo: {
35 ...styleState.style.registerScreenInfo,
36 username: e.target.value,
37 }
38 }))
39 }
40
41 function onChangeDisplayName(e) {
42 dispatch(setStyle({
43 ...styleState.style,
44 registerScreenInfo: {
45 ...styleState.style.registerScreenInfo,
46 displayName: e.target.value,
47 }
48 }))
49 }
50
51 function onChangePassword(e) {
52 dispatch(setStyle({
53 ...styleState.style,
54 registerScreenInfo: {
55 ...styleState.style.registerScreenInfo,
56 password: e.target.value,
57 }
58 }))
59 }
60
61 function keyUp(e) {
62 if (e.key === 'Enter') {
63 register();
64 }
65 }
66
67 function closeForm() {
68 dispatch(setStyle({
69 ...styleState.style,
70 displayRegisterScreen: false,
71 registerScreenInfo: {
72 username: '',
73 displayName: '',
74 password: '',
75 },
76 inlineAlertText: '',
77 }));
78 }
79
80 function register() {
81 dispatch(setStyle({
82 ...styleState.style,
83 displayLoadingScreen: true,
84 }))
85
86 axios.post('/api/postgre', {
87 action: 'register',
88 username: styleState.style.registerScreenInfo.username,
89 displayName: styleState.style.registerScreenInfo.displayName,
90 password: styleState.style.registerScreenInfo.password,
91 })
92 .then(res => {
93 if (res.data?.success) {
94 dispatch(setStyle({
95 ...styleState.style,
96 displayRegisterScreen: false,
97 }));
98
99 dispatch(setStyle({
100 ...styleState.style,
101 displayLoadingScreen: false,
102 displayRegisterScreen: false,
103 displayLoginScreen: true,
104 registerScreenInfo: {
105 username: '',
106 displayName: '',
107 password: '',
108 },
109 notification: {
110 show: true,
111 text: 'Successfully registered! Please Log In now.',
112 status: 'success',
113 },
114 inlineAlertText: '',
115 }));
116 }
117 else {
118 dispatch(setStyle({
119 ...styleState.style,
120 displayRegisterScreen: true,
121 inlineAlertText: res.data?.message,
122 }));
123 }
124 })
125 }
126
127 return (
128 <div className="fullscreen fs-centered registerScreen" style={{display: styleState.style.displayRegisterScreen ? 'block' : 'none'}}>
129 <div className="fs-inputs-container">
130 {styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
131 <div>
132 <span>Username:</span>
133 <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.username} placeholder="your username..."/>
134 <span>Display Name:</span>
135 <input type="text" onChange={(e) => {onChangeDisplayName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.displayName} placeholder="your display name..."/>
136 <span>Password:</span>
137 <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.password} placeholder="your password..."/>
138 <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
139 <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>
140 <button className="secondaryButton" onClick={() => register()}>Register</button>
141 </div>
142 </div>
143 </div>
144 </div>
145 )
146}
147
148export default RegisterScreen
Note: See TracBrowser for help on using the repository browser.