source: components/LoginScreen.jsx@ 189cd8f

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

Made poker tables system and round 1

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