lavoce #2
36
src/App.jsx
36
src/App.jsx
@@ -1,44 +1,27 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import SignIn from './pages/auth/SignIn';
|
||||
import SignUp from './pages/auth/Signup';
|
||||
import { ProtectedRoute } from './ProtectedRoute';
|
||||
import NotFound from './pages/blank/NotFound';
|
||||
import { getSessionData } from './components/Global/Formatter';
|
||||
|
||||
// dashboard
|
||||
// Dashboard
|
||||
import Home from './pages/home/Home';
|
||||
import Blank from './pages/blank/Blank';
|
||||
|
||||
// master
|
||||
// Master
|
||||
import IndexDevice from './pages/master/device/IndexDevice';
|
||||
|
||||
// Setting
|
||||
|
||||
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 (
|
||||
<BrowserRouter
|
||||
future={{
|
||||
v7_startTransition: true,
|
||||
v7_relativeSplatPath: true,
|
||||
}}
|
||||
>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
{isAdmin ? (
|
||||
<Route path="/" element={<Navigate to="/dashboard/home" />} />
|
||||
) : (
|
||||
<Route path="/" element={<Navigate to="/dashboard/home-vendor" />} />
|
||||
)}
|
||||
|
||||
{/* Public Routes */}
|
||||
<Route path="/" element={<Navigate to="/signin" replace />} />
|
||||
<Route path="/signin" element={<SignIn />} />
|
||||
<Route path="/signup" element={<SignUp />} />
|
||||
|
||||
{/* Protected Routes */}
|
||||
<Route path="/dashboard" element={<ProtectedRoute />}>
|
||||
<Route path="home" element={<Home />} />
|
||||
<Route path="blank" element={<Blank />} />
|
||||
@@ -48,6 +31,7 @@ const App = () => {
|
||||
<Route path="device" element={<IndexDevice />} />
|
||||
</Route>
|
||||
|
||||
{/* Catch-all */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
import React from 'react';
|
||||
import { Navigate, Outlet } from 'react-router-dom';
|
||||
import MainLayout from './layout/MainLayout';
|
||||
|
||||
import { getSessionData } from './components/Global/Formatter';
|
||||
import { NotifAlert } from './components/Global/ToastNotif';
|
||||
|
||||
export const ProtectedRoute = () => {
|
||||
const session = getSessionData();
|
||||
// console.log(session);
|
||||
// cek token di localStorage
|
||||
const token = localStorage.getItem('token');
|
||||
const isAuthenticated = !!token;
|
||||
|
||||
const isAuthenticated = session?.auth ?? false;
|
||||
if (!isAuthenticated) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Session Habis',
|
||||
message: 'Silahkan login terlebih dahulu',
|
||||
});
|
||||
return <Navigate to="/signin" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<Outlet />
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
const handleLogOut = () => {
|
||||
const handleLogOut = (navigate) => {
|
||||
localStorage.removeItem('Auth');
|
||||
localStorage.removeItem('session');
|
||||
|
||||
if (navigate) {
|
||||
navigate('/signin', { replace: true });
|
||||
} else {
|
||||
window.location.replace('/signin');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default handleLogOut;
|
||||
@@ -8,18 +8,14 @@ const handleSignIn = async (values) => {
|
||||
|
||||
// return false
|
||||
if (response?.status == 200) {
|
||||
/* you can change this according to your authentication protocol */
|
||||
let token = JSON.stringify(response.data?.token);
|
||||
let role = JSON.stringify(response.data?.user?.role_id);
|
||||
|
||||
localStorage.setItem('token', token);
|
||||
response.data.auth = true;
|
||||
localStorage.setItem('session', encryptData(response?.data));
|
||||
if (role === `${import.meta.env.VITE_ROLE_VENDOR}`) {
|
||||
window.location.replace('/dashboard/home-vendor');
|
||||
} else {
|
||||
|
||||
// langsung redirect ke dashboard utama
|
||||
window.location.replace('/dashboard/home');
|
||||
}
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
|
||||
@@ -10,20 +10,10 @@ const login = async (params) => {
|
||||
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 response = await RegistrationRequest({
|
||||
method: 'post',
|
||||
prefix: 'register',
|
||||
prefix: 'auth/register',
|
||||
params: params,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
@@ -49,4 +39,4 @@ const checkUsername = async (queryParams) => {
|
||||
};
|
||||
|
||||
|
||||
export { login, uploadFile, register, verifyRedirect, checkUsername };
|
||||
export { login, register, verifyRedirect, checkUsername };
|
||||
|
||||
@@ -1,126 +1,91 @@
|
||||
import axios from 'axios';
|
||||
import Swal from 'sweetalert2';
|
||||
import axios from "axios";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
async function ApiRequest(
|
||||
urlParams = { method: 'GET', params: {}, url: '', prefix: '/', token: true }
|
||||
) {
|
||||
const baseURLDef = `${import.meta.env.VITE_API_SERVER}`;
|
||||
const instance = axios.create({
|
||||
baseURL: urlParams.url ?? baseURLDef,
|
||||
});
|
||||
async function ApiRequest({
|
||||
method = "GET",
|
||||
params = {},
|
||||
url = "",
|
||||
prefix = "/",
|
||||
token = true,
|
||||
} = {}) {
|
||||
const baseURL = url || import.meta.env.VITE_API_SERVER;
|
||||
const instance = axios.create({ baseURL });
|
||||
|
||||
const isFormData = urlParams.params instanceof FormData;
|
||||
const isFormData = params instanceof FormData;
|
||||
|
||||
// request config
|
||||
const request = {
|
||||
method: urlParams.method,
|
||||
url: urlParams.prefix ?? '/',
|
||||
data: urlParams.params,
|
||||
// yang lama
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// 'Accept-Language': 'en_US',
|
||||
// },
|
||||
|
||||
// yang baru
|
||||
method,
|
||||
url: prefix,
|
||||
data: params,
|
||||
headers: {
|
||||
'Accept-Language': 'en_US',
|
||||
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
|
||||
"Accept-Language": "en_US",
|
||||
...(isFormData ? {} : { "Content-Type": "application/json" }),
|
||||
},
|
||||
};
|
||||
|
||||
if (urlParams.params === 'doc') {
|
||||
request.responseType = 'arraybuffer';
|
||||
request.headers['Content-Type'] = 'blob';
|
||||
// handle download (doc)
|
||||
if (params === "doc") {
|
||||
request.responseType = "blob";
|
||||
}
|
||||
|
||||
// console.log(request);
|
||||
// ambil token
|
||||
const rawToken =
|
||||
sessionStorage.getItem("token_redirect") || localStorage.getItem("token");
|
||||
|
||||
// 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 (token && rawToken) {
|
||||
const cleanToken = rawToken.replace(/"/g, "");
|
||||
instance.defaults.headers.common[
|
||||
"Authorization"
|
||||
] = `Bearer ${cleanToken}`;
|
||||
}
|
||||
|
||||
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;
|
||||
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 };
|
||||
}
|
||||
|
||||
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) {
|
||||
// global error handler
|
||||
async function cekError(status, message = "") {
|
||||
console.log("status code", status);
|
||||
|
||||
if (status === 401) {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
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');
|
||||
location.replace("/signin");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
icon: "warning",
|
||||
title: "Peringatan",
|
||||
text: message,
|
||||
}).then((result) => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// wrapper biar frontend lebih simple
|
||||
const SendRequest = async (queryParams) => {
|
||||
try {
|
||||
const response = await ApiRequest(queryParams);
|
||||
return response || [];
|
||||
return response?.data || [];
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
if (error.response) {
|
||||
console.error('Error Status:', error.response.status); // Status error, misal: 401
|
||||
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;
|
||||
console.error("Request error:", error);
|
||||
Swal.fire({ icon: "error", text: error.message || "Something went wrong" });
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
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 handleLogOut from '../Utils/Auth/Logout';
|
||||
import { useBreadcrumb } from './LayoutBreadcrumb';
|
||||
import { decryptData } from '../components/Global/Formatter';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { replace, useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Link, Text } = Typography;
|
||||
const { Header } = Layout;
|
||||
@@ -12,17 +12,18 @@ const { Header } = Layout;
|
||||
const LayoutHeader = () => {
|
||||
const { breadcrumbItems } = useBreadcrumb();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
token: { colorBgContainer, colorBorder, colorText },
|
||||
} = theme.useToken();
|
||||
|
||||
// Ambil token warna dari theme Ant Design, dengan fallback default
|
||||
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
|
||||
const sessionData = localStorage.getItem('session');
|
||||
const userData = sessionData ? decryptData(sessionData) : null;
|
||||
// console.log(userData);
|
||||
|
||||
const roleName = userData?.user?.approval || userData?.user?.partner_name || 'Guest';
|
||||
|
||||
const userName = userData?.user?.name || userData?.user?.username || 'User';
|
||||
|
||||
return (
|
||||
@@ -35,7 +36,7 @@ const LayoutHeader = () => {
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
rowGap: 10,
|
||||
paddingTop:15,
|
||||
paddingTop: 15,
|
||||
paddingBottom: 20,
|
||||
paddingLeft: 24,
|
||||
paddingRight: 24,
|
||||
@@ -88,8 +89,7 @@ const LayoutHeader = () => {
|
||||
</Button>
|
||||
<Link
|
||||
onClick={() => {
|
||||
handleLogOut();
|
||||
navigate('/signin');
|
||||
handleLogOut(navigate);
|
||||
}}
|
||||
aria-label="Log out from the application"
|
||||
style={{
|
||||
@@ -117,3 +117,4 @@ const LayoutHeader = () => {
|
||||
};
|
||||
|
||||
export default LayoutHeader;
|
||||
|
||||
@@ -1,461 +1,461 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Flex,
|
||||
Input,
|
||||
InputNumber,
|
||||
Form,
|
||||
Button,
|
||||
Card,
|
||||
Space,
|
||||
Upload,
|
||||
Divider,
|
||||
Tooltip,
|
||||
message,
|
||||
Select,
|
||||
} from 'antd';
|
||||
import {
|
||||
UploadOutlined,
|
||||
UserOutlined,
|
||||
IdcardOutlined,
|
||||
PhoneOutlined,
|
||||
LockOutlined,
|
||||
InfoCircleOutlined,
|
||||
MailOutlined,
|
||||
} from '@ant-design/icons';
|
||||
const { Item } = Form;
|
||||
const { Option } = Select;
|
||||
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { register, uploadFile, checkUsername } from '../../api/auth';
|
||||
import { NotifAlert } from '../../components/Global/ToastNotif';
|
||||
// import React, { useState } from 'react';
|
||||
// import {
|
||||
// Flex,
|
||||
// Input,
|
||||
// InputNumber,
|
||||
// Form,
|
||||
// Button,
|
||||
// Card,
|
||||
// Space,
|
||||
// Upload,
|
||||
// Divider,
|
||||
// Tooltip,
|
||||
// message,
|
||||
// Select,
|
||||
// } from 'antd';
|
||||
// import {
|
||||
// UploadOutlined,
|
||||
// UserOutlined,
|
||||
// IdcardOutlined,
|
||||
// PhoneOutlined,
|
||||
// LockOutlined,
|
||||
// InfoCircleOutlined,
|
||||
// MailOutlined,
|
||||
// } from '@ant-design/icons';
|
||||
// const { Item } = Form;
|
||||
// const { Option } = Select;
|
||||
// import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
|
||||
// import { useNavigate } from 'react-router-dom';
|
||||
// import { register, uploadFile, checkUsername } from '../../api/auth';
|
||||
// import { NotifAlert } from '../../components/Global/ToastNotif';
|
||||
|
||||
const Registration = () => {
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fileListKontrak, setFileListKontrak] = useState([]);
|
||||
const [fileListHsse, setFileListHsse] = useState([]);
|
||||
const [fileListIcon, setFileListIcon] = useState([]);
|
||||
// const Registration = () => {
|
||||
// const [form] = Form.useForm();
|
||||
// const navigate = useNavigate();
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [fileListKontrak, setFileListKontrak] = useState([]);
|
||||
// const [fileListHsse, setFileListHsse] = useState([]);
|
||||
// const [fileListIcon, setFileListIcon] = useState([]);
|
||||
|
||||
// Daftar jenis vendor
|
||||
const vendorTypes = [
|
||||
{ vendor_type: 1, vendor_type_name: 'One-Time' },
|
||||
{ vendor_type: 2, vendor_type_name: 'Rutin' },
|
||||
];
|
||||
// // Daftar jenis vendor
|
||||
// const vendorTypes = [
|
||||
// { vendor_type: 1, vendor_type_name: 'One-Time' },
|
||||
// { vendor_type: 2, vendor_type_name: 'Rutin' },
|
||||
// ];
|
||||
|
||||
const onFinish = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
if (!fileListKontrak.length || !fileListHsse.length) {
|
||||
message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// const onFinish = async (values) => {
|
||||
// setLoading(true);
|
||||
// try {
|
||||
// if (!fileListKontrak.length || !fileListHsse.length) {
|
||||
// message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
|
||||
// setLoading(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('path_kontrak', fileListKontrak[0].originFileObj);
|
||||
formData.append('path_hse_plant', fileListHsse[0].originFileObj);
|
||||
if (fileListIcon.length) {
|
||||
formData.append('path_icon', fileListIcon[0].originFileObj);
|
||||
}
|
||||
// const formData = new FormData();
|
||||
// formData.append('path_kontrak', fileListKontrak[0].originFileObj);
|
||||
// formData.append('path_hse_plant', fileListHsse[0].originFileObj);
|
||||
// if (fileListIcon.length) {
|
||||
// formData.append('path_icon', fileListIcon[0].originFileObj);
|
||||
// }
|
||||
|
||||
const uploadResponse = await uploadFile(formData);
|
||||
// const uploadResponse = await uploadFile(formData);
|
||||
|
||||
if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
|
||||
message.error(uploadResponse.message || 'Gagal mengunggah file.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
|
||||
// message.error(uploadResponse.message || 'Gagal mengunggah file.');
|
||||
// setLoading(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
const params = new URLSearchParams({ username: values.username });
|
||||
const usernameCheck = await checkUsername(params);
|
||||
if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// const params = new URLSearchParams({ username: values.username });
|
||||
// const usernameCheck = await checkUsername(params);
|
||||
// if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
|
||||
// NotifAlert({
|
||||
// icon: 'error',
|
||||
// title: 'Gagal',
|
||||
// message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
|
||||
// });
|
||||
// setLoading(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
const registerData = {
|
||||
nama_perusahaan: values.namaPerusahaan,
|
||||
no_kontak_wo: values.noKontakWo,
|
||||
path_kontrak: uploadResponse.data.pathKontrak || '',
|
||||
durasi: values.durasiPekerjaan,
|
||||
nilai_csms: values.nilaiCsms.toString(),
|
||||
vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
|
||||
path_hse_plant: uploadResponse.data.pathHsePlant || '',
|
||||
nama_leader: values.penanggungJawab,
|
||||
no_identitas: values.noIdentitas,
|
||||
no_hp: values.noHandphone,
|
||||
email_register: values.username,
|
||||
password_register: values.password,
|
||||
};
|
||||
// const registerData = {
|
||||
// nama_perusahaan: values.namaPerusahaan,
|
||||
// no_kontak_wo: values.noKontakWo,
|
||||
// path_kontrak: uploadResponse.data.pathKontrak || '',
|
||||
// durasi: values.durasiPekerjaan,
|
||||
// nilai_csms: values.nilaiCsms.toString(),
|
||||
// vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
|
||||
// path_hse_plant: uploadResponse.data.pathHsePlant || '',
|
||||
// nama_leader: values.penanggungJawab,
|
||||
// no_identitas: values.noIdentitas,
|
||||
// no_hp: values.noHandphone,
|
||||
// email_register: values.username,
|
||||
// password_register: values.password,
|
||||
// };
|
||||
|
||||
const response = await register(registerData);
|
||||
// const response = await register(registerData);
|
||||
|
||||
if (response.data?.id_register) {
|
||||
message.success('Data berhasil disimpan!');
|
||||
// if (response.data?.id_register) {
|
||||
// message.success('Data berhasil disimpan!');
|
||||
|
||||
try {
|
||||
form.resetFields();
|
||||
setFileListKontrak([]);
|
||||
setFileListHsse([]);
|
||||
setFileListIcon([]);
|
||||
// try {
|
||||
// form.resetFields();
|
||||
// setFileListKontrak([]);
|
||||
// setFileListHsse([]);
|
||||
// setFileListIcon([]);
|
||||
|
||||
navigate('/registration-submitted');
|
||||
} catch (postSuccessError) {
|
||||
message.warning(
|
||||
'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saat registrasi:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: error.message || 'Terjadi kesalahan, silakan coba lagi',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// navigate('/registration-submitted');
|
||||
// } catch (postSuccessError) {
|
||||
// message.warning(
|
||||
// 'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
|
||||
// );
|
||||
// }
|
||||
// } else {
|
||||
// message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('Error saat registrasi:', error);
|
||||
// NotifAlert({
|
||||
// icon: 'error',
|
||||
// title: 'Gagal',
|
||||
// message: error.message || 'Terjadi kesalahan, silakan coba lagi',
|
||||
// });
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
const onCancel = () => {
|
||||
form.resetFields();
|
||||
setFileListKontrak([]);
|
||||
setFileListHsse([]);
|
||||
setFileListIcon([]);
|
||||
navigate('/signin');
|
||||
};
|
||||
// const onCancel = () => {
|
||||
// form.resetFields();
|
||||
// setFileListKontrak([]);
|
||||
// setFileListHsse([]);
|
||||
// setFileListIcon([]);
|
||||
// navigate('/signin');
|
||||
// };
|
||||
|
||||
const handleChangeKontrak = ({ fileList }) => {
|
||||
setFileListKontrak(fileList);
|
||||
};
|
||||
// const handleChangeKontrak = ({ fileList }) => {
|
||||
// setFileListKontrak(fileList);
|
||||
// };
|
||||
|
||||
const handleChangeHsse = ({ fileList }) => {
|
||||
setFileListHsse(fileList);
|
||||
};
|
||||
// const handleChangeHsse = ({ fileList }) => {
|
||||
// setFileListHsse(fileList);
|
||||
// };
|
||||
|
||||
const handleChangeIcon = ({ fileList }) => {
|
||||
setFileListIcon(fileList);
|
||||
};
|
||||
// const handleChangeIcon = ({ fileList }) => {
|
||||
// setFileListIcon(fileList);
|
||||
// };
|
||||
|
||||
const beforeUpload = (file, fieldname) => {
|
||||
const isValidType = [
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/png',
|
||||
fieldname !== 'path_icon' ? 'application/pdf' : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.includes(file.type);
|
||||
const isNotEmpty = file.size > 0;
|
||||
const isSizeValid = file.size / 1024 / 1024 < 10;
|
||||
// const beforeUpload = (file, fieldname) => {
|
||||
// const isValidType = [
|
||||
// 'image/jpeg',
|
||||
// 'image/jpg',
|
||||
// 'image/png',
|
||||
// fieldname !== 'path_icon' ? 'application/pdf' : null,
|
||||
// ]
|
||||
// .filter(Boolean)
|
||||
// .includes(file.type);
|
||||
// const isNotEmpty = file.size > 0;
|
||||
// const isSizeValid = file.size / 1024 / 1024 < 10;
|
||||
|
||||
if (!isValidType) {
|
||||
message.error(
|
||||
`Hanya file ${
|
||||
fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
|
||||
} yang diperbolehkan!`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (!isNotEmpty) {
|
||||
message.error('File tidak boleh kosong!');
|
||||
return false;
|
||||
}
|
||||
if (!isSizeValid) {
|
||||
message.error('Ukuran file maksimal 10MB!');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
// if (!isValidType) {
|
||||
// message.error(
|
||||
// `Hanya file ${
|
||||
// fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
|
||||
// } yang diperbolehkan!`
|
||||
// );
|
||||
// return false;
|
||||
// }
|
||||
// if (!isNotEmpty) {
|
||||
// message.error('File tidak boleh kosong!');
|
||||
// return false;
|
||||
// }
|
||||
// if (!isSizeValid) {
|
||||
// message.error('Ukuran file maksimal 10MB!');
|
||||
// return false;
|
||||
// }
|
||||
// return true;
|
||||
// };
|
||||
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: `url(${sypiu_ggcp})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 800,
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
padding: '24px',
|
||||
}}
|
||||
title={
|
||||
<Flex align="center" justify="space-between">
|
||||
<h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<InfoCircleOutlined />}
|
||||
onClick={() => navigate('/signin')}
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
layout="horizontal"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
labelAlign="left"
|
||||
style={{ maxWidth: 800 }}
|
||||
>
|
||||
{/* Informasi Perusahaan */}
|
||||
<Divider
|
||||
orientation="left"
|
||||
orientationMargin={0}
|
||||
style={{
|
||||
color: '#23A55A',
|
||||
fontWeight: 'bold',
|
||||
marginLeft: 0,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
Informasi Perusahaan
|
||||
</Divider>
|
||||
<Item
|
||||
label="Nama Perusahaan"
|
||||
name="namaPerusahaan"
|
||||
rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="Masukkan Nama Perusahaan"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="Durasi Pekerjaan (Hari)"
|
||||
name="durasiPekerjaan"
|
||||
rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Masukkan Durasi Pekerjaan"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="No Kontrak Kerja / Agreement"
|
||||
name="noKontakWo"
|
||||
rules={[
|
||||
{ required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
placeholder="Masukkan No Kontrak Kerja / Agreement"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="Lampiran Kontrak Kerja"
|
||||
name="lampiranKontrak"
|
||||
rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
|
||||
>
|
||||
<Upload
|
||||
beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
|
||||
fileList={fileListKontrak}
|
||||
onChange={handleChangeKontrak}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} size="large">
|
||||
Unggah PDF/JPG
|
||||
</Button>
|
||||
</Upload>
|
||||
</Item>
|
||||
<Item
|
||||
label="HSSE Plan"
|
||||
name="hssePlan"
|
||||
rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
|
||||
>
|
||||
<Upload
|
||||
beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
|
||||
fileList={fileListHsse}
|
||||
onChange={handleChangeHsse}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} size="large">
|
||||
Unggah PDF/JPG
|
||||
</Button>
|
||||
</Upload>
|
||||
</Item>
|
||||
<Item
|
||||
label="Nilai CSMS"
|
||||
name="nilaiCsms"
|
||||
rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={100}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Masukkan Nilai CSMS"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="Jenis Vendor"
|
||||
name="jenisVendor"
|
||||
rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="Pilih Jenis Vendor"
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{vendorTypes.map((vendor) => (
|
||||
<Option key={vendor.vendor_type} value={vendor.vendor_type}>
|
||||
{vendor.vendor_type_name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Item>
|
||||
// return (
|
||||
// <Flex
|
||||
// align="center"
|
||||
// justify="center"
|
||||
// style={{
|
||||
// minHeight: '100vh',
|
||||
// backgroundImage: `url(${sypiu_ggcp})`,
|
||||
// backgroundSize: 'cover',
|
||||
// backgroundPosition: 'center',
|
||||
// padding: '20px',
|
||||
// }}
|
||||
// >
|
||||
// <Card
|
||||
// style={{
|
||||
// width: '100%',
|
||||
// maxWidth: 800,
|
||||
// background: 'rgba(255, 255, 255, 0.9)',
|
||||
// backdropFilter: 'blur(10px)',
|
||||
// borderRadius: '12px',
|
||||
// boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
// padding: '24px',
|
||||
// }}
|
||||
// title={
|
||||
// <Flex align="center" justify="space-between">
|
||||
// <h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
|
||||
// <Button
|
||||
// type="link"
|
||||
// icon={<InfoCircleOutlined />}
|
||||
// onClick={() => navigate('/signin')}
|
||||
// >
|
||||
// Kembali
|
||||
// </Button>
|
||||
// </Flex>
|
||||
// }
|
||||
// >
|
||||
// <Form
|
||||
// form={form}
|
||||
// onFinish={onFinish}
|
||||
// layout="horizontal"
|
||||
// labelCol={{ span: 8 }}
|
||||
// wrapperCol={{ span: 16 }}
|
||||
// labelAlign="left"
|
||||
// style={{ maxWidth: 800 }}
|
||||
// >
|
||||
// {/* Informasi Perusahaan */}
|
||||
// <Divider
|
||||
// orientation="left"
|
||||
// orientationMargin={0}
|
||||
// style={{
|
||||
// color: '#23A55A',
|
||||
// fontWeight: 'bold',
|
||||
// marginLeft: 0,
|
||||
// paddingLeft: 0,
|
||||
// }}
|
||||
// >
|
||||
// Informasi Perusahaan
|
||||
// </Divider>
|
||||
// <Item
|
||||
// label="Nama Perusahaan"
|
||||
// name="namaPerusahaan"
|
||||
// rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
|
||||
// >
|
||||
// <Input
|
||||
// prefix={<UserOutlined />}
|
||||
// placeholder="Masukkan Nama Perusahaan"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="Durasi Pekerjaan (Hari)"
|
||||
// name="durasiPekerjaan"
|
||||
// rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
|
||||
// >
|
||||
// <InputNumber
|
||||
// min={1}
|
||||
// style={{ width: '100%' }}
|
||||
// placeholder="Masukkan Durasi Pekerjaan"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="No Kontrak Kerja / Agreement"
|
||||
// name="noKontakWo"
|
||||
// rules={[
|
||||
// { required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
|
||||
// ]}
|
||||
// >
|
||||
// <Input
|
||||
// style={{
|
||||
// width: '100%',
|
||||
// }}
|
||||
// placeholder="Masukkan No Kontrak Kerja / Agreement"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="Lampiran Kontrak Kerja"
|
||||
// name="lampiranKontrak"
|
||||
// rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
|
||||
// >
|
||||
// <Upload
|
||||
// beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
|
||||
// fileList={fileListKontrak}
|
||||
// onChange={handleChangeKontrak}
|
||||
// maxCount={1}
|
||||
// >
|
||||
// <Button icon={<UploadOutlined />} size="large">
|
||||
// Unggah PDF/JPG
|
||||
// </Button>
|
||||
// </Upload>
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="HSSE Plan"
|
||||
// name="hssePlan"
|
||||
// rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
|
||||
// >
|
||||
// <Upload
|
||||
// beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
|
||||
// fileList={fileListHsse}
|
||||
// onChange={handleChangeHsse}
|
||||
// maxCount={1}
|
||||
// >
|
||||
// <Button icon={<UploadOutlined />} size="large">
|
||||
// Unggah PDF/JPG
|
||||
// </Button>
|
||||
// </Upload>
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="Nilai CSMS"
|
||||
// name="nilaiCsms"
|
||||
// rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
|
||||
// >
|
||||
// <InputNumber
|
||||
// min={0}
|
||||
// max={100}
|
||||
// style={{ width: '100%' }}
|
||||
// placeholder="Masukkan Nilai CSMS"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="Jenis Vendor"
|
||||
// name="jenisVendor"
|
||||
// rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
|
||||
// >
|
||||
// <Select
|
||||
// placeholder="Pilih Jenis Vendor"
|
||||
// size="large"
|
||||
// style={{ width: '100%' }}
|
||||
// >
|
||||
// {vendorTypes.map((vendor) => (
|
||||
// <Option key={vendor.vendor_type} value={vendor.vendor_type}>
|
||||
// {vendor.vendor_type_name}
|
||||
// </Option>
|
||||
// ))}
|
||||
// </Select>
|
||||
// </Item>
|
||||
|
||||
{/* Informasi Penanggung Jawab */}
|
||||
<Divider
|
||||
orientation="left"
|
||||
orientationMargin={0}
|
||||
style={{
|
||||
color: '#23A55A',
|
||||
fontWeight: 'bold',
|
||||
marginLeft: 0,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
Informasi Penanggung Jawab
|
||||
</Divider>
|
||||
<Item
|
||||
label="Nama Penanggung Jawab"
|
||||
name="penanggungJawab"
|
||||
rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="Masukkan Nama Penanggung Jawab"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="No Handphone"
|
||||
name="noHandphone"
|
||||
rules={[
|
||||
{ required: true, message: 'Masukkan No Handphone!' },
|
||||
{
|
||||
pattern: /^(\+62|0)[0-9]{9,12}$/,
|
||||
message:
|
||||
'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<PhoneOutlined />}
|
||||
placeholder="Masukkan No Handphone (+62)"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="No Identitas"
|
||||
name="noIdentitas"
|
||||
rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<IdcardOutlined />}
|
||||
placeholder="Masukkan No Identitas"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
// {/* Informasi Penanggung Jawab */}
|
||||
// <Divider
|
||||
// orientation="left"
|
||||
// orientationMargin={0}
|
||||
// style={{
|
||||
// color: '#23A55A',
|
||||
// fontWeight: 'bold',
|
||||
// marginLeft: 0,
|
||||
// paddingLeft: 0,
|
||||
// }}
|
||||
// >
|
||||
// Informasi Penanggung Jawab
|
||||
// </Divider>
|
||||
// <Item
|
||||
// label="Nama Penanggung Jawab"
|
||||
// name="penanggungJawab"
|
||||
// rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
|
||||
// >
|
||||
// <Input
|
||||
// prefix={<UserOutlined />}
|
||||
// placeholder="Masukkan Nama Penanggung Jawab"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="No Handphone"
|
||||
// name="noHandphone"
|
||||
// rules={[
|
||||
// { required: true, message: 'Masukkan No Handphone!' },
|
||||
// {
|
||||
// pattern: /^(\+62|0)[0-9]{9,12}$/,
|
||||
// message:
|
||||
// 'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <Input
|
||||
// prefix={<PhoneOutlined />}
|
||||
// placeholder="Masukkan No Handphone (+62)"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="No Identitas"
|
||||
// name="noIdentitas"
|
||||
// rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
|
||||
// >
|
||||
// <Input
|
||||
// prefix={<IdcardOutlined />}
|
||||
// placeholder="Masukkan No Identitas"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
|
||||
{/* Akun Pengguna */}
|
||||
<Divider
|
||||
orientation="left"
|
||||
orientationMargin={0}
|
||||
style={{
|
||||
color: '#23A55A',
|
||||
fontWeight: 'bold',
|
||||
marginLeft: 0,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
Akun Pengguna (digunakan sebagai user login SYPIU)
|
||||
</Divider>
|
||||
<Item
|
||||
label="Email"
|
||||
name="username"
|
||||
rules={[
|
||||
{ required: true, message: 'Masukkan Email!' },
|
||||
{ type: 'email', message: 'Format email tidak valid!' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<MailOutlined />}
|
||||
placeholder="Masukkan Email"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[
|
||||
{ required: true, message: 'Masukkan Password!' },
|
||||
{ min: 6, message: 'Password minimal 6 karakter!' },
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="Masukkan Password"
|
||||
size="large"
|
||||
/>
|
||||
</Item>
|
||||
// {/* Akun Pengguna */}
|
||||
// <Divider
|
||||
// orientation="left"
|
||||
// orientationMargin={0}
|
||||
// style={{
|
||||
// color: '#23A55A',
|
||||
// fontWeight: 'bold',
|
||||
// marginLeft: 0,
|
||||
// paddingLeft: 0,
|
||||
// }}
|
||||
// >
|
||||
// Akun Pengguna (digunakan sebagai user login SYPIU)
|
||||
// </Divider>
|
||||
// <Item
|
||||
// label="Email"
|
||||
// name="username"
|
||||
// rules={[
|
||||
// { required: true, message: 'Masukkan Email!' },
|
||||
// { type: 'email', message: 'Format email tidak valid!' },
|
||||
// ]}
|
||||
// >
|
||||
// <Input
|
||||
// prefix={<MailOutlined />}
|
||||
// placeholder="Masukkan Email"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
// <Item
|
||||
// label="Password"
|
||||
// name="password"
|
||||
// rules={[
|
||||
// { required: true, message: 'Masukkan Password!' },
|
||||
// { min: 6, message: 'Password minimal 6 karakter!' },
|
||||
// ]}
|
||||
// >
|
||||
// <Input.Password
|
||||
// prefix={<LockOutlined />}
|
||||
// placeholder="Masukkan Password"
|
||||
// size="large"
|
||||
// />
|
||||
// </Item>
|
||||
|
||||
{/* Tombol */}
|
||||
<Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Space style={{ marginTop: '24px', width: '100%' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
loading={loading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
width: 120,
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
<Button onClick={onCancel} size="large" style={{ width: 120 }}>
|
||||
Batal
|
||||
</Button>
|
||||
</Space>
|
||||
</Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
// {/* Tombol */}
|
||||
// <Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
// <Space style={{ marginTop: '24px', width: '100%' }}>
|
||||
// <Button
|
||||
// type="primary"
|
||||
// htmlType="submit"
|
||||
// size="large"
|
||||
// loading={loading}
|
||||
// style={{
|
||||
// backgroundColor: '#23A55A',
|
||||
// borderColor: '#23A55A',
|
||||
// width: 120,
|
||||
// }}
|
||||
// >
|
||||
// Simpan
|
||||
// </Button>
|
||||
// <Button onClick={onCancel} size="large" style={{ width: 120 }}>
|
||||
// Batal
|
||||
// </Button>
|
||||
// </Space>
|
||||
// </Item>
|
||||
// </Form>
|
||||
// </Card>
|
||||
// </Flex>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default Registration;
|
||||
// export default Registration;
|
||||
|
||||
@@ -1,172 +1,103 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
|
||||
import React from 'react';
|
||||
import handleSignIn from '../../Utils/Auth/SignIn';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
|
||||
import { SendRequest } from '../../components/Global/ApiRequest';
|
||||
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
|
||||
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 [captchaSvg, setCaptchaSvg] = React.useState('');
|
||||
const [userInput, setUserInput] = React.useState('');
|
||||
const [message, setMessage] = React.useState('');
|
||||
const [captchaText, setcaptchaText] = React.useState('');
|
||||
|
||||
const [captchaSvg, setCaptchaSvg] = useState('');
|
||||
const [captchaText, setCaptchaText] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
// let url = `${import.meta.env.VITE_API_SERVER}/users`;
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchCaptcha();
|
||||
}, []);
|
||||
const moveToSignUp = () => {
|
||||
navigate("/signup");
|
||||
};
|
||||
|
||||
// Fetch the CAPTCHA SVG from the backend
|
||||
// ambil captcha
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
// let url = `${import.meta.env.VITE_API_SERVER}/operation`
|
||||
// const response = await fetch('http://localhost:9528/generate-captcha');
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_API_SERVER}/auth/generate-captcha`,
|
||||
{
|
||||
credentials: 'include', // Wajib untuk mengirim cookie
|
||||
}
|
||||
);
|
||||
|
||||
// Ambil header
|
||||
const captchaToken = response.headers.get('X-Captcha-Token');
|
||||
|
||||
// console.log('Captcha Token:', decryptData(captchaToken));
|
||||
|
||||
setcaptchaText(decryptData(captchaToken));
|
||||
|
||||
const data = await response.text();
|
||||
setCaptchaSvg(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching CAPTCHA:', error);
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSubmit = async (e) => {
|
||||
// console.log('Received values of form: ', e);
|
||||
// e.preventDefault();
|
||||
useEffect(() => { fetchCaptcha(); }, []);
|
||||
|
||||
const handleOnSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// const response = await fetch(`${import.meta.env.VITE_API_SERVER}/auth/verify-captcha`, {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// credentials: 'include', // WAJIB: Agar cookie CAPTCHA dikirim
|
||||
// body: JSON.stringify({ captcha: userInput }),
|
||||
// });
|
||||
const res = await SendRequest({
|
||||
method: 'post',
|
||||
prefix: 'auth/login',
|
||||
params: {
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
captcha: values.captcha,
|
||||
captchaText: captchaText,
|
||||
}
|
||||
});
|
||||
|
||||
// const data = await response.json();
|
||||
// console.log(data);
|
||||
const user = res?.data?.user || res?.user;
|
||||
const tokens = res?.data?.tokens || res?.tokens;
|
||||
|
||||
const data = {
|
||||
success: captchaText === userInput ? true : false,
|
||||
};
|
||||
if (user && tokens?.accessToken) {
|
||||
localStorage.setItem('token', tokens.accessToken);
|
||||
localStorage.setItem('refreshToken', tokens.refreshToken);
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
|
||||
if (data.success) {
|
||||
setMessage('CAPTCHA verified successfully!');
|
||||
await handleSignIn(e);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Login Berhasil',
|
||||
message: res?.message || 'Selamat datang!',
|
||||
});
|
||||
|
||||
navigate('/dashboard/home');
|
||||
} 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.',
|
||||
title: 'Login Gagal',
|
||||
message: res?.message || 'Terjadi kesalahan',
|
||||
});
|
||||
fetchCaptcha();
|
||||
}
|
||||
} 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');
|
||||
} 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"
|
||||
// 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" 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="/src/assets/freepik/LOGOPIU.png"
|
||||
src={logo}
|
||||
height={150}
|
||||
width={220}
|
||||
preview={false}
|
||||
alt="signin"
|
||||
/>
|
||||
<Image src={logo} height={150} width={220} preview={false} alt="logo" />
|
||||
</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 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: 'Please input your password!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="password" size="large" />
|
||||
<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>
|
||||
<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>
|
||||
<Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>Sign In</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
@@ -174,13 +105,12 @@ const SignIn = () => {
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => moveToRegistration()}
|
||||
onClick={() => moveToSignUp()}
|
||||
>
|
||||
Registration
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,158 +1,185 @@
|
||||
import { Flex, Input, Form, Button, Card, Space, Image } from 'antd'
|
||||
import React from 'react'
|
||||
// import handleSignIn from '../../Utils/Auth/SignIn';
|
||||
import React, { useState } from 'react';
|
||||
import { Flex, Input, Form, Button, Card, Space, Image, Row, Col, Typography } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
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 [captchaSvg, setCaptchaSvg] = React.useState('');
|
||||
const [userInput, setUserInput] = React.useState('');
|
||||
const [message, setMessage] = React.useState('');
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
// let url = `${import.meta.env.VITE_API_SERVER}/users`;
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchCaptcha();
|
||||
}, []);
|
||||
const moveToSignin = () => {
|
||||
navigate('/signin');
|
||||
};
|
||||
|
||||
// Fetch the CAPTCHA SVG from the backend
|
||||
const fetchCaptcha = async () => {
|
||||
const handleSignUp = async (values) => {
|
||||
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 {
|
||||
const response = await fetch('http://localhost:9528/generate-captcha');
|
||||
const data = await response.text();
|
||||
setCaptchaSvg(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching CAPTCHA:', error);
|
||||
const res = await register({ fullname, username, email, phone, password });
|
||||
// const user = res?.data?.user;
|
||||
// // const tokens = res?.data?.tokens;
|
||||
|
||||
|
||||
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 (
|
||||
<>
|
||||
|
||||
<Flex
|
||||
align='center'
|
||||
justify='center'
|
||||
// vertical
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
height: '100vh',
|
||||
// marginTop: '10vh',
|
||||
// backgroundImage: `url('https://via.placeholder.com/300')`,
|
||||
minHeight: '100vh',
|
||||
backgroundImage: `url(${sypiu_ggcp})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
|
||||
width: '100%',
|
||||
maxWidth: 450,
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Flex align='center' justify='center'>
|
||||
<Image src='/vite.svg' height={150} width={150} preview={false} alt='signin' />
|
||||
</Flex>
|
||||
<br />
|
||||
<Form
|
||||
onFinish={handleOnSubmt}
|
||||
layout='vertical'
|
||||
style={{ width: '250px' }}
|
||||
>
|
||||
{/* Logo di dalam Card */}
|
||||
<Image src={logo} height={120} width={180} preview={false} alt="logo"/>
|
||||
|
||||
<Form.Item label="Email" name="email"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
type: 'email'
|
||||
},
|
||||
]}
|
||||
<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' />
|
||||
<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="Password" name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your password!'
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder='password' size='large' />
|
||||
<Form.Item label="Confirm Password" name="confirmPassword" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="Confirm 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
|
||||
<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="primary"
|
||||
htmlType="submit"
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => moveToSignin()}
|
||||
type="default"
|
||||
style={{ width: '100%', marginTop: '10px' }}
|
||||
onClick={moveToSignin}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp
|
||||
export default SignUp;
|
||||
|
||||
@@ -9,21 +9,17 @@ const Home = () => {
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
const handleResize = () => setIsMobile(window.innerWidth <= 768);
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• Dashboard
|
||||
Dashboard
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
@@ -35,15 +31,14 @@ const Home = () => {
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<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>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user