wip

electron-builder.json

@@ -11,12 +11,12 @@
   },
   "win": {
     "target": "nsis",
-    "icon": "build/renderer/aniflix512.png"
+    "icon": "build/main/static/icon.png"
   },
   "linux": {
     "target": ["deb"],
     "category": "Video",
-    "icon": "build/renderer/aniflix512.png"
+    "icon": "build/main/static/icon.png"
   },
   "files": [
     "build/main/**/*",

scripts/build.js

@@ -1,32 +1,45 @@
-const Path = require('path');
-const Chalk = require('chalk');
-const FileSystem = require('fs');
-const Vite = require('vite');
-const compileTs = require('./private/tsc');
+const Path = require("path");
+const Chalk = require("chalk");
+const FileSystem = require("fs");
+const Vite = require("vite");
+const compileTs = require("./private/tsc");
 
 function buildRenderer() {
-    return Vite.build({
-        configFile: Path.join(__dirname, '..', 'vite.config.js'),
-        base: './',
-        mode: 'production'
-    });
+  return Vite.build({
+    configFile: Path.join(__dirname, "..", "vite.config.js"),
+    base: "./",
+    mode: "production",
+  });
+}
+
+function copyStaticFiles() {
+  copy("static");
+}
+
+function copy(path) {
+  FileSystem.cpSync(
+    Path.join(__dirname, "..", "src", "main", path),
+    Path.join(__dirname, "..", "build", "main", path),
+    { recursive: true }
+  );
 }
 
 function buildMain() {
-    const mainPath = Path.join(__dirname, '..', 'src', 'main');
-    return compileTs(mainPath);
+  const mainPath = Path.join(__dirname, "..", "src", "main");
+  return compileTs(mainPath);
 }
 
-FileSystem.rmSync(Path.join(__dirname, '..', 'build'), {
-    recursive: true,
-    force: true,
-})
+FileSystem.rmSync(Path.join(__dirname, "..", "build"), {
+  recursive: true,
+  force: true,
+});
 
-console.log(Chalk.blueBright('Transpiling renderer & main...'));
+console.log(Chalk.blueBright("Transpiling renderer & main..."));
 
-Promise.allSettled([
-    buildRenderer(),
-    buildMain(),
-]).then(() => {
-    console.log(Chalk.greenBright('Renderer & main successfully transpiled! (ready to be built with electron-builder)'));
+Promise.allSettled([buildRenderer(), buildMain(), copyStaticFiles()]).then(() => {
+  console.log(
+    Chalk.greenBright(
+      "Renderer & main successfully transpiled! (ready to be built with electron-builder)"
+    )
+  );
 });

src/main/main.ts

@@ -4,15 +4,14 @@ import {
   ipcMain,
   OnHeadersReceivedListenerDetails,
   session,
-  Menu,
-  MenuItem,
 } from "electron";
 import { join } from "path";
+import setApplicationMenu from "./menu";
 
 function createWindow() {
   const mainWindow = new BrowserWindow({
     show: false,
-    icon: join(__dirname, "./static/aniflix512.png"),
+    icon: join(__dirname, "./static/icon.png"),
     webPreferences: {
       preload: join(__dirname, "preload.js"),
       nodeIntegration: true,
@@ -24,24 +23,7 @@ function createWindow() {
   mainWindow.maximize();
   mainWindow.show();
 
-  const menu = new Menu();
-  menu.append(
-    new MenuItem({
-      label: "Electron",
-      submenu: [
-        {
-          role: "help",
-          accelerator:
-            process.platform === "darwin" ? "Alt+Cmd+I" : "Alt+Shift+I",
-          click: () => {
-            console.log("Electron rocks!");
-          },
-        },
-      ],
-    })
-  );
-
-  // Menu.setApplicationMenu(menu);
+  setApplicationMenu();
 
   if (process.env.NODE_ENV === "development") {
     const rendererPort = process.argv[2];
@@ -77,7 +59,3 @@ app.whenReady().then(() => {
 app.on("window-all-closed", function () {
   if (process.platform !== "darwin") app.quit();
 });
-
-ipcMain.on("message", (event, message) => {
-  console.log(message);
-});

src/main/menu.ts

@@ -0,0 +1,40 @@
+import { Menu, MenuItem, MenuItemConstructorOptions, shell } from "electron";
+
+export default function () {
+  const template: Array<MenuItemConstructorOptions | MenuItem> = [
+    {
+      label: "Reload",
+      submenu: [{ role: "reload" }, { role: "forceReload" }],
+    },
+    {
+      label: "View",
+      submenu: [
+        { role: "resetZoom" },
+        { role: "zoomIn" },
+        { role: "zoomOut" },
+        { role: "quit" },
+      ],
+    },
+    {
+      label: "Help",
+      submenu: [
+        {
+          label: "Support",
+          click: () => {
+            shell.openExternal("https://github.com/sponsors/rizkhal");
+          },
+        },
+        {
+          label: "Contact",
+          click: () => {
+            shell.openExternal("https://t.me/rizkhal");
+          },
+        },
+      ],
+    },
+  ];
+
+  let menu = Menu.buildFromTemplate(template);
+
+  Menu.setApplicationMenu(menu);
+}

src/renderer/layouts/ProtectedLayout.vue

@@ -1,6 +1,30 @@
 <script setup lang="ts" name="ProtectedLayout">
-import DashboardProvider from "../providers/dashboard/DashboardProvider.vue";
+import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { toast } from "vue3-toastify";
+import { useWelcome } from "../stores";
+import { ucfirst, wait } from "../utils";
 import ModalProvider from "../providers/modal/ModalProvider.vue";
+import DashboardProvider from "../providers/dashboard/DashboardProvider.vue";
+
+const store = useWelcome();
+const { isShow } = storeToRefs(store);
+
+onMounted(() => {
+  if (isShow.value) {
+    const user: { username: string } = JSON.parse(
+      localStorage.getItem("user") || ""
+    );
+
+    wait(500).then(() => {
+      toast(`Selamat datang kembali ${ucfirst(user.username)} 😽`, {
+        theme: "colored",
+      });
+
+      store.show(false);
+    });
+  }
+});
 </script>
 
 <template>

src/renderer/providers/dashboard/menus.ts

@@ -2,7 +2,7 @@ import { MenuItem } from "../../typings";
 
 export const menus: MenuItem = [
   { label: "Beranda", icon: "HomeIcon", route: "/home" },
-  { label: "Favorit", icon: "HeartIcon", route: "/bookmark" },
+  // { label: "Favorit", icon: "HeartIcon", route: "/bookmark" },
 ];
 
 export const generals: MenuItem = [

src/renderer/routes/index.ts

@@ -1,5 +1,5 @@
-import { createRouter, createWebHashHistory } from "vue-router";
 import routes from "./routes";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHashHistory(),

src/renderer/screens/Detail.vue

@@ -87,15 +87,16 @@ const addToFavorit = () => {
             </span>
           </div>
         </div>
-        <div class="mt-10">
+        <!-- FIXME: next release -->
+        <!-- <div class="mt-10">
           <button
             @click="addToFavorit"
             class="inline-flex items-center space-x-1 px-3 py-2 rounded text-primary-50 bg-primary-500 hover:bg-primary-600"
           >
             <Icon name="HeartIcon" class="w-4 h-4" />
             <span class="text-xs font-body">Tambah ke Favorit</span>
           </button>
-        </div>
+        </div> -->
       </div>
     </div>
 

src/renderer/screens/Login.vue

@@ -1,35 +1,29 @@
 <script setup lang="ts">
-import { Ref, ref, reactive } from "vue";
+import { reactive } from "vue";
 import { useRouter } from "vue-router";
-import f from "wretch";
 import { LoginCredentials } from "../typings";
+import { useAuth, useWelcome } from "../stores";
 import Logo from "../components/Logo.vue";
+import { storeToRefs } from "pinia";
 
-type Error = {
-  message?: string;
-};
+const isDev = import.meta.env.DEV;
 
 const router = useRouter();
-const errors: Ref<Error | undefined> = ref();
+const store = useAuth();
+const welcome = useWelcome();
 const model: LoginCredentials = reactive({
-  username: "demo",
-  password: "secret",
+  username: isDev ? "demo" : "",
+  password: isDev ? "secret" : "",
 });
 
-const BASE_URL = import.meta.env.VITE_ANIFLIX_API_URL;
+const { loading, errors } = storeToRefs(store);
 
 const login = () => {
-  f(`${BASE_URL}/api/auth/login`)
-    .post(model)
-    .badRequest((err) => {
-      errors.value = JSON.parse(err.message);
-    })
-    .json(({ user, token }) => {
-      localStorage.setItem("user", JSON.stringify(user));
-      localStorage.setItem("token", JSON.stringify(token));
-
-      router.push("home");
-    });
+  store.login(model).then(() => {
+    loading.value = false;
+    welcome.show(true);
+    router.push("home");
+  });
 };
 </script>
 <template>
@@ -62,7 +56,7 @@ const login = () => {
             <Logo />
           </div>
           <div
-            v-show="errors?.message"
+            v-show="errors"
             class="flex p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50"
             role="alert"
           >
@@ -81,7 +75,7 @@ const login = () => {
             </svg>
             <span class="sr-only">Info</span>
             <div>
-              {{ errors?.message }}
+              {{ errors }}
             </div>
           </div>
 
@@ -107,9 +101,11 @@ const login = () => {
           </div>
           <button
             type="submit"
-            class="text-white bg-primary-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-primary-600 text-lg"
+            :disabled="loading"
+            class="disabled:bg-primary-400 disabled:cursor-not-allowed text-white bg-primary-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-primary-600 text-lg"
           >
-            Login
+            <span v-show="loading">Loading..</span>
+            <span v-show="!loading">Login</span>
           </button>
         </form>
       </div>

src/renderer/stores/index.ts

@@ -1,3 +1,5 @@
+export * from "./useAuth";
+export * from './useWelcome'
 export * from "./useServer";
 export * from "./useAnimeInfo";
 export * from "./useWatchAnime";

src/renderer/stores/useAuth.ts

@@ -0,0 +1,32 @@
+import f from "wretch";
+import { defineStore } from "pinia";
+import { LoginCredentials } from "../typings";
+
+const BASE_URL = import.meta.env.VITE_ANIFLIX_API_URL;
+
+type Login = {
+  errors?: string;
+  loading: boolean;
+};
+
+export const useAuth = defineStore("auth", {
+  state: (): Login => ({
+    errors: undefined,
+    loading: false,
+  }),
+  actions: {
+    async login(model: LoginCredentials): Promise<void> {
+      this.loading = true;
+      return f(`${BASE_URL}/api/auth/login`)
+        .post(model)
+        .badRequest((err) => {
+          const { message } = JSON.parse(err.message);
+          this.errors = message;
+        })
+        .json(({ user, token }) => {
+          localStorage.setItem("user", JSON.stringify(user));
+          localStorage.setItem("token", JSON.stringify(token));
+        });
+    },
+  },
+});

src/renderer/stores/useWelcome.ts

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+
+export const useWelcome = defineStore("welcome", {
+  state: () => ({
+    isShow: false,
+  }),
+  actions: {
+    show(show: boolean) {
+      this.isShow = show;
+    },
+  },
+});