lupine.api 1.1.45 → 1.1.47

package/admin/admin-frame.tsx

@@ -1,320 +1,31 @@
-import { bindGlobalStyle, CssProps, RefProps, VNode, MenuItemProps, clearCookie } from 'lupine.components';
-import { NestMenuItemProps, MenuSidebar, ThemeSelector, TabsHookProps, TabsPageProps, Tabs } from 'lupine.components';
+import { bindGlobalStyle, CssProps, RefProps, clearCookie, TabsPageProps, getRenderPageProps } from 'lupine.components';
+import { MenuSidebar, ThemeSelector, TabsHookProps, Tabs } from 'lupine.components';
 import { adminCss } from './admin-css';
-import { CreateTablesPage, RunSqlPage } from './admin-db';
-import { TableListPage } from './admin-table-list';
-import { adminFrameProps } from './admin-frame-props';
-import { AdminMenuPage } from './admin-menu-list';
-import { TestThemesPage } from './admin-test-themes';
-import { AdminPagePage } from './admin-page-list';
-import { AdminPerformancePage } from './admin-performance';
-import { AdminReleasePage } from './admin-release';
-import { AdminTestAnimationsPage } from './admin-test-animations';
-import { AdminTestEditPage } from './admin-test-edit';
-import { AdminResourcesPage } from './admin-resources';
-import { AdminTokensPage } from './admin-tokens';
-import { TestComponentPage } from './admin-test-component';
-import { AdminConfigPage } from './admin-config';
-import { AdminAboutPage } from './admin-about';
-import { AdminShellPage } from './admin-shell';
+import { adminFrameHelper } from './admin-frame-helper';
 
