135 lines
No EOL
5.3 KiB
TypeScript
135 lines
No EOL
5.3 KiB
TypeScript
import { useEffect, useState } from "react"
|
||
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
|
||
import Input from "../../UI/inputs/input"
|
||
import { MainButton } from "../../UI/buttons/mainButton"
|
||
import { NetworkService } from "../../../api/request"
|
||
import { useIpStore } from "../../../store"
|
||
import { useAdminStore } from "../../../store/adminStore"
|
||
import { useCheckAdmin } from "../../../utils/checkAdmin"
|
||
|
||
import { buttonNames } from "../../../const/buttons/names"
|
||
import { IconComponent } from "../../../const/buttons/icons"
|
||
|
||
interface Props {
|
||
onClose: () => void;
|
||
}
|
||
|
||
export const RightsConfirm = ({ onClose }: Props) => {
|
||
|
||
const { ipAddress } = useIpStore();
|
||
const { isAdmin, setAdmin } = useAdminStore()
|
||
const checkAdmin = useCheckAdmin();
|
||
const [error, setError] = useState(false)
|
||
const [success, setSuccess] = useState({
|
||
message: '',
|
||
status: false
|
||
})
|
||
|
||
const [user, setUser] = useState({
|
||
username: 'operator',
|
||
password: ""
|
||
})
|
||
|
||
const handleChange = (id: string, value: string) => {
|
||
setUser(prevData => ({
|
||
...prevData,
|
||
[id]: value
|
||
}));
|
||
}
|
||
|
||
const login = async (user: object) => {
|
||
try {
|
||
const response = await NetworkService.login(ipAddress, user);
|
||
if(response.status === 200){
|
||
await checkAdmin();
|
||
setError(false)
|
||
setSuccess(prevData => ({
|
||
...prevData,
|
||
message: 'Успешный вход',
|
||
status: true
|
||
}));
|
||
await new Promise(resolve => setTimeout(resolve, 3000));
|
||
onClose();
|
||
}else{
|
||
setError(true)
|
||
}
|
||
} catch (err) {
|
||
console.error('Error:', err);
|
||
}
|
||
}
|
||
|
||
const logout = async () => {
|
||
await NetworkService.logout(ipAddress);
|
||
await checkAdmin();
|
||
setSuccess(prevData => ({
|
||
...prevData,
|
||
message: 'Успешный выход',
|
||
status: true
|
||
}));
|
||
await new Promise(resolve => setTimeout(resolve, 3000));
|
||
onClose();
|
||
}
|
||
|
||
return (
|
||
<ModalContainer style={!isAdmin ? {height: '250px'} : {height: 'unset'}}>
|
||
{!success.status ? (
|
||
!isAdmin ? (
|
||
<>
|
||
<ModalTitle>
|
||
<h3>Получение прав доступа</h3>
|
||
</ModalTitle>
|
||
|
||
<ModalContent style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
|
||
|
||
<h3 style={{marginLeft: '5px', fontSize: '14px'}}>Включить административный доступ</h3>
|
||
<Input
|
||
type="password"
|
||
placeholderText='Введите пароль администратора...'
|
||
id="password"
|
||
value={user.password}
|
||
onChange={(value) => handleChange('password', value)}
|
||
/>
|
||
|
||
{error && (
|
||
<p style={{ color: 'red', marginLeft: '10px', fontSize: '14px', textAlign: 'right' }}>
|
||
Неверный пароль оператора
|
||
</p>
|
||
)}
|
||
|
||
</ModalContent>
|
||
|
||
<ButtonContainer>
|
||
<MainButton size="small" title="Отмена" onClick={onClose} />
|
||
<MainButton size="small" title="Отправить" onClick={() => login(user)} />
|
||
</ButtonContainer>
|
||
</>
|
||
) : (
|
||
<>
|
||
<ModalTitle>
|
||
<h3>Переключиться на ограниченный доступ</h3>
|
||
</ModalTitle>
|
||
|
||
<ModalContent>
|
||
<p>В данном режиме доступа ограничиваются полномочия администратора.</p>
|
||
</ModalContent>
|
||
|
||
<ButtonContainer>
|
||
<MainButton size="small" title="Отмена" onClick={onClose} />
|
||
<MainButton size="small" title="Ограничить доступ" onClick={logout} />
|
||
</ButtonContainer>
|
||
|
||
</>
|
||
)
|
||
):(
|
||
<ModalContainer style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', marginTop: '15px'}}>
|
||
<IconComponent name={buttonNames[8]} width="50" height="50"/>
|
||
<h3>{success.message}</h3>
|
||
<p style={{fontSize: '12px'}}>Это окно можно закрыть, либо оно пропадёт само</p>
|
||
<MainButton size="small" title="Закрыть" onClick={onClose} style={{width: '30%'}}/>
|
||
</ModalContainer>
|
||
)}
|
||
|
||
|
||
</ModalContainer>
|
||
)
|
||
} |