feat: improve UI for timespan inputs on admin page (#726)

* Define Timestamp type

* Implement Timestamp utils

* Implement Timespan input

* Use timestamp input on config page

* Add timespan type to config services

* Refactor maxExpiration to use timespan type across services and components

* Update sessionDuration to use timespan type in config and adjust token expiration logic

* Update localized strings

frontend/src/components/admin/configuration/AdminConfigInput.tsx

@@ -8,6 +8,8 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { AdminConfig, UpdateConfig } from "../../../types/config.type";
+import TimespanInput from "../../core/TimespanInput";
+import { stringToTimespan, timespanToString } from "../../../utils/date.util";
 import FileSizeInput from "../../core/FileSizeInput";
 
 const AdminConfigInput = ({
@@ -91,6 +93,13 @@ const AdminConfigInput = ({
           />
         </>
       )}
+      {configVariable.type == "timespan" && (
+        <TimespanInput
+          value={stringToTimespan(configVariable.value)}
+          onChange={(timespan) => onValueChange(configVariable, timespanToString(timespan))}
+          w={201}
+        />
+      )}
     </Stack>
   );
 };

frontend/src/components/core/TimespanInput.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Timespan } from "../../types/timespan.type";
+import { NativeSelect, NumberInput } from "@mantine/core";
+import useTranslate from "../../hooks/useTranslate.hook";
+
+const TimespanInput = ({ label, value, onChange, ...restProps }: {
+	label?: string,
+	value: Timespan,
+	onChange: (timespan: Timespan) => void,
+	[key: string]: any,
+}) => {
+	const [unit, setUnit] = useState(value.unit);
+	const [inputValue, setInputValue] = useState(value.value);
+	const t = useTranslate();
+	
+	const version = inputValue == 1 ? "singular" : "plural";
+	const unitSelect = (
+		<NativeSelect
+			data={[
+				{
+					value: "minutes",
+					label: t(`upload.modal.expires.minute-${version}`),
+				},
+				{
+					value: "hours",
+					label: t(`upload.modal.expires.hour-${version}`),
+				},
+				{
+					value: "days",
+					label: t(`upload.modal.expires.day-${version}`),
+				},
+				{
+					value: "weeks",
+					label: t(`upload.modal.expires.week-${version}`),
+				},
+				{
+					value: "months",
+					label: t(`upload.modal.expires.month-${version}`),
+				},
+				{
+					value: "years",
+					label: t(`upload.modal.expires.year-${version}`),
+				},
+			]}
+			value={unit}
+			rightSectionWidth={28}
+			styles={{
+				input: {
+					fontWeight: 500,
+					borderTopLeftRadius: 0,
+					borderBottomLeftRadius: 0,
+					width: 120,
+					marginRight: -2,
+				},
+			}}
+			onChange={event => {
+				const unit = event.currentTarget.value as Timespan["unit"];
+				setUnit(unit);
+				onChange({ value: inputValue, unit });
+			}}
+		/>
+	);
+
+	return (
+		<NumberInput
+			label={label}
+			value={inputValue}
+			min={0}
+			max={999999}
+			precision={0}
+			rightSection={unitSelect}
+			rightSectionWidth={120}
+			onChange={value => {
+				const inputVal = value || 0;
+				setInputValue(inputVal);
+				onChange({ value: inputVal, unit });
+			}}
+			{...restProps}
+		/>
+	);
+};
+
+export default TimespanInput;

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -31,6 +31,7 @@ import { FileUpload } from "../../../types/File.type";
 import { CreateShare } from "../../../types/share.type";
 import { getExpirationPreview } from "../../../utils/date.util";
 import toast from "../../../utils/toast.util";
+import { Timespan } from "../../../types/timespan.type";
 
 const showCreateUploadModal = (
   modals: ModalsContextProps,
@@ -39,7 +40,7 @@ const showCreateUploadModal = (
     isReverseShare: boolean;
     allowUnauthenticatedShares: boolean;
     enableEmailRecepients: boolean;
-    maxExpirationInHours: number;
+    maxExpiration: Timespan;
     shareIdLength: number;
     simplified: boolean;
   },
@@ -112,7 +113,7 @@ const CreateUploadModalBody = ({
     isReverseShare: boolean;
     allowUnauthenticatedShares: boolean;
     enableEmailRecepients: boolean;
-    maxExpirationInHours: number;
+    maxExpiration: Timespan;
     shareIdLength: number;
   };
 }) => {
@@ -180,17 +181,17 @@ const CreateUploadModalBody = ({
       );
 
       if (
-        options.maxExpirationInHours != 0 &&
+        options.maxExpiration.value != 0 &&
         (form.values.never_expires ||
           expirationDate.isAfter(
-            moment().add(options.maxExpirationInHours, "hours"),
+            moment().add(options.maxExpiration.value, options.maxExpiration.unit),
           ))
       ) {
         form.setFieldError(
           "expiration_num",
           t("upload.modal.expires.error.too-long", {
             max: moment
-              .duration(options.maxExpirationInHours, "hours")
+              .duration(options.maxExpiration.value, options.maxExpiration.unit)
               .humanize(),
           }),
         );
@@ -327,7 +328,7 @@ const CreateUploadModalBody = ({
                   />
                 </Col>
               </Grid>
-              {options.maxExpirationInHours == 0 && (
+              {options.maxExpiration.value == 0 && (
                 <Checkbox
                   label={t("upload.modal.expires.never-long")}
                   {...form.getInputProps("never_expires")}
@@ -478,7 +479,7 @@ const SimplifiedCreateUploadModalModal = ({
     isReverseShare: boolean;
     allowUnauthenticatedShares: boolean;
     enableEmailRecepients: boolean;
-    maxExpirationInHours: number;
+    maxExpiration: Timespan;
     shareIdLength: number;
   };
 }) => {