-const chineseMenuText: { text: string; zh: string }[] = [
-  { text: 'Contents', zh: '内容管理' },
-  { text: 'Menu List', zh: '菜单列表' },
-  { text: 'Page List', zh: '页面列表' },
-  { text: 'Process List', zh: '流程列表' },
-
-  { text: 'DB', zh: '数据库' },
-  { text: 'Table List', zh: '表' },
-  { text: 'Create Tables', zh: '创建表' },
-  { text: 'Run SQL', zh: '运行 SQL' },
-
-  { text: 'Test', zh: '测试' },
-  { text: 'Test Themes', zh: '测试主题' },
-  { text: 'Test Component', zh: '测试组件' },
-  { text: 'Test Animations', zh: '测试动画' },
-  { text: 'Test Edit', zh: '测试编辑' },
-
-  { text: 'Access', zh: '管理服务器' },
-  { text: 'Release', zh: '发布' },
-  { text: 'Tokens', zh: '管理令牌' },
-
-  { text: 'Server Info', zh: '服务器信息' },
-  { text: 'Resources', zh: '管理资源' },
-  { text: 'Config', zh: '管理配置' },
-  { text: 'Shell', zh: '命令终端' },
-  { text: 'Server Info', zh: '服务器信息' },
-  { text: 'Performance', zh: '性能' },
-
-  { text: 'Help', zh: '帮助' },
-  { text: 'About', zh: '关于' },
-];
-const translateMenuToChinese = (text: string) => {
-  const menuItem = chineseMenuText.find((item) => item.text === text);
-  return menuItem ? menuItem.zh : text;
+type AdminPanelProps = {
+  title?: string;
+  css?: CssProps;
+  refUpdate: TabsHookProps;
+};
+const AdminPanel = (props: AdminPanelProps) => {
+  const css: CssProps = {
+    height: '100%',
+  };
+  const pages: TabsPageProps[] = [];
+  return (
+    <div css={css}>
+      <Tabs pages={pages} hook={props.refUpdate} pagePadding='8px'></Tabs>
+    </div>
+  );
 };
-
-export class AdminFrameHelper {
-  consoleTitle = 'Welcome to Admin Panel';
-  getConsoleTitle() {
-    return this.consoleTitle;
-  }
-  setConsoleTitle(title: string) {
-    this.consoleTitle = title;
-  }
-
-  adminTopMenu: NestMenuItemProps[] = [
-    // { text: 'Top', url: '/admin' },
-    {
-      id: 'contents',
-      text: 'Contents',
-      url: '',
-      // hide: true,
-      items: [
-        {
-          id: 'menu-list',
-          text: 'Menu List',
-          url: '',
-          // hide: true,
-          js: () => this.addPanel('Menu', AdminMenuPage()),
-        },
-        {
-          id: 'page-list',
-          text: 'Page List',
-          url: '',
-          js: () => this.addPanel('Page', AdminPagePage()),
-        },
-        {
-          id: 'process-list',
-          text: 'Process List',
-          url: '',
-          js: () => this.addPanel('Process', <div>new Process</div>),
-        },
-      ],
-    },
-    // { text: 'menu2', url: '/st_did.l--liangbufan.gunanguanvqingguandeng.html' },
-    // {
-    //   text: 'Admin',
-    //   url: '',
-    //   items: [{ text: 'Users', url: '/admin/users' }],
-    // },
-    {
-      id: 'db',
-      text: 'DB',
-      url: '',
-      items: [
-        {
-          id: 'table-list',
-          text: 'Table List',
-          url: '',
-          js: () => this.addPanel('Table List', TableListPage()),
-        },
-        {
-          id: 'create-tables',
-          text: 'Create Tables',
-          url: '',
-          js: () => this.addPanel('Create Tables', CreateTablesPage()),
-        },
-        {
-          id: 'run-sql',
-          text: 'Run SQL',
-          url: '',
-          js: () => this.addPanel('Run SQL', RunSqlPage()),
-        },
-      ],
-    },
-    {
-      id: 'test',
-      text: 'Test',
-      url: '',
-      items: [
-        {
-          id: 'test-themes',
-          text: 'Test Themes',
-          url: '',
-          js: () => this.addPanel('Test Themes', TestThemesPage()),
-        },
-        {
-          id: 'test-component',
-          text: 'Test Component',
-          url: '',
-          js: () => this.addPanel('Test Component', TestComponentPage()),
-        },
-        {
-          id: 'test-animations',
-          text: 'Test Animations',
-          url: '',
-          js: () => this.addPanel('Test Animations', AdminTestAnimationsPage()),
-        },
-        {
-          id: 'test-edit',
-          text: 'Test Edit',
-          url: '',
-          js: () => this.addPanel('Test Edit', AdminTestEditPage()),
-        },
-      ],
-    },
-
-    {
-      id: 'access',
-      text: 'Access',
-      url: '',
-      items: [
-        {
-          id: 'release',
-          text: 'Release',
-          url: '',
-          js: () => this.addPanel('Release', AdminReleasePage()),
-        },
-        {
-          id: 'tokens',
-          text: 'Tokens',
-          url: '',
-          js: () => this.addPanel('Tokens', AdminTokensPage()),
-        },
-      ],
-    },
-
-    {
-      id: 'server-info',
-      text: 'Server Info',
-      url: '',
-      items: [
-        {
-          id: 'performance',
-          text: 'Performance',
-          url: '',
-          js: () => this.addPanel('Performance', AdminPerformancePage()),
-        },
-        {
-          id: 'resources',
-          text: 'Resources',
-          url: '',
-          js: () => this.addPanel('Resources', AdminResourcesPage()),
-        },
-        {
-          id: 'config',
-          text: 'Config',
-          url: '',
-          js: () => this.addPanel('Config', AdminConfigPage()),
-        },
-        {
-          id: 'shell',
-          text: 'Shell',
-          url: '',
-          js: () => this.addPanel('Shell', AdminShellPage()),
-        },
-      ],
-    },
-    {
-      id: 'help',
-      text: 'Help',
-      url: '',
-      items: [
-        {
-          id: 'about',
-          text: 'About',
-          url: '',
-          js: () => this.addPanel('About', AdminAboutPage()),
-        },
-      ],
-    },
-  ];
-
-  hookBeforeShowMenu?: (adminTopMenu: NestMenuItemProps[]) => NestMenuItemProps[];
-  // Set a hook to modify the admin top menu dynamically before it is shown
-  setHookBeforeShowMenu(hook: (adminTopMenu: NestMenuItemProps[]) => NestMenuItemProps[]) {
-    this.hookBeforeShowMenu = hook;
-  }
-  getAdminTopMenu() {
-    if (this.hookBeforeShowMenu) {
-      return this.hookBeforeShowMenu(this.adminTopMenu);
-    }
-    return this.adminTopMenu;
-  }
-  setAdminTopMenu(adminTopMenu: NestMenuItemProps[]) {
-    this.adminTopMenu = adminTopMenu;
-  }
-  setChineseAdminTopMenu() {
-    this.adminTopMenu.forEach((item) => {
-      item.text = translateMenuToChinese(item.text);
-      item.items?.forEach((subItem) => {
-        subItem.text = translateMenuToChinese(subItem.text);
-      });
-    });
-  }
-
-  mobileMenuMaxWidth = '700px';
-  setMobileMenuMaxWidth(maxWidth: string) {
-    this.mobileMenuMaxWidth = maxWidth;
-  }
-  getMobileMenuMaxWidth() {
-    return this.mobileMenuMaxWidth;
-  }
-
-  insertMenuItem(item: NestMenuItemProps[], beforeMenuId?: string) {
-    let index = -1;
-    if (beforeMenuId) {
-      index = this.adminTopMenu.findIndex((m) => m.id === beforeMenuId);
-    }
-    if (index !== -1) {
-      this.adminTopMenu.splice(index, 0, ...item);
-    } else {
-      this.adminTopMenu.push(...item);
-    }
-  }
-  insertSubMenuItem(item: MenuItemProps[], beforeMenuId: string, beforeSubMenuId?: string) {
-    const index = this.adminTopMenu.findIndex((m) => m.id === beforeMenuId);
-    if (index !== -1) {
-      const subMenu = this.adminTopMenu[index].items || [];
-      const subIndex = subMenu.findIndex((s) => s.id === beforeSubMenuId);
-      if (subIndex !== -1) {
-        subMenu.splice(subIndex, 0, ...item);
-      } else {
-        subMenu.push(...item);
-      }
-      // this.adminTopMenu[index].items = subMenu;
-    }
-  }
-  getMenuItem(menuId: string): NestMenuItemProps | null {
-    const index = this.adminTopMenu.findIndex((m) => m.id === menuId);
-    if (index !== -1) {
-      return this.adminTopMenu[index];
-    }
-    return null;
-  }
-  getSubMenuItem(menuId: string, subMenuId: string): MenuItemProps | null {
-    const index = this.adminTopMenu.findIndex((m) => m.id === menuId);
-    if (index !== -1) {
-      const subMenu = this.adminTopMenu[index].items || [];
-      const subIndex = subMenu.findIndex((s) => s.id === subMenuId);
-      if (subIndex !== -1) {
-        return subMenu[subIndex];
-      }
-    }
-    return null;
-  }
-
-  refUpdate = adminFrameProps.tabsHook;
-  async addPanel(title: string, page: VNode) {
-    if (adminFrameProps.tabsHook.getCount!() > adminFrameProps.maxTabsCount) {
-      alert('You are opening too many pages');
-      return;
-    }
-    if (adminFrameProps.tabsHook.findAndActivate!(title)) {
-      return;
-    }
-    await adminFrameProps.tabsHook.newPage!(title, page);
-  }
-}
-export const adminFrameHelper = /* @__PURE__ */ new AdminFrameHelper();
 
 export type AdminFrameProps = {
   title?: string;
   css?: CssProps;
 };
 export const AdminFrame = (props: AdminFrameProps) => {
-  const refUpdate = adminFrameProps.tabsHook;
+  const refUpdate = adminFrameHelper.getTabsHook();
   const maxWidthMobileMenu = adminFrameHelper.getMobileMenuMaxWidth();
   const css: CssProps = {
     backgroundColor: 'var(--primary-bg-color)',
@@ -395,9 +106,11 @@ export const AdminFrame = (props: AdminFrameProps) => {
     },
     ...props.css,
   };
-  const onLogoutClick = () => {
+  const onLogoutClick = async () => {
     clearCookie('_token_dev', '/');
-    window.location.href = '/admin';
+    await adminFrameHelper.getAppAdminHookLogout()?.();
+    await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/logout');
+    window.location.href = '/admin_dev';
   };
 
   bindGlobalStyle('admin-frame-box', css);
@@ -416,6 +129,7 @@ export const AdminFrame = (props: AdminFrameProps) => {
           color='var(--sidebar-color)'
           backgroundColor='var(--sidebar-bg-color)'
           mobileMenu={true}
+          isDevAdmin={adminFrameHelper.getIsDevAdmin()}
         ></MenuSidebar>
         <div class='top-logo'>Lupine.Dev</div>
         <div class='top-title'>{props.title}</div>
@@ -438,6 +152,7 @@ export const AdminFrame = (props: AdminFrameProps) => {
             color='var(--sidebar-color)'
             backgroundColor='var(--sidebar-bg-color)'
             desktopMenu={true}
+            isDevAdmin={adminFrameHelper.getIsDevAdmin()}
           ></MenuSidebar>
         </div>
         <div class='body-content'>
@@ -447,20 +162,3 @@ export const AdminFrame = (props: AdminFrameProps) => {
     </div>
   );
 };
-
-export type AdminPanelProps = {
-  title?: string;
-  css?: CssProps;
-  refUpdate: TabsHookProps;
-};
-export const AdminPanel = (props: AdminPanelProps) => {
-  const css: CssProps = {
-    height: '100%',
-  };
-  const pages: TabsPageProps[] = [];
-  return (
-    <div css={css}>
-      <Tabs pages={pages} hook={props.refUpdate} pagePadding='8px'></Tabs>
-    </div>
-  );
-};

package/admin/admin-index.tsx

@@ -1,8 +1,9 @@
 import { PageProps, PageRouter, DomUtils, Redirect } from 'lupine.components';
-import { AdminFrame } from './admin-frame';
+import { adminFrameHelper } from './admin-frame-helper';
 import { AdminLoginPage } from './admin-login';
 import { AdminMenuSinglePage } from './admin-menu-list';
 import { AdminDesignPage } from './design/admin-design';
+import { AdminFrame } from './admin-frame';
 
 const fetchAuth = async (props: PageProps) => {
   const data = await props.renderPageFunctions.fetchData('/api/admin/auth');
@@ -12,7 +13,7 @@ const fetchAuth = async (props: PageProps) => {
 export const checkAuth = async (props: PageProps) => {
   if (typeof document === 'undefined') {
     // no ssr for admin pages
-    return await BlankPage(props);
+    return <div></div>;
   }
 
   const json = await fetchAuth(props);
@@ -20,6 +21,7 @@ export const checkAuth = async (props: PageProps) => {
   if ((typeof json === 'undefined' || !json.result) && props.url !== '/admin_dev/login') {
     return Redirect({ url: '/admin_dev/login' });
   }
+  adminFrameHelper.setIsDevAdmin(true);
   return null;
 };
 
@@ -28,7 +30,7 @@ export const checkAuth = async (props: PageProps) => {
 
 //   if (typeof document === 'undefined') {
 //     // no ssr for admin pages
-//     return await BlankPage(props);
+//     return <div></div>;
 //   }
 
 //   const json = await fetchAuth(props);
@@ -51,11 +53,8 @@ export const AdminIndexPage = async (props: PageProps) => {
   return <AdminFrame title='Welcome...' />;
 };
 
-export const BlankPage = async (props: PageProps) => {
-  return <div></div>;
-};
-
 const devAdminPageRouter = new PageRouter();
+// need to be override for app and dev admins
 devAdminPageRouter.setFilter(checkAuth);
 
 devAdminPageRouter.use('/menu', AdminMenuSinglePage);

package/admin/admin-login.tsx

@@ -1,5 +1,14 @@
-import { CssProps, PageProps, webEnv, DomUtils, NotificationColor, NotificationMessage, setCookie } from 'lupine.components';
+import {
+  CssProps,
+  PageProps,
+  webEnv,
+  NotificationColor,
+  NotificationMessage,
+  setCookie,
+  RefProps,
+} from 'lupine.components';
 import { adminCss } from './admin-css';
+import { adminFrameHelper } from './admin-frame-helper';
 
 const fetchLogin = async (props: PageProps, username: string, password: string) => {
   const data = await props.renderPageFunctions.fetchData('/api/admin/auth', {
@@ -17,78 +26,81 @@ export const AdminLoginPage = async (props: PageProps) => {
     width: '100%',
     minHeight: '100%',
     overflowY: 'auto',
-    '.top-header': {
+    '.&header': {
       padding: '50px 0',
       margin: 'auto',
       fontSize: '200%',
     },
-    '.top-content': {
+    '.&content': {
       flex: '1',
       padding: '8px 16px',
       margin: 'auto',
-      '.login-button, .login-tip': {
+      '.&button, .&tip': {
         justifyContent: 'center',
       },
-      '.login-button button': {
+      '.&button button': {
         width: '80%',
         fontSize: '150%',
         height: '40px',
       },
-      '.login-tip': {
+      '.&tip': {
         color: 'gray',
         fontSize: '90%',
       },
-      '.label': {
+      '.&label': {
         width: '100px',
       },
       '.row-box': {
         marginBottom: '8px',
       },
     },
-    '.top-footer': {
+    '.&footer': {
       padding: '16px 16px 4px 16px',
       margin: 'auto',
     },
   };
 
   const onLogin = async () => {
-    const auth = await fetchLogin(props, DomUtils.getValue('.u-name')!, DomUtils.getValue('.u-pass')!);
+    const auth = await fetchLogin(props, ref.$('.&name')!.value, ref.$('.&pass')!.value);
     console.log('====auth', auth);
     if (!auth || auth.status !== 'ok') {
       NotificationMessage.sendMessage((auth && auth.message) || 'Login failed', NotificationColor.Error);
     }
-    if (auth.result) {
-      setCookie('_token_dev', auth.result, 30, '/');
+    if (auth.devLogin) {
+      setCookie('_token_dev', auth.devLogin, 30, '/');
       window.location.href = '/admin_dev';
     }
+    const appAdminHookCheckLogin = adminFrameHelper.getAppAdminHookCheckLogin();
+    if (appAdminHookCheckLogin) {
+      if (await appAdminHookCheckLogin(auth)) {
+        window.location.href = '/admin_dev';
+      }
+    }
   };
+  const ref: RefProps = {};
   return (
-    <div css={css} class='admin-login'>
-      <div class='top-header'>
-        <div class='top-title'>Site Management (Lupine.JS 1.0)</div>
+    <div ref={ref} css={css} class='admin-login'>
+      <div class='&header'>
+        <div class='&title'>Site Management (Lupine.JS 1.0)</div>
       </div>
-      <div class='top-content'>
+      <div class='&content'>
         <div class='row-box'>
-          <div class='label'>Username:</div>
-          <div>
-            <input class='input-base u-name' type='text' />
-          </div>
+          <div class='&label'>Username:</div>
+          <input class='input-base &name' type='text' />
         </div>
         <div class='row-box'>
-          <div class='label'>Password:</div>
-          <div>
-            <input class='input-base u-pass' type='password' />
-          </div>
+          <div class='&label'>Password:</div>
+          <input class='input-base &pass' type='password' />
         </div>
-        <div class='row-box login-button'>
+        <div class='row-box &button'>
           <button onClick={() => onLogin()} class='button-base'>
             Login
           </button>
         </div>
-        <div class='row-box login-tip'>* Login after using the system.</div>
+        <div class='row-box &tip'>* Login after using the system.</div>
       </div>
-      <div class='top-footer'>
-        Copyright© 2023-2024 Lupine.JS{' '}
+      <div class='&footer'>
+        Copyright© 2023-2025 Lupine.JS{' '}
         <a href={`http://localhost:${webEnv('API_PORT', 11080)}/`} target='_blank'>
           http://localhost:{webEnv('API_PORT', 11080)}/
         </a>

package/admin/admin-menu-list.tsx

@@ -1,7 +1,7 @@
 import { CssProps, PageProps, RefProps, getRenderPageProps, NotificationMessage } from 'lupine.components';
 import { AdminTableData } from './admin-table-data';
-import { adminFrameProps } from './admin-frame-props';
 import { AdminMenuEditPage } from './admin-menu-edit';
+import { adminFrameHelper } from './admin-frame-helper';
 
 const tableName = '$__s_menu';
 const fetchTableDelete = async (tableName: string, id: string) => {
@@ -14,7 +14,7 @@ export const AdminMenuSinglePage = async (props: PageProps) => {
 };
 
 export const AdminMenuPage = () => {
-  const refUpdate = adminFrameProps.tabsHook;
+  const refUpdate = adminFrameHelper.getTabsHook();
   const onDelete = async (rowData: any) => {
     if (!confirm(`Are you really Deleting ${rowData['menuid']}?`)) {
       return;
@@ -26,7 +26,7 @@ export const AdminMenuPage = () => {
   };
 
   const onEdit = async (rowData: any) => {
-    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameProps.maxTabsCount) {
+    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameHelper.getMaxTabsCount()) {
       alert('You are opening too many pages');
       return;
     }
@@ -57,7 +57,7 @@ export const AdminMenuPage = () => {
     }, 500);
   };
   const onNewMenu = async () => {
-    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameProps.maxTabsCount) {
+    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameHelper.getMaxTabsCount()) {
       alert('You are opening too many pages');
       return;
     }

package/admin/admin-page-list.tsx

@@ -1,7 +1,7 @@
 import { CssProps, RefProps, getRenderPageProps, NotificationMessage } from 'lupine.components';
 import { AdminTableData } from './admin-table-data';
-import { adminFrameProps } from './admin-frame-props';
 import { AdminPageEditPage } from './admin-page-edit';
+import { adminFrameHelper } from './admin-frame-helper';
 
 const tableName = '$__s_page';
 const fetchTableDelete = async (tableName: string, id: string) => {
@@ -10,7 +10,7 @@ const fetchTableDelete = async (tableName: string, id: string) => {
 };
 
 export const AdminPagePage = () => {
-  const refUpdate = adminFrameProps.tabsHook;
+  const refUpdate = adminFrameHelper.getTabsHook();
   const onDelete = async (rowData: any) => {
     if (!confirm(`Are you really Deleting ${rowData['menuid']}?`)) {
       return;
@@ -22,7 +22,7 @@ export const AdminPagePage = () => {
   };
 
   const onEdit = async (rowData: any) => {
-    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameProps.maxTabsCount) {
+    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameHelper.getMaxTabsCount()) {
       alert('You are opening too many pages');
       return;
     }
@@ -53,7 +53,7 @@ export const AdminPagePage = () => {
     }, 500);
   };
   const onNewPage = async () => {
-    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameProps.maxTabsCount) {
+    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameHelper.getMaxTabsCount()) {
       alert('You are opening too many pages');
       return;
     }