feat: add react-hook-form + zod validation to all login forms

All login pages now use react-hook-form with zod resolver for
real-time validation:
- Email validated as proper email format on each keystroke
- Password required validation
- Red border + error message shown inline below invalid fields
- Submit button disabled until all fields are valid
- Input type="text" instead of type="email" to avoid browser tooltip

Also fixed:
- Gacha API trailing slash on /items/ and /credits/ causing 404s

Apps updated: hackathon, dimentorin, backoffice, qrcampaign, gacha

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -1,43 +1,40 @@
 import { useState } from 'react';
-import { useLogin } from '@imphnen-frontend-service/service';
+import { useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service';
 import { useNavigate } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
 export default function LoginPage() {
   const navigate = useNavigate();
   const loginMutation = useLogin();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleEmailLogin = async (e: React.FormEvent) => {
+  const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
-    e.preventDefault();
+    resolver: zodResolver(authLoginSchema),
+    mode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
     setError(null);
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
     try {
-      await loginMutation.mutateAsync({ email, password });
+      await loginMutation.mutateAsync(data);
       toast.success('Login successful!');
       navigate('/');
     } catch (err) {
       setError((err as Error).message || 'Login failed');
     }
-  };
+  });
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h2>
-            Welcome Back
+          <p className="text-gray-600 font-sans">Sign in to IMPHNEN Backoffice</p>
-          </h2>
-          <p className="text-gray-600 font-sans">
-            Sign in to IMPHNEN Backoffice
-          </p>
         </div>
 
         {error && (
@@ -46,63 +43,49 @@ export default function LoginPage() {
           </div>
         )}
 
-        <form onSubmit={handleEmailLogin} className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              Email
-            </label>
             <input
               id="email"
-              type="email"
+              type="text"
-              value={email}
+              {...register('email')}
-              onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
               disabled={loginMutation.isPending}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
+              className={`w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.email ? 'border-red-400' : 'border-gray-300'}`}
-              required
             />
+            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
           </div>
 
           <div>
-            <div className="flex items-center justify-between mb-1">
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">Password</label>
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                Password
-              </label>
-            </div>
             <div className="relative">
               <input
                 id="password"
                 type={showPassword ? 'text' : 'password'}
-                value={password}
+                {...register('password')}
-                onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
                 disabled={loginMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
+                className={`w-full px-4 py-2.5 pr-12 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.password ? 'border-red-400' : 'border-gray-300'}`}
-                required
               />
-              <button
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
                 <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
               </button>
             </div>
+            {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
           </div>
 
           <button
             type="submit"
-            disabled={loginMutation.isPending}
+            disabled={!isValid || loginMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors cursor-pointer"
           >
             {loginMutation.isPending ? 'Signing in...' : 'Sign in'}
           </button>
         </form>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 text-xs">By signing in, you agree to our Terms of Service and Privacy Policy</p>
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
         </div>
       </div>
     </div>

apps/dimentorin/src/app/auth/login/page.tsx

@@ -1,10 +1,9 @@
 import { useState, useEffect } from 'react';
-import {
+import { useGitHubAuth, useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service';
-  useGitHubAuth,
-  useLogin,
-} from '@imphnen-frontend-service/service';
 import { GithubOutlined } from '@ant-design/icons';
 import { useNavigate, Link } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
@@ -13,50 +12,43 @@ export default function LoginPage() {
   const { signInWithGitHub } = useGitHubAuth();
   const loginMutation = useLogin();
   const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
 
+  const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
+    resolver: zodResolver(authLoginSchema),
+    mode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  });
+
   useEffect(() => {
     const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
     const urlParams = new URLSearchParams(globalThis.location.search);
     const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
     const type = hashParams.get('type') || urlParams.get('type');
-    if (accessToken) {
+    if (accessToken && (type === 'recovery' || type === 'magiclink' || !type)) {
-      if (type === 'recovery' || type === 'magiclink' || !type) {
+      toast.info('Redirecting to password reset...');
-        toast.info('Redirecting to password reset...');
+      navigate('/auth/reset-password?access_token=' + accessToken);
-        navigate('/auth/reset-password?access_token=' + accessToken);
-      }
     }
   }, [navigate]);
 
-  const handleEmailLogin = async (e: React.FormEvent) => {
+  const onSubmit = handleSubmit(async (data) => {
-    e.preventDefault();
     setError(null);
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
     try {
-      await loginMutation.mutateAsync({ email, password });
+      await loginMutation.mutateAsync(data);
       toast.success('Login successful!');
       navigate('/dashboard');
     } catch (err) {
       setError((err as Error).message || 'Login failed');
     }
-  };
+  });
 
   const handleGithubLogin = async () => {
     try {
       setIsGithubLoading(true);
       const result = await signInWithGitHub();
-      if (result?.url) {
+      if (result?.url) globalThis.location.href = result.url;
-        globalThis.location.href = result.url;
+      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL'); }
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
     } catch (err) {
       setError((err as Error).message || 'GitHub login failed');
       setIsGithubLoading(false);
@@ -67,22 +59,15 @@ export default function LoginPage() {
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
-          <button
+          <button onClick={() => navigate('/')} className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
-          >
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
             Back to Homepage
           </button>
         </div>
 
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h2>
-            Welcome Back
+          <p className="text-gray-600 font-sans">Sign in to the mentoring platform</p>
-          </h2>
-          <p className="text-gray-600 font-sans">
-            Sign in to the mentoring platform
-          </p>
         </div>
 
         {error && (
@@ -91,58 +76,31 @@ export default function LoginPage() {
           </div>
         )}
 
-        <form onSubmit={handleEmailLogin} className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              Email
+            <input id="email" type="text" {...register('email')} placeholder="your@email.com" disabled={loginMutation.isPending}
-            </label>
+              className={`w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.email ? 'border-red-400' : 'border-gray-300'}`} />
-            <input
+            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={loginMutation.isPending}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
           </div>
 
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
-                Password
+              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">Forgot password?</Link>
-              </label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
-                Forgot password?
-              </Link>
             </div>
             <div className="relative">
-              <input
+              <input id="password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={loginMutation.isPending}
-                id="password"
+                className={`w-full px-4 py-2.5 pr-12 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.password ? 'border-red-400' : 'border-gray-300'}`} />
-                type={showPassword ? 'text' : 'password'}
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={loginMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-                required
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
                 <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
               </button>
             </div>
+            {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
           </div>
 
-          <button
+          <button type="submit" disabled={!isValid || loginMutation.isPending}
-            type="submit"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors cursor-pointer">
-            disabled={loginMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
             {loginMutation.isPending ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
@@ -153,37 +111,21 @@ export default function LoginPage() {
           <div className="flex-1 border-t border-gray-300"></div>
         </div>
 
-        <button
+        <button onClick={handleGithubLogin} disabled={isGithubLoading} type="button"
-          onClick={handleGithubLogin}
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer">
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
           <GithubOutlined className="text-xl" />
           <span>{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}</span>
         </button>
 
         <p className="mt-3 text-xs text-center text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
+          Make sure your GitHub email is <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">set to public</a> for GitHub sign in to work.
-          <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">
-            set to public
-          </a>{' '}
-          for GitHub sign in to work.
         </p>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 text-sm">Don't have an account? <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">Sign up</Link></p>
-            Don't have an account?{' '}
-            <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">
-              Sign up
-            </Link>
-          </p>
         </div>
-
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 text-xs">By signing in, you agree to our Terms of Service and Privacy Policy</p>
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
         </div>
       </div>
     </div>

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { useLogin } from '../../_hooks/use-login';
+import { authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service';
 import ModalFormVerifyEmail from './modal-form-verify-email';
 import { Icon } from '@iconify/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 
 interface IModalFormLogin {
   isOpen: boolean;
@@ -18,8 +21,7 @@ const ModalFormLogin = ({
   setIsOpenRegisterModal,
 }: IModalFormLogin) => {
   const {
-    form,
+    onSubmit: originalOnSubmit,
-    onSubmit,
     isLoading,
     showVerifyModal,
     verifyForm,
@@ -31,8 +33,15 @@ const ModalFormLogin = ({
 
   const [showPassword, setShowPassword] = useState(false);
 
-  const email = form.watch('email');
+  const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
-  const password = form.watch('password');
+    resolver: zodResolver(authLoginSchema),
+    mode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  });
+
+  const onSubmit = handleSubmit(() => {
+    originalOnSubmit();
+  });
 
   return (
     <>
@@ -43,86 +52,43 @@ const ModalFormLogin = ({
       >
         <Modal.Header>
           <div className="text-center mb-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-1">
+            <h2 className="text-2xl font-bold text-gray-900 mb-1">Welcome Back</h2>
-              Welcome Back
+            <p className="text-gray-600 text-sm">Sign in to IMPHNEN Gacha</p>
-            </h2>
-            <p className="text-gray-600 text-sm">
-              Sign in to IMPHNEN Gacha
-            </p>
           </div>
         </Modal.Header>
         <Modal.Content>
           <form className="space-y-4" onSubmit={onSubmit}>
             <div>
-              <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-                Email
+              <input id="login-email" type="text" {...register('email')} placeholder="your@email.com" disabled={isLoading}
-              </label>
+                className={`w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.email ? 'border-red-400' : 'border-gray-300'}`} />
-              <input
+              {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
-                id="login-email"
-                type="email"
-                {...form.register('email')}
-                placeholder="your@email.com"
-                disabled={isLoading}
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-              />
-              {form.formState.errors.email && (
-                <p className="text-red-500 text-xs mt-1">{form.formState.errors.email.message}</p>
-              )}
             </div>
 
             <div>
               <div className="flex items-center justify-between mb-1">
-                <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">Password</label>
-                  Password
+                <button type="button" onClick={onForgotPassword} className="text-sm text-primary-600 hover:text-primary-700 cursor-pointer">Forgot password?</button>
-                </label>
-                <button
-                  type="button"
-                  onClick={onForgotPassword}
-                  className="text-sm text-primary-600 hover:text-primary-700 cursor-pointer"
-                >
-                  Forgot password?
-                </button>
               </div>
               <div className="relative">
-                <input
+                <input id="login-password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={isLoading}
-                  id="login-password"
+                  className={`w-full px-4 py-2.5 pr-12 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.password ? 'border-red-400' : 'border-gray-300'}`} />
-                  type={showPassword ? 'text' : 'password'}
+                <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                  {...form.register('password')}
-                  placeholder="••••••••"
-                  disabled={isLoading}
-                  className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                >
                   <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
                 </button>
               </div>
-              {form.formState.errors.password && (
+              {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
-                <p className="text-red-500 text-xs mt-1">{form.formState.errors.password.message}</p>
-              )}
             </div>
 
-            <button
+            <button type="submit" disabled={!isValid || isLoading}
-              type="submit"
+              className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors cursor-pointer">
-              disabled={isLoading || !email || !password}
-              className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-            >
               {isLoading ? 'Signing in...' : 'Sign in'}
             </button>
 
             <div className="text-center pt-2">
               <p className="text-gray-600 text-sm">
                 Don't have an account?{' '}
-                <button
+                <button type="button" className="text-primary-600 hover:text-primary-700 font-semibold cursor-pointer" onClick={() => setIsOpenRegisterModal(true)}>Sign up</button>
-                  type="button"
-                  className="text-primary-600 hover:text-primary-700 font-semibold cursor-pointer"
-                  onClick={() => setIsOpenRegisterModal(true)}
-                >
-                  Sign up
-                </button>
               </p>
             </div>
           </form>

apps/hackathon/src/app/auth/login/page.tsx

@@ -2,9 +2,13 @@ import { useState, useEffect } from 'react';
 import {
   useGitHubAuth,
   useLogin,
+  authLoginSchema,
+  TLoginRequest,
 } from '@imphnen-frontend-service/service';
 import { GithubOutlined } from '@ant-design/icons';
 import { useNavigate, Link } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 import { ThemeToggle } from '../../../components/theme-toggle';
@@ -14,67 +18,44 @@ export default function LoginPage() {
   const { signInWithGitHub } = useGitHubAuth();
   const loginMutation = useLogin();
   const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
 
+  const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
+    resolver: zodResolver(authLoginSchema),
+    mode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  });
+
   useEffect(() => {
     const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
     const urlParams = new URLSearchParams(globalThis.location.search);
-
     const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
     const type = hashParams.get('type') || urlParams.get('type');
-
+    if (accessToken && (type === 'recovery' || type === 'magiclink' || !type)) {
-    if (accessToken) {
+      toast.info('Redirecting to password reset...');
-      console.log('[Login] Detected access_token, redirecting to reset-password page');
+      navigate('/auth/reset-password?access_token=' + accessToken);
-
-      if (type === 'recovery' || type === 'magiclink' || !type) {
-        toast.info('Redirecting to password reset...');
-        navigate('/auth/reset-password?access_token=' + accessToken);
-      }
     }
   }, [navigate]);
 
-  const handleEmailLogin = async (e: React.FormEvent) => {
+  const onSubmit = handleSubmit(async (data) => {
-    e.preventDefault();
     setError(null);
-
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
-
     try {
-      const result = await loginMutation.mutateAsync({ email, password });
+      const result = await loginMutation.mutateAsync(data);
-
       toast.success('Login successful!');
-
+      navigate(result.user.location ? '/dashboard' : '/onboarding/user');
-      if (result.user.location) {
-        navigate('/dashboard');
-      } else {
-        navigate('/onboarding/user');
-      }
     } catch (err) {
-      console.error('[Login] Email login failed:', err);
       setError((err as Error).message || 'Login failed');
     }
-  };
+  });
 
   const handleGithubLogin = async () => {
     try {
       setIsGithubLoading(true);
-
       const result = await signInWithGitHub();
-
+      if (result?.url) globalThis.location.href = result.url;
-      if (result?.url) {
+      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL'); }
-        globalThis.location.href = result.url;
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
     } catch (err) {
-      console.error('[Login] GitHub login failed:', err);
       setError((err as Error).message || 'GitHub login failed');
       setIsGithubLoading(false);
     }
@@ -84,10 +65,7 @@ export default function LoginPage() {
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
-          <button
+          <button onClick={() => navigate('/')} className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
-          >
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
             Back to Homepage
           </button>
@@ -95,12 +73,8 @@ export default function LoginPage() {
         </div>
 
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h2>
-            Welcome Back
+          <p className="text-gray-600 font-sans">Sign in to join or create your hackathon team</p>
-          </h2>
-          <p className="text-gray-600 font-sans">
-            Sign in to join or create your hackathon team
-          </p>
         </div>
 
         {error && (
@@ -109,120 +83,56 @@ export default function LoginPage() {
           </div>
         )}
 
-        <form onSubmit={handleEmailLogin} className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
           <div>
-            <label
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              htmlFor="email"
+            <input id="email" type="text" {...register('email')} placeholder="your@email.com" disabled={loginMutation.isPending}
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className={`w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.email ? 'border-red-400' : 'border-gray-300'}`} />
-            >
+            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={loginMutation.isPending}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
           </div>
 
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
-                htmlFor="password"
+              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">Forgot password?</Link>
-                className="block text-sm font-medium text-gray-700"
-              >
-                Password
-              </label>
-              <Link
-                to="/auth/forgot-password"
-                className="text-sm text-primary-600 hover:text-primary-700"
-              >
-                Forgot password?
-              </Link>
             </div>
             <div className="relative">
-              <input
+              <input id="password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={loginMutation.isPending}
-                id="password"
+                className={`w-full px-4 py-2.5 pr-12 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.password ? 'border-red-400' : 'border-gray-300'}`} />
-                type={showPassword ? 'text' : 'password'}
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={loginMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-                required
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
                 <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
               </button>
             </div>
+            {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
           </div>
 
-          <button
+          <button type="submit" disabled={!isValid || loginMutation.isPending}
-            type="submit"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors cursor-pointer">
-            disabled={loginMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
             {loginMutation.isPending ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
 
         <div className="my-6 flex items-center">
           <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">
+          <span className="px-4 text-sm text-gray-500">OR</span>
-            OR
-          </span>
           <div className="flex-1 border-t border-gray-300"></div>
         </div>
 
-        <button
+        <button onClick={handleGithubLogin} disabled={isGithubLoading} type="button"
-          onClick={handleGithubLogin}
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer">
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
           <GithubOutlined className="text-xl" />
-          <span>
+          <span>{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}</span>
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
         </button>
 
         <p className="mt-3 text-xs text-center text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
+          Make sure your GitHub email is <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">set to public</a> for GitHub sign in to work.
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign in to work.
         </p>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 text-sm">Don't have an account? <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">Sign up</Link></p>
-            Don't have an account?{' '}
-            <Link
-              to="/auth/signup"
-              className="text-primary-600 hover:text-primary-700 font-semibold"
-            >
-              Sign up
-            </Link>
-          </p>
         </div>
-
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 text-xs">By signing in, you agree to our Terms of Service and Privacy Policy</p>
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
         </div>
       </div>
     </div>

apps/qrcampaign/src/app/auth/login/page.tsx

@@ -4,75 +4,50 @@ import { useNavigate, Link } from 'react-router';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 import { useAuthStore } from '../../features/auth/store/auth.store';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const loginSchema = z.object({
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email'),
+  password: z.string().min(1, 'Password is required'),
+});
+type LoginForm = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
   const navigate = useNavigate();
   const login = useAuthStore((state) => state.login);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-
   const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  useEffect(() => {
+  const { register, handleSubmit, formState: { errors, isValid } } = useForm<LoginForm>({
-    if (isAuthenticated) {
+    resolver: zodResolver(loginSchema),
-      navigate('/');
+    mode: 'onChange',
-    }
+    defaultValues: { email: '', password: '' },
-  }, [isAuthenticated, navigate]);
+  });
 
-  useEffect(() => {
+  useEffect(() => { if (isAuthenticated) navigate('/'); }, [isAuthenticated, navigate]);
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const urlParams = new URLSearchParams(globalThis.location.search);
-    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-    const type = hashParams.get('type') || urlParams.get('type');
-    if (accessToken) {
-      if (type === 'recovery' || type === 'magiclink' || !type) {
-        toast.info('Redirecting to password reset...');
-        navigate('/auth/reset-password?access_token=' + accessToken);
-      }
-    }
-  }, [navigate]);
 
-  const handleEmailLogin = async (e: React.FormEvent) => {
+  const onSubmit = handleSubmit(async (data) => {
-    e.preventDefault();
     setError(null);
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
     setIsSubmitting(true);
     try {
-      const success = await login(email, password);
+      const success = await login(data.email, data.password);
-      if (success) {
+      if (success) { toast.success('Login successful!'); navigate('/'); }
-        toast.success('Login successful!');
+      else setError('Login failed. Please check your credentials.');
-        navigate('/');
+    } catch { setError('Login failed. Please try again.'); }
-      } else {
+    finally { setIsSubmitting(false); }
-        setError('Login failed. Please check your credentials.');
+  });
-      }
-    } catch (err) {
-      setError('Login failed. Please try again.');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    toast.info('GitHub login coming soon');
-  };
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h2>
-            Welcome Back
+          <p className="text-gray-600 font-sans">Sign in to QR Campaign Manager</p>
-          </h2>
-          <p className="text-gray-600 font-sans">
-            Sign in to QR Campaign Manager
-          </p>
         </div>
 
         {error && (
@@ -81,58 +56,31 @@ export default function LoginPage() {
           </div>
         )}
 
-        <form onSubmit={handleEmailLogin} className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              Email
+            <input id="email" type="text" {...register('email')} placeholder="your@email.com" disabled={isSubmitting}
-            </label>
+              className={`w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.email ? 'border-red-400' : 'border-gray-300'}`} />
-            <input
+            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={isSubmitting}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
           </div>
 
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
-                Password
+              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">Forgot password?</Link>
-              </label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
-                Forgot password?
-              </Link>
             </div>
             <div className="relative">
-              <input
+              <input id="password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={isSubmitting}
-                id="password"
+                className={`w-full px-4 py-2.5 pr-12 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed ${errors.password ? 'border-red-400' : 'border-gray-300'}`} />
-                type={showPassword ? 'text' : 'password'}
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={isSubmitting}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
-                required
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-              >
                 <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
               </button>
             </div>
+            {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
           </div>
 
-          <button
+          <button type="submit" disabled={!isValid || isSubmitting}
-            type="submit"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors cursor-pointer">
-            disabled={isSubmitting}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
             {isSubmitting ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
@@ -143,37 +91,17 @@ export default function LoginPage() {
           <div className="flex-1 border-t border-gray-300"></div>
         </div>
 
-        <button
+        <button onClick={() => toast.info('GitHub login coming soon')} disabled={isGithubLoading} type="button"
-          onClick={handleGithubLogin}
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer">
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
           <GithubOutlined className="text-xl" />
           <span>{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}</span>
         </button>
 
-        <p className="mt-3 text-xs text-center text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
-          <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">
-            set to public
-          </a>{' '}
-          for GitHub sign in to work.
-        </p>
-
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 text-sm">Don't have an account? <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">Sign up</Link></p>
-            Don't have an account?{' '}
-            <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">
-              Sign up
-            </Link>
-          </p>
         </div>
-
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 text-xs">By signing in, you agree to our Terms of Service and Privacy Policy</p>
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
         </div>
       </div>
     </div>

libs/service/src/api/gacha/index.ts

@@ -14,7 +14,7 @@ import type { TApiPaginated, TPaginationParams } from '../../types/common';
 
 // ----- Credits -----
 export const getUserCredits = async (): Promise<TGachaCreditDto> => {
-  const response = await api.get<ApiResponse<TGachaCreditDto>>('/v1/gacha/credits/');
+  const response = await api.get<ApiResponse<TGachaCreditDto>>('/v1/gacha/credits');
   return response.data.data;
 };
 
@@ -30,7 +30,7 @@ export const consumeCredit = async (): Promise<{ message: string }> => {
 
 // ----- Items -----
 export const getGachaItemList = async (params?: TPaginationParams): Promise<TApiPaginated<TGachaItemDto>> => {
-  const response = await api.get<TApiPaginated<TGachaItemDto>>('/v1/gacha/items/', { params });
+  const response = await api.get<TApiPaginated<TGachaItemDto>>('/v1/gacha/items', { params });
   return response.data;
 };