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>
This commit is contained in:
maulanasdqn
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
e61c003e07
commit
61b650bb25
@@ -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,
|
||||
onSubmit: originalOnSubmit,
|
||||
isLoading,
|
||||
showVerifyModal,
|
||||
verifyForm,
|
||||
@@ -31,8 +33,15 @@ const ModalFormLogin = ({
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const email = form.watch('email');
|
||||
const password = form.watch('password');
|
||||
const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
|
||||
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">
|
||||
Welcome Back
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Sign in to IMPHNEN Gacha
|
||||
</p>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-1">Welcome Back</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">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
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>
|
||||
)}
|
||||
<label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input id="login-email" type="text" {...register('email')} placeholder="your@email.com" disabled={isLoading}
|
||||
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>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
|
||||
Password
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onForgotPassword}
|
||||
className="text-sm text-primary-600 hover:text-primary-700 cursor-pointer"
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
<label htmlFor="login-password" className="block text-sm font-medium text-gray-700">Password</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
|
||||
id="login-password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
{...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"
|
||||
>
|
||||
<input id="login-password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={isLoading}
|
||||
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'}`} />
|
||||
<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 && (
|
||||
<p className="text-red-500 text-xs mt-1">{form.formState.errors.password.message}</p>
|
||||
)}
|
||||
{errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>
|
||||
<button type="submit" disabled={!isValid || isLoading}
|
||||
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">
|
||||
{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
|
||||
type="button"
|
||||
className="text-primary-600 hover:text-primary-700 font-semibold cursor-pointer"
|
||||
onClick={() => setIsOpenRegisterModal(true)}
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
<button type="button" className="text-primary-600 hover:text-primary-700 font-semibold cursor-pointer" onClick={() => setIsOpenRegisterModal(true)}>Sign up</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user