Skip to content

Commit

Permalink
fix: error handling passphrase (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saelmala
Saelmala authored Nov 15, 2024
1 parent 7cf7077 commit 9df8e28
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 13 deletions.
36 changes: 31 additions & 5 deletions src/components/inventory/Inventory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function Inventory({ locked }: { locked: boolean }) {
>();
const [refreshKey, setRefreshKey] = useState<number>(0);
const [currentSource, setCurrentSource] = useState<SourceWithId | null>();
const [isCreateSuccessful, setIsCreateSuccessful] = useState<boolean>(false);

const [purgeInventorySource, reloadList] = useSetSourceToPurge();
const [removeInventorySourceItem, reloadInventoryList] =
Expand All @@ -31,6 +32,7 @@ export default function Inventory({ locked }: { locked: boolean }) {
refreshKey
);
const [updateSources, updateSourcesLoading] = useUpdateSources();
const [createSrtError, setCreateSrtError] = useState<string>('');
const t = useTranslate();

useEffect(() => {
Expand All @@ -54,16 +56,35 @@ export default function Inventory({ locked }: { locked: boolean }) {
srtPayload: SrtSource,
callback: () => void
) => {
createSrtSource(ingestUuid, srtPayload).then(() => {
callback();
});
setCreateSrtError('');
createSrtSource(ingestUuid, srtPayload)
.then(() => {
callback();
})
.finally(() => {
setIsCreateSuccessful(true);
})
.catch((e) => {
const errorMessageString = String(e.message);
const isErrorMessageStringUndefined =
errorMessageString === 'undefined';
setCreateSrtError(
t('inventory_list.generic_error') +
(isErrorMessageStringUndefined ? '' : ': ' + errorMessageString)
);
});
};

const handleRefreshInventory = async () => {
await updateSources();
setRefreshKey((prev) => prev + 1);
};

const handleCloseModal = () => {
setCreateSrtError('');
setShowSrtModal(false);
};

return (
<>
<div className="flex flex-row space-x-4">
Expand All @@ -74,7 +95,10 @@ export default function Inventory({ locked }: { locked: boolean }) {
? 'pointer-events-none bg-button-bg/50'
: 'bg-button-bg hover:bg-button-hover-bg'
} text-button-text font-bold py-2 px-4 rounded inline-flex items-center ml-2 w-fit`}
onClick={() => setShowSrtModal(true)}
onClick={() => {
setIsCreateSuccessful(false);
setShowSrtModal(true);
}}
>
{t('inventory_list.create_srt')}
</button>
Expand Down Expand Up @@ -115,9 +139,11 @@ export default function Inventory({ locked }: { locked: boolean }) {
) : null}
</div>
<AddSrtModal
createSrtError={createSrtError}
open={showSrtModal}
onConfirm={handleCreateSrtSource}
onAbort={() => setShowSrtModal(false)}
onAbort={handleCloseModal}
createSrtSuccessful={isCreateSuccessful}
/>
</>
);
Expand Down
83 changes: 75 additions & 8 deletions src/components/modal/addSrtModal/AddSrtModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useIngests } from '../../../hooks/ingests';
import Input from '../../input/Input';
import { ResourcesSourceResponse } from '../../../../types/ateliere-live';
import { useIngestSources } from '../../../hooks/ingests';
import toast from 'react-hot-toast';

type AddSrtModalProps = {
open: boolean;
Expand All @@ -20,6 +21,8 @@ type AddSrtModalProps = {
srtPayload: SrtSource,
callback: () => void
) => void;
createSrtError?: string | null;
createSrtSuccessful?: boolean;
};

type SelectOptions = 'Caller' | 'Listener';
Expand All @@ -28,7 +31,9 @@ export function AddSrtModal({
open,
loading,
onAbort,
onConfirm
onConfirm,
createSrtError,
createSrtSuccessful
}: AddSrtModalProps) {
const ingests = useIngests();
const t = useTranslate();
Expand All @@ -42,13 +47,16 @@ export function AddSrtModal({
const [remotePort, setRemotePort] = useState<number>(1234);
const [latency, setLatency] = useState<number>(120);
const [name, setName] = useState<string>('My SRT source');
const [passphrase, setPassphrase] = useState<string>();
const [passphrase, setPassphrase] = useState<string>('');
const [isPassphraseError, setIsPassphraseError] = useState<boolean>(false);
const [isNameError, setIsNameError] = useState<boolean>(false);
const [isIngestNameError, setIsIngestNameError] = useState<boolean>(false);
const [isLocalPortError, setIsLocalPortError] = useState<boolean>(false);
const [isRemotePortError, setIsRemotePortError] = useState<boolean>(false);
const [isLocalIpError, setIsLocalIpError] = useState<boolean>(false);
const [isRemoteIpError, setIsRemoteIpError] = useState<boolean>(false);
const [isDuplicateNameError, setIsDuplicateNameError] =
useState<boolean>(false);
const [getIngestSources, ingestSourcesLoading] = useIngestSources();

const [isPortAlreadyInUseError, setIsPortAlreadyInUseError] =
Expand Down Expand Up @@ -77,6 +85,12 @@ export function AddSrtModal({
}
}, [ingestName, ingests]);

useEffect(() => {
if (createSrtError && createSrtError !== '') {
toast.error(createSrtError || '');
}
}, [createSrtError]);

useEffect(() => {
fetchIngestSources();
}, [ingests]);
Expand Down Expand Up @@ -109,7 +123,7 @@ export function AddSrtModal({
setIsNameError(false);
}
}
}, [isNameError]);
}, [isNameError, name]);

useEffect(() => {
if (mode === 'Caller' && isPortAlreadyInUseError) {
Expand All @@ -135,12 +149,32 @@ export function AddSrtModal({
}
}, [remoteIp]);

useEffect(() => {
if (createSrtSuccessful) {
handleCancel();
}
}, [createSrtSuccessful]);

useEffect(() => {
if (remotePort) {
setIsRemotePortError(false);
}
}, [remotePort]);

useEffect(() => {
if (passphrase || passphrase === '') {
setIsPassphraseError(false);
}
}, [passphrase]);

useEffect(() => {
if (ingestName) {
setIsIngestNameError(false);
setIsDuplicateNameError(false);
setIsPortAlreadyInUseError(false);
}
}, [ingestName]);

const handleCloseModal = () => {
setIsNameError(false);
setIsIngestNameError(false);
Expand All @@ -149,6 +183,8 @@ export function AddSrtModal({
setIsRemoteIpError(false);
setIsRemotePortError(false);
setIsPortAlreadyInUseError(false);
setIsPassphraseError(false);
setIsDuplicateNameError(false);
onAbort();
};

Expand All @@ -171,6 +207,8 @@ export function AddSrtModal({
setIsRemoteIpError(false);
setIsRemotePortError(false);
setIsPortAlreadyInUseError(false);
setIsPassphraseError(false);
setIsDuplicateNameError(false);

onAbort();
};
Expand Down Expand Up @@ -221,12 +259,29 @@ export function AddSrtModal({
hasError = true;
}

if (hasError) {
return;
if (
passphrase &&
passphrase !== '' &&
(passphrase.length < 10 || passphrase.length > 79)
) {
setIsPassphraseError(true);
hasError = true;
}

const srtSources = await fetchIngestSources();

if (srtSources.length > 0) {
const duplicateNames = srtSources.some((srt) => srt.name === name);
if (duplicateNames) {
setIsDuplicateNameError(true);
hasError = true;
}
}

if (hasError) {
return;
}

if (srtSources.length > 0 && mode === 'Listener') {
const usedPorts: number[] = [];
srtSources.forEach((s) => {
Expand All @@ -242,11 +297,9 @@ export function AddSrtModal({
setIsPortAlreadyInUseError(false);

onConfirm(ingestUuid, srtPayload, () => fetchIngestSources());
handleCancel();
}
} else {
onConfirm(ingestUuid, srtPayload, () => fetchIngestSources());
handleCancel();
}
};

Expand Down Expand Up @@ -332,14 +385,23 @@ export function AddSrtModal({
className="w-full ml-2"
type="text"
value={name}
onChange={handleInputChange(setName, setIsNameError)}
onChange={handleInputChange(
setName,
setIsNameError,
setIsDuplicateNameError
)}
error={isNameError}
/>
{isNameError && (
<p className="text-xs text-button-delete mt-2">
{t('inventory_list.no_name')}
</p>
)}
{isDuplicateNameError && (
<p className="text-xs text-button-delete mt-2">
{t('inventory_list.duplicate_name_error')}
</p>
)}
</span>
</span>
<span className="flex items-center w-full">
Expand Down Expand Up @@ -455,6 +517,11 @@ export function AddSrtModal({
value={passphrase}
onChange={handleInputChange(setPassphrase)}
/>
{isPassphraseError && (
<p className="text-xs text-button-delete mt-2">
{t('inventory_list.passphrase_error')}
</p>
)}
</span>
</span>
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/i18n/locales/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,10 @@ export const en = {
no_remote_port: 'You need to enter a remote port',
port_already_in_use_error:
'There is already a SRT source with this port. Choose a different port.',
passphrase_error: 'The passphrase needs to be between 10 and 79 characters',
generic_error: 'There was an error creating the SRT source',
duplicate_name_error:
'There is already an SRT source with this name on this ingest',
cancel: 'Cancel'
},
clear: 'Clear',
Expand Down
4 changes: 4 additions & 0 deletions src/i18n/locales/sv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,6 +583,10 @@ export const sv = {
no_remote_port: 'Du behöver fylla i en remote port',
port_already_in_use_error:
'Den här porten används redan av en annan SRT källa. Välj en annan port.',
passphrase_error: 'Lösenordet måste vara mellan 10 och 79 tecken',
generic_error: 'Ett fel uppstod vid skapandet av SRT källan',
duplicate_name_error:
'Det finns redan en SRT med det här namnet på den här ingesten.',
cancel: 'Avbryt'
},
clear: 'Rensa',
Expand Down

0 comments on commit 9df8e28

Please sign in to comment.