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