refactor: migrate key forms to shadcn field

frontend/src/features/auth/LoginPage.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { AlertCircle, LockKeyhole, UserRound } from 'lucide-react'
 
+import { AppField } from '@/components/app/AppField'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 
 import { useAuth } from './AuthProvider'
 
@@ -70,33 +70,33 @@ export function LoginPage() {
                     <AlertDescription>{error}</AlertDescription>
                   </Alert>
                 ) : null}
-                <div className="grid gap-2">
-                  <Label htmlFor="username">账号</Label>
+                <AppField label="账号" htmlFor="username" invalid={Boolean(error)} required>
                   <div className="relative">
                     <UserRound className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="username"
                       autoComplete="username"
+                      aria-invalid={Boolean(error)}
                       className="pl-9"
                       value={username}
                       onChange={(event) => setUsername(event.target.value)}
                     />
                   </div>
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">密码</Label>
+                </AppField>
+                <AppField label="密码" htmlFor="password" invalid={Boolean(error)} required>
                   <div className="relative">
                     <LockKeyhole className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="password"
                       type="password"
                       autoComplete="current-password"
+                      aria-invalid={Boolean(error)}
                       className="pl-9"
                       value={password}
                       onChange={(event) => setPassword(event.target.value)}
                     />
                   </div>
-                </div>
+                </AppField>
                 <Button type="submit" className="mt-1 w-full" disabled={submitting}>
                   {submitting ? '登录中...' : '登录'}
                 </Button>