· last year · Jun 25, 2024, 08:50 PM
1import { useCallback, useState } from "react";
2import { Head, Link } from "@inertiajs/react";
3import { ClearFieldError, SetFieldError } from "@/Components/CoreFunctionsComponent.jsx";
4import { Toggler } from "@/Components/Toggler.jsx";
5export default function Index(data) {
6 const [button, setButton] = useState("Next Step");
7 const [isButtonDisabled, setButtonAsDisabled] = useState(false);
8 const [formdata, setFormdata] = useState({
9 license_key: null,
10 website_registration_status: 1,
11 name: null,
12 username: null,
13 password: null,
14 email: null,
15 license_agreement: null,
16 website_name: null,
17 });
18 const [formerrors, setFormErrors] = useState({
19 license_key: null,
20 website_registration_status: null,
21 name: null,
22 username: null,
23 password: null,
24 email: null,
25 license_agreement: null,
26 website_name: null,
27 });
28 const [serverRequirementsPage, setPageServerRequirements] = useState(true);
29 const [licenseVerificationPage, setPageLicenseVerification] = useState(false);
30 const [licenseTermsPage, setLicenseTermsPage] = useState(false);
31 const [installStatusPage, setInstallStatusPage] = useState(false);
32
33 if (!data.hasMinimumVersion || !data.hasCurlExtension || (!data.hasCtypeExtension && !data.hasSupportedDB)) {
34 setButtonAsDisabled(true);
35 setButton("Installation Failed...");
36 }
37 const [pageNav, setPageNav] = useState({
38 server_requirements: true,
39 license_verification: false,
40 license_agreement: false,
41 install: false,
42 admin_account: false,
43 install_complete: false,
44 });
45 const [installStatus, setInstallStatus] = useState(0);
46 const [installDetails, AddInstallDetail] = useState({});
47 const validateLicense = useCallback(() => {
48 if (isButtonDisabled) {
49 return;
50 }
51 setButton("Validate License");
52 setPageServerRequirements(false);
53 setPageLicenseVerification(true);
54 setPageNav((prevState) => ({ ...prevState, server_requirements: false, license_verification: true }));
55 }, []);
56 const validateKey = useCallback(
57 (e) => {
58 let el = e.currentTarget,
59 id = el.id,
60 value = el.value;
61 if (/^[a-zA-Z-0-9]+$/.test(value)) {
62 setFormData((prev) => ({ ...prev, license_key: value }));
63 setFormErrors((prev) => ({ ...prev, license_key: null }));
64 } else {
65 setFormData((prev) => ({ ...prev, license_key: null }));
66 setFormErrors((prev) => ({ ...prev, license_key: "Invalid license key!" }));
67 }
68 },
69 [formdata],
70 );
71 const [reinstallModal, ShowReinstallModal] = useState(false);
72 const [sitesettingsModal, ShowSiteSettingsModal] = useState(false);
73 const [adminAccount, ShowAdminModal] = useState(false);
74 const [installComplete, ShowInstallCompleteModal] = useState(false);
75
76 const checkLicense = useCallback(
77 async (e) => {
78 e.preventDefault();
79 setButtonAsDisabled(true);
80 setButton("Validating License...");
81 await axios
82 .post("/install/verify", JSON.stringify(formdata), {
83 headers: {
84 "Content-Type": "application/json",
85 type: "formdata",
86 },
87 })
88 .catch((e) => {
89 console.log(e);
90 })
91 .then((d) => {
92 if (d.data.errors) {
93 setFormErrors(d.data.errors);
94 } else {
95 setButtonAsDisabled(false);
96 setButton("Continue");
97 setPageNav((prevState) => ({ ...prevState, license_verification: false, license_agreement: true }));
98 setPageLicenseVerification(false);
99 setLicenseTermsPage(true);
100 }
101 });
102 },
103 [data],
104 );
105 const checkTables = useCallback(async (e) => {
106 e.preventDefault();
107 if (!formdata.license_agreement) {
108 setButtonAsDisabled(true);
109 setFormErrors((prev) => ({ ...prev, license_agreement: "You must accept the license terms!" }));
110 } else {
111 setLicenseTermsPage(false);
112 setPageNav((prevState) => ({ ...prevState, license_agreement: false, install: true }));
113 setInstallStatusPage(true);
114 setButtonAsDisabled(true);
115 setButton("Installing...");
116 setInstallStatus(10);
117 AddInstallDetail({ check_tables: "Checking database tables" });
118 await axios
119 .request({
120 url: "/install/step1",
121 method: "post",
122 })
123 .catch((e) => {
124 console.log(e);
125 })
126 .then(async (d) => {
127 if (d.data && d.data.has_tables) {
128 AddInstallDetail({ table_exists: "Database table exists, do you want to reinstall the app?" });
129 ShowReinstallModal(true);
130 } else {
131 const t = await createTables();
132 if (t) {
133 const b = await createAdminGroup();
134 if (b) {
135 const c = await createBannedGroup();
136 if (c) {
137 const d = await createCustomersGroup();
138 if (d) {
139 ShowSiteSettingsModal(true);
140 }
141 }
142 }
143 }
144 }
145 });
146 }
147 }, []);
148 const createTables = async () => {
149 const data = await axios.post("/install/step1b");
150 if (data.data.created_database_tables) {
151 setInstallStatus(30);
152 AddInstallDetail({ created_database_tables: "Successfully created database tables" });
153 return true;
154 } else {
155 AddInstallDetail({ database_tables_fail: "Failed to create database tables, installation aborted" });
156 setButton("Installation aborted...");
157 return false;
158 }
159 };
160 const createAdminGroup = async () => {
161 const data = await axios.post("/install/step2");
162 if (data.data.has_created_admin_group) {
163 setInstallStatus(50);
164 AddInstallDetail({ admin_group_created: "Successfully created admin group..." });
165 return true;
166 } else {
167 AddInstallDetail({ failed_admin_group: "Failed to create admin group, installation aborted!" });
168 setButton("Installation aborted!");
169 return false;
170 }
171 };
172 const createBannedGroup = async () => {
173 const data = await axios.post("/install/step3");
174 AddInstallDetail({ creating_banned_group: "Creating banned user group..." });
175 if (data.data.has_created_banned_group) {
176 setInstallStatus(70);
177 AddInstallDetail({ created_banned_group: "Successfully created banned user group" });
178 return true;
179 } else {
180 AddInstallDetail({ failed_banned_group: "Failed to create banned user group" });
181 setButton("Installation Aborted");
182 return false;
183 }
184 };
185 const createCustomersGroup = async () => {
186 AddInstallDetail({ creating_customers_group: "Creating customers user group..." });
187 const response = await axios.post("/install/step4", JSON.stringify(formdata), {
188 headers: {
189 "Content-Type": "application/json",
190 },
191 });
192 if (response.data.has_created_customer_group) {
193 setInstallStatus(80);
194 AddInstallDetail({ created_customers_group: "Successfully created customers user group..." });
195 return true;
196 } else {
197 AddInstallDetail({
198 customers_group_fail: "Failed to create customers user group, check logs. Installation aborted!",
199 });
200 setButton("Installation Aborted!");
201 return false;
202 }
203 };
204 const dropTables = useCallback(async () => {
205 ShowReinstallModal(false);
206 AddInstallDetail({ drop_tables: "Dropping database tables..." });
207 await axios
208 .post("/install/step1a", null)
209 .catch((e) => {
210 AddInstallDetail({ drop_t: "Failed to drop database tables..." });
211 console.error(e);
212 })
213 .then(async (d) => {
214 if (!d.data.has_drop_tables) {
215 AddInstallDetail({ drop_tables_fail: "Failed to drop database tables, installation aborted!" });
216 } else {
217 setInstallStatus(20);
218 AddInstallDetail({ database_tables: "Successfully dropped all database tables." });
219 AddInstallDetail({ creating_tables: "Creating database tables" });
220 const tables = await createTables();
221 if (tables) {
222 const admingroups = await createAdminGroup();
223 if (admingroups) {
224 const banned = await createBannedGroup();
225 if (banned) {
226 const customers = await createCustomersGroup();
227 if (customers) {
228 ShowSiteSettingsModal(true);
229 }
230 }
231 }
232 }
233 }
234 });
235 }, []);
236 const cancelInstallation = useCallback(() => {
237 ShowReinstallModal(false);
238 AddInstallDetail({ install_cancelled: "Installation cancelled by user." });
239 setButton("Installation cancelled!");
240 }, []);
241 const handleCheckbox = useCallback((e) => {
242 const el = e.currentTarget,
243 id = el.id;
244 if (el.checked) {
245 setButtonAsDisabled(false);
246 formdata.license_agreement = true;
247 setFormdata((prev) => ({ ...prev, license_agreement: true }));
248 setFormErrors((prev) => ({ ...prev, license_agreement: null }));
249 } else {
250 setFormErrors((prev) => ({ ...prev, license_agreement: "You must accept the license terms!" }));
251 setButtonAsDisabled(true);
252 }
253 }, []);
254 const [button2, setButton2] = useState("Save Settings");
255 const [isButton2Disabled, setButton2Disabled] = useState(false);
256 const handleRegistrationStatus = useCallback(
257 (e) => {
258 setFormdata((prev) => ({ ...prev, website_registration_status: parseInt(e) }));
259 },
260 [formdata],
261 );
262 const validateWebsiteName = useCallback(
263 (e) => {
264 const el = e.currentTarget,
265 id = el.id,
266 name = el.name,
267 value = el.value;
268 if (/^[a-zA-Z0-9\s-.]+$/.test(value)) {
269 setFormErrors((prev) => ({ ...prev, website_name: null }));
270 setFormdata((prev) => ({ ...prev, website_name: value }));
271 } else {
272 setFormdata((prev) => ({ ...prev, website_name: null }));
273 setFormErrors((prev) => ({ ...prev, website_name: "Invalid website name!" }));
274 }
275 },
276 [formdata],
277 );
278 const updateSiteSettings = async () => {
279 AddInstallDetail({ update_site_settings: "Updating website settings..." });
280 setButton2("Saving...");
281 const data = await axios.post("/install/step5", JSON.stringify(formdata), {
282 headers: {
283 "Content-Type": "application/json",
284 },
285 });
286 if (data.data.has_created_site_settings) {
287 setButton2("Save Changes");
288 AddInstallDetail({ site_settings: "Successfully updated website settings" });
289 setInstallStatus(80);
290 ShowSiteSettingsModal(false);
291 return true;
292 } else {
293 AddInstallDetail({ site_settings: "Failed to create website settings" });
294 if (data.data.has_error && data.data.errors) {
295 setFormErrors(data.data.errors);
296 setButton2("Save Changes");
297 return false;
298 }
299 return false;
300 }
301 };
302 const handleWebsitesettings = useCallback(
303 async (e) => {
304 e.preventDefault();
305 const sitesettings = await updateSiteSettings();
306 if (sitesettings) {
307 setPageNav((prevState) => ({ ...prevState, install: false, admin_account: true }));
308 ShowAdminModal(true);
309 }
310 },
311 [formdata],
312 );
313 const validatePassword = useCallback(
314 (e) => {
315 const el = e.currentTarget,
316 id = el.id,
317 name = el.name,
318 value = el.value;
319 if (/(?=.*[a-z])+(?=.*[A-Z])+(?=.*[0-9])+(?=.*[#\$&%^*]){8,}/.test(value)) {
320 formdata[name] = value;
321 } else {
322 formdata[name] = null;
323 formerrors.password =
324 "Password must be complex (including 1 uppercase, 1 number, 1 symbol, 1 small letter and must be 8 in length)";
325 }
326 },
327 [formdata],
328 );
329 const validateName = useCallback(
330 (e) => {
331 const el = e.currentTarget,
332 id = el.id,
333 name = el.name,
334 value = el.value;
335 if (/^[a-zA-Z\s]+$/.test(value)) {
336 setFormErrors((prevState) => ({ name: null }));
337 formdata[name] = value;
338 } else {
339 setFormErrors((prevState) => ({ name: "Invalid name!" }));
340 formdata[name] = null;
341 }
342 },
343 [formdata, formerrors],
344 );
345 const validateEmail = useCallback(
346 (e) => {
347 const el = e.currentTarget,
348 id = el.id,
349 name = el.name,
350 value = el.value;
351 if (/^[a-zA-Z0-9]+@[a-zA-Z]{2,}\.[a-z]{2,}$/.test(value)) {
352 setFormErrors((prevState) => ({ ...prevState, email: null }));
353 formdata[name] = value;
354 } else {
355 formdata[name] = null;
356 setFormErrors((prevState) => ({ ...prevState, email: "Invalid email address!" }));
357 }
358 },
359 [formdata],
360 );
361 const validateUsername = useCallback(
362 (e) => {
363 const el = e.currentTarget,
364 id = el.id,
365 name = el.name,
366 value = el.value;
367 if (/^[a-zA-Z0-9]+$/.test(value)) {
368 formdata[name] = value;
369 setFormErrors((prevState) => ({ ...prevState, username: null }));
370 } else {
371 formdata[name] = null;
372 setFormErrors((prevState) => ({ ...prevState, username: "Invalid username!" }));
373 }
374 },
375 [formdata, formerrors],
376 );
377 const createAdmin = useCallback(async () => {
378 setButton2("Saving");
379 AddInstallDetail({ creating_admin_account: "Creating admin account..." });
380 const data = await axios.post("/install/step6", JSON.stringify(formdata), {
381 headers: {
382 "Content-Type": "application/json",
383 },
384 });
385 if (data.data.has_created_admin) {
386 setButton2("Save Changes");
387 AddInstallDetail({ created_admin_account: "Successfully created admin account" });
388 setInstallStatus(95);
389 return true;
390 } else {
391 if (data.data.errors) {
392 setFormErrors(data.data.errors);
393 return false;
394 }
395 }
396 }, [formdata]);
397 const handleAdminform = useCallback(
398 async (e) => {
399 e.preventDefault();
400 if (!formdata.name || !formdata.email || !formdata.password || !formdata.username) {
401 return;
402 }
403 const createadmin = await createAdmin();
404 if (createadmin) {
405 ShowAdminModal(false);
406 setPageNav((prevState) => ({ ...prevState, admin_account: false, install_complete: true }));
407 const isInstallationCompleted = await completeInstallation();
408 if (isInstallationCompleted) {
409 ShowInstallCompleteModal(true);
410 }
411 }
412 },
413 [formdata],
414 );
415 const completeInstallation = useCallback(async () => {
416 AddInstallDetail({ complete_install: "Clearing cache & writting installation lock file..." });
417 const data = await axios.post("/install/step7");
418 if (data.data.has_completed) {
419 setInstallStatus(100);
420 AddInstallDetail({ complete_install: "Installation completed." });
421 setButton("Installation Completed");
422 return true;
423 } else {
424 AddInstallDetail({ error: "installation aborted. Failed to clear cache and write installation lock file" });
425 setButton("Installation Aborted!");
426 return false;
427 }
428 }, []);
429 const closeDialog = useCallback(() => {
430 ShowInstallCompleteModal(false);
431 }, []);
432 return (
433 <>
434 <Head title={"Installation"} />
435 {installComplete ? (
436 <div className="modal install-complete flex flex-col flex-wrap items-baseline">
437 <div className="modal-container bg-dark border-2 border-solid border-dark flex flex-col items-baseline w-[100%] md:w-[50%] lg:w-[50%]">
438 <div className="modal-header bg-dark-1">
439 <span className="text-sm text-white font-bold">Installation completed</span>
440 </div>
441 <div className="modal-body flex flex-col w-[100%] flex-wrap items-baseline bg-dark">
442 <p>
443 Installation completed. If you ever want to reinstall your application, please delete{" "}
444 <b>install.lock</b> file located in <b>storage/app/</b>.
445 </p>
446 <div className="form-actions p-5 w-[100%] flex flex-row justify-between">
447 <Link href="/admin" className="button button--default w-[60%] text-center">
448 Go to AdminCP
449 </Link>
450 <button type="button button--default w-[30%] text-center" onClick={closeDialog}>
451 Close
452 </button>
453 </div>
454 </div>
455 </div>
456 </div>
457 ) : null}
458 {adminAccount ? (
459 <div className="modal flex flex-col flex-wrap items-baseline md:items-center lg:items-center">
460 <div className="modal-container bg-dark border-2 border-solid border-dark flex flex-col items-baseline w-[100%] md:items-center lg:items-center md:w-[50%] lg:w-[50%]">
461 <div className="bg-dark p-10 modal-header w-[100%] flex-wrap flex">
462 <span className="text-sm text-white font-bold">Admin Account</span>
463 </div>
464 <div className="modal-body bg-dark flex flex-col flex-wrap items-baseline]">
465 <form onSubmit={handleAdminform}>
466 <div className="control-group">
467 <label htmlFor="name">Display Name:</label>
468 <div className="control-input">
469 <input
470 type="text"
471 name="name"
472 id="name"
473 className={formerrors.name ? "formInput input--error" : "formInput"}
474 onChange={validateName}
475 />
476 <span className="error-text">{formerrors.name}</span>
477 <span className="help-text">Enter your name.</span>
478 </div>
479 </div>
480 <div className="control-group">
481 <label htmlFor="username">Username:</label>
482 <div className="control-input">
483 <input
484 type="text"
485 name="username"
486 id="username"
487 className={formerrors.username ? "formInput input--error" : "formInput"}
488 onChange={validateUsername}
489 />
490 <span className="error-text">{formerrors.username}</span>
491 <span className="help-text">
492 Enter your username, it'll be used for login. Never expose this information to anyone else.
493 </span>
494 </div>
495 </div>
496 <div className="control-group">
497 <label htmlFor="password">Password:</label>
498 <div className="control-input">
499 <input
500 type="password"
501 name="password"
502 id="password"
503 className={formerrors.password ? "formInput input--error" : "formInput"}
504 onChange={validatePassword}
505 />
506 <span className="error-text">{formerrors.password}</span>
507 <span className="help-text">
508 Accepted complex password including at least 1 uppercase, 1 small letter, 1 number and 1 symbol.
509 </span>
510 </div>
511 </div>
512 <div className="control-group">
513 <label htmlFor="email">Email:</label>
514 <div className="control-input">
515 <input
516 type="email"
517 name="email"
518 id="email"
519 className={formerrors.email ? "formInput input--error" : "formInput"}
520 onChange={validateEmail}
521 placeholder="example@example.com"
522 />
523 <span className="error-text">{formerrors.email}</span>
524 <span className="help-text">Enter your email address.</span>
525 </div>
526 </div>
527 <div className="control-group">
528 <div className="flex flex-wrap items-baseline bg-neutral-500 w-[100%] p-5 flex flex-col flex-wrap items-baseline">
529 <button
530 type="submit"
531 disabled={isButton2Disabled}
532 className={
533 isButton2Disabled
534 ? "button button--disabled button--default w-[100%] text-center"
535 : "button button--default text-center w-[100%]"
536 }
537 >
538 {button2}
539 </button>
540 </div>
541 </div>
542 </form>
543 </div>
544 </div>
545 </div>
546 ) : null}
547 {sitesettingsModal ? (
548 <div className="modal site-settings flex flex-col flex-wrap items-baseline">
549 <div className="modal-container bg-dark border-2 border-solid border-dark flex flex-col items-baseline w-[100%] md:w-[50%] lg:w-[50%]">
550 <div className="modal-header bg-dark p-10 flex w-[100%] flex-row flex-wrap items-baseline justify-between">
551 <span className="text-sm text-white font-bold">Website settings</span>
552 </div>
553 <div className="modal-body flex flex-col w-[100%] flex-wrap items-baseline bg-dark">
554 <form className="flex flex-col w-[100%] flex-wrap items-baseline" onSubmit={handleWebsitesettings}>
555 <div className="control-group">
556 <label htmlFor="website_name">Website name:</label>
557 <div className="control-input">
558 <input
559 type="text"
560 name="website_name"
561 id="website_name"
562 className={formerrors.website_name ? "formInput input--error" : "formInput"}
563 placeholder="website_name"
564 onChange={validateWebsiteName}
565 />
566 <span className="error-text">{formerrors.website_name}</span>
567 <span className="help-text">Enter in the field above website name.</span>
568 </div>
569 </div>
570 <div className="control-group">
571 <label>Registration status</label>
572 <div className="control-input">
573 <Toggler label="website_registration_status" id="website_registration_status" value="1" />
574 <span className="error-text">{formerrors.website_registration_status}</span>
575 </div>
576 </div>
577 <div className="flex w-[100%] flex-wrap bg-neutral-500 p-5 w-[100%]">
578 <button
579 type="submit"
580 disabled={isButton2Disabled}
581 className={
582 isButton2Disabled
583 ? "button button--disabled button--default w-[100%] text-center"
584 : "button button--default w-[100%] text-center"
585 }
586 >
587 {button2}
588 </button>
589 </div>
590 </form>
591 </div>
592 </div>
593 </div>
594 ) : null}
595 {reinstallModal ? (
596 <div className="modal reinstall-app flex flex-col flex-wrap items-baseline">
597 <div className="modal-container bg-dark border-2 border-solid border-dark flex flex-col flex-wrap items-baseline w-[100%] md:w-[50%] lg:w-[50%]">
598 <div className="modal-header bg-neutral-500 p-10 flex w-[100%] flex-row flex-wrap items-baseline justify-betwen">
599 <span className="text-sm text-white font-bold">Reinstall MyEcommerce app?</span>
600 <span className="pointer p-5">X</span>
601 </div>
602 <div className="modal-body bg-dark flex w-[100%] flex-column flex-wrap items-baseline">
603 <p>
604 Installer detected that installation already exists, are you sure you want to reinstall the application?
605 </p>
606 <div className="flex bg-neutral-500 w-[100%] justify-between flex flex-row items-baseline flex-wrap p-5">
607 <button type="button" className="button button--default w-[50%] text-center" onClick={dropTables}>
608 Yes
609 </button>
610 <button
611 type="button"
612 className="button button--default w-[40%] text-center"
613 onClick={cancelInstallation}
614 >
615 No
616 </button>
617 </div>
618 </div>
619 </div>
620 </div>
621 ) : null}
622 <div className="flex flex-row mt-1 p-5 flex-wrap items-center w-[100%] h-96 absolute justify-center">
623 <div className="flex flex-col w-[100%] md:w-[20%] lg:w-[20%] flex-wrap items-baseline bg-dark border-2 border-solid border-dark">
624 <ul className="nav w-[100%]">
625 <li className="nav-item flex w-[100%]">
626 <Link
627 href="#"
628 className={
629 pageNav.server_requirements
630 ? "nav-link link-active w-[100%] server-requirement"
631 : "nav-link w-[100%] server-requirements"
632 }
633 >
634 Server Requirements
635 </Link>
636 </li>
637 <li className="nav-item flex w-[100%]">
638 <Link
639 href="#"
640 className={
641 pageNav.license_verification
642 ? "nav-link link-active w-[100%] license_verification"
643 : "nav-link w-[100%] license_verification"
644 }
645 >
646 License verification
647 </Link>
648 </li>
649 <li className="nav-item flex w-[100%]">
650 <Link
651 href="#"
652 className={pageNav.license_agreement ? "nav-link link-active w-[100%]" : "nav-link w-[100%]"}
653 >
654 License Agreement
655 </Link>
656 </li>
657 <li className="nav-item flex w-[100%]">
658 <Link href="#" className={pageNav.install ? "nav-link w-[100%] link-active" : "nav-link w-[100%]"}>
659 Install
660 </Link>
661 </li>
662 <li className="nav-item flex w-[100%]">
663 <Link href="#" className={pageNav.admin_account ? "nav-link w-[100%] link-active" : "nav-link w-[100%]"}>
664 Admin account
665 </Link>
666 </li>
667 <li className="nav-item flex w-[100%]">
668 <Link
669 href="#"
670 className={pageNav.install_complete ? "nav-link w-[100%] link-active" : "nav-link w-[100%]"}
671 >
672 Complete Installation
673 </Link>
674 </li>
675 </ul>
676 </div>
677 <div className="flex flex-col w-[100%] lg:w-[70%] md:w-[70%] items-center mt-4">
678 <div className="block w-[100%] lg:w-[50%] bg-dark border-2 border-solid border-dark">
679 <div className="block-container">
680 <div className="block-header bg-dark-1">
681 <h1 className="block-title text-sm text-white">MyEcommerce installation</h1>
682 </div>
683 {serverRequirementsPage ? (
684 <div className="flex flex-col w-[100%] flex-wrap items-baseline server-requirements">
685 <div className="p-5 flex flex-col flex-wrap items-baseline w-[100%]">
686 <p>
687 Welcome to the MyEcommerce installation wizzard. This step will check for server requirements.
688 </p>
689 <section className="flex flex-col w-[100%] flex-wrap">
690 <h2 className="text text-green-900 text-sm font-bold">Minimum Requirements:</h2>
691 <dl className="flex flex-row flex-wrap justify-between items-baseline w-[100%]">
692 <div className="grid grid-cols-2 w-[100%]">
693 <dt className="text-sm text-red-600 font-bold">PHP Version {data.minimumVersion}:</dt>
694 <dd
695 className={
696 data.hasMinimumVersion
697 ? "text-sm text-green-900 font-bold"
698 : "text-sm text-red-600 font-bold"
699 }
700 >
701 {data.hasMinimumVersion
702 ? "Your server has minimum php version"
703 : "Your server does not meet the minimum php version!"}
704 </dd>
705 <dt className="text-sm text-red-600 font-bold">Supported DB (MySQL, PQSQL, SQLITE):</dt>
706 <dd
707 className={
708 data.hasSupportedDB
709 ? "text-sm text-green-900 font-bold"
710 : "text-sm text-red-600 font-bold"
711 }
712 >
713 {data.hasSupportedDB
714 ? "Your server has supported Database driver"
715 : "Your server does not have supported database driver"}
716 </dd>
717 <dt className="text-sm text-red-600 font-bold">Curl Extension enabled:</dt>
718 <dd
719 className={
720 data.hasCurlExtension
721 ? "text-sm text-green-900 font-bold"
722 : "text-sm text-red-600 font-bold"
723 }
724 >
725 {data.hasCurlExtension
726 ? "Your server has enabled Curl extension"
727 : "Your server does not have installed/enabled curl extension!"}
728 </dd>
729 <dt className="text-sm text-red-600 font-bold">cType extension enabled:</dt>
730 <dd
731 className={
732 data.hasCtypeExtension
733 ? "text-sm text-green-900 font-bold"
734 : "text-sm text-red-600 font-bold"
735 }
736 >
737 {data.hasCtypeExtension
738 ? "Your server has enabled ctype extension"
739 : "Your server does not have installed/enabled ctype extension"}
740 </dd>
741 </div>
742 </dl>
743 <div className="flex flex-wrap flex-row bg-neutral-500 p-5 w-[100%]">
744 <button
745 type="button"
746 className={
747 isButtonDisabled
748 ? "button button--disabled button--default text-center w-[100%]"
749 : "button button--default text-center w-[100%]"
750 }
751 onClick={validateLicense}
752 >
753 {button}
754 </button>
755 </div>
756 </section>
757 </div>
758 </div>
759 ) : null}
760 {licenseVerificationPage ? (
761 <div className="flex flex-col w-[100%] license">
762 <div className="p-10 w-[100%] flex flex-col items-baseline flex-wrap">
763 <h2 className="block-title text-sm text-white font-bold">License Validation</h2>
764 <p>Copy & paste the license key from customer area in the field below.</p>
765 <form onSubmit={checkLicense} className="flex flex-col w-[100%] items-baseline">
766 <div className="control-group">
767 <label htmlFor="license_key">License key:</label>
768 <div className="control-input">
769 <input
770 type="text"
771 name="license_key"
772 id="license_key"
773 className={formerrors.license_key ? "formInput input--error" : "formInput"}
774 placeholder="XXXX-XXXX-XXXX-XXXX"
775 maxLength={19}
776 onChange={validateKey}
777 />
778 <span className="error-text">{formerrors.license_key}</span>
779 </div>
780 <div className="flex flex-row flex-wrap bg-neutral-500 p-5 w-[100%]">
781 <button
782 type="submit"
783 disabled={isButtonDisabled}
784 className={
785 isButtonDisabled
786 ? "button button--default button--disabled w-[100%] text-center"
787 : "button button--default w-[100%] text-center"
788 }
789 >
790 {button}
791 </button>
792 </div>
793 </div>
794 </form>
795 </div>
796 </div>
797 ) : null}
798 {licenseTermsPage ? (
799 <div className="flex w-[100%] flex-col flex-wrap items-baseline agreement">
800 <div className="flex w-[100%] flex-col items-baseline flex-wrap p-10">
801 <h2 className="text-sm text-white font-bold">License Agreement</h2>
802 <div
803 className="flex w-[100%] px-5 flex-row flex-wrap items-baseline border-2 border-dark border-solid"
804 style={{
805 height: 300 + "px",
806 overflowY: "scroll",
807 }}
808 >
809 <p>
810 This license agreement is between you as a "Client", "Customer" and MyEcommerce as
811 "We","Us","Ours", "service provider", "provider", "Company", "Pixel Technologies Development".
812 </p>
813 <h3 className="text-sm text-gray-500 font-bold">1.License usage</h3>
814 <ol>
815 <li>
816 The license grants you permission to use the software you purchased and modify on your own
817 needs. While you may modify the software you may{" "}
818 <b>not redistribute in whole or in parts, sell or resell.</b>
819 </li>
820 <li>
821 Each license permit you to use one software at a time. If you want to use your license
822 somewhere else on another domain, path, you'll need first to delete all files from the current
823 installation path.
824 </li>
825 <li>
826 You may run additional single copy of the software for development and testing purposes and
827 must not be public accessible, which means only you and your staff may access to it.
828 </li>
829 <li>
830 You are not allowed to{" "}
831 <b>
832 modify and remove copyright content without prior written consent from our side (ex
833 purchasing branding removal addon if available)
834 </b>
835 </li>
836 </ol>
837 <h3 className="text-sm text-gray-500 font-bold">3.License Suspension</h3>
838 <ol>
839 <li>
840 Your license(s) may be suspended/revoked/terminated if you:
841 <ul>
842 <li>Not follow this license agreement.</li>
843 <li>
844 Sell,resell,redistribute in whole or in parts the products associated with your license.
845 </li>
846 <li>Redistribute, share, resell any of ours products on your website.</li>
847 </ul>
848 </li>
849 </ol>
850 <h3 className="text-sm font-bold text-gray-500">4.Refund Policy</h3>
851 <ol>
852 <li>
853 For digital software(s) once downloaded, we <b>do not accept any refund.</b>
854 If you want to try the software and make sure that the software is for you, you can request a
855 demo instance.
856 </li>
857 </ol>
858 </div>
859 <form onSubmit={checkTables} className="flex flex-col w-[100%] flex-wrap items-baseline">
860 <div
861 className={
862 formerrors.license_agreement
863 ? "flex flex-row w-[100%] flex-wrap items-baseline input--error"
864 : "flex flex-row w-[100%] flex-wrap items-baseline"
865 }
866 >
867 <input
868 type="checkbox"
869 id="license_agreement"
870 name="license_agreement"
871 className="lagreement"
872 onClick={handleCheckbox}
873 />
874 <label htmlFor="license_agreement" className="w-[95%]">
875 I agree to the license terms
876 </label>
877 <span className="error-text">{formerrors.license_agreement}</span>
878 </div>
879 <div className="control-group">
880 <div className="flex w-[100%] flex-row bg-neutral-500 p-10">
881 <button
882 type="submit"
883 className={
884 isButtonDisabled
885 ? "button button--disabled button--default w-[100%] text-center"
886 : "button button--default w-[100%] text-center"
887 }
888 >
889 {button}
890 </button>
891 </div>
892 </div>
893 </form>
894 </div>
895 </div>
896 ) : null}
897 {installStatusPage ? (
898 <div className="flex w-[100%] flex-col p-10 items-baseline flex-wrap install-status">
899 <h3 className="text-sm text-white font-bold">Install status</h3>
900 <div className="flex flex-row items-baseline flex-wrap w-[100%] p-5 justify-start md:justify-center lg:justify-center">
901 <progress className="install-progress" max="100" value={installStatus}></progress>
902 </div>
903 <div
904 className="flex flex-col items-baseline w-[100%] p-5 border-1 border-solid border-dark install-details"
905 style={{
906 height: "300px",
907 overflowY: "scroll",
908 }}
909 >
910 {installDetails ? Object.keys(installDetails).map((k) => <p key={k}>{installDetails[k]}</p>) : null}
911 </div>
912 <form className="flex flex-col w-[100%] flex-wrap items-baseline">
913 <div className="flex w-[100%] bg-neutral-600 p-10 w-[100%]">
914 <button
915 type="submit"
916 disabled={isButtonDisabled}
917 className={
918 isButtonDisabled
919 ? "button button--disabled button--default w-[100%] text-center"
920 : "button button--default w-[100%] text-center"
921 }
922 >
923 {button}
924 </button>
925 </div>
926 </form>
927 </div>
928 ) : null}
929 </div>
930 </div>
931 </div>
932 </div>
933 </>
934 );
935}
936