@@ -990,6 +1022,7 @@ This action cannot be undone.`}
opened={confirmBatchUpdateOpen}
onClose={() => setConfirmBatchUpdateOpen(false)}
onConfirm={onSubmit}
+ loading={isSubmitting}
title="Confirm Batch Update"
message={
diff --git a/frontend/src/components/forms/Channels.jsx b/frontend/src/components/forms/Channels.jsx
deleted file mode 100644
index 97efea54..00000000
--- a/frontend/src/components/forms/Channels.jsx
+++ /dev/null
@@ -1,729 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import useChannelsStore from '../../store/channels';
-import API from '../../api';
-import useStreamProfilesStore from '../../store/streamProfiles';
-import useStreamsStore from '../../store/streams';
-import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
-import LazyLogo from '../LazyLogo';
-import ChannelGroupForm from './ChannelGroup';
-import usePlaylistsStore from '../../store/playlists';
-import logo from '../../images/logo.png';
-import {
- Box,
- Button,
- Modal,
- TextInput,
- NativeSelect,
- Text,
- Group,
- ActionIcon,
- Center,
- Grid,
- Flex,
- Select,
- Divider,
- Stack,
- useMantineTheme,
- Popover,
- ScrollArea,
- Tooltip,
- NumberInput,
- Image,
- UnstyledButton,
-} from '@mantine/core';
-import { ListOrdered, SquarePlus, SquareX, X } from 'lucide-react';
-import useEPGsStore from '../../store/epgs';
-import { Dropzone } from '@mantine/dropzone';
-import { notifications } from '@mantine/notifications';
-import { FixedSizeList as List } from 'react-window';
-
-const ChannelsForm = ({ channel = null, isOpen, onClose }) => {
- const theme = useMantineTheme();
-
- const listRef = useRef(null);
- const logoListRef = useRef(null);
- const groupListRef = useRef(null);
-
- const channelGroups = useChannelsStore((s) => s.channelGroups);
- const { logos, ensureLogosLoaded } = useChannelLogoSelection();
- const streams = useStreamsStore((state) => state.streams);
- const streamProfiles = useStreamProfilesStore((s) => s.profiles);
- const playlists = usePlaylistsStore((s) => s.playlists);
- const epgs = useEPGsStore((s) => s.epgs);
- const tvgs = useEPGsStore((s) => s.tvgs);
- const tvgsById = useEPGsStore((s) => s.tvgsById);
-
- const [logoPreview, setLogoPreview] = useState(null);
- const [channelStreams, setChannelStreams] = useState([]);
- const [channelGroupModelOpen, setChannelGroupModalOpen] = useState(false);
- const [epgPopoverOpened, setEpgPopoverOpened] = useState(false);
- const [logoPopoverOpened, setLogoPopoverOpened] = useState(false);
- const [selectedEPG, setSelectedEPG] = useState('');
- const [tvgFilter, setTvgFilter] = useState('');
- const [logoFilter, setLogoFilter] = useState('');
-
- const [groupPopoverOpened, setGroupPopoverOpened] = useState(false);
- const [groupFilter, setGroupFilter] = useState('');
- const groupOptions = Object.values(channelGroups);
-
- const addStream = (stream) => {
- const streamSet = new Set(channelStreams);
- streamSet.add(stream);
- setChannelStreams(Array.from(streamSet));
- };
-
- const removeStream = (stream) => {
- const streamSet = new Set(channelStreams);
- streamSet.delete(stream);
- setChannelStreams(Array.from(streamSet));
- };
-
- const handleLogoChange = async (files) => {
- if (files.length === 1) {
- const file = files[0];
-
- // Validate file size on frontend first
- if (file.size > 5 * 1024 * 1024) {
- // 5MB
- notifications.show({
- title: 'Error',
- message: 'File too large. Maximum size is 5MB.',
- color: 'red',
- });
- return;
- }
-
- try {
- const retval = await API.uploadLogo(file);
- // Note: API.uploadLogo already adds the logo to the store, no need to fetch
- setLogoPreview(retval.cache_url);
- formik.setFieldValue('logo_id', retval.id);
- } catch (error) {
- console.error('Logo upload failed:', error);
- // Error notification is already handled in API.uploadLogo
- }
- } else {
- setLogoPreview(null);
- }
- };
-
- const formik = useFormik({
- initialValues: {
- name: '',
- channel_number: '', // Change from 0 to empty string for consistency
- channel_group_id:
- Object.keys(channelGroups).length > 0
- ? Object.keys(channelGroups)[0]
- : '',
- stream_profile_id: '0',
- tvg_id: '',
- tvc_guide_stationid: '',
- epg_data_id: '',
- logo_id: '',
- },
- validationSchema: Yup.object({
- name: Yup.string().required('Name is required'),
- channel_group_id: Yup.string().required('Channel group is required'),
- }),
- onSubmit: async (values, { setSubmitting }) => {
- let response;
-
- try {
- const formattedValues = { ...values };
-
- // Convert empty or "0" stream_profile_id to null for the API
- if (
- !formattedValues.stream_profile_id ||
- formattedValues.stream_profile_id === '0'
- ) {
- formattedValues.stream_profile_id = null;
- }
-
- // Ensure tvg_id is properly included (no empty strings)
- formattedValues.tvg_id = formattedValues.tvg_id || null;
-
- // Ensure tvc_guide_stationid is properly included (no empty strings)
- formattedValues.tvc_guide_stationid =
- formattedValues.tvc_guide_stationid || null;
-
- if (channel) {
- // If there's an EPG to set, use our enhanced endpoint
- if (values.epg_data_id !== (channel.epg_data_id ?? '')) {
- // Use the special endpoint to set EPG and trigger refresh
- const epgResponse = await API.setChannelEPG(
- channel.id,
- values.epg_data_id
- );
-
- // Remove epg_data_id from values since we've handled it separately
- const { epg_data_id, ...otherValues } = formattedValues;
-
- // Update other channel fields if needed
- if (Object.keys(otherValues).length > 0) {
- response = await API.updateChannel({
- id: channel.id,
- ...otherValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } else {
- // No EPG change, regular update
- response = await API.updateChannel({
- id: channel.id,
- ...formattedValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } else {
- // New channel creation - use the standard method
- response = await API.addChannel({
- ...formattedValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } catch (error) {
- console.error('Error saving channel:', error);
- }
-
- formik.resetForm();
- API.requeryChannels();
-
- // Refresh channel profiles to update the membership information
- useChannelsStore.getState().fetchChannelProfiles();
-
- setSubmitting(false);
- setTvgFilter('');
- setLogoFilter('');
- onClose();
- },
- });
-
- useEffect(() => {
- if (channel) {
- if (channel.epg_data_id) {
- const epgSource = epgs[tvgsById[channel.epg_data_id]?.epg_source];
- setSelectedEPG(epgSource ? `${epgSource.id}` : '');
- }
-
- formik.setValues({
- name: channel.name || '',
- channel_number:
- channel.channel_number !== null ? channel.channel_number : '',
- channel_group_id: channel.channel_group_id
- ? `${channel.channel_group_id}`
- : '',
- stream_profile_id: channel.stream_profile_id
- ? `${channel.stream_profile_id}`
- : '0',
- tvg_id: channel.tvg_id || '',
- tvc_guide_stationid: channel.tvc_guide_stationid || '',
- epg_data_id: channel.epg_data_id ?? '',
- logo_id: channel.logo_id ? `${channel.logo_id}` : '',
- });
-
- setChannelStreams(channel.streams || []);
- } else {
- formik.resetForm();
- setTvgFilter('');
- setLogoFilter('');
- }
- }, [channel, tvgsById, channelGroups]);
-
- // Memoize logo options to prevent infinite re-renders during background loading
- const logoOptions = useMemo(() => {
- return [{ id: '0', name: 'Default' }].concat(Object.values(logos));
- }, [logos]); // Only depend on logos object
-
- const renderLogoOption = ({ option, checked }) => {
- return (
-
- 
-
- );
- };
-
- // Update the handler for when channel group modal is closed
- const handleChannelGroupModalClose = (newGroup) => {
- setChannelGroupModalOpen(false);
-
- // If a new group was created and returned, update the form with it
- if (newGroup && newGroup.id) {
- // Preserve all current form values while updating just the channel_group_id
- formik.setValues({
- ...formik.values,
- channel_group_id: `${newGroup.id}`,
- });
- }
- };
-
- if (!isOpen) {
- return <>;
- }
-
- const filteredTvgs = tvgs
- .filter((tvg) => tvg.epg_source == selectedEPG)
- .filter(
- (tvg) =>
- tvg.name.toLowerCase().includes(tvgFilter.toLowerCase()) ||
- tvg.tvg_id.toLowerCase().includes(tvgFilter.toLowerCase())
- );
-
- const filteredLogos = logoOptions.filter((logo) =>
- logo.name.toLowerCase().includes(logoFilter.toLowerCase())
- );
-
- const filteredGroups = groupOptions.filter((group) =>
- group.name.toLowerCase().includes(groupFilter.toLowerCase())
- );
-
- return (
-
-
- Channels
-
- }
- styles={{ content: { '--mantine-color-body': '#27272A' } }}
- >
-
-
- );
-};
-
-export default ChannelsForm;
diff --git a/frontend/src/components/forms/DummyEPG.jsx b/frontend/src/components/forms/DummyEPG.jsx
index bb787722..9f9346da 100644
--- a/frontend/src/components/forms/DummyEPG.jsx
+++ b/frontend/src/components/forms/DummyEPG.jsx
@@ -728,6 +728,16 @@ const DummyEPGForm = ({ epg, isOpen, onClose }) => {
const handleSubmit = async (values) => {
try {
if (epg?.id) {
+ // Validate that we have a valid EPG object before updating
+ if (!epg || typeof epg !== 'object' || !epg.id) {
+ notifications.show({
+ title: 'Error',
+ message: 'Invalid EPG data. Please close and reopen this form.',
+ color: 'red',
+ });
+ return;
+ }
+
await API.updateEPG({ ...values, id: epg.id });
notifications.show({
title: 'Success',
diff --git a/frontend/src/components/forms/EPG.jsx b/frontend/src/components/forms/EPG.jsx
index 8f8a3070..50c8553c 100644
--- a/frontend/src/components/forms/EPG.jsx
+++ b/frontend/src/components/forms/EPG.jsx
@@ -15,6 +15,7 @@ import {
Text,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
const EPG = ({ epg = null, isOpen, onClose }) => {
const [sourceType, setSourceType] = useState('xmltv');
@@ -28,6 +29,7 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
api_key: '',
is_active: true,
refresh_interval: 24,
+ priority: 0,
},
validate: {
@@ -40,6 +42,16 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
const values = form.getValues();
if (epg?.id) {
+ // Validate that we have a valid EPG object before updating
+ if (!epg || typeof epg !== 'object' || !epg.id) {
+ notifications.show({
+ title: 'Error',
+ message: 'Invalid EPG data. Please close and reopen this form.',
+ color: 'red',
+ });
+ return;
+ }
+
await API.updateEPG({ id: epg.id, ...values });
} else {
await API.addEPG(values);
@@ -58,6 +70,7 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
api_key: epg.api_key,
is_active: epg.is_active,
refresh_interval: epg.refresh_interval,
+ priority: epg.priority ?? 0,
};
form.setValues(values);
setSourceType(epg.source_type);
@@ -137,14 +150,24 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
key={form.key('url')}
/>
-
+ )}
+
+
{/* Put checkbox at the same level as Refresh Interval */}
diff --git a/frontend/src/components/forms/GroupManager.jsx b/frontend/src/components/forms/GroupManager.jsx
index adcd55d3..453d9494 100644
--- a/frontend/src/components/forms/GroupManager.jsx
+++ b/frontend/src/components/forms/GroupManager.jsx
@@ -183,6 +183,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
const [groupToDelete, setGroupToDelete] = useState(null);
const [confirmCleanupOpen, setConfirmCleanupOpen] = useState(false);
+ const [deletingGroup, setDeletingGroup] = useState(false);
// Memoize the channel groups array to prevent unnecessary re-renders
const channelGroupsArray = useMemo(
@@ -382,6 +383,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
const executeDeleteGroup = useCallback(
async (group) => {
+ setDeletingGroup(true);
try {
await API.deleteChannelGroup(group.id);
@@ -392,13 +394,14 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
});
await fetchGroupUsage(); // Refresh usage data
- setConfirmDeleteOpen(false);
} catch (error) {
notifications.show({
title: 'Error',
message: 'Failed to delete group',
color: 'red',
});
+ } finally {
+ setDeletingGroup(false);
setConfirmDeleteOpen(false);
}
},
@@ -680,6 +683,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
opened={confirmDeleteOpen}
onClose={() => setConfirmDeleteOpen(false)}
onConfirm={() => groupToDelete && executeDeleteGroup(groupToDelete)}
+ loading={deletingGroup}
title="Confirm Group Deletion"
message={
groupToDelete ? (
@@ -706,6 +710,7 @@ This action cannot be undone.`}
opened={confirmCleanupOpen}
onClose={() => setConfirmCleanupOpen(false)}
onConfirm={executeCleanup}
+ loading={isCleaningUp}
title="Confirm Group Cleanup"
message={
diff --git a/frontend/src/components/forms/LiveGroupFilter.jsx b/frontend/src/components/forms/LiveGroupFilter.jsx
index 71b412b4..68f4db8c 100644
--- a/frontend/src/components/forms/LiveGroupFilter.jsx
+++ b/frontend/src/components/forms/LiveGroupFilter.jsx
@@ -96,28 +96,30 @@ const LiveGroupFilter = ({
}
setGroupStates(
- playlist.channel_groups.map((group) => {
- // Parse custom_properties if present
- let customProps = {};
- if (group.custom_properties) {
- try {
- customProps =
- typeof group.custom_properties === 'string'
- ? JSON.parse(group.custom_properties)
- : group.custom_properties;
- } catch {
- customProps = {};
+ playlist.channel_groups
+ .filter((group) => channelGroups[group.channel_group]) // Filter out groups that don't exist
+ .map((group) => {
+ // Parse custom_properties if present
+ let customProps = {};
+ if (group.custom_properties) {
+ try {
+ customProps =
+ typeof group.custom_properties === 'string'
+ ? JSON.parse(group.custom_properties)
+ : group.custom_properties;
+ } catch {
+ customProps = {};
+ }
}
- }
- return {
- ...group,
- name: channelGroups[group.channel_group].name,
- auto_channel_sync: group.auto_channel_sync || false,
- auto_sync_channel_start: group.auto_sync_channel_start || 1.0,
- custom_properties: customProps,
- original_enabled: group.enabled,
- };
- })
+ return {
+ ...group,
+ name: channelGroups[group.channel_group].name,
+ auto_channel_sync: group.auto_channel_sync || false,
+ auto_sync_channel_start: group.auto_sync_channel_start || 1.0,
+ custom_properties: customProps,
+ original_enabled: group.enabled,
+ };
+ })
);
}, [playlist, channelGroups]);
@@ -261,25 +263,42 @@ const LiveGroupFilter = ({
}}
>
{/* Group Enable/Disable Button */}
-
+
+
{/* Auto Sync Controls */}
@@ -367,7 +386,8 @@ const LiveGroupFilter = ({
if (
group.custom_properties?.custom_epg_id !==
undefined ||
- group.custom_properties?.force_dummy_epg
+ group.custom_properties?.force_dummy_epg ||
+ group.custom_properties?.force_epg_selected
) {
selectedValues.push('force_epg');
}
@@ -430,23 +450,20 @@ const LiveGroupFilter = ({
// Handle force_epg
if (selectedOptions.includes('force_epg')) {
- // Migrate from old force_dummy_epg if present
+ // Set default to force_dummy_epg if no EPG settings exist yet
if (
- newCustomProps.force_dummy_epg &&
- newCustomProps.custom_epg_id === undefined
+ newCustomProps.custom_epg_id ===
+ undefined &&
+ !newCustomProps.force_dummy_epg
) {
- // Migrate: force_dummy_epg=true becomes custom_epg_id=null
- newCustomProps.custom_epg_id = null;
- delete newCustomProps.force_dummy_epg;
- } else if (
- newCustomProps.custom_epg_id === undefined
- ) {
- // New configuration: initialize with null (no EPG/default dummy)
- newCustomProps.custom_epg_id = null;
+ // Default to "No EPG (Disabled)"
+ newCustomProps.force_dummy_epg = true;
}
} else {
- // Only remove custom_epg_id when deselected
+ // Remove all EPG settings when deselected
delete newCustomProps.custom_epg_id;
+ delete newCustomProps.force_dummy_epg;
+ delete newCustomProps.force_epg_selected;
}
// Handle group_override
@@ -1122,7 +1139,8 @@ const LiveGroupFilter = ({
{/* Show EPG selector when force_epg is selected */}
{(group.custom_properties?.custom_epg_id !== undefined ||
- group.custom_properties?.force_dummy_epg) && (
+ group.custom_properties?.force_dummy_epg ||
+ group.custom_properties?.force_epg_selected) && (
{
- // Handle migration from force_dummy_epg
+ // Show custom EPG if set
if (
group.custom_properties?.custom_epg_id !==
- undefined
+ undefined &&
+ group.custom_properties?.custom_epg_id !== null
) {
- // Convert to string, use '0' for null/no EPG
- return group.custom_properties.custom_epg_id ===
- null
- ? '0'
- : group.custom_properties.custom_epg_id.toString();
- } else if (
- group.custom_properties?.force_dummy_epg
- ) {
- // Show "No EPG" for old force_dummy_epg configs
+ return group.custom_properties.custom_epg_id.toString();
+ }
+ // Show "No EPG" if force_dummy_epg is set
+ if (group.custom_properties?.force_dummy_epg) {
return '0';
}
- return '0';
+ // Otherwise show empty/placeholder
+ return null;
})()}
onChange={(value) => {
- // Convert back: '0' means no EPG (null)
- const newValue =
- value === '0' ? null : parseInt(value);
- setGroupStates(
- groupStates.map((state) => {
- if (
- state.channel_group === group.channel_group
- ) {
- return {
- ...state,
- custom_properties: {
+ if (value === '0') {
+ // "No EPG (Disabled)" selected - use force_dummy_epg
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
...state.custom_properties,
- custom_epg_id: newValue,
- },
- };
- }
- return state;
- })
- );
+ };
+ delete newProps.custom_epg_id;
+ delete newProps.force_epg_selected;
+ newProps.force_dummy_epg = true;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ } else if (value) {
+ // Specific EPG source selected
+ const epgId = parseInt(value);
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
+ ...state.custom_properties,
+ };
+ newProps.custom_epg_id = epgId;
+ delete newProps.force_dummy_epg;
+ delete newProps.force_epg_selected;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ } else {
+ // Cleared - remove all EPG settings
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
+ ...state.custom_properties,
+ };
+ delete newProps.custom_epg_id;
+ delete newProps.force_dummy_epg;
+ delete newProps.force_epg_selected;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ }
}}
data={[
{ value: '0', label: 'No EPG (Disabled)' },
- ...epgSources.map((source) => ({
- value: source.id.toString(),
- label: `${source.name} (${
- source.source_type === 'dummy'
- ? 'Dummy'
- : source.source_type === 'xmltv'
- ? 'XMLTV'
- : source.source_type ===
- 'schedules_direct'
- ? 'Schedules Direct'
- : source.source_type
- })`,
- })),
+ ...[...epgSources]
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map((source) => ({
+ value: source.id.toString(),
+ label: `${source.name} (${
+ source.source_type === 'dummy'
+ ? 'Dummy'
+ : source.source_type === 'xmltv'
+ ? 'XMLTV'
+ : source.source_type ===
+ 'schedules_direct'
+ ? 'Schedules Direct'
+ : source.source_type
+ })`,
+ })),
]}
clearable
searchable
diff --git a/frontend/src/components/forms/LoginForm.jsx b/frontend/src/components/forms/LoginForm.jsx
index 916a2c30..353cd50e 100644
--- a/frontend/src/components/forms/LoginForm.jsx
+++ b/frontend/src/components/forms/LoginForm.jsx
@@ -1,7 +1,24 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import useAuthStore from '../../store/auth';
-import { Paper, Title, TextInput, Button, Center, Stack } from '@mantine/core';
+import API from '../../api';
+import {
+ Paper,
+ Title,
+ TextInput,
+ Button,
+ Center,
+ Stack,
+ Text,
+ Image,
+ Group,
+ Divider,
+ Modal,
+ Anchor,
+ Code,
+ Checkbox,
+} from '@mantine/core';
+import logo from '../../assets/logo.png';
const LoginForm = () => {
const login = useAuthStore((s) => s.login);
@@ -11,12 +28,69 @@ const LoginForm = () => {
const navigate = useNavigate(); // Hook to navigate to other routes
const [formData, setFormData] = useState({ username: '', password: '' });
+ const [rememberMe, setRememberMe] = useState(false);
+ const [savePassword, setSavePassword] = useState(false);
+ const [forgotPasswordOpened, setForgotPasswordOpened] = useState(false);
+ const [version, setVersion] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
- // useEffect(() => {
- // if (isAuthenticated) {
- // navigate('/channels');
- // }
- // }, [isAuthenticated, navigate]);
+ // Simple base64 encoding/decoding for localStorage
+ // Note: This is obfuscation, not encryption. Use browser's password manager for real security.
+ const encodePassword = (password) => {
+ try {
+ return btoa(password);
+ } catch (error) {
+ console.error('Encoding error:', error);
+ return null;
+ }
+ };
+
+ const decodePassword = (encoded) => {
+ try {
+ return atob(encoded);
+ } catch (error) {
+ console.error('Decoding error:', error);
+ return '';
+ }
+ };
+
+ useEffect(() => {
+ // Fetch version info
+ API.getVersion().then((data) => {
+ setVersion(data?.version);
+ });
+ }, []);
+
+ useEffect(() => {
+ // Load saved username if it exists
+ const savedUsername = localStorage.getItem(
+ 'dispatcharr_remembered_username'
+ );
+ const savedPassword = localStorage.getItem('dispatcharr_saved_password');
+
+ if (savedUsername) {
+ setFormData((prev) => ({ ...prev, username: savedUsername }));
+ setRememberMe(true);
+
+ if (savedPassword) {
+ try {
+ const decrypted = decodePassword(savedPassword);
+ if (decrypted) {
+ setFormData((prev) => ({ ...prev, password: decrypted }));
+ setSavePassword(true);
+ }
+ } catch {
+ // If decoding fails, just skip
+ }
+ }
+ }
+ }, []);
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate('/channels');
+ }
+ }, [isAuthenticated, navigate]);
const handleInputChange = (e) => {
setFormData({
@@ -27,13 +101,38 @@ const LoginForm = () => {
const handleSubmit = async (e) => {
e.preventDefault();
- await login(formData);
+ setIsLoading(true);
try {
+ await login(formData);
+
+ // Save username if remember me is checked
+ if (rememberMe) {
+ localStorage.setItem(
+ 'dispatcharr_remembered_username',
+ formData.username
+ );
+
+ // Save password if save password is checked
+ if (savePassword) {
+ const encoded = encodePassword(formData.password);
+ if (encoded) {
+ localStorage.setItem('dispatcharr_saved_password', encoded);
+ }
+ } else {
+ localStorage.removeItem('dispatcharr_saved_password');
+ }
+ } else {
+ localStorage.removeItem('dispatcharr_remembered_username');
+ localStorage.removeItem('dispatcharr_saved_password');
+ }
+
await initData();
- navigate('/channels');
+ // Navigation will happen automatically via the useEffect or route protection
} catch (e) {
console.log(`Failed to login: ${e}`);
+ await logout();
+ setIsLoading(false);
}
};
@@ -45,11 +144,29 @@ const LoginForm = () => {
>
-
- Login
-
+
+
+
+ Dispatcharr
+
+
+ Welcome back! Please log in to continue.
+
+
+
+
+ {version && (
+
+ v{version}
+
+ )}
+
+ setForgotPasswordOpened(false)}
+ title="Reset Your Password"
+ centered
+ >
+
+
+ To reset your password, your administrator needs to run a Django
+ management command:
+
+
+
+ If running with Docker:
+
+
+ docker exec <container_name> python manage.py changepassword
+ <username>
+
+
+
+
+ If running locally:
+
+ python manage.py changepassword <username>
+
+
+ The command will prompt for a new password. Replace
+ <container_name> with your Docker container name
+ and <username> with the account username.
+
+
+ Please contact your system administrator to perform a password
+ reset.
+
+
+
);
};
diff --git a/frontend/src/components/forms/Logo.jsx b/frontend/src/components/forms/Logo.jsx
index 8362b891..c6e63ba6 100644
--- a/frontend/src/components/forms/Logo.jsx
+++ b/frontend/src/components/forms/Logo.jsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { useFormik } from 'formik';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
import {
Modal,
@@ -18,143 +19,148 @@ import { Upload, FileImage, X } from 'lucide-react';
import { notifications } from '@mantine/notifications';
import API from '../../api';
+const schema = Yup.object({
+ name: Yup.string().required('Name is required'),
+ url: Yup.string()
+ .required('URL is required')
+ .test(
+ 'valid-url-or-path',
+ 'Must be a valid URL or local file path',
+ (value) => {
+ if (!value) return false;
+ // Allow local file paths starting with /data/logos/
+ if (value.startsWith('/data/logos/')) return true;
+ // Allow valid URLs
+ try {
+ new URL(value);
+ return true;
+ } catch {
+ return false;
+ }
+ }
+ ),
+});
+
const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
const [logoPreview, setLogoPreview] = useState(null);
const [uploading, setUploading] = useState(false);
const [selectedFile, setSelectedFile] = useState(null); // Store selected file
- const formik = useFormik({
- initialValues: {
- name: '',
- url: '',
- },
- validationSchema: Yup.object({
- name: Yup.string().required('Name is required'),
- url: Yup.string()
- .required('URL is required')
- .test(
- 'valid-url-or-path',
- 'Must be a valid URL or local file path',
- (value) => {
- if (!value) return false;
- // Allow local file paths starting with /data/logos/
- if (value.startsWith('/data/logos/')) return true;
- // Allow valid URLs
- try {
- new URL(value);
- return true;
- } catch {
- return false;
- }
- }
- ),
+ const defaultValues = useMemo(
+ () => ({
+ name: logo?.name || '',
+ url: logo?.url || '',
}),
- onSubmit: async (values, { setSubmitting }) => {
- try {
- setUploading(true);
- let uploadResponse = null; // Store upload response for later use
+ [logo]
+ );
- // If we have a selected file, upload it first
- if (selectedFile) {
- try {
- uploadResponse = await API.uploadLogo(selectedFile, values.name);
- // Use the uploaded file data instead of form values
- values.name = uploadResponse.name;
- values.url = uploadResponse.url;
- } catch (uploadError) {
- let errorMessage = 'Failed to upload logo file';
-
- if (
- uploadError.code === 'NETWORK_ERROR' ||
- uploadError.message?.includes('timeout')
- ) {
- errorMessage = 'Upload timed out. Please try again.';
- } else if (uploadError.status === 413) {
- errorMessage = 'File too large. Please choose a smaller file.';
- } else if (uploadError.body?.error) {
- errorMessage = uploadError.body.error;
- }
-
- notifications.show({
- title: 'Upload Error',
- message: errorMessage,
- color: 'red',
- });
- return; // Don't proceed with creation if upload fails
- }
- }
-
- // Now create or update the logo with the final values
- // Only proceed if we don't already have a logo from file upload
- if (logo) {
- const updatedLogo = await API.updateLogo(logo.id, values);
- notifications.show({
- title: 'Success',
- message: 'Logo updated successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'update', logo: updatedLogo }); // Call onSuccess for updates
- } else if (!selectedFile) {
- // Only create a new logo entry if we're not uploading a file
- // (file upload already created the logo entry)
- const newLogo = await API.createLogo(values);
- notifications.show({
- title: 'Success',
- message: 'Logo created successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'create', logo: newLogo }); // Call onSuccess for creates
- } else {
- // File was uploaded and logo was already created
- notifications.show({
- title: 'Success',
- message: 'Logo uploaded successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'create', logo: uploadResponse });
- }
- onClose();
- } catch (error) {
- let errorMessage = logo
- ? 'Failed to update logo'
- : 'Failed to create logo';
-
- // Handle specific timeout errors
- if (
- error.code === 'NETWORK_ERROR' ||
- error.message?.includes('timeout')
- ) {
- errorMessage = 'Request timed out. Please try again.';
- } else if (error.response?.data?.error) {
- errorMessage = error.response.data.error;
- }
-
- notifications.show({
- title: 'Error',
- message: errorMessage,
- color: 'red',
- });
- } finally {
- setSubmitting(false);
- setUploading(false);
- }
- },
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ reset,
+ setValue,
+ watch,
+ } = useForm({
+ defaultValues,
+ resolver: yupResolver(schema),
});
- useEffect(() => {
- if (logo) {
- formik.setValues({
- name: logo.name || '',
- url: logo.url || '',
+ const onSubmit = async (values) => {
+ try {
+ setUploading(true);
+ let uploadResponse = null; // Store upload response for later use
+
+ // If we have a selected file, upload it first
+ if (selectedFile) {
+ try {
+ uploadResponse = await API.uploadLogo(selectedFile, values.name);
+ // Use the uploaded file data instead of form values
+ values.name = uploadResponse.name;
+ values.url = uploadResponse.url;
+ } catch (uploadError) {
+ let errorMessage = 'Failed to upload logo file';
+
+ if (
+ uploadError.code === 'NETWORK_ERROR' ||
+ uploadError.message?.includes('timeout')
+ ) {
+ errorMessage = 'Upload timed out. Please try again.';
+ } else if (uploadError.status === 413) {
+ errorMessage = 'File too large. Please choose a smaller file.';
+ } else if (uploadError.body?.error) {
+ errorMessage = uploadError.body.error;
+ }
+
+ notifications.show({
+ title: 'Upload Error',
+ message: errorMessage,
+ color: 'red',
+ });
+ return; // Don't proceed with creation if upload fails
+ }
+ }
+
+ // Now create or update the logo with the final values
+ // Only proceed if we don't already have a logo from file upload
+ if (logo) {
+ const updatedLogo = await API.updateLogo(logo.id, values);
+ notifications.show({
+ title: 'Success',
+ message: 'Logo updated successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'update', logo: updatedLogo }); // Call onSuccess for updates
+ } else if (!selectedFile) {
+ // Only create a new logo entry if we're not uploading a file
+ // (file upload already created the logo entry)
+ const newLogo = await API.createLogo(values);
+ notifications.show({
+ title: 'Success',
+ message: 'Logo created successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'create', logo: newLogo }); // Call onSuccess for creates
+ } else {
+ // File was uploaded and logo was already created
+ notifications.show({
+ title: 'Success',
+ message: 'Logo uploaded successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'create', logo: uploadResponse });
+ }
+ onClose();
+ } catch (error) {
+ let errorMessage = logo
+ ? 'Failed to update logo'
+ : 'Failed to create logo';
+
+ // Handle specific timeout errors
+ if (
+ error.code === 'NETWORK_ERROR' ||
+ error.message?.includes('timeout')
+ ) {
+ errorMessage = 'Request timed out. Please try again.';
+ } else if (error.response?.data?.error) {
+ errorMessage = error.response.data.error;
+ }
+
+ notifications.show({
+ title: 'Error',
+ message: errorMessage,
+ color: 'red',
});
- setLogoPreview(logo.cache_url);
- } else {
- formik.resetForm();
- setLogoPreview(null);
+ } finally {
+ setUploading(false);
}
- // Clear any selected file when logo changes
+ };
+
+ useEffect(() => {
+ reset(defaultValues);
+ setLogoPreview(logo?.cache_url || null);
setSelectedFile(null);
- }, [logo, isOpen]);
+ }, [defaultValues, logo, reset]);
const handleFileSelect = (files) => {
if (files.length === 0) return;
@@ -180,18 +186,19 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
setLogoPreview(previewUrl);
// Auto-fill the name field if empty
- if (!formik.values.name) {
+ const currentName = watch('name');
+ if (!currentName) {
const nameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
- formik.setFieldValue('name', nameWithoutExtension);
+ setValue('name', nameWithoutExtension);
}
// Set a placeholder URL (will be replaced after upload)
- formik.setFieldValue('url', 'file://pending-upload');
+ setValue('url', 'file://pending-upload');
};
const handleUrlChange = (event) => {
const url = event.target.value;
- formik.setFieldValue('url', url);
+ setValue('url', url);
// Clear any selected file when manually entering URL
if (selectedFile) {
@@ -219,7 +226,7 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '');
if (nameWithoutExtension) {
- formik.setFieldValue('name', nameWithoutExtension);
+ setValue('name', nameWithoutExtension);
}
} catch (error) {
// If the URL is invalid, do nothing.
@@ -244,7 +251,7 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
title={logo ? 'Edit Logo' : 'Add Logo'}
size="md"
>
-