ADD: validation on the installation path (#2103)

fix #2056

launcher/src/components/UI/custom-installation/components/CustomPath.vue

@@ -69,21 +69,23 @@
               <div class="w-full h-full bg-gray-300 rounded-full flex justify-start items-center">
                 <input
                   v-model="userSelectedPath"
+                  :class="{ 'invalid-path': !clickStore.isPathValid }"
                   type="text"
                   placeholder="/opt/stereum"
-                  class="w-full h-full bg-gray-300 rounded-full px-2 text-lg text-gray-800 font-semibold outline-none"
+                  class="custom-path-input w-full h-full bg-gray-300 rounded-full px-2 text-lg text-gray-800 font-semibold outline-none"
+                  @input="validatePath"
                 />
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <CustomFooter :disabled-btn="nextBtnDisabled" @prepare-stereum="prepareStereum" />
+    <CustomFooter :disabled-btn="!clickStore.isPathValid" @prepare-stereum="prepareStereum" />
   </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeMount, watch, watchEffect } from "vue";
+import { ref, onMounted, onBeforeMount, watch } from "vue";
 import CustomFooter from "./CustomFooter.vue";
 import CustomHeader from "./CustomHead.vue";
 import ControlService from "@/store/ControlService";
@@ -98,22 +100,18 @@ const clickStore = useClickInstall();
 
 const router = useRouter();
 const userSelectedPath = ref("/opt/stereum");
-const inputTitle = ref("Choose your installation path where Stereum will be installed");
-const nextBtnDisabled = ref(false);
+
 const displayItem = ref("Click to select a network");
 
+const validatePath = () => {
+  const pathRegex = /^\/(?:[^ /\0*?<>|&{}$;][^ /\0]*\/?)*[^ /\0*?<>|&{}$;]{1,}$/;
+  clickStore.isPathValid = pathRegex.test(clickStore.installationPath.trim());
+};
+
 watch(userSelectedPath, (newValue) => {
   clickStore.installationPath = newValue;
 });
 
-watchEffect(() => {
-  if (userSelectedPath.value === "") {
-    nextBtnDisabled.value = true;
-  } else {
-    nextBtnDisabled.value = false;
-  }
-});
-
 // Lifecycle Hooks
 onBeforeMount(() => {
   activeBtn();
@@ -122,6 +120,8 @@ onBeforeMount(() => {
 onMounted(() => {
   displayItem.value = "Click to select a network";
 
+  clickStore.isPathValid = true;
+
   if (clickStore.installationPath === "") {
     getInstallPath();
   }
@@ -152,6 +152,10 @@ const activeBtn = () => {
 </script>
 
 <style scoped>
+.invalid-path {
+  border: 2px solid red;
+}
+
 .slide-fade-enter-active {
   transition-duration: 500;
   opacity: 0;

launcher/src/components/UI/one-click/components/plugin/ConfigFooter.vue

@@ -8,14 +8,28 @@
     </router-link>
     <router-link
       :to="nextRoute"
-      class="col-start-11 col-span-1 row-start-1 row-span-2 w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer"
+      :class="[
+        'col-start-11 col-span-1 row-start-1 row-span-2 w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer',
+        { deactive: !clickStore.isPathValid },
+      ]"
     >
+      <!-- changed button with disabled class -->
       <span class="text-gray-200 text-xl font-semibold text-center uppercase">{{ $t("customFooter.next") }}</span>
     </router-link>
   </div>
 </template>
 <script setup>
 import { goToNext } from "@/composables/nextRoute";
+import { useClickInstall } from "@/store/clickInstallation";
+
+const clickStore = useClickInstall();
 
 const nextRoute = goToNext();
 </script>
+<style scoped>
+.deactive {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+</style>

launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue

@@ -9,7 +9,13 @@
         <span class="text-sm text-gray-300 font-semibold">{{ $t("pluginName.path") }}</span>
       </div>
       <div class="h-8 col-start-1 col-span-full row-start-2 row-span-1 flex justify-center items-center px-1 pb-1">
-        <input v-model="clickStore.installationPath" type="text" class="w-full h-full rounded-md bg-gray-300 pl-2 text-sm" />
+        <input
+          v-model="clickStore.installationPath"
+          type="text"
+          :class="{ 'invalid-path': !clickStore.isPathValid }"
+          class="path-input w-full h-full rounded-md bg-gray-300 pl-2 text-sm"
+          @input="validatePath"
+        />
       </div>
     </div>
     <div class="w-full col-start-1 col-span-full row-start-3 row-span-2 border rounded-md border-gray-600 mx-auto bg-[#336666]">
@@ -25,6 +31,7 @@
             name="Start up client after installation?"
             class="h-5 w-5 rounded-md border-gray-200 bg-white shadow-sm"
           />
+
           <span class="text-sm text-gray-300 font-semibold">{{ $t("pluginName.startOnInstall") }}</span>
         </div>
       </div>
@@ -66,9 +73,15 @@ import { onMounted } from "vue";
 
 const clickStore = useClickInstall();
 
+const validatePath = () => {
+  const pathRegex = /^\/(?:[^ /\0*?<>|&{}$;][^ /\0]*\/?)*[^ /\0*?<>|&{}$;]{1,}$/;
+  clickStore.isPathValid = pathRegex.test(clickStore.installationPath.trim());
+};
+
 onMounted(() => {
   clickStore.installMonitoring = false;
   clickStore.startServicesAfterInstall = true;
+  clickStore.isPathValid = true;
 });
 </script>
 <style scoped>
@@ -79,4 +92,7 @@ onMounted(() => {
   gap: 0.5rem;
   width: 90%;
 }
+.invalid-path {
+  border: 2px solid red;
+}
 </style>

launcher/src/store/clickInstallation.js

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 export const useClickInstall = defineStore("clickInstallation", {
   state: () => {
     return {
+      isPathValid: true,
       startServicesAfterInstall: false,
       isConfigButtonEnbabled: false,
       installMonitoring: false,