import * as React from 'react'; import {useEffect, useState} from 'react'; import { CardActions, CardContent, FormControl, Select, Stack, Table, TableBody, TableCell, TableHead, TableRow, useMediaQuery } from "@mui/material"; import Typography from "@mui/material/Typography"; import prefs from "../app/Prefs"; import {Paragraph} from "./styles"; import EditIcon from '@mui/icons-material/Edit'; import CloseIcon from "@mui/icons-material/Close"; import IconButton from "@mui/material/IconButton"; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import Container from "@mui/material/Container"; import TextField from "@mui/material/TextField"; import MenuItem from "@mui/material/MenuItem"; import Card from "@mui/material/Card"; import Button from "@mui/material/Button"; import {useLiveQuery} from "dexie-react-hooks"; import theme from "./theme"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import DialogActions from "@mui/material/DialogActions"; import userManager from "../app/UserManager"; import {playSound} from "../app/utils"; const Preferences = () => { return ( ); }; const Notifications = () => { return ( Notifications ); }; const Sound = () => { const sound = useLiveQuery(async () => prefs.sound()); const handleChange = async (ev) => { await prefs.setSound(ev.target.value); } if (!sound) { return null; // While loading } return (
playSound(sound)} disabled={sound === "none"}>
) }; const MinPriority = () => { const minPriority = useLiveQuery(async () => prefs.minPriority()); const handleChange = async (ev) => { await prefs.setMinPriority(ev.target.value); } if (!minPriority) { return null; // While loading } return ( ) }; const DeleteAfter = () => { const deleteAfter = useLiveQuery(async () => prefs.deleteAfter()); const handleChange = async (ev) => { await prefs.setDeleteAfter(ev.target.value); } if (!deleteAfter) { return null; // While loading } return ( ) }; const PrefGroup = (props) => { return (
{props.children}
) }; const Pref = (props) => { return ( <>
{props.title}
{props.children}
); }; const Users = () => { const [dialogKey, setDialogKey] = useState(0); const [dialogOpen, setDialogOpen] = useState(false); const users = useLiveQuery(() => userManager.all()); const handleAddClick = () => { setDialogKey(prev => prev+1); setDialogOpen(true); }; const handleDialogCancel = () => { setDialogOpen(false); }; const handleDialogSubmit = async (user) => { setDialogOpen(false); try { await userManager.save(user); console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} added`); } catch (e) { console.log(`[Preferences] Error adding user.`, e); } }; return ( Manage users Add/remove users for your protected topics here. Please note that username and password are stored in the browser's local storage. {users?.length > 0 && } ); }; const UserTable = (props) => { const [dialogKey, setDialogKey] = useState(0); const [dialogOpen, setDialogOpen] = useState(false); const [dialogUser, setDialogUser] = useState(null); const handleEditClick = (user) => { setDialogKey(prev => prev+1); setDialogUser(user); setDialogOpen(true); }; const handleDialogCancel = () => { setDialogOpen(false); }; const handleDialogSubmit = async (user) => { setDialogOpen(false); try { await userManager.save(user); console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} updated`); } catch (e) { console.log(`[Preferences] Error updating user.`, e); } }; const handleDeleteClick = async (user) => { try { await userManager.delete(user.baseUrl); console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} deleted`); } catch (e) { console.error(`[Preferences] Error deleting user for ${user.baseUrl}`, e); } }; return ( User Service URL {props.users?.map(user => ( {user.username} {user.baseUrl} handleEditClick(user)}> handleDeleteClick(user)}> ))}
); }; const UserDialog = (props) => { const [baseUrl, setBaseUrl] = useState(""); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const editMode = props.user !== null; const addButtonEnabled = (() => { if (editMode) { return username.length > 0 && password.length > 0; } const baseUrlExists = props.users?.map(user => user.baseUrl).includes(baseUrl); return !baseUrlExists && username.length > 0 && password.length > 0; })(); const handleSubmit = async () => { props.onSubmit({ baseUrl: baseUrl, username: username, password: password }) }; useEffect(() => { if (editMode) { setBaseUrl(props.user.baseUrl); setUsername(props.user.username); setPassword(props.user.password); } }, [editMode, props.user]); return ( {editMode ? "Edit user" : "Add user"} {!editMode && setBaseUrl(ev.target.value)} type="url" fullWidth variant="standard" />} setUsername(ev.target.value)} type="text" fullWidth variant="standard" /> setPassword(ev.target.value)} fullWidth variant="standard" /> ); }; export default Preferences;