update: improve code formatting and error handling in SignIn component
This commit is contained in:
@@ -7,111 +7,155 @@ import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
|
||||
import logo from 'assets/freepik/LOGOPIU.png';
|
||||
|
||||
const SignIn = () => {
|
||||
const [captchaSvg, setCaptchaSvg] = useState('');
|
||||
const [captchaText, setCaptchaText] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [captchaSvg, setCaptchaSvg] = useState('');
|
||||
const [captchaText, setCaptchaText] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const moveToSignUp = () => {
|
||||
navigate("/signup");
|
||||
};
|
||||
const moveToSignUp = () => {
|
||||
navigate('/signup');
|
||||
};
|
||||
|
||||
// ambil captcha
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res = await SendRequest({ method: 'get', prefix: 'auth/generate-captcha', token: false });
|
||||
setCaptchaSvg(res.data.svg || '');
|
||||
setCaptchaText(res.data.text || '');
|
||||
} catch (err) {
|
||||
console.error('Error fetching captcha:', err);
|
||||
}
|
||||
};
|
||||
// ambil captcha
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: 'auth/generate-captcha',
|
||||
token: false,
|
||||
});
|
||||
setCaptchaSvg(res.data.svg || '');
|
||||
setCaptchaText(res.data.text || '');
|
||||
} catch (err) {
|
||||
console.error('Error fetching captcha:', err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetchCaptcha(); }, []);
|
||||
|
||||
const handleOnSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await SendRequest({
|
||||
method: 'post',
|
||||
prefix: 'auth/login',
|
||||
params: {
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
captcha: values.captcha,
|
||||
captchaText: captchaText,
|
||||
},
|
||||
withCredentials: true
|
||||
});
|
||||
|
||||
const user = res?.data?.user || res?.user;
|
||||
const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
|
||||
|
||||
if (user && accessToken) {
|
||||
localStorage.setItem('token', accessToken);
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Login Berhasil',
|
||||
message: res?.message || 'Selamat datang!',
|
||||
});
|
||||
|
||||
navigate('/dashboard/home');
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Login Gagal',
|
||||
message: res?.message || 'Terjadi kesalahan',
|
||||
});
|
||||
useEffect(() => {
|
||||
fetchCaptcha();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
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' }}>
|
||||
<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' }]}>
|
||||
<Input placeholder="Email" size="large" />
|
||||
</Form.Item>
|
||||
const handleOnSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await SendRequest({
|
||||
method: 'post',
|
||||
prefix: 'auth/login',
|
||||
params: {
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
captcha: values.captcha,
|
||||
captchaText: captchaText,
|
||||
},
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
<Form.Item label="Password" name="password" rules={[{ required: true, message: 'Password tidak boleh kosong' }]}>
|
||||
<Input.Password placeholder="Password" size="large" />
|
||||
</Form.Item>
|
||||
const user = res?.data?.user || res?.user;
|
||||
const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
|
||||
if (user && accessToken) {
|
||||
localStorage.setItem('token', accessToken);
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
|
||||
<Form.Item label="CAPTCHA" name="captcha" rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}>
|
||||
<Input placeholder="Masukkan CAPTCHA" size="large" />
|
||||
</Form.Item>
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Login Berhasil',
|
||||
message: res?.message || 'Selamat datang!',
|
||||
});
|
||||
|
||||
<Form.Item>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>Sign In</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => moveToSignUp()}
|
||||
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: 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',
|
||||
}}
|
||||
>
|
||||
Registration
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
<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' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="Email" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<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' }]}
|
||||
>
|
||||
<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>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => moveToSignUp()}
|
||||
>
|
||||
Registration
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignIn;
|
||||
|
||||
Reference in New Issue
Block a user