src/pages/auth/SignIn.jsx

@@ -13,13 +13,17 @@ const SignIn = () => {
     const navigate = useNavigate();
 
     const moveToSignUp = () => {
-    navigate("/signup");
+        navigate('/signup');
     };
 
     // ambil captcha
     const fetchCaptcha = async () => {
         try {
-      const res = await SendRequest({ method: 'get', prefix: 'auth/generate-captcha', token: false });
+            const res = await SendRequest({
+                method: 'get',
+                prefix: 'auth/generate-captcha',
+                token: false,
+            });
             setCaptchaSvg(res.data.svg || '');
             setCaptchaText(res.data.text || '');
         } catch (err) {
@@ -27,7 +31,9 @@ const SignIn = () => {
         }
     };
 
-  useEffect(() => { fetchCaptcha(); }, []);
+    useEffect(() => {
+        fetchCaptcha();
+    }, []);
 
     const handleOnSubmit = async (values) => {
         setLoading(true);
@@ -41,7 +47,7 @@ const SignIn = () => {
                     captcha: values.captcha,
                     captchaText: captchaText,
                 },
-        withCredentials: true
+                withCredentials: true,
             });
 
             const user = res?.data?.user || res?.user;
@@ -58,46 +64,84 @@ const SignIn = () => {
                 });
 
                 navigate('/dashboard/home');
+            }
+        } catch (err) {
+            // hanya handle invalid captcha disini
+            if (err?.response?.data?.message?.toLowerCase().includes('captcha')) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: 'Invalid captcha',
+                });
+                fetchCaptcha();
             } else {
                 NotifAlert({
                     icon: 'error',
                     title: 'Login Gagal',
-          message: res?.message || 'Terjadi kesalahan',
+                    message: err?.message || 'Terjadi kesalahan',
                 });
                 fetchCaptcha();
             }
-    } catch (err) {
+        } finally {
-      console.error(err);
+            setLoading(false);
-      NotifAlert({ icon: 'error', title: 'Login Gagal', message: err?.message || 'Terjadi kesalahan' });
+        }
-      fetchCaptcha();
-    } finally { setLoading(false); }
     };
 
     return (
-    <Flex align="center" justify="center" style={{ height: '100vh', backgroundImage: `url(${sypiu_ggcp})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <Flex
+            align="center"
+            justify="center"
+            style={{
+                height: '100vh',
+                backgroundImage: `url(${sypiu_ggcp})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}
+        >
             <Card style={{ boxShadow: '0px 4px 8px rgba(0,0,0,0.1)' }}>
                 <Flex align="center" justify="center">
                     <Image src={logo} height={150} width={220} preview={false} alt="logo" />
                 </Flex>
                 <br />
                 <Form layout="vertical" style={{ width: '250px' }} onFinish={handleOnSubmit}>
-          <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Email tidak boleh kosong' }]}>
+                    <Form.Item
+                        label="Email"
+                        name="email"
+                        rules={[
+                            { required: true, type: 'email', message: 'Email tidak boleh kosong' },
+                        ]}
+                    >
                         <Input placeholder="Email" size="large" />
                     </Form.Item>
 
-          <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Password tidak boleh kosong' }]}>
+                    <Form.Item
+                        label="Password"
+                        name="password"
+                        rules={[{ required: true, message: 'Password tidak boleh kosong' }]}
+                    >
                         <Input.Password placeholder="Password" size="large" />
                     </Form.Item>
 
                     <div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
 
-          <Form.Item label="CAPTCHA" name="captcha" rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}>
+                    <Form.Item
+                        label="CAPTCHA"
+                        name="captcha"
+                        rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}
+                    >
                         <Input placeholder="Masukkan CAPTCHA" size="large" />
                     </Form.Item>
 
                     <Form.Item>
                         <Space direction="vertical" style={{ width: '100%' }}>
-              <Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>Sign In</Button>
+                            <Button
+                                type="primary"
+                                htmlType="submit"
+                                loading={loading}
+                                style={{ width: '100%' }}
+                            >
+                                Sign In
+                            </Button>
                         </Space>
                     </Form.Item>
                 </Form>