changed style of SaveFileUploadingDialog

src/app/globals.css

@@ -15,7 +15,6 @@ html,
 body {
     max-width: 100vw;
     overflow-x: hidden;
-    padding: 10px;
 }
 
 body {

src/components/SaveFileUploadingDialog.tsx

@@ -9,6 +9,9 @@ export enum GameEnum {
     Stellaris = 'stellaris',
 }
 
+//TODO: move to separate page
+//TODO: add redirect to ?id={id} to see status of long parsing save
+
 export default function SaveFileUploadingDialog() {
     const [error, setError] = useState<string | null>(null)
     const [selectedFile, setSelectedFile] = useState<File | null>(null)
@@ -27,7 +30,8 @@ export default function SaveFileUploadingDialog() {
         }
     }
 
-    const handleUpload = async () => {
+    const handleUpload = async (e: React.FormEvent) => {
+        e.preventDefault()
         setError(null)
         setUploadDisabled(true)
         try {
@@ -70,40 +74,54 @@ export default function SaveFileUploadingDialog() {
 
     return (
         <div className="container mt-5" style={{ maxWidth: '500px' }}>
-            <h3 className="mb-2 fw-semibold">Select game save file</h3>
             <FormError message={error} />
 
-            <div className="row align-items-center mb-3">
+            <form onSubmit={handleUpload} className="text-start">
-                <div className="col-auto">Select Game</div>
+                <label htmlFor="gameSelect" className="form-label">
-                <select id="gameSelect" className="col-auto" value={game} onChange={handleGameSelect}>
+                    Select Game
+                </label>
+                <select
+                    id="gameSelect"
+                    name="gameSelect"
+                    className="form-select mb-3"
+                    value={game}
+                    onChange={handleGameSelect}
+                    required
+                >
                     {gameEnumOptions}
                 </select>
-            </div>
 
-            <div className="row align-items-center mb-3">
+                <label htmlFor="fileInput" className="form-label">
-                <div className="col-auto">File</div>
+                    Select File
-                <input id="fileInput" type="file" className="col-auto" onChange={handleFileChange} />
+                </label>
-            </div>
+                <input id="fileInput" type="file" className="form-control mb-3" onChange={handleFileChange} />
 
-            <button className="btn btn-primary" onClick={handleUpload} disabled={!selectedFile || uploadDisabled}>
+                <button
+                    className="btn btn-primary w-100 mt-1 mb-3"
+                    type="submit"
+                    disabled={!selectedFile || uploadDisabled}
+                >
                     Upload File
                 </button>
+            </form>
 
+            <div className="container mt-5 text-center">
                 {/* TODO: extract this to a component 
                 <ConditionalView cond={uploadResult}> <LabeledValue val={}/> </ConditionalView> */}
                 {uploadResult && (
-                <div className="mt-3">
+                    <div className="mb-3">
                         Save Id: <strong>{uploadResult.id}</strong>
                     </div>
                 )}
 
                 {saveStatus && (
-                <div className="mt-3">
+                    <div className="mb-3">
                         Status: <strong>{saveStatus.status}</strong>
                     </div>
                 )}
 
                 {/* add link to <ConditionalView cond={done}> /browse?id=${saveStatus.id} */}
             </div>
+        </div>
     )
 }

src/services/AuthService.ts

@@ -1,3 +1,5 @@
+//TODO: controllable rate limits
+
 class AuthService {
     private API_BASE = '/api/auth'
 

src/services/SaveParserBackendService.ts

@@ -22,6 +22,7 @@ export class SaveParserBackendService {
         return ''
     }
 
+    //TODO: save size limit 30 mb
     async uploadSave(game: string, file: File): Promise<UploadSaveResponse> {
         const url = `${this.API_BASE}/uploadSave?game=${encodeURIComponent(game)}`
         const response = await fetch(url, {