feat: add captcha support for user login and enhance user profile page

- Refactored userLogin function to include captcha handling.
- Introduced getCaptchaConfig API to fetch captcha configuration.
- Added Captcha component to handle different captcha providers (hCaptcha, reCaptcha, Turnstile).
- Updated LoginForm component to integrate captcha verification.
- Created UserProfile component to display user information with avatar.
- Implemented getUserByUsername API to fetch user details by username.
- Removed deprecated LoginRequest interface from user model.
- Enhanced navbar and layout with animation effects.
- Removed unused user page component and added dynamic user profile routing.
- Updated localization files to include captcha-related messages.
- Improved Gravatar component for better avatar handling.

web/src/api/user.ts

@@ -1,14 +1,26 @@
 import type { OidcConfig } from '@/models/oidc-config'
 import type { BaseResponse } from '@/models/resp'
-import type { LoginRequest, RegisterRequest, User } from '@/models/user'
+import type {  RegisterRequest, User } from '@/models/user'
 import axiosClient from './client'
+import { CaptchaProvider } from '@/models/captcha'
 
 export async function userLogin(
-  data: LoginRequest,
-): Promise<BaseResponse<{ token: string, user: User }>> {
+  {
+    username,
+    password,
+    rememberMe,
+    captcha
+  }: {
+    username: string,
+    password: string,
+    rememberMe?: boolean,
+    captcha?: string,
+  }): Promise<BaseResponse<{ token: string, user: User }>> {
+  console.log("Logging in with captcha:", captcha)
   const res = await axiosClient.post<BaseResponse<{ token: string, user: User }>>(
     '/user/login',
-    data,
+    { username, password, rememberMe },
+    { headers: { 'X-Captcha-Token': captcha || '' } },
   )
   return res.data
 }
@@ -43,3 +55,21 @@ export async function getUserById(id: number): Promise<BaseResponse<User>> {
   const res = await axiosClient.get<BaseResponse<User>>(`/user/u/${id}`)
   return res.data
 }
+
+export async function getUserByUsername(username: string): Promise<BaseResponse<User>> {
+  const res = await axiosClient.get<BaseResponse<User>>(`/user/username/${username}`)
+  return res.data
+}
+
+export async function getCaptchaConfig(): Promise<BaseResponse<{
+  provider: CaptchaProvider
+  siteKey: string
+  url?: string
+}>> {
+  const res = await axiosClient.get<BaseResponse<{
+    provider: CaptchaProvider
+    siteKey: string
+    url?: string
+  }>>('/user/captcha')
+  return res.data
+}