[e903234] | 1 | import React from 'react'
|
---|
| 2 |
|
---|
| 3 | import { useSelector, useDispatch } from 'react-redux'
|
---|
| 4 |
|
---|
| 5 | import { useRef } from 'react'
|
---|
| 6 |
|
---|
| 7 | import { setAdmin } from '../../redux/reducers/adminSlice';
|
---|
| 8 | import { setStyle } from '../../redux/reducers/styleSlice';
|
---|
| 9 |
|
---|
| 10 | import axios from 'axios';
|
---|
| 11 |
|
---|
| 12 | const 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 |
|
---|
| 119 | export default Login
|
---|