yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: improve code formatting and error handling in SignIn component

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-02 15:35:07 +07:00
parent 3484683074
commit 50aa323b5f
1 changed files with 139 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/auth/SignIn.jsx
View File

@@ -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) {
console.error(err);
NotifAlert({ icon: 'error', title: 'Login Gagal', message: err?.message || 'Terjadi kesalahan' });
fetchCaptcha();
} finally { setLoading(false); }
} 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>