feat: server web setup wizard (#3226)

* feat: server web setup wizard * feat: server web setup wizard --------- Co-authored-by: nyomansutralia-jubelio <[email protected]>
ever-co · Nov 3, 2024 · cc4e2bc · cc4e2bc
1 parent 4f30b12
commit cc4e2bc
Show file tree

Hide file tree

Showing 14 changed files with 322 additions and 29 deletions.
diff --git a/apps/server-web/src/main/helpers/constant.ts b/apps/server-web/src/main/helpers/constant.ts
@@ -17,6 +17,7 @@ export const EventLists = {
   SERVER_WINDOW: 'SERVER_WINDOW',
   RESTART_SERVER: 'RESTART_SERVER',
   CHANGE_THEME: 'CHANGE_THEME',
+  SETUP_WINDOW: 'SETUP_WINDOW'
 }
 
 export const SettingPageTypeMessage = {

diff --git a/apps/server-web/src/main/helpers/interfaces/i-server.ts b/apps/server-web/src/main/helpers/interfaces/i-server.ts
@@ -3,6 +3,7 @@ interface GeneralConfig {
     autoUpdate?: boolean
     updateCheckPeriode?: string
     theme?: string
+    setup?: boolean
     [key: string]: any
 }
 

diff --git a/apps/server-web/src/main/main.ts b/apps/server-web/src/main/main.ts
@@ -1,4 +1,4 @@
-import path from 'path'
+import path from 'path';
 import { app, ipcMain, Tray, dialog, BrowserWindow, shell } from 'electron';
 import { DesktopServer } from './helpers/desktop-server';
 import { LocalStore } from './helpers/services/libs/desktop-store';
@@ -40,6 +40,7 @@ let intervalUpdate: NodeJS.Timeout;
 let tray: Tray;
 let settingWindow: BrowserWindow | null = null;
 let logWindow: BrowserWindow | null = null;
+let setupWindow: BrowserWindow | any = null;
 let SettingMenu: any = null;
 let ServerWindowMenu: any = null;
 
@@ -149,13 +150,14 @@ const installExtensions = async () => {
 };
 
 
-const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW') => {
+const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDOW') => {
   if (isDebug) {
     await installExtensions();
   }
 
   const defaultOptionWindow = {
     title: app.name,
+    frame: true,
     show: false,
     width: 1024,
     height: 728,
@@ -199,6 +201,15 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW') => {
       }
       ServerWindowMenu.buildMenu();
       break;
+    case 'SETUP_WINDOW':
+      setupWindow = new BrowserWindow(defaultOptionWindow);
+      url = resolveHtmlPath('index.html', 'setup');
+      setupWindow?.loadURL(url);
+      mainBindings(ipcMain, setupWindow, fs);
+      setupWindow.on('closed', () => {
+        setupWindow = null;
+      })
+      break;
     default:
       break;
   }
@@ -418,7 +429,17 @@ const onInitApplication = () => {
 
 (async () => {
   await app.whenReady()
-  onInitApplication();
+  const storeConfig:WebServer = LocalStore.getStore('config');
+  if (storeConfig?.general?.setup) {
+    onInitApplication();
+  } else {
+    if (!setupWindow) {
+      await createWindow('SETUP_WINDOW');
+    }
+    if (setupWindow) {
+      setupWindow?.show()
+    }
+  }
 })()
 
 app.on('window-all-closed', () => {
@@ -453,12 +474,23 @@ ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
           }
         }
       )
-      event.sender.send(IPC_TYPES.SETTING_PAGE, {
-        type: SettingPageTypeMessage.mainResponse, data: {
-          status: true,
-          isServerRun: isServerRun
-        }
-      });
+      if (arg.isSetup) {
+        LocalStore.updateConfigSetting({
+          general: {
+            setup: true
+          }
+        });
+        setupWindow?.close();
+        onInitApplication();
+        eventEmitter.emit(EventLists.SERVER_WINDOW);
+      } else {
+        event.sender.send(IPC_TYPES.SETTING_PAGE, {
+          type: SettingPageTypeMessage.mainResponse, data: {
+            status: true,
+            isServerRun: isServerRun
+          }
+        });
+      }
       break;
     case SettingPageTypeMessage.checkUpdate:
       updater.checkUpdate();

diff --git a/apps/server-web/src/renderer/App.css b/apps/server-web/src/renderer/App.css
@@ -453,7 +453,7 @@ html.dark {
 }
 
 .switch-root[data-state='checked'] {
-  background-color: rgb(96 165 250/var(--tw-bg-opacity));
+  @apply bg-violet-800
 }
 
 .switch-thumb {

diff --git a/apps/server-web/src/renderer/App.tsx b/apps/server-web/src/renderer/App.tsx
@@ -3,18 +3,20 @@ import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
 import { Setting } from './pages/Setting';
 import i18next from 'i18next';
-import { ServerPage } from './pages/Server';
 import { ThemeProvider, useTheme } from './ThemeContext';
+import SetupPage from './pages/Setup';
+import { ServerPage } from './pages/Server';
 
 export default function App() {
   const [language, setLanguage] = useState<string>('en');
   const { theme } = useTheme();
 
   const setTheme = async (htmlElement: HTMLElement) => {
-    const currentTheme = await window.electron.ipcRenderer.invoke('current-theme');
+    const currentTheme =
+      await window.electron.ipcRenderer.invoke('current-theme');
     htmlElement.classList.remove('dark', 'light');
     htmlElement.classList.toggle(currentTheme || theme);
-  }
+  };
 
   useEffect(() => {
     const htmlElement = document.documentElement;
@@ -26,7 +28,7 @@ export default function App() {
       console.log(value);
       htmlElement.classList.remove('dark', 'light');
       htmlElement.classList.toggle(value.data);
-    })
+    });
     i18next.changeLanguage(language);
   }, [language]);
   return (
@@ -35,6 +37,7 @@ export default function App() {
         <Routes>
           <Route path="/setting" element={<Setting />} />
           <Route path="/history-console" element={<ServerPage />} />
+          <Route path="/setup" element={<SetupPage />} />
         </Routes>
       </Router>
     </ThemeProvider>

diff --git a/apps/server-web/src/renderer/components/About.tsx b/apps/server-web/src/renderer/components/About.tsx
@@ -4,7 +4,7 @@ import { IAbout } from '../libs/interfaces';
 export const AboutComponent = (props: IAbout) => {
   return (
     <div className="flex min-h-screen items-center justify-center">
-      <div className="rounded-lg bg-gray-50 dark:bg-[#25272D] px-16 py-14">
+      <div className="rounded-lg bg-gray-50 dark:bg-[#25272D] px-16 py-14 border-2 border-gray-200 dark:border-gray-600">
         <div className="flex justify-center">
           <EverTeamsLogo />
         </div>

diff --git a/apps/server-web/src/renderer/components/Server.tsx b/apps/server-web/src/renderer/components/Server.tsx
@@ -20,7 +20,7 @@ export const ServerComponent = (props: IServerComponent) => {
     <>
       <div className="relative overflow-y-auto overflow-x-hidden flex-grow left-8 w-11/12 min-h-screen">
         <form method="post" onSubmit={saveSetting}>
-          <div className="rounded-lg bg-gray-50 dark:bg-[#25272D] px-16 py-10 mt-5">
+          <div className="rounded-lg bg-gray-50 dark:bg-[#25272D] px-16 py-10 mt-5 border-2 border-gray-200 dark:border-gray-600">
             <div className="flex items-center">
               <div className="flex w-full flex-wrap">
                 <div className="md:flex md:items-center mb-5 w-full">
@@ -97,7 +97,7 @@ export const ServerComponent = (props: IServerComponent) => {
             </div>
           </div>
           <button
-            className="ml-2 mt-10 block rounded-lg border-4 border-transparent bg-blue-400 px-6 py-2 text-center text-base font-medium text-blue-100 outline-8"
+            className="ml-2 mt-10 block rounded-lg border-4 border-transparent bg-violet-800 px-6 py-2 text-center text-base font-medium text-gray-200 outline-8"
             type="submit"
           >
             {t('FORM.BUTTON.SAVE_SETTING')}

diff --git a/apps/server-web/src/renderer/components/SideBar.tsx b/apps/server-web/src/renderer/components/SideBar.tsx
@@ -19,15 +19,15 @@ export function SideBar({
   };
   return (
     <div className="min-h-screen flex flex-col flex-auto flex-shrink-0 antialiased text-gray-800">
-      <div className="fixed flex flex-col top-0 left-0 w-1/4 h-full dark:bg-[#1c1e23]">
+      <div className="fixed flex flex-col top-0 left-0 w-1/4 h-full dark:bg-[#1c1e23] bg-gray-200">
         <div className="overflow-y-auto overflow-x-hidden flex-grow">
           <ul className="flex flex-col py-4 space-y-1">
             {menus.length > 0 &&
               menus.map((menu) => (
                 <li key={menu.key}>
                   <Link
                     to=""
-                    className={`relative flex flex-row items-center h-11 focus:outline-none  text-gray-600 dark:text-white  ${!menu.isActive ? 'hover:' : ''}bg-white ${!menu.isActive ? 'hover:' : ''}dark:bg-[#26272d] text-gray-800 border-l-4 border-transparent ${!menu.isActive ? 'hover:' : ''}border-indigo-500 pr-6`}
+                    className={`relative flex flex-row items-center h-11 focus:outline-none  text-gray-600 dark:text-white  ${!menu.isActive ? 'hover:dark:bg-gray-800 hover:bg-gray-300 border-indigo-500' : 'bg-gray-300 dark:bg-gray-800'} text-gray-800 border-l-4 border-transparent ${!menu.isActive ? 'hover:border-indigo-500' : ''} pr-6 rounded-lg`}
                     onClick={() => {
                       menuChange(menu.key);
                     }}

diff --git a/apps/server-web/src/renderer/components/Updater.tsx b/apps/server-web/src/renderer/components/Updater.tsx
@@ -112,12 +112,12 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
             {t('FORM.LABELS.AUTO_UPDATE_SUBTITLE')}
           </span>
         </div>
-        <div className="bg-gray-50 dark:bg-[#25272D] dark:text-white px-16 py-14 mt-10 w-full rounded-lg">
+        <div className="bg-gray-50 dark:bg-[#25272D] dark:text-white px-16 py-14 mt-10 w-full rounded-lg border-2 border-gray-200 dark:border-gray-600">
           <form>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <div className="flex w-1/2">
                 <Switch.Root
-                  className="switch-root"
+                  className="switch-root has-[:checked]:bg-violet-800"
                   id="airplane-mode"
                   onCheckedChange={(value) => {
                     setOpen();
@@ -172,7 +172,7 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
           </div>
         </div>
         <button
-          className="mt-10 block rounded-lg border-4 border-transparent bg-blue-400 px-6 py-2 text-center text-base font-medium text-blue-100 outline-8"
+          className="mt-10 block rounded-lg border-4 border-transparent bg-violet-800 px-6 py-2 text-center text-base font-medium text-blue-100 outline-8"
           onClick={props.checkForUpdate}
           disabled={props.loading}
         >
@@ -181,7 +181,7 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
           )}
           {!props.loading && t(`FORM.LABELS.${props.updateStates.label}`)}
         </button>
-        <div className="grid divide-y divide-neutral-200 shadow-lg mx-auto mt-8 dark:bg-[#25272D] dark:text-white rounded-lg">
+        <div className="grid divide-y divide-neutral-200 mx-auto mt-8 dark:bg-[#25272D] dark:text-white rounded-lg border-2 border-gray-200 dark:border-gray-600">
           <div className="py-5 px-5">
             <details className="group">
               <summary className="flex justify-between items-center font-medium cursor-pointer list-none">

diff --git a/apps/server-web/src/renderer/components/svgs/CheckIcon.tsx b/apps/server-web/src/renderer/components/svgs/CheckIcon.tsx
@@ -0,0 +1,18 @@
+const CheckIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1}
+    stroke="currentColor"
+    className="size-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.5 12.75 6 6 9-13.5"
+    />
+  </svg>
+);
+
+export default CheckIcon;
diff --git a/apps/server-web/src/renderer/pages/Server.tsx b/apps/server-web/src/renderer/pages/Server.tsx
@@ -49,17 +49,17 @@ export function ServerPage() {
         </div>
       </div>
       <button
-        className="block rounded-lg border-4 border-transparent bg-blue-400 px-6 py-2 text-center text-base font-medium text-100 w-fit mx-auto my-5"
+        className="block rounded-lg border-4 border-transparent bg-violet-800 px-6 py-2 text-center text-base font-medium text-100 w-fit mx-auto my-5 text-gray-200"
         onClick={runServer}
         disabled={loading}
       >
         {isRun ? t('FORM.BUTTON.STOP') : t('FORM.BUTTON.START')}
       </button>
-      <div className="grid divide-y divide-neutral-200 dark:bg-[#25272D] dark:text-white shadow-lg mx-auto w-10/12 rounded-lg">
+      <div className="grid divide-y divide-neutral-200 dark:bg-[#25272D] dark:text-white mx-auto w-10/12 rounded-lg border-2 border-gray-200 dark:border-gray-600">
         <div className="py-5 px-5">
           <details className="group">
             <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
-              <span> Server Logs</span>
+              <span className="p-2"> Server Logs</span>
               <span className="transition group-open:rotate-180">
                 <svg
                   fill="none"
@@ -79,12 +79,12 @@ export function ServerPage() {
             <div
               className="inline-block w-full bg-black dark:bg-black text-white text-xs leading-3 rounded-lg"
               style={{
-                minHeight: '400px',
-                maxHeight: '400px',
+                minHeight: '350px',
+                maxHeight: '350px',
                 overflowY: 'auto',
               }}
             >
-              <div className="ml-1 mt-1">
+              <div className="ml-1 mt-1 p-2">
                 {logs.length > 0 &&
                   logs.map((log, i) => (
                     <div className="py-1" key={i}>

diff --git a/apps/server-web/src/renderer/pages/Setup.tsx b/apps/server-web/src/renderer/pages/Setup.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import AdvancedSetting from './setup/AdvancedSetting';
+import Landing from './setup/Landing';
+import CheckIcon from '../components/svgs/CheckIcon';
+const steps: number[] = [1, 2];
+const SetupPage = () => {
+  const [currentStep, setCurrentStep] = useState<number>(1);
+
+  const letsGo = () => {
+    setCurrentStep(2);
+  };
+
+  const goBack = () => {
+    setCurrentStep(1);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 text-white px-4">
+      <div className="flex w-full justify-center mb-8 mt-8">
+        <div className="flex items-center">
+          <div
+            className={`w-10 h-10 flex justify-center items-center rounded-full ${currentStep === 1 ? 'bg-purple-600' : 'bg-purple-600'}`}
+          >
+            {currentStep === 1 ? 1 : <CheckIcon />}
+          </div>
+          <div className="h-1 w-96 bg-purple-600"></div>
+          <div className="w-10 h-10 flex justify-center items-center rounded-full bg-purple-600">
+            <span>2</span>
+          </div>
+        </div>
+      </div>
+      {currentStep === 1 ? (
+        <Landing nextAction={letsGo} />
+      ) : (
+        <AdvancedSetting back={goBack} />
+      )}
+    </div>
+  );
+};
+
+export default SetupPage;