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

lavoce #2

Merged
yogiedigital merged 118 commits from lavoce into main 2025-10-20 04:06:02 +00:00
Conversation 0 Commits 118 Files Changed 81 +868 -970
11 changed files with 868 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c64b7b3490 - Show all commits

36
src/App.jsx
View File

@@ -1,44 +1,27 @@
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import SignIn from './pages/auth/SignIn'; import SignIn from './pages/auth/SignIn';
import SignUp from './pages/auth/Signup';
import { ProtectedRoute } from './ProtectedRoute'; import { ProtectedRoute } from './ProtectedRoute';
import NotFound from './pages/blank/NotFound'; import NotFound from './pages/blank/NotFound';
import { getSessionData } from './components/Global/Formatter';
// dashboard // Dashboard
import Home from './pages/home/Home'; import Home from './pages/home/Home';
import Blank from './pages/blank/Blank'; import Blank from './pages/blank/Blank';
// master // Master
import IndexDevice from './pages/master/device/IndexDevice'; import IndexDevice from './pages/master/device/IndexDevice';
// Setting
const App = () => { const App = () => {
const session = getSessionData();
// console.log(session);
const isAdmin =
session?.user?.role_id != `${import.meta.env.VITE_ROLE_VENDOR}` &&
session?.user?.role_id &&
session?.user?.role_id != null &&
session?.user?.role_id != 0;
return ( return (
<BrowserRouter <BrowserRouter>
future={{
v7_startTransition: true,
v7_relativeSplatPath: true,
}}
>
<Routes> <Routes>
{isAdmin ? ( {/* Public Routes */}
<Route path="/" element={<Navigate to="/dashboard/home" />} /> <Route path="/" element={<Navigate to="/signin" replace />} />
) : (
<Route path="/" element={<Navigate to="/dashboard/home-vendor" />} />
)}
<Route path="/signin" element={<SignIn />} /> <Route path="/signin" element={<SignIn />} />
<Route path="/signup" element={<SignUp />} />
{/* Protected Routes */}
<Route path="/dashboard" element={<ProtectedRoute />}> <Route path="/dashboard" element={<ProtectedRoute />}>
<Route path="home" element={<Home />} /> <Route path="home" element={<Home />} />
<Route path="blank" element={<Blank />} /> <Route path="blank" element={<Blank />} />
@@ -48,6 +31,7 @@ const App = () => {
<Route path="device" element={<IndexDevice />} /> <Route path="device" element={<IndexDevice />} />
</Route> </Route>
{/* Catch-all */}
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

31
src/ProtectedRoute.jsx
View File

@@ -1,20 +1,25 @@
import React from 'react'; import React from 'react';
import { Navigate, Outlet } from 'react-router-dom'; import { Navigate, Outlet } from 'react-router-dom';
import MainLayout from './layout/MainLayout'; import MainLayout from './layout/MainLayout';
import { NotifAlert } from './components/Global/ToastNotif';
import { getSessionData } from './components/Global/Formatter';
export const ProtectedRoute = () => { export const ProtectedRoute = () => {
const session = getSessionData(); // cek token di localStorage
// console.log(session); const token = localStorage.getItem('token');
const isAuthenticated = !!token;
const isAuthenticated = session?.auth ?? false; if (!isAuthenticated) {
if (!isAuthenticated) { NotifAlert({
return <Navigate to="/signin" replace />; icon: 'warning',
} title: 'Session Habis',
return ( message: 'Silahkan login terlebih dahulu',
<MainLayout> });
<Outlet /> return <Navigate to="/signin" replace />;
</MainLayout> }
);
return (
<MainLayout>
<Outlet />
</MainLayout>
);
}; };

13
src/Utils/Auth/Logout.jsx
View File

@@ -1,7 +1,12 @@
const handleLogOut = () => { const handleLogOut = (navigate) => {
localStorage.removeItem('Auth'); localStorage.removeItem('Auth');
localStorage.removeItem('session'); localStorage.removeItem('session');
if (navigate) {
navigate('/signin', { replace: true });
} else {
window.location.replace('/signin'); window.location.replace('/signin');
} }
};
export default handleLogOut; export default handleLogOut;

10
src/Utils/Auth/SignIn.jsx
View File

@@ -8,18 +8,14 @@ const handleSignIn = async (values) => {
// return false // return false
if (response?.status == 200) { if (response?.status == 200) {
/* you can change this according to your authentication protocol */
let token = JSON.stringify(response.data?.token); let token = JSON.stringify(response.data?.token);
let role = JSON.stringify(response.data?.user?.role_id);
localStorage.setItem('token', token); localStorage.setItem('token', token);
response.data.auth = true; response.data.auth = true;
localStorage.setItem('session', encryptData(response?.data)); localStorage.setItem('session', encryptData(response?.data));
if (role === `${import.meta.env.VITE_ROLE_VENDOR}`) {
window.location.replace('/dashboard/home-vendor'); // langsung redirect ke dashboard utama
} else { window.location.replace('/dashboard/home');
window.location.replace('/dashboard/home');
}
} else { } else {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',

14
src/api/auth.jsx
View File

@@ -10,20 +10,10 @@ const login = async (params) => {
return response || []; return response || [];
}; };
const uploadFile = async (formData) => {
const response = await RegistrationRequest({
method: 'post',
prefix: 'file-upload',
params: formData,
headers: { 'Content-Type': 'multipart/form-data' },
});
return response || {};
};
const register = async (params) => { const register = async (params) => {
const response = await RegistrationRequest({ const response = await RegistrationRequest({
method: 'post', method: 'post',
prefix: 'register', prefix: 'auth/register',
params: params, params: params,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
}); });
@@ -49,4 +39,4 @@ const checkUsername = async (queryParams) => {
}; };
export { login, uploadFile, register, verifyRedirect, checkUsername }; export { login, register, verifyRedirect, checkUsername };

203
src/components/Global/ApiRequest.jsx
View File

@@ -1,127 +1,92 @@
import axios from 'axios'; import axios from "axios";
import Swal from 'sweetalert2'; import Swal from "sweetalert2";
async function ApiRequest( async function ApiRequest({
urlParams = { method: 'GET', params: {}, url: '', prefix: '/', token: true } method = "GET",
) { params = {},
const baseURLDef = `${import.meta.env.VITE_API_SERVER}`; url = "",
const instance = axios.create({ prefix = "/",
baseURL: urlParams.url ?? baseURLDef, token = true,
} = {}) {
const baseURL = url || import.meta.env.VITE_API_SERVER;
const instance = axios.create({ baseURL });
const isFormData = params instanceof FormData;
// request config
const request = {
method,
url: prefix,
data: params,
headers: {
"Accept-Language": "en_US",
...(isFormData ? {} : { "Content-Type": "application/json" }),
},
};
// handle download (doc)
if (params === "doc") {
request.responseType = "blob";
}
// ambil token
const rawToken =
sessionStorage.getItem("token_redirect") || localStorage.getItem("token");
if (token && rawToken) {
const cleanToken = rawToken.replace(/"/g, "");
instance.defaults.headers.common[
"Authorization"
] = `Bearer ${cleanToken}`;
}
try {
const response = await instance(request);
return { ...response, error: false };
} catch (error) {
const status = error?.response?.status || 500;
const message =
error?.response?.data?.message || error.message || "Something Wrong";
cekError(status, message);
return { ...error.response, error: true };
}
}
// global error handler
async function cekError(status, message = "") {
console.log("status code", status);
if (status === 401) {
Swal.fire({
icon: "warning",
title: "Peringatan",
text: `${message}, Silahkan login`,
}).then((result) => {
if (result.isConfirmed) {
localStorage.clear();
location.replace("/signin");
}
}); });
} else {
const isFormData = urlParams.params instanceof FormData; Swal.fire({
icon: "warning",
const request = { title: "Peringatan",
method: urlParams.method, text: message,
url: urlParams.prefix ?? '/', });
data: urlParams.params, }
// yang lama
// headers: {
// 'Content-Type': 'application/json',
// 'Accept-Language': 'en_US',
// },
// yang baru
headers: {
'Accept-Language': 'en_US',
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
},
};
if (urlParams.params === 'doc') {
request.responseType = 'arraybuffer';
request.headers['Content-Type'] = 'blob';
}
// console.log(request);
// console.log('prefix', urlParams.prefix);
const tokenRedirect = sessionStorage.getItem('token_redirect');
let stringToken = '';
if (tokenRedirect !== null) {
stringToken = tokenRedirect;
// console.log(`sessionStorage: ${tokenRedirect}`);
} else {
stringToken = localStorage.getItem('token');
// console.log(`localStorage: ${stringToken}`);
}
if (urlParams.prefix !== 'auth/login') {
const tokenWithQuotes = stringToken;
const token = tokenWithQuotes.replace(/"/g, '');
const AUTH_TOKEN = `Bearer ${token}`;
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
} else if (urlParams.token == true) {
const tokenWithQuotes = stringToken;
const token = tokenWithQuotes.replace(/"/g, '');
const AUTH_TOKEN = `Bearer ${token}`;
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
}
return await instance(request)
.then(function (response) {
const responseCustom = response;
responseCustom.error = false;
return responseCustom;
})
.catch(function (error) {
console.log('error', error.toJSON());
const errorData = error.toJSON();
const respError = error.response ?? {};
cekError(
errorData.status,
error?.response?.data?.message ?? errorData?.message ?? 'Something Wrong'
);
respError.error = true;
return respError;
});
}
async function cekError(props, message = '') {
console.log('status code', props);
if (props === 401) {
Swal.fire({
icon: 'warning',
title: 'Peringatan',
text: `${message}, Silahkan login`,
}).then((result) => {
if (result.isConfirmed) {
localStorage.clear();
location.replace('/signin');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info');
}
});
} else {
Swal.fire({
icon: 'warning',
title: 'Peringatan',
text: message,
}).then((result) => {});
}
} }
// wrapper biar frontend lebih simple
const SendRequest = async (queryParams) => { const SendRequest = async (queryParams) => {
try { try {
const response = await ApiRequest(queryParams); const response = await ApiRequest(queryParams);
return response || []; return response?.data || [];
} catch (error) { } catch (error) {
console.log('error', error); console.error("Request error:", error);
if (error.response) { Swal.fire({ icon: "error", text: error.message || "Something went wrong" });
console.error('Error Status:', error.response.status); // Status error, misal: 401 return [];
console.error('Error Data:', error.response.data); // Detail pesan error }
console.error('Error Pesan:', error.response.data.message); //Pesan error
} else {
console.error('Error:', error.message);
}
Swal.fire({ icon: 'error', text: error });
// return error;
}
}; };
export { ApiRequest, SendRequest }; export { ApiRequest, SendRequest };

21
src/layout/LayoutHeader.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { Layout, theme, Space, Typography, Breadcrumb, Button } from 'antd'; import { Layout, Typography, Breadcrumb, Button, theme } from 'antd';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import handleLogOut from '../Utils/Auth/Logout'; import handleLogOut from '../Utils/Auth/Logout';
import { useBreadcrumb } from './LayoutBreadcrumb'; import { useBreadcrumb } from './LayoutBreadcrumb';
import { decryptData } from '../components/Global/Formatter'; import { decryptData } from '../components/Global/Formatter';
import { useNavigate } from 'react-router-dom'; import { replace, useNavigate } from 'react-router-dom';
const { Link, Text } = Typography; const { Link, Text } = Typography;
const { Header } = Layout; const { Header } = Layout;
@@ -12,17 +12,18 @@ const { Header } = Layout;
const LayoutHeader = () => { const LayoutHeader = () => {
const { breadcrumbItems } = useBreadcrumb(); const { breadcrumbItems } = useBreadcrumb();
const navigate = useNavigate(); const navigate = useNavigate();
const {
token: { colorBgContainer, colorBorder, colorText }, // Ambil token warna dari theme Ant Design, dengan fallback default
} = theme.useToken(); const { token } = theme.useToken() || {};
const colorBgContainer = token?.colorBgContainer || '#fff';
const colorBorder = token?.colorBorder || '#d9d9d9';
const colorText = token?.colorText || '#000';
// Ambil data user dari localStorage dan dekripsi // Ambil data user dari localStorage dan dekripsi
const sessionData = localStorage.getItem('session'); const sessionData = localStorage.getItem('session');
const userData = sessionData ? decryptData(sessionData) : null; const userData = sessionData ? decryptData(sessionData) : null;
// console.log(userData);
const roleName = userData?.user?.approval || userData?.user?.partner_name || 'Guest'; const roleName = userData?.user?.approval || userData?.user?.partner_name || 'Guest';
const userName = userData?.user?.name || userData?.user?.username || 'User'; const userName = userData?.user?.name || userData?.user?.username || 'User';
return ( return (
@@ -35,7 +36,7 @@ const LayoutHeader = () => {
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
rowGap: 10, rowGap: 10,
paddingTop:15, paddingTop: 15,
paddingBottom: 20, paddingBottom: 20,
paddingLeft: 24, paddingLeft: 24,
paddingRight: 24, paddingRight: 24,
@@ -88,8 +89,7 @@ const LayoutHeader = () => {
</Button> </Button>
<Link <Link
onClick={() => { onClick={() => {
handleLogOut(); handleLogOut(navigate);
navigate('/signin');
}} }}
aria-label="Log out from the application" aria-label="Log out from the application"
style={{ style={{
@@ -117,3 +117,4 @@ const LayoutHeader = () => {
}; };
export default LayoutHeader; export default LayoutHeader;

876
src/pages/auth/Registration.jsx
View File

@@ -1,461 +1,461 @@
import React, { useState } from 'react'; // import React, { useState } from 'react';
import { // import {
Flex, // Flex,
Input, // Input,
InputNumber, // InputNumber,
Form, // Form,
Button, // Button,
Card, // Card,
Space, // Space,
Upload, // Upload,
Divider, // Divider,
Tooltip, // Tooltip,
message, // message,
Select, // Select,
} from 'antd'; // } from 'antd';
import { // import {
UploadOutlined, // UploadOutlined,
UserOutlined, // UserOutlined,
IdcardOutlined, // IdcardOutlined,
PhoneOutlined, // PhoneOutlined,
LockOutlined, // LockOutlined,
InfoCircleOutlined, // InfoCircleOutlined,
MailOutlined, // MailOutlined,
} from '@ant-design/icons'; // } from '@ant-design/icons';
const { Item } = Form; // const { Item } = Form;
const { Option } = Select; // const { Option } = Select;
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg'; // import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
import { useNavigate } from 'react-router-dom'; // import { useNavigate } from 'react-router-dom';
import { register, uploadFile, checkUsername } from '../../api/auth'; // import { register, uploadFile, checkUsername } from '../../api/auth';
import { NotifAlert } from '../../components/Global/ToastNotif'; // import { NotifAlert } from '../../components/Global/ToastNotif';
const Registration = () => { // const Registration = () => {
const [form] = Form.useForm(); // const [form] = Form.useForm();
const navigate = useNavigate(); // const navigate = useNavigate();
const [loading, setLoading] = useState(false); // const [loading, setLoading] = useState(false);
const [fileListKontrak, setFileListKontrak] = useState([]); // const [fileListKontrak, setFileListKontrak] = useState([]);
const [fileListHsse, setFileListHsse] = useState([]); // const [fileListHsse, setFileListHsse] = useState([]);
const [fileListIcon, setFileListIcon] = useState([]); // const [fileListIcon, setFileListIcon] = useState([]);
// Daftar jenis vendor // // Daftar jenis vendor
const vendorTypes = [ // const vendorTypes = [
{ vendor_type: 1, vendor_type_name: 'One-Time' }, // { vendor_type: 1, vendor_type_name: 'One-Time' },
{ vendor_type: 2, vendor_type_name: 'Rutin' }, // { vendor_type: 2, vendor_type_name: 'Rutin' },
]; // ];
const onFinish = async (values) => { // const onFinish = async (values) => {
setLoading(true); // setLoading(true);
try { // try {
if (!fileListKontrak.length || !fileListHsse.length) { // if (!fileListKontrak.length || !fileListHsse.length) {
message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!'); // message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
setLoading(false); // setLoading(false);
return; // return;
} // }
const formData = new FormData(); // const formData = new FormData();
formData.append('path_kontrak', fileListKontrak[0].originFileObj); // formData.append('path_kontrak', fileListKontrak[0].originFileObj);
formData.append('path_hse_plant', fileListHsse[0].originFileObj); // formData.append('path_hse_plant', fileListHsse[0].originFileObj);
if (fileListIcon.length) { // if (fileListIcon.length) {
formData.append('path_icon', fileListIcon[0].originFileObj); // formData.append('path_icon', fileListIcon[0].originFileObj);
} // }
const uploadResponse = await uploadFile(formData); // const uploadResponse = await uploadFile(formData);
if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) { // if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
message.error(uploadResponse.message || 'Gagal mengunggah file.'); // message.error(uploadResponse.message || 'Gagal mengunggah file.');
setLoading(false); // setLoading(false);
return; // return;
} // }
const params = new URLSearchParams({ username: values.username }); // const params = new URLSearchParams({ username: values.username });
const usernameCheck = await checkUsername(params); // const usernameCheck = await checkUsername(params);
if (usernameCheck.data.data && usernameCheck.data.data.available === false) { // if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
NotifAlert({ // NotifAlert({
icon: 'error', // icon: 'error',
title: 'Gagal', // title: 'Gagal',
message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi', // message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
}); // });
setLoading(false); // setLoading(false);
return; // return;
} // }
const registerData = { // const registerData = {
nama_perusahaan: values.namaPerusahaan, // nama_perusahaan: values.namaPerusahaan,
no_kontak_wo: values.noKontakWo, // no_kontak_wo: values.noKontakWo,
path_kontrak: uploadResponse.data.pathKontrak || '', // path_kontrak: uploadResponse.data.pathKontrak || '',
durasi: values.durasiPekerjaan, // durasi: values.durasiPekerjaan,
nilai_csms: values.nilaiCsms.toString(), // nilai_csms: values.nilaiCsms.toString(),
vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData // vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
path_hse_plant: uploadResponse.data.pathHsePlant || '', // path_hse_plant: uploadResponse.data.pathHsePlant || '',
nama_leader: values.penanggungJawab, // nama_leader: values.penanggungJawab,
no_identitas: values.noIdentitas, // no_identitas: values.noIdentitas,
no_hp: values.noHandphone, // no_hp: values.noHandphone,
email_register: values.username, // email_register: values.username,
password_register: values.password, // password_register: values.password,
}; // };
const response = await register(registerData); // const response = await register(registerData);
if (response.data?.id_register) { // if (response.data?.id_register) {
message.success('Data berhasil disimpan!'); // message.success('Data berhasil disimpan!');
try { // try {
form.resetFields(); // form.resetFields();
setFileListKontrak([]); // setFileListKontrak([]);
setFileListHsse([]); // setFileListHsse([]);
setFileListIcon([]); // setFileListIcon([]);
navigate('/registration-submitted'); // navigate('/registration-submitted');
} catch (postSuccessError) { // } catch (postSuccessError) {
message.warning( // message.warning(
'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.' // 'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
); // );
} // }
} else { // } else {
message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.'); // message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
} // }
} catch (error) { // } catch (error) {
console.error('Error saat registrasi:', error); // console.error('Error saat registrasi:', error);
NotifAlert({ // NotifAlert({
icon: 'error', // icon: 'error',
title: 'Gagal', // title: 'Gagal',
message: error.message || 'Terjadi kesalahan, silakan coba lagi', // message: error.message || 'Terjadi kesalahan, silakan coba lagi',
}); // });
} finally { // } finally {
setLoading(false); // setLoading(false);
} // }
}; // };
const onCancel = () => { // const onCancel = () => {
form.resetFields(); // form.resetFields();
setFileListKontrak([]); // setFileListKontrak([]);
setFileListHsse([]); // setFileListHsse([]);
setFileListIcon([]); // setFileListIcon([]);
navigate('/signin'); // navigate('/signin');
}; // };
const handleChangeKontrak = ({ fileList }) => { // const handleChangeKontrak = ({ fileList }) => {
setFileListKontrak(fileList); // setFileListKontrak(fileList);
}; // };
const handleChangeHsse = ({ fileList }) => { // const handleChangeHsse = ({ fileList }) => {
setFileListHsse(fileList); // setFileListHsse(fileList);
}; // };
const handleChangeIcon = ({ fileList }) => { // const handleChangeIcon = ({ fileList }) => {
setFileListIcon(fileList); // setFileListIcon(fileList);
}; // };
const beforeUpload = (file, fieldname) => { // const beforeUpload = (file, fieldname) => {
const isValidType = [ // const isValidType = [
'image/jpeg', // 'image/jpeg',
'image/jpg', // 'image/jpg',
'image/png', // 'image/png',
fieldname !== 'path_icon' ? 'application/pdf' : null, // fieldname !== 'path_icon' ? 'application/pdf' : null,
] // ]
.filter(Boolean) // .filter(Boolean)
.includes(file.type); // .includes(file.type);
const isNotEmpty = file.size > 0; // const isNotEmpty = file.size > 0;
const isSizeValid = file.size / 1024 / 1024 < 10; // const isSizeValid = file.size / 1024 / 1024 < 10;
if (!isValidType) { // if (!isValidType) {
message.error( // message.error(
`Hanya file ${ // `Hanya file ${
fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG' // fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
} yang diperbolehkan!` // } yang diperbolehkan!`
); // );
return false; // return false;
} // }
if (!isNotEmpty) { // if (!isNotEmpty) {
message.error('File tidak boleh kosong!'); // message.error('File tidak boleh kosong!');
return false; // return false;
} // }
if (!isSizeValid) { // if (!isSizeValid) {
message.error('Ukuran file maksimal 10MB!'); // message.error('Ukuran file maksimal 10MB!');
return false; // return false;
} // }
return true; // return true;
}; // };
return ( // return (
<Flex // <Flex
align="center" // align="center"
justify="center" // justify="center"
style={{ // style={{
minHeight: '100vh', // minHeight: '100vh',
backgroundImage: `url(${sypiu_ggcp})`, // backgroundImage: `url(${sypiu_ggcp})`,
backgroundSize: 'cover', // backgroundSize: 'cover',
backgroundPosition: 'center', // backgroundPosition: 'center',
padding: '20px', // padding: '20px',
}} // }}
> // >
<Card // <Card
style={{ // style={{
width: '100%', // width: '100%',
maxWidth: 800, // maxWidth: 800,
background: 'rgba(255, 255, 255, 0.9)', // background: 'rgba(255, 255, 255, 0.9)',
backdropFilter: 'blur(10px)', // backdropFilter: 'blur(10px)',
borderRadius: '12px', // borderRadius: '12px',
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)', // boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
padding: '24px', // padding: '24px',
}} // }}
title={ // title={
<Flex align="center" justify="space-between"> // <Flex align="center" justify="space-between">
<h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2> // <h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
<Button // <Button
type="link" // type="link"
icon={<InfoCircleOutlined />} // icon={<InfoCircleOutlined />}
onClick={() => navigate('/signin')} // onClick={() => navigate('/signin')}
> // >
Kembali // Kembali
</Button> // </Button>
</Flex> // </Flex>
} // }
> // >
<Form // <Form
form={form} // form={form}
onFinish={onFinish} // onFinish={onFinish}
layout="horizontal" // layout="horizontal"
labelCol={{ span: 8 }} // labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }} // wrapperCol={{ span: 16 }}
labelAlign="left" // labelAlign="left"
style={{ maxWidth: 800 }} // style={{ maxWidth: 800 }}
> // >
{/* Informasi Perusahaan */} // {/* Informasi Perusahaan */}
<Divider // <Divider
orientation="left" // orientation="left"
orientationMargin={0} // orientationMargin={0}
style={{ // style={{
color: '#23A55A', // color: '#23A55A',
fontWeight: 'bold', // fontWeight: 'bold',
marginLeft: 0, // marginLeft: 0,
paddingLeft: 0, // paddingLeft: 0,
}} // }}
> // >
Informasi Perusahaan // Informasi Perusahaan
</Divider> // </Divider>
<Item // <Item
label="Nama Perusahaan" // label="Nama Perusahaan"
name="namaPerusahaan" // name="namaPerusahaan"
rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]} // rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
> // >
<Input // <Input
prefix={<UserOutlined />} // prefix={<UserOutlined />}
placeholder="Masukkan Nama Perusahaan" // placeholder="Masukkan Nama Perusahaan"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="Durasi Pekerjaan (Hari)" // label="Durasi Pekerjaan (Hari)"
name="durasiPekerjaan" // name="durasiPekerjaan"
rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]} // rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
> // >
<InputNumber // <InputNumber
min={1} // min={1}
style={{ width: '100%' }} // style={{ width: '100%' }}
placeholder="Masukkan Durasi Pekerjaan" // placeholder="Masukkan Durasi Pekerjaan"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="No Kontrak Kerja / Agreement" // label="No Kontrak Kerja / Agreement"
name="noKontakWo" // name="noKontakWo"
rules={[ // rules={[
{ required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' }, // { required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
]} // ]}
> // >
<Input // <Input
style={{ // style={{
width: '100%', // width: '100%',
}} // }}
placeholder="Masukkan No Kontrak Kerja / Agreement" // placeholder="Masukkan No Kontrak Kerja / Agreement"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="Lampiran Kontrak Kerja" // label="Lampiran Kontrak Kerja"
name="lampiranKontrak" // name="lampiranKontrak"
rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]} // rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
> // >
<Upload // <Upload
beforeUpload={(file) => beforeUpload(file, 'path_kontrak')} // beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
fileList={fileListKontrak} // fileList={fileListKontrak}
onChange={handleChangeKontrak} // onChange={handleChangeKontrak}
maxCount={1} // maxCount={1}
> // >
<Button icon={<UploadOutlined />} size="large"> // <Button icon={<UploadOutlined />} size="large">
Unggah PDF/JPG // Unggah PDF/JPG
</Button> // </Button>
</Upload> // </Upload>
</Item> // </Item>
<Item // <Item
label="HSSE Plan" // label="HSSE Plan"
name="hssePlan" // name="hssePlan"
rules={[{ required: true, message: 'Unggah HSSE Plan!' }]} // rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
> // >
<Upload // <Upload
beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')} // beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
fileList={fileListHsse} // fileList={fileListHsse}
onChange={handleChangeHsse} // onChange={handleChangeHsse}
maxCount={1} // maxCount={1}
> // >
<Button icon={<UploadOutlined />} size="large"> // <Button icon={<UploadOutlined />} size="large">
Unggah PDF/JPG // Unggah PDF/JPG
</Button> // </Button>
</Upload> // </Upload>
</Item> // </Item>
<Item // <Item
label="Nilai CSMS" // label="Nilai CSMS"
name="nilaiCsms" // name="nilaiCsms"
rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]} // rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
> // >
<InputNumber // <InputNumber
min={0} // min={0}
max={100} // max={100}
style={{ width: '100%' }} // style={{ width: '100%' }}
placeholder="Masukkan Nilai CSMS" // placeholder="Masukkan Nilai CSMS"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="Jenis Vendor" // label="Jenis Vendor"
name="jenisVendor" // name="jenisVendor"
rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]} // rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
> // >
<Select // <Select
placeholder="Pilih Jenis Vendor" // placeholder="Pilih Jenis Vendor"
size="large" // size="large"
style={{ width: '100%' }} // style={{ width: '100%' }}
> // >
{vendorTypes.map((vendor) => ( // {vendorTypes.map((vendor) => (
<Option key={vendor.vendor_type} value={vendor.vendor_type}> // <Option key={vendor.vendor_type} value={vendor.vendor_type}>
{vendor.vendor_type_name} // {vendor.vendor_type_name}
</Option> // </Option>
))} // ))}
</Select> // </Select>
</Item> // </Item>
{/* Informasi Penanggung Jawab */} // {/* Informasi Penanggung Jawab */}
<Divider // <Divider
orientation="left" // orientation="left"
orientationMargin={0} // orientationMargin={0}
style={{ // style={{
color: '#23A55A', // color: '#23A55A',
fontWeight: 'bold', // fontWeight: 'bold',
marginLeft: 0, // marginLeft: 0,
paddingLeft: 0, // paddingLeft: 0,
}} // }}
> // >
Informasi Penanggung Jawab // Informasi Penanggung Jawab
</Divider> // </Divider>
<Item // <Item
label="Nama Penanggung Jawab" // label="Nama Penanggung Jawab"
name="penanggungJawab" // name="penanggungJawab"
rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]} // rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
> // >
<Input // <Input
prefix={<UserOutlined />} // prefix={<UserOutlined />}
placeholder="Masukkan Nama Penanggung Jawab" // placeholder="Masukkan Nama Penanggung Jawab"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="No Handphone" // label="No Handphone"
name="noHandphone" // name="noHandphone"
rules={[ // rules={[
{ required: true, message: 'Masukkan No Handphone!' }, // { required: true, message: 'Masukkan No Handphone!' },
{ // {
pattern: /^(\+62|0)[0-9]{9,12}$/, // pattern: /^(\+62|0)[0-9]{9,12}$/,
message: // message:
'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)', // 'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
}, // },
]} // ]}
> // >
<Input // <Input
prefix={<PhoneOutlined />} // prefix={<PhoneOutlined />}
placeholder="Masukkan No Handphone (+62)" // placeholder="Masukkan No Handphone (+62)"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="No Identitas" // label="No Identitas"
name="noIdentitas" // name="noIdentitas"
rules={[{ required: true, message: 'Masukkan No Identitas!' }]} // rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
> // >
<Input // <Input
prefix={<IdcardOutlined />} // prefix={<IdcardOutlined />}
placeholder="Masukkan No Identitas" // placeholder="Masukkan No Identitas"
size="large" // size="large"
/> // />
</Item> // </Item>
{/* Akun Pengguna */} // {/* Akun Pengguna */}
<Divider // <Divider
orientation="left" // orientation="left"
orientationMargin={0} // orientationMargin={0}
style={{ // style={{
color: '#23A55A', // color: '#23A55A',
fontWeight: 'bold', // fontWeight: 'bold',
marginLeft: 0, // marginLeft: 0,
paddingLeft: 0, // paddingLeft: 0,
}} // }}
> // >
Akun Pengguna (digunakan sebagai user login SYPIU) // Akun Pengguna (digunakan sebagai user login SYPIU)
</Divider> // </Divider>
<Item // <Item
label="Email" // label="Email"
name="username" // name="username"
rules={[ // rules={[
{ required: true, message: 'Masukkan Email!' }, // { required: true, message: 'Masukkan Email!' },
{ type: 'email', message: 'Format email tidak valid!' }, // { type: 'email', message: 'Format email tidak valid!' },
]} // ]}
> // >
<Input // <Input
prefix={<MailOutlined />} // prefix={<MailOutlined />}
placeholder="Masukkan Email" // placeholder="Masukkan Email"
size="large" // size="large"
/> // />
</Item> // </Item>
<Item // <Item
label="Password" // label="Password"
name="password" // name="password"
rules={[ // rules={[
{ required: true, message: 'Masukkan Password!' }, // { required: true, message: 'Masukkan Password!' },
{ min: 6, message: 'Password minimal 6 karakter!' }, // { min: 6, message: 'Password minimal 6 karakter!' },
]} // ]}
> // >
<Input.Password // <Input.Password
prefix={<LockOutlined />} // prefix={<LockOutlined />}
placeholder="Masukkan Password" // placeholder="Masukkan Password"
size="large" // size="large"
/> // />
</Item> // </Item>
{/* Tombol */} // {/* Tombol */}
<Item wrapperCol={{ offset: 8, span: 16 }}> // <Item wrapperCol={{ offset: 8, span: 16 }}>
<Space style={{ marginTop: '24px', width: '100%' }}> // <Space style={{ marginTop: '24px', width: '100%' }}>
<Button // <Button
type="primary" // type="primary"
htmlType="submit" // htmlType="submit"
size="large" // size="large"
loading={loading} // loading={loading}
style={{ // style={{
backgroundColor: '#23A55A', // backgroundColor: '#23A55A',
borderColor: '#23A55A', // borderColor: '#23A55A',
width: 120, // width: 120,
}} // }}
> // >
Simpan // Simpan
</Button> // </Button>
<Button onClick={onCancel} size="large" style={{ width: 120 }}> // <Button onClick={onCancel} size="large" style={{ width: 120 }}>
Batal // Batal
</Button> // </Button>
</Space> // </Space>
</Item> // </Item>
</Form> // </Form>
</Card> // </Card>
</Flex> // </Flex>
); // );
}; // };
export default Registration; // export default Registration;

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

@@ -1,187 +1,117 @@
import React, { useEffect, useState } from 'react';
import { Flex, Input, Form, Button, Card, Space, Image } from 'antd'; import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
import React from 'react'; import { useNavigate } from 'react-router-dom';
import handleSignIn from '../../Utils/Auth/SignIn'; import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
import { SendRequest } from '../../components/Global/ApiRequest';
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg'; import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
import logo from 'assets/freepik/LOGOPIU.png'; import logo from 'assets/freepik/LOGOPIU.png';
import { useNavigate } from 'react-router-dom';
import { NotifAlert } from '../../components/Global/ToastNotif';
import { decryptData } from '../../components/Global/Formatter';
const SignIn = () => { const SignIn = () => {
const [captchaSvg, setCaptchaSvg] = React.useState(''); const [captchaSvg, setCaptchaSvg] = useState('');
const [userInput, setUserInput] = React.useState(''); const [captchaText, setCaptchaText] = useState('');
const [message, setMessage] = React.useState(''); const [loading, setLoading] = useState(false);
const [captchaText, setcaptchaText] = React.useState(''); const navigate = useNavigate();
const navigate = useNavigate(); const moveToSignUp = () => {
// let url = `${import.meta.env.VITE_API_SERVER}/users`; navigate("/signup");
};
React.useEffect(() => { // 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,
}
});
const user = res?.data?.user || res?.user;
const tokens = res?.data?.tokens || res?.tokens;
if (user && tokens?.accessToken) {
localStorage.setItem('token', tokens.accessToken);
localStorage.setItem('refreshToken', tokens.refreshToken);
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',
});
fetchCaptcha(); fetchCaptcha();
}, []); }
} catch (err) {
console.error(err);
NotifAlert({ icon: 'error', title: 'Login Gagal', message: err?.message || 'Terjadi kesalahan' });
fetchCaptcha();
} finally { setLoading(false); }
};
// Fetch the CAPTCHA SVG from the backend return (
const fetchCaptcha = async () => { <Flex align="center" justify="center" style={{ height: '100vh', backgroundImage: `url(${sypiu_ggcp})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
try { <Card style={{ boxShadow: '0px 4px 8px rgba(0,0,0,0.1)' }}>
// let url = `${import.meta.env.VITE_API_SERVER}/operation` <Flex align="center" justify="center">
// const response = await fetch('http://localhost:9528/generate-captcha'); <Image src={logo} height={150} width={220} preview={false} alt="logo" />
const response = await fetch( </Flex>
`${import.meta.env.VITE_API_SERVER}/auth/generate-captcha`, <br />
{ <Form layout="vertical" style={{ width: '250px' }} onFinish={handleOnSubmit}>
credentials: 'include', // Wajib untuk mengirim cookie <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Email tidak boleh kosong' }]}>
} <Input placeholder="Email" size="large" />
); </Form.Item>
// Ambil header <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Password tidak boleh kosong' }]}>
const captchaToken = response.headers.get('X-Captcha-Token'); <Input.Password placeholder="Password" size="large" />
</Form.Item>
// console.log('Captcha Token:', decryptData(captchaToken)); <div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
setcaptchaText(decryptData(captchaToken)); <Form.Item label="CAPTCHA" name="captcha" rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}>
<Input placeholder="Masukkan CAPTCHA" size="large" />
</Form.Item>
const data = await response.text(); <Form.Item>
setCaptchaSvg(data); <Space direction="vertical" style={{ width: '100%' }}>
} catch (error) { <Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>Sign In</Button>
console.error('Error fetching CAPTCHA:', error); </Space>
} </Form.Item>
}; </Form>
<Button
const handleOnSubmit = async (e) => { type="primary"
// console.log('Received values of form: ', e); htmlType="submit"
// e.preventDefault(); style={{ width: '100%' }}
onClick={() => moveToSignUp()}
try { >
// const response = await fetch(`${import.meta.env.VITE_API_SERVER}/auth/verify-captcha`, { Registration
// method: 'POST', </Button>
// headers: { 'Content-Type': 'application/json' }, </Card>
// credentials: 'include', // WAJIB: Agar cookie CAPTCHA dikirim </Flex>
// body: JSON.stringify({ captcha: userInput }), );
// });
// const data = await response.json();
// console.log(data);
const data = {
success: captchaText === userInput ? true : false,
};
if (data.success) {
setMessage('CAPTCHA verified successfully!');
await handleSignIn(e);
} else {
setMessage('CAPTCHA verification failed. Try again.');
fetchCaptcha(); // Refresh CAPTCHA on failure
NotifAlert({
icon: 'error',
title: 'Gagal',
message: data.message || 'CAPTCHA verification failed. Try again.',
});
}
} catch (error) {
console.error('Error verifying CAPTCHA:', error);
setMessage('An error occurred. Please try again.');
}
setUserInput(''); // Clear the input field
};
const moveToRegistration = (e) => {
// e.preventDefault();
// navigate("/signup")
navigate('/registration');
};
return (
<>
<Flex
align="center"
justify="center"
// vertical
style={{
height: '100vh',
// marginTop: '10vh',
// backgroundImage: `url('https://via.placeholder.com/300')`,
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="/src/assets/freepik/LOGOPIU.png"
src={logo}
height={150}
width={220}
preview={false}
alt="signin"
/>
</Flex>
<br />
<Form onFinish={handleOnSubmit} layout="vertical" style={{ width: '250px' }}>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
// type: "email",
},
]}
>
<Input placeholder="username" size="large" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password placeholder="password" size="large" />
</Form.Item>
<div
style={{ marginLeft: 45 }}
dangerouslySetInnerHTML={{ __html: captchaSvg }}
/>
{/* {message} */}
<Input
style={{ marginTop: 10, marginBottom: 15 }}
type="text"
placeholder="Enter CAPTCHA text"
size="large"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
/>
<Form.Item>
<Space direction="vertical" style={{ width: '100%' }}>
<Button type="primary" htmlType="submit" style={{ width: '100%' }}>
Sign In
</Button>
</Space>
</Form.Item>
</Form>
<Button
type="primary"
htmlType="submit"
style={{ width: '100%' }}
onClick={() => moveToRegistration()}
>
Registration
</Button>
</Card>
</Flex>
</>
);
}; };
export default SignIn; export default SignIn;

311
src/pages/auth/Signup.jsx
View File

@@ -1,158 +1,185 @@
import { Flex, Input, Form, Button, Card, Space, Image } from 'antd' import React, { useState } from 'react';
import React from 'react' import { Flex, Input, Form, Button, Card, Space, Image, Row, Col, Typography } from 'antd';
// import handleSignIn from '../../Utils/Auth/SignIn'; import { useNavigate } from 'react-router-dom';
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg'; import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
import {useNavigate} from "react-router-dom"; import logo from 'assets/freepik/LOGOPIU.png';
import { register } from '../../api/auth';
import { NotifOk, NotifAlert } from '../../components/Global/ToastNotif';
const SignUp = () => { const SignUp = () => {
const [loading, setLoading] = useState(false);
const [captchaSvg, setCaptchaSvg] = React.useState('');
const [userInput, setUserInput] = React.useState('');
const [message, setMessage] = React.useState('');
const navigate = useNavigate(); const navigate = useNavigate();
// let url = `${import.meta.env.VITE_API_SERVER}/users`;
React.useEffect(() => { const moveToSignin = () => {
fetchCaptcha(); navigate('/signin');
}, []); };
// Fetch the CAPTCHA SVG from the backend const handleSignUp = async (values) => {
const fetchCaptcha = async () => { const { fullname, username, email, phone, password, confirmPassword } = values;
if (password !== confirmPassword) {
NotifAlert({
icon: 'error',
title: 'Password Tidak Sama',
message: 'Password dan confirm password harus sama',
});
return;
}
const phoneRegex = /^(?:\+62|62|0)8[1-9][0-9]{6,11}$/;
if (!phoneRegex.test(phone)) {
NotifAlert({
icon: 'error',
title: 'Format Telepon Salah',
message: 'Nomor telepon tidak valid (harus nomor Indonesia)',
});
return;
}
const passwordErrors = [];
if (password.length < 8) passwordErrors.push('Minimal 8 karakter');
if (!/[A-Z]/.test(password)) passwordErrors.push('Harus ada huruf kapital');
if (!/[0-9]/.test(password)) passwordErrors.push('Harus ada angka');
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) passwordErrors.push('Harus ada karakter spesial');
if (passwordErrors.length) {
NotifAlert({
icon: 'error',
title: 'Password Tidak Valid',
message: passwordErrors.join(', '),
});
return;
}
setLoading(true);
try { try {
const response = await fetch('http://localhost:9528/generate-captcha'); const res = await register({ fullname, username, email, phone, password });
const data = await response.text(); // const user = res?.data?.user;
setCaptchaSvg(data); // // const tokens = res?.data?.tokens;
} catch (error) {
console.error('Error fetching CAPTCHA:', error);
NotifOk({
icon: 'success',
title: 'Registrasi Berhasil',
message: res?.data?.message || 'Berhasil menambahkan user.',
});
// if (user) {
// // localStorage.setItem('token', tokens.accessToken);
// // localStorage.setItem('refreshToken', tokens.refreshToken);
// // localStorage.setItem('user', JSON.stringify(user));
// NotifOk({
// icon: 'success',
// title: 'Registrasi Berhasil',
// message: res?.data?.message || 'Selamat datang! Anda akan diarahkan ke dashboard.',
// });
// navigate('/signin');
// } else {
// NotifAlert({
// icon: 'error',
// title: 'Registrasi Gagal',
// message: res?.data?.message || 'Terjadi kesalahan',
// });
// }
} catch (err) {
console.error('Register error:', err);
NotifAlert({
icon: 'error',
title: 'Registrasi Gagal',
message: err?.response?.data?.message || err.message || 'Terjadi kesalahan',
});
} finally {
setLoading(false);
} }
}; };
const handleOnSubmt = async (e) => {
// console.log('Received values of form: ', e);
// await handleSignIn(e);
e.preventDefault();
try {
const response = await fetch('http://localhost:5000/verify-captcha', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ userInput }),
});
const data = await response.json();
if (data.success) {
setMessage('CAPTCHA verified successfully!');
} else {
setMessage('CAPTCHA verification failed. Try again.');
fetchCaptcha(); // Refresh CAPTCHA on failure
}
} catch (error) {
console.error('Error verifying CAPTCHA:', error);
setMessage('An error occurred. Please try again.');
}
setUserInput(''); // Clear the input field
}
const moveToSignin = (e) => {
// e.preventDefault();
navigate("/signin")
}
return ( return (
<> <Flex
align="center"
<Flex justify="center"
align='center' style={{
justify='center' minHeight: '100vh',
// vertical backgroundImage: `url(${sypiu_ggcp})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
padding: '20px',
}}
>
<Card
style={{ style={{
height: '100vh', width: '100%',
// marginTop: '10vh', maxWidth: 450,
// backgroundImage: `url('https://via.placeholder.com/300')`, borderRadius: '12px',
backgroundImage: `url(${sypiu_ggcp})`, boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
backgroundSize: 'cover', padding: '10px',
backgroundPosition: 'center', textAlign: 'center',
}} }}
> >
<Card {/* Logo di dalam Card */}
style={{ <Image src={logo} height={120} width={180} preview={false} alt="logo"/>
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
}} <h2 style={{ marginBottom: '20px', color: '#1a3c34' }}>Registration</h2>
<Form onFinish={handleSignUp} layout="vertical">
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Full Name" name="fullname" rules={[{ required: true }]}>
<Input placeholder="Full Name" size="large" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Username" name="username" rules={[{ required: true }]}>
<Input placeholder="Username" size="large" />
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label="Email"
name="email"
rules={[{ required: true, type: 'email', message: 'Please input a valid email!' }]}
>
<Input placeholder="Email" size="large" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Phone" name="phone" rules={[{ required: true }]}>
<Input placeholder="Phone" size="large" />
</Form.Item>
</Col>
</Row>
<Form.Item label="Password" name="password" rules={[{ required: true }]}>
<Input.Password placeholder="Password" size="large" />
</Form.Item>
<Form.Item label="Confirm Password" name="confirmPassword" rules={[{ required: true }]}>
<Input.Password placeholder="Confirm Password" size="large" />
</Form.Item>
<Form.Item>
<Space direction="vertical" style={{ width: '100%' }}>
<Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }} >
Sign Up
</Button>
</Space>
</Form.Item>
</Form>
<Button
type="default"
style={{ width: '100%', marginTop: '10px' }}
onClick={moveToSignin}
> >
<Flex align='center' justify='center'> Sign In
<Image src='/vite.svg' height={150} width={150} preview={false} alt='signin' /> </Button>
</Flex> </Card>
<br /> </Flex>
<Form );
onFinish={handleOnSubmt} };
layout='vertical'
style={{ width: '250px' }}
>
<Form.Item label="Email" name="email" export default SignUp;
rules={[
{
required: true,
type: 'email'
},
]}
>
<Input placeholder='email' size='large' />
</Form.Item>
<Form.Item label="Password" name="password"
rules={[
{
required: true,
message: 'Please input your password!'
},
]}
>
<Input.Password placeholder='password' size='large' />
</Form.Item>
<div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
<Form.Item label="Captcha" name="captcha"
rules={[
{
required: true,
type: 'text'
},
]}
>
<Input placeholder='Enter CAPTCHA text' size='large' />
</Form.Item>
{/* <input
type="text"
placeholder="Enter CAPTCHA text"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
/> */}
<Form.Item>
<Space direction='vertical' style={{ width: '100%' }}>
<Button type="primary" htmlType="submit" style={{ width: '100%' }}>
Registrasi
</Button>
</Space>
</Form.Item>
</Form>
<Button
type="primary"
htmlType="submit"
style={{ width: '100%' }}
onClick={() => moveToSignin()}
>
Sign In
</Button>
</Card>
</Flex>
</>
)
}
export default SignUp

45
src/pages/home/Home.jsx
View File

@@ -9,41 +9,36 @@ const Home = () => {
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => setIsMobile(window.innerWidth <= 768);
setIsMobile(window.innerWidth <= 768);
};
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
useEffect(() => { useEffect(() => {
const token = localStorage.getItem('token'); setBreadcrumbItems([
if (token) { {
setBreadcrumbItems([ title: (
{ <Text strong style={{ fontSize: '14px' }}>
title: ( Dashboard
<Text strong style={{ fontSize: '14px' }}> </Text>
• Dashboard ),
</Text> },
), {
}, title: (
{ <Text strong style={{ fontSize: '14px' }}>
title: ( Home
<Text strong style={{ fontSize: '14px' }}> </Text>
Home ),
</Text> },
), ]);
},
]);
} else {
navigate('/signin');
}
}, []); }, []);
return ( return (
<Card> <Card>
<Flex align="center" justify="center"> <Flex align="center" justify="center">
<Text strong style={{fontSize:'30px'}}>Wellcome Call Of Duty App</Text> <Text strong style={{ fontSize: '30px' }}>
Welcome to Call Of Duty App
</Text>
</Flex> </Flex>
</Card> </Card>
); );