add domain parameter to createS3Storage and update related components

frontend/src/network/network.ts

@@ -448,8 +448,14 @@ class Network {
     }
   }
 
-  async createS3Storage(name: string, endPoint: string, accessKeyID: string,
-    secretAccessKey: string, bucketName: string, maxSizeInMB: number): Promise<Response<any>> {
+  async createS3Storage(
+    name: string, 
+    endPoint: string, 
+    accessKeyID: string,
+    secretAccessKey: string, 
+    bucketName: string, 
+    maxSizeInMB: number,
+    domain: string): Promise<Response<any>> {
     try {
       const response = await axios.post(`${this.apiBaseUrl}/storage/s3`, {
         name,
@@ -457,7 +463,8 @@ class Network {
         accessKeyID,
         secretAccessKey,
         bucketName,
-        maxSizeInMB
+        maxSizeInMB,
+        domain
       });
       return response.data;
     } catch (e: any) {

frontend/src/pages/manage_storage_page.tsx

@@ -1,10 +1,10 @@
-import {useEffect, useState} from "react";
-import {Storage} from "../network/models.ts";
-import {network} from "../network/network.ts";
+import { useEffect, useState } from "react";
+import { Storage } from "../network/models.ts";
+import { network } from "../network/network.ts";
 import showToast from "../components/toast.ts";
 import Loading from "../components/loading.tsx";
-import {MdAdd, MdDelete} from "react-icons/md";
-import {ErrorAlert} from "../components/alert.tsx";
+import { MdAdd, MdDelete } from "react-icons/md";
+import { ErrorAlert } from "../components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { app } from "../app.ts";
 
@@ -30,15 +30,15 @@ export default function StorageView() {
   }, []);
 
   if (!app.user) {
-    return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")}/>
+    return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")} />
   }
 
   if (!app.user?.is_admin) {
-    return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")}/>
+    return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")} />
   }
 
   if (storages == null) {
-    return <Loading/>
+    return <Loading />
   }
 
   const updateStorages = async () => {
@@ -77,9 +77,9 @@ export default function StorageView() {
   return <>
     <div role="alert" className={`alert alert-info alert-outline ${storages.length !== 0 && "hidden"} mx-4 mb-4`}>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-           className="h-6 w-6 shrink-0 stroke-current">
+        className="h-6 w-6 shrink-0 stroke-current">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
       </svg>
       <span>
         {t("No storage found. Please create a new storage.")}
@@ -88,60 +88,60 @@ export default function StorageView() {
     <div className={`rounded-box border border-base-content/10 bg-base-100 mx-4 mb-4 overflow-x-auto ${storages.length === 0 ? "hidden" : ""}`}>
       <table className={"table"}>
         <thead>
-        <tr>
-          <td>{t("Name")}</td>
-          <td>{t("Created At")}</td>
-          <td>{t("Space")}</td>
-          <td>{t("Action")}</td>
-        </tr>
+          <tr>
+            <td>{t("Name")}</td>
+            <td>{t("Created At")}</td>
+            <td>{t("Space")}</td>
+            <td>{t("Action")}</td>
+          </tr>
         </thead>
         <tbody>
-        {
-          storages.map((s) => {
-            return <tr key={s.id} className={"hover"}>
-              <td>
-                {s.name}
-              </td>
-              <td>
-                {(new Date(s.createdAt)).toLocaleString()}
-              </td>
-              <td>
-                {(s.currentSize/1024/1024).toFixed(2)} / {s.maxSize/1024/1024} MB
-              </td>
-              <td>
-                <button className={"btn btn-square"} type={"button"} onClick={() => {
-                  const dialog = document.getElementById(`confirm_delete_dialog_${s.id}`) as HTMLDialogElement;
-                  dialog.showModal();
-                }}>
-                  {loadingId === s.id ? <span className={"loading loading-spinner loading-sm"}></span> : <MdDelete size={24}/>}
-                </button>
-                <dialog id={`confirm_delete_dialog_${s.id}`} className="modal">
-                  <div className="modal-box">
-                    <h3 className="text-lg font-bold">{t("Delete Storage")}</h3>
-                    <p className="py-4">
-                      {t("Are you sure you want to delete this storage? This action cannot be undone.")}
-                    </p>
-                    <div className="modal-action">
-                      <form method="dialog">
-                        <button className="btn">{t("Cancel")}</button>
-                      </form>
-                      <button className="btn btn-error" onClick={() => {
-                        handleDelete(s.id);
-                      }}>
-                        {t("Delete")}
-                      </button>
+          {
+            storages.map((s) => {
+              return <tr key={s.id} className={"hover"}>
+                <td>
+                  {s.name}
+                </td>
+                <td>
+                  {(new Date(s.createdAt)).toLocaleString()}
+                </td>
+                <td>
+                  {(s.currentSize / 1024 / 1024).toFixed(2)} / {s.maxSize / 1024 / 1024} MB
+                </td>
+                <td>
+                  <button className={"btn btn-square"} type={"button"} onClick={() => {
+                    const dialog = document.getElementById(`confirm_delete_dialog_${s.id}`) as HTMLDialogElement;
+                    dialog.showModal();
+                  }}>
+                    {loadingId === s.id ? <span className={"loading loading-spinner loading-sm"}></span> : <MdDelete size={24} />}
+                  </button>
+                  <dialog id={`confirm_delete_dialog_${s.id}`} className="modal">
+                    <div className="modal-box">
+                      <h3 className="text-lg font-bold">{t("Delete Storage")}</h3>
+                      <p className="py-4">
+                        {t("Are you sure you want to delete this storage? This action cannot be undone.")}
+                      </p>
+                      <div className="modal-action">
+                        <form method="dialog">
+                          <button className="btn">{t("Cancel")}</button>
+                        </form>
+                        <button className="btn btn-error" onClick={() => {
+                          handleDelete(s.id);
+                        }}>
+                          {t("Delete")}
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </dialog>
-              </td>
-            </tr>
-          })
-        }
+                  </dialog>
+                </td>
+              </tr>
+            })
+          }
         </tbody>
       </table>
     </div>
     <div className={"flex flex-row-reverse px-4"}>
-      <NewStorageDialog onAdded={updateStorages}/>
+      <NewStorageDialog onAdded={updateStorages} />
     </div>
   </>
 }
@@ -151,7 +151,7 @@ enum StorageType {
   s3,
 }
 
-function NewStorageDialog({onAdded}: { onAdded: () => void }) {
+function NewStorageDialog({ onAdded }: { onAdded: () => void }) {
   const { t } = useTranslation();
   const [storageType, setStorageType] = useState<StorageType | null>(null);
 
@@ -163,6 +163,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
     secretAccessKey: "",
     bucketName: "",
     maxSizeInMB: 0,
+    domain: "",
   });
 
   const [isLoading, setIsLoading] = useState(false);
@@ -189,7 +190,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
         setIsLoading(false);
         return;
       }
-      response = await network.createS3Storage(params.name, params.endPoint, params.accessKeyID, params.secretAccessKey, params.bucketName, params.maxSizeInMB);
+      response = await network.createS3Storage(params.name, params.endPoint, params.accessKeyID, params.secretAccessKey, params.bucketName, params.maxSizeInMB, params.domain);
     }
 
     if (response!.success) {
@@ -206,11 +207,11 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
   }
 
   return <>
-    <button className="btn" onClick={()=> {
+    <button className="btn" onClick={() => {
       const dialog = document.getElementById("new_storage_dialog") as HTMLDialogElement;
       dialog.showModal();
     }}>
-      <MdAdd/>
+      <MdAdd />
       {t("New Storage")}
     </button>
     <dialog id="new_storage_dialog" className="modal">
@@ -221,13 +222,13 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
         <form className="filter mb-2">
           <input className="btn btn-square" type="reset" value="×" onClick={() => {
             setStorageType(null);
-          }}/>
+          }} />
           <input className="btn" type="radio" name="type" aria-label={t("Local")} onInput={() => {
             setStorageType(StorageType.local);
-          }}/>
+          }} />
           <input className="btn" type="radio" name="type" aria-label={t("S3")} onInput={() => {
             setStorageType(StorageType.s3);
-          }}/>
+          }} />
         </form>
 
         {
@@ -239,7 +240,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   name: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Path")}
@@ -248,7 +249,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   path: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Max Size (MB)")}
@@ -278,7 +279,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   name: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Endpoint")}
@@ -287,7 +288,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   endPoint: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Access Key ID")}
@@ -296,7 +297,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   accessKeyID: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Secret Access Key")}
@@ -305,7 +306,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   secretAccessKey: e.target.value,
                 })
-              }}/>
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Bucket Name")}
@@ -314,7 +315,16 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
                   ...params,
                   bucketName: e.target.value,
                 })
-              }}/>
+              }} />
+            </label>
+            <label className="input w-full my-2">
+              {t("Domain")}
+              <input type="text" placeholder={t("Optional")} className="w-full" value={params.domain} onChange={(e) => {
+                setParams({
+                  ...params,
+                  domain: e.target.value,
+                })
+              }} />
             </label>
             <label className="input w-full my-2">
               {t("Max Size (MB)")}
@@ -335,7 +345,7 @@ function NewStorageDialog({onAdded}: { onAdded: () => void }) {
           </>
         }
 
-        {error !== "" && <ErrorAlert message={error} className={"my-2"}/>}
+        {error !== "" && <ErrorAlert message={error} className={"my-2"} />}
 
         <div className="modal-action">
           <form method="dialog">