hostinger / vue-frontend / src / views / HostingerTools.vue

HostingerTools.vue in Hostinger Tools 3.0.38, at vue-frontend/src/views/HostingerTools.vue

276 lines 7.3 KB

Raw Download Zip

1	<script lang="ts" setup>
2	import SectionCard from "@/components/HostingerTools/SectionCard.vue";
3	import { useModal } from "@/composables";
4	import { SectionItem, ModalName, ToggleableSettingsData } from "@/types";
5	import { useSettingsStore, useGeneralStoreData } from "@/stores";
6	import {
7	getAssetSource,
8	isNewerVerison,
9	getBaseUrl,
10	translate,
11	} from "@/utils/helpers";
12	import ToolVersionCard from "@/components/HostingerTools/ToolVersionCard.vue";
13	import { computed, ref } from "vue";
14	import { storeToRefs } from "pinia";
15	import { kebabToCamel } from "@/utils/helpers";
16
17	const { fetchSettingsData, updateSettingsData, regenerateByPassCode } =
18	useSettingsStore();
19
20	const { settingsData } = storeToRefs(useSettingsStore());
21	const { siteUrl } = useGeneralStoreData();
22
23	const WORDPRESS_UPDATE_LINK = getBaseUrl(location.href) + "update-core.php";
24
25	const isPageLoading = ref(false);
26
27	const maintenanceSection = computed(() => [
28	{
29	id: "maintenance-mode",
30	title: translate("hostinger_tools_maintenance_mode"),
31	description: translate("hostinger_tools_disable_public_access"),
32	isVisible: true,
33	toggleValue: settingsData.value?.maintenanceMode,
34	},
35	{
36	id: "bypass-link",
37	title: translate("hostinger_tools_bypass_link"),
38	description: translate("hostinger_tools_skip_link_maintenance_mode"),
39	sideButton: {
40	text: translate("hostinger_tools_reset_link"),
41	onClick: () => {
42	openModal(
43	ModalName.ByPassLinkResetModal,
44	{
45	data: {
46	onConfirm: () => {
47	regenerateByPassCode();
48	},
49	},
50	},
51	{ isLG: true }
52	);
53	},
54	},
55	copyLink:
56	settingsData.value?.bypassCode &&
57	// @ts-ignore
58	`${siteUrl}/?bypass_code=${settingsData.value.bypassCode}`,
59	},
60	]);
61
62	const securitySection = computed(() => [
63	{
64	id: "disable-xml-rpc",
65	title: translate("hostinger_tools_disable_xml_rpc"),
66	description: translate("hostinger_tools_xml_rpc_description"),
67	isVisible: true,
68	toggleValue: settingsData.value?.disableXmlRpc,
69	},
70	{
71	id: "disable-authentication-password",
72	title: translate("hostinger_tools_disable_authentication_password"),
73	description: translate("hostinger_tools_authentication_password_description"),
74	isVisible: true,
75	toggleValue: settingsData.value?.disableAuthenticationPassword,
76	},
77	]);
78
79	const redirectsSection = computed(() => {
80	let sections = [
81	{
82	id: "force-https",
83	title: translate("hostinger_tools_force_https"),
84	description: translate("hostinger_tools_force_https_description"),
85	isVisible: true,
86	toggleValue: settingsData.value?.forceHttps,
87	},
88	];
89
90	sections.push({
91	id: "force-www",
92	title: translate("hostinger_tools_force_www"),
93	description: !settingsData.value?.isEligibleWwwRedirect
94	? translate("hostinger_tools_force_www_description_not_available")
95	: translate("hostinger_tools_force_www_description"),
96	isVisible: !!settingsData.value?.isEligibleWwwRedirect,
97	toggleValue: settingsData.value?.forceWww,
98	});
99
100	return sections.filter((section) => section.isVisible);
101	});
102
103	const llmsSection = computed(() => [
104	{
105	id: "enable-llms-txt",
106	title: translate("hostinger_tools_enable_llms_txt"),
107	description: translate("hostinger_tools_llms_txt_description"),
108	isVisible: true,
109	toggleValue: settingsData.value?.enableLlmsTxt,
110	},
111	]);
112
113	const { openModal } = useModal();
114
115	const isWordPressUpdateDisplayed = computed(() => {
116	if (!settingsData.value) {
117	return false;
118	}
119
120	return isNewerVerison({
121	currentVersion: settingsData.value.currentWpVersion,
122	newVersion: settingsData.value.newestWpVersion,
123	});
124	});
125
126	const isPhpUpdateDisplayed = computed(() => {
127	if (!settingsData.value) {
128	return false;
129	}
130
131	return isNewerVerison({
132	currentVersion: settingsData.value.phpVersion,
133	newVersion: "8.2", // Hardcoded for now
134	});
135	});
136
137	const isHostingerPlatform = computed(() => {
138	return parseInt(hostinger_tools_data.hplatform) > 0;
139	});
140
141
142	const phpVersionCard = computed(() => ({
143	title: translate("hostinger_tools_php_version"),
144	toolImageSrc: getAssetSource("images/icons/icon-php.svg"),
145	version: settingsData.value?.phpVersion,
146	actionButton: isHostingerPlatform.value && isPhpUpdateDisplayed.value
147	? {
148	onClick: () => {
149	window.open(
150	`https://auth.${resellerLocale.value}/login?r=/section/php-configuration/domain/${location.host}`,
151	"_blank"
152	);
153	},
154	}
155	: undefined,
156	}));
157
158
159	const resellerLocale = computed(() => {
160	{
161	const { pluginUrl } = useGeneralStoreData();
162
163	return pluginUrl.match(/^[^/]+/)![0] \|\| "hostinger.com";
164	}
165	});
166
167	const wordPressVersionCard = computed(() => ({
168	title: translate("hostinger_tools_wordpress_version"),
169	toolImageSrc: getAssetSource("images/icons/icon-wordpress-light.svg"),
170	version: settingsData.value?.currentWpVersion,
171	actionButton: isWordPressUpdateDisplayed.value
172	? {
173	onClick: () => {
174	window.location.href = WORDPRESS_UPDATE_LINK; // redirects to wp update page in wp admin
175	},
176	}
177	: undefined,
178	}));
179
180	const onSaveSection = (value: boolean, item: SectionItem) => {
181	const IMPORTANT_SECTIONS = ["disable-xml-rpc"];
182
183	const isTurnedOn = value === false;
184
185	if (IMPORTANT_SECTIONS.includes(item.id) && isTurnedOn) {
186	openModal(
187	ModalName.XmlSecurityModal,
188	{
189	data: {
190	onConfirm: () => {
191	onUpdateSettings(value, item);
192	},
193	},
194	},
195	{ isLG: true }
196	);
197
198	return;
199	}
200
201	onUpdateSettings(value, item);
202	};
203
204	const onUpdateSettings = (value: boolean, item: SectionItem) => {
205	if (!settingsData.value) return;
206
207	const id = kebabToCamel(item.id) as keyof ToggleableSettingsData;
208
209	settingsData.value[id] = value;
210
211	updateSettingsData(settingsData.value);
212	};
213
214
215	(async () => {
216	isPageLoading.value = true;
217	await fetchSettingsData();
218	isPageLoading.value = false;
219	})();
220	</script>
221
222	<template>
223	<div v-if="settingsData">
224	<div class="hostinger-tools__tool-version-cards">
225	<ToolVersionCard
226	:is-loading="isPageLoading"
227	v-bind="wordPressVersionCard"
228	class="h-mr-16"
229	/>
230	<ToolVersionCard
231	:is-loading="isPageLoading"
232	v-bind="phpVersionCard"
233	/>
234	</div>
235	<div>
236	<SectionCard
237	:is-loading="isPageLoading"
238	@save-section="onSaveSection"
239	:title="translate('hostinger_tools_maintenance')"
240	:section-items="maintenanceSection"
241	/>
242	<SectionCard
243	:is-loading="isPageLoading"
244	@save-section="onSaveSection"
245	:title="translate('hostinger_tools_security')"
246	:section-items="securitySection"
247	/>
248	<SectionCard
249	:is-loading="isPageLoading"
250	@save-section="onSaveSection"
251	:title="translate('hostinger_tools_redirects')"
252	:section-items="redirectsSection"
253	/>
254	<SectionCard
255	:is-loading="isPageLoading"
256	@save-section="onSaveSection"
257	:title="translate('hostinger_tools_llms')"
258	:section-items="llmsSection"
259	/>
260	</div>
261	</div>
262	</template>
263
264	<style lang="scss">
265	.hostinger-tools {
266	&__tool-version-cards {
267	display: flex;
268	width: 100%;
269
270	@media (max-width: 590px) {
271	flex-direction: column;
272	}
273	}
274	}
275	</style>
276