feat: setup UI improvements (and add S3 to UI)

tailwind2.css

@@ -4,6 +4,22 @@
 
 @layer base {}
 
-@layer components {}
+@layer components {
+	.setup-text-section-header {
+		@apply text-2xl font-bold font-mono;
+	}
+
+	.setup-text-item-title {
+		@apply text-stone-300;
+	}
+
+	.setup-text-optional {
+		@apply text-stone-400 italic;
+	}
+
+	.setup-panel>sl-input {
+		@apply mb-4;
+	}
+}
 
 @layer utilities {}

views2/setup.pug

@@ -12,17 +12,44 @@ html.dark.sl-theme-dark(lang='en')
 		+slTheme('dark')
 		//- Shoelace components
 		+slComponents('input', 'icon', 'button')
-	body.w-screen.h-screen.flex.items-center.justify-center
-		.w-full.md_max-w-xl.flex.flex-col.p-2.md_p-8.items-center
-			h1.text-3xl.font-bold.font-mono.mb-4 ass setup
-			p.text-lg.mb-6 Welcome to ass, your new personal file upload server!
+	body.w-screen.h-screen.flex.flex-col
 
-			sl-input.w-96.mb-2#dir(type='text' label='Uploads directory' placeholder='/opt/ass/uploads' clearable): sl-icon(slot='prefix' name='fas-folders' library='fa')
-			.flex.mb-2.gap-4.justify-center
-				sl-input.w-44#idtype(type='text' label='ID type' placeholder='random'): sl-icon(slot='prefix' name='fas-input-text' library='fa')
-				sl-input.w-44#idsize(type='number' label='ID size' placeholder='8'): sl-icon(slot='prefix' name='fas-hashtag' library='fa')
-			.flex.mb-2.gap-4.justify-center
-				sl-input.w-44#gfysize(type='number' label='Gfycat size' placeholder='3'): sl-icon(slot='prefix' name='fas-cat' library='fa')
-				sl-input.w-44#filesize(type='number' label='Maximum file size (MB)' placeholder='50'): sl-icon(slot='prefix' name='fas-file' library='fa')
-			sl-button.w-32.mt-2.self-center#submit(type='primary' submit) Submit
+		//- Header
+		.w-full.border-b.border-stone-500.flex.justify-center.items-center.py-3
+			h1.text-4xl.font-bold.font-mono ass setup
+
+		//- Centering width-fixer
+		.w-full.flex.justify-center: .w-full.md_max-w-xl.px-4.pt-16
+
+			//- Setup panel
+			.flex.flex-col.items-center
+				p.text-lg.mb-4 Welcome to ass, your new personal file upload server!
+
+				h2.setup-text-section-header.mt-12 Upload configuration
+				.flex.flex-col.setup-panel.pt-4
+					h3.setup-text-item-title Uploads directory
+					sl-input#dir(type='text' placeholder='/opt/ass/uploads' clearable): sl-icon(slot='prefix' name='fas-folders' library='fa')
+					h3.setup-text-item-title ID type
+					sl-input#idtype(type='text' placeholder='random'): sl-icon(slot='prefix' name='fas-input-text' library='fa')
+					h3.setup-text-item-title ID size
+					sl-input#idsize(type='number' placeholder='8'): sl-icon(slot='prefix' name='fas-hashtag' library='fa')
+					h3.setup-text-item-title Gfycat size
+					sl-input#gfysize(type='number' placeholder='3'): sl-icon(slot='prefix' name='fas-cat' library='fa')
+					h3.setup-text-item-title Maximum file size (MB)
+					sl-input#filesize(type='number' placeholder='50'): sl-icon(slot='prefix' name='fas-file' library='fa')
+
+				h2.setup-text-section-header.mt-4 S3 #[span.setup-text-optional optional]
+				.flex.flex-col.setup-panel.pt-4
+					h3.setup-text-item-title Endpoint
+					sl-input#s3-endpoint(type='text' placeholder='https://s3.example.com' clearable): sl-icon(slot='prefix' name='fas-server' library='fa')
+					h3.setup-text-item-title Bucket
+					sl-input#s3-bucket(type='text' placeholder='ass-bucket' clearable): sl-icon(slot='prefix' name='fas-bucket' library='fa')
+					h3.setup-text-item-title Access key
+					sl-input#s3-accessKey(type='text' placeholder='ABCD1234' clearable): sl-icon(slot='prefix' name='fas-key-skeleton' library='fa')
+					h3.setup-text-item-title Secret key
+					sl-input#s3-secretKey(type='text' placeholder='EF56GH78IJ90KL12' clearable): sl-icon(slot='prefix' name='fas-user-secret' library='fa')
+					h3.setup-text-item-title Region #[span.setup-text-optional optional]
+					sl-input#s3-region(type='text' placeholder='us-east' clearable): sl-icon(slot='prefix' name='fas-map-location-dot' library='fa')
+
+				sl-button.w-32.mt-2.self-center#submit(type='primary' submit) Submit
 		script(src='/setup/ui.js')