ligun and sogup

src/pages/LoginPage.tsx

@@ -0,0 +1,85 @@
+import { useRef, useState, FormEvent } from 'react'
+import SingleColumnLayout from '../layouts/SingleColumnLayout.tsx'
+import TextInput from '../components/TextInput.tsx'
+import PrimaryButton from '../components/PrimaryButton.tsx'
+import { AuthService } from '../auth/authService.ts'
+
+interface LoginPageProps {
+  authService: AuthService
+}
+
+export default function LoginPage({ authService }: LoginPageProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const usernameInputRef = useRef<HTMLInputElement | null>(null)
+  const passwordInputRef = useRef<HTMLInputElement | null>(null)
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!username) {
+      setError("you didn't username D:<")
+      return
+    }
+
+    if (!password) {
+      setError("you didn't password D:<")
+      return
+    }
+
+    setError(null)
+
+    setIsSubmitting(true)
+
+    try {
+      const loginResult = await authService.login(username, password)
+    } catch (error: unknown) {
+      setError(error instanceof Error ? error.message : 'something went terribly wrong')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <SingleColumnLayout>
+      <main className="w-full mx-auto p-4">
+        <div className="mt-12">
+          <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
+            <div className="flex flex-col gap-1">
+              <label htmlFor="username" className="text-sm text-gray-600">
+                username
+              </label>
+              <TextInput
+                ref={usernameInputRef}
+                id="username"
+                value={username}
+                onInput={setUsername}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <label htmlFor="password" className="text-sm text-gray-600">
+                password
+              </label>
+              <TextInput
+                ref={passwordInputRef}
+                type="password"
+                id="password"
+                value={password}
+                onInput={setPassword}
+              />
+            </div>
+
+            <PrimaryButton className="mt-4" disabled={isSubmitting} type="submit">
+              {isSubmitting ? 'wait...' : 'make login pls'}
+            </PrimaryButton>
+
+            <span className="text-xs h-3 text-red-500">{error}</span>
+          </form>
+        </div>
+      </main>
+    </SingleColumnLayout>
+  )
+}