source: components/admin/Login.jsx@ 22367db

main
Last change on this file since 22367db was e903234, checked in by anastasovv <simon@…>, 2 years ago

Added an admin panel, and the admin can now answer complaints

  • Property mode set to 100644
File size: 3.8 KB
Line 
1import React from 'react'
2
3import { useSelector, useDispatch } from 'react-redux'
4
5import { useRef } from 'react'
6
7import { setAdmin } from '../../redux/reducers/adminSlice';
8import { setStyle } from '../../redux/reducers/styleSlice';
9
10import axios from 'axios';
11
12const Login = () => {
13 const ref = useRef(null);
14
15 const dispatch = useDispatch();
16
17 const adminState = useSelector(state => state.admin);
18 const styleState = useSelector(state => state.style);
19
20 setTimeout(() => {
21 if (adminState.admin.displays.setFocus) {
22 if (ref !== null && ref.current !== null) {
23 ref.current.focus();
24 }
25
26 dispatch(setAdmin({
27 ...adminState.admin,
28 displays: {
29 ...adminState.admin.displays,
30 setFocus: false
31 }
32 }))
33 }
34 }, 10);
35
36 function onChangeUsername(e) {
37 dispatch(setAdmin({
38 ...adminState.admin,
39 inputControls: {
40 ...adminState.admin.inputControls,
41 username: e.target.value,
42 }
43 }))
44 }
45
46 function onChangePassword(e) {
47 dispatch(setAdmin({
48 ...adminState.admin,
49 inputControls: {
50 ...adminState.admin.inputControls,
51 password: e.target.value,
52 }
53 }))
54 }
55
56 function keyUp(e) {
57 if (e.key === 'Enter') {
58 login();
59 }
60 }
61
62 function login() {
63 dispatch(setStyle({
64 ...styleState.style,
65 displayLoadingScreen: true,
66 }))
67
68 axios.post(`/api/postgre`, {
69 action: 'login_as_admin',
70 username: adminState.admin.inputControls.username,
71 password: adminState.admin.inputControls.password,
72 })
73 .then(res => {
74 if (res.data?.success) {
75 localStorage.CAESSINO_ADMIN_ID = res.data?.session?.id;
76
77 dispatch(setAdmin({
78 ...adminState.admin,
79 session_id: res.data?.session?.id,
80 inlineAlertText: '',
81 inputControls: {
82 username: '',
83 password: '',
84 }
85 }))
86 }
87 else {
88 dispatch(setAdmin({
89 ...adminState.admin,
90 inlineAlertText: res.data?.message,
91 }));
92 }
93
94 dispatch(setStyle({
95 ...styleState.style,
96 displayLoadingScreen: false,
97 }))
98 })
99 }
100
101 return (
102 <div className="fullscreen fs-centered admin loginScreen">
103 <div className="fs-inputs-container">
104 <div>
105 {adminState.admin.inlineAlertText.length > 0 && <span className="inlineAlert">{adminState.admin.inlineAlertText}</span>}
106 <span>Username:</span>
107 <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={adminState.admin.inputControls.username} placeholder="admin"/>
108 <span>Password:</span>
109 <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={adminState.admin.inputControls.password} placeholder="****************"/>
110 <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end'}}>
111 <button className="secondaryButton" onClick={() => login()}>Log In as Admin</button>
112 </div>
113 </div>
114 </div>
115 </div>
116 )
117}
118
119export default Login
Note: See TracBrowser for help on using the repository browser.