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/components/comment/comment-input.tsx

@@ -3,7 +3,7 @@ import { User } from "@/models/user";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { toast } from "sonner";
-import { getGravatarByUser } from "@/components/common/gravatar";
+import GravatarAvatar, { getGravatarByUser } from "@/components/common/gravatar";
 import { CircleUser } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox"
@@ -60,7 +60,7 @@ export function CommentInput(
     <div className="fade-in-up">
       <div className="flex py-4 fade-in">
         <div onClick={user ? () => clickToUserProfile(user.username) : clickToLogin} className="cursor-pointer flex-shrink-0 w-10 h-10 fade-in">
-          {user ? getGravatarByUser(user) : null}
+          {user && <GravatarAvatar url={user.avatarUrl} email={user.email} size={100}/>}
           {!user && <CircleUser className="w-full h-full fade-in" />}
         </div>
         <div className="flex-1 pl-2 fade-in-up">

web/src/components/comment/comment-item.tsx

@@ -3,7 +3,7 @@ import { User } from "@/models/user";
 import { useLocale, useTranslations } from "next-intl";
 import { useState } from "react";
 import { toast } from "sonner";
-import { getGravatarByUser } from "@/components/common/gravatar";
+import GravatarAvatar, { getGravatarByUser } from "@/components/common/gravatar";
 import { Reply, Trash, Heart, Pencil, Lock } from "lucide-react";
 import { Comment } from "@/models/comment";
 import { TargetType } from "@/models/types";
@@ -158,8 +158,8 @@ export function CommentItem(
   return (
     <div>
       <div className="flex">
-        <div onClick={() => clickToUserProfile(comment.user.username)} className="cursor-pointer fade-in">
-          {getGravatarByUser(comment.user)}
+        <div onClick={() => clickToUserProfile(comment.user.username)} className="cursor-pointer fade-in w-12 h-12">
+          <GravatarAvatar email={comment.user.email} size={120}/>
         </div>
         <div className="flex-1 pl-2 fade-in-up">
           <div className="flex gap-2 md:gap-4 items-center">