installation instructions are added for installation script exports

client/src/App.vue

 <template>
+  <InstallationInstructionsModal
+    v-if="installationInstructionsModalOpen"
+    :filename="installationInstructionsModalFileName"
+    @close="closeInstallationInstructionsModal"
+  />
   <div
     v-if="IS_ELECTRON && installationOpen"
     class="bg-gray-900 h-screen flex items-center justify-center"
@@ -26,8 +31,9 @@ import store from "./global-state/store";
 import Loading from "./components/Loader";
 import { ref } from "vue";
 import Installation from "./views/Installation";
+import InstallationInstructionsModal from "./components/InstallationInstructionsModal";
 export default {
-  components: { Installation, Loading, Sidebar },
+  components: { InstallationInstructionsModal, Installation, Loading, Sidebar },
   setup() {
     const { IS_ELECTRON } = process.env;
     store.fetchData().then(() => {
@@ -44,11 +50,31 @@ export default {
       installationOpen.value = false;
     }
 
+    const installationInstructionsModalOpen = ref(false);
+    const closeInstallationInstructionsModal = () =>
+      (installationInstructionsModalOpen.value = false);
+    const installationInstructionsModalFileName = ref("");
+
+    if (IS_ELECTRON) {
+      window.ipcRenderer.on("open-installation-instructions", (e, fileName) => {
+        installationInstructionsModalOpen.value = true;
+        installationInstructionsModalFileName.value = fileName;
+      });
+    } else {
+      window.addEventListener("open-installation-instructions", (e) => {
+        installationInstructionsModalOpen.value = true;
+        installationInstructionsModalFileName.value = e.detail.fileName;
+      });
+    }
+
     return {
       loading: store.loading,
       installationOpen,
       onInstallationEnd,
+      closeInstallationInstructionsModal,
+      installationInstructionsModalOpen,
       IS_ELECTRON,
+      installationInstructionsModalFileName,
     };
   },
 };

client/src/actions/exportToFile.js

@@ -43,11 +43,16 @@ function webExport() {
     "data:text/plain;charset=utf-8," +
       encodeURIComponent(generateShellScriptFromBucket())
   );
-  element.setAttribute("download", "kataliz.sh");
+  element.setAttribute("download", "pardus-kataliz.sh");
   element.style.display = "none";
   document.body.appendChild(element);
   element.click();
   document.body.removeChild(element);
+  window.dispatchEvent(
+    new CustomEvent("open-installation-instructions", {
+      detail: { fileName: "pardus-kataliz.sh" },
+    })
+  );
 }
 
 export default {

client/src/components/InstallationInstructionsModal.vue

+<template>
+  <div
+    class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
+  >
+    <div class="relative w-auto my-6 mx-auto max-w-6xl">
+      <!--content-->
+      <div
+        class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"
+      >
+        <!--header-->
+        <div
+          class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t"
+        >
+          <h3 class="text-3xl font-semibold">
+            Kurulum Dosyası İle Kurulum Talimatları
+          </h3>
+        </div>
+        <!--body-->
+        <div
+          class="relative p-6 flex-auto text-gray-800 leading-relaxed text-lg"
+        >
+          <p class="my-4">
+            Kurulumu gerçekleştirmek için Pardus işletim sisteminde sırasıyla şu
+            adımları takip ediniz.
+          </p>
+          <ol class="list-decimal ml-8 space-y-4">
+            <li>
+              Kaydettiğiniz {{ filename }} adlı dosyayı Pardus Masaüstüne
+              kopyalayınız. (Farklı bir dizine kopyalamak, ileriki maddelerde
+              değişiklik yapmayı gerektirir.)
+            </li>
+            <li>
+              Super (Windows) tuşuna basınız, "Uçbirim" şeklinde arama yaparak
+              Uçbirim öykünücüsünü açınız.
+            </li>
+            <li>
+              " chmod +x ~/Masaüstü/{{ filename }} && sudo sh ~/Masaüstü/{{
+                filename
+              }}
+              " ifadesini tırnaklar olmadan kopyalayınız, uçbirime yapıştırıp
+              enter tuşuna basınız.
+            </li>
+            <li>
+              Kurulumların gerçekleştirilebilmesi için bir kereye mahsus olarak
+              yönetici parolası istenecektir. Parolayı girip enter tuşuna
+              basınız.
+            </li>
+            <li>
+              Kurulum için gerekli dosyalar internetten otomatik olarak
+              indirilecek ve yüklenecektir, bu esnada yapılan işlemlere dair
+              bilgilendirme mesajları ekranda görünecektir, yüklemelerin
+              tamamlanmasını bekleyiniz.
+            </li>
+          </ol>
+        </div>
+        <!--footer-->
+        <div
+          class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b"
+        >
+          <button
+            class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+            type="button"
+            @click="$emit('close')"
+          >
+            Kapat
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="opacity-25 fixed inset-0 z-40 bg-black"></div>
+</template>
+
+<script>
+export default {
+  name: "InstallationInstructionsModal",
+  props: {
+    filename: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

client/src/electron-listeners/exportToFileListener.js

 const fs = require("fs");
 const path = require("path");
-import { dialog, app } from "electron";
+import { dialog, app, BrowserWindow } from "electron";
 
 export default function exportToFileListener(event, param) {
   dialog
@@ -17,21 +17,17 @@ export default function exportToFileListener(event, param) {
       properties: [],
     })
     .then((file) => {
-      // Stating whether dialog operation was cancelled or not.
       if (!file.canceled) {
-        const parsedPath = path.parse(file.filePath);
-        const dir = parsedPath.dir;
-        const name = parsedPath.name;
-        fs.writeFile(
-          path.join(dir, name + "_KURULUM.txt"),
-          `Kurulumu gerçekleştirmek için Pardus işletim sisteminde sırasıyla şu adımları takip ediniz.
-          // buraya kurulum talimatlari yazilacak.`,
-          function (err) {
-            if (err) throw err;
-          }
-        );
         fs.writeFile(file.filePath.toString(), param, function (err) {
-          if (err) throw err;
+          const parsedPath = path.parse(file.filePath);
+          console.log(parsedPath);
+          const fileName = parsedPath.name + parsedPath.ext;
+          if (err) {
+            throw err;
+          } else {
+            const window = BrowserWindow.getFocusedWindow();
+            window.webContents.send("open-installation-instructions", fileName);
+          }
         });
       }
     })