@qlover/create-app 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @qlover/create-app
 
+## 0.4.5
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** implement logout functionality and enhance localization ([c49f956](https://github.com/qlover/fe-base/commit/c49f956aecbc11a6b96b28309d112f7219a7dcca)) ([#438](https://github.com/qlover/fe-base/pull/438))
+
+  - Added a new LogoutButton component to handle user logout with a confirmation dialog.
+  - Introduced localization keys for logout dialog titles and content in both English and Chinese.
+  - Updated BaseHeader to conditionally display the logout button based on the layout context.
+  - Refactored AppConfig to utilize the Vite environment mode directly.
+  - Adjusted LoginInterface to accept a more generic parameter type for login.
+
+  This update improves user experience by providing a clear logout process and enhances localization support for logout-related messages.
+
 ## 0.4.4
 
 ### Patch Changes

package/dist/index.js

@@ -2378,7 +2378,7 @@ var Generator = class {
 
 // package.json
 var package_default = {
-  version: "0.4.4",
+  version: "0.4.5",
   description: "Create a new app with a single command"};
 function programArgs() {
   const program = new Command();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",

package/templates/react-app/config/Identifier/Auth.ts

@@ -0,0 +1,13 @@
+/**
+ * @description logout dialog title
+ * @localZh 登出
+ * @localEn Logout
+ */
+export const AUTH_LOGOUT_DIALOG_TITLE = 'Logout';
+
+/**
+ * @description logout dialog content
+ * @localZh 确定要登出吗？
+ * @localEn Are you sure you want to logout?
+ */
+export const AUTH_LOGOUT_DIALOG_CONTENT = 'Are you sure you want to logout?';

package/templates/react-app/public/locales/en/common.json

@@ -194,5 +194,7 @@
   "page.500.title": "500 - Server Error",
   "page.login.title": "Login",
   "page.register.title": "Register",
-  "response.no.token": "Response not token value"
+  "response.no.token": "Response not token value",
+  "Logout": "Logout",
+  "Are you sure you want to logout?": "Are you sure you want to logout?"
 }

package/templates/react-app/public/locales/zh/common.json

@@ -194,5 +194,7 @@
   "page.500.title": "500 - 服务器错误",
   "page.login.title": "登录",
   "page.register.title": "注册",
-  "response.no.token": "响应内容没有 token 值"
+  "response.no.token": "响应内容没有 token 值",
+  "Logout": "登出",
+  "Are you sure you want to logout?": "确定要登出吗？"
 }

package/templates/react-app/src/base/cases/AppConfig.ts

@@ -44,8 +44,10 @@ export class AppConfig implements EnvConfigInterface {
    * Current environment mode for Vite
    * @description Represents the running environment (development, production, etc.)
    * Automatically set based on the current .env file being used
+   *
+   * from vite.config `mode`
    */
-  readonly env: string = '';
+  readonly env: string = import.meta.env.MODE;
 
   /**
    * Storage key for user authentication token

package/templates/react-app/src/base/port/LoginInterface.ts

@@ -6,7 +6,7 @@ export interface RegisterFormData {
   agreeToTerms: boolean;
 }
 export interface LoginInterface {
-  login(params: { username: string; password: string }): Promise<unknown>;
+  login(params: unknown): Promise<unknown>;
   logout(): void;
   register(params: RegisterFormData): Promise<unknown>;
 }

package/templates/react-app/src/core/globals.ts

@@ -16,7 +16,8 @@ export const dialogHandler = new DialogHandler();
  */
 export const logger = new Logger({
   handlers: new ConsoleHandler(new ColorFormatter(loggerStyles)),
-  silent: isProduction
+  silent: isProduction,
+  level: 'debug'
 });
 
 /**

package/templates/react-app/src/pages/auth/Layout.tsx

@@ -15,7 +15,7 @@ export default function Layout() {
 
   return (
     <>
-      <BaseHeader />
+      <BaseHeader showLogoutButton={false} />
       <div className="flex-1">
         <Outlet />
       </div>

package/templates/react-app/src/pages/base/Layout.tsx

@@ -9,7 +9,7 @@ export default function Layout() {
         data-testid="basic-layout"
         className="text-base min-h-screen bg-primary"
       >
-        <BaseHeader />
+        <BaseHeader showLogoutButton />
 
         <div className="text-text bg-primary">
           <Outlet />

package/templates/react-app/src/pages/base/components/BaseHeader.tsx

@@ -3,8 +3,13 @@ import LocaleLink from '@/uikit/components/LocaleLink';
 import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
 import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
 import { IOC } from '@/core/IOC';
+import LogoutButton from './LogoutButton';
 
-export default function BaseHeader() {
+export default function BaseHeader({
+  showLogoutButton
+}: {
+  showLogoutButton?: boolean;
+}) {
   return (
     <header className="h-14 bg-secondary border-b border-border sticky top-0 z-50">
       <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
@@ -26,6 +31,8 @@ export default function BaseHeader() {
         <div className="flex items-center gap-4">
           <LanguageSwitcher />
           <ThemeSwitcher />
+
+          {showLogoutButton && <LogoutButton />}
         </div>
       </div>
     </header>

package/templates/react-app/src/pages/base/components/LogoutButton.tsx

@@ -0,0 +1,32 @@
+import { UserService } from '@/base/services/UserService';
+import { IOC } from '@/core/IOC';
+import {
+  AUTH_LOGOUT_DIALOG_CONTENT,
+  AUTH_LOGOUT_DIALOG_TITLE
+} from '@config/Identifier/Auth';
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function LogoutButton() {
+  const { t } = useTranslation();
+
+  const tTitle = t(AUTH_LOGOUT_DIALOG_TITLE);
+  const tContent = t(AUTH_LOGOUT_DIALOG_CONTENT);
+
+  const onClick = useCallback(() => {
+    IOC('DialogHandler').confirm({
+      title: tTitle,
+      content: tContent,
+      onOk: () => {
+        IOC(UserService).logout();
+      }
+    });
+  }, [tTitle, tContent]);
+
+  return (
+    <Button danger onClick={onClick}>
+      {tTitle}
+    </Button>
+  );
+}

package/templates/react-app/vite.config.ts

@@ -118,7 +118,6 @@ export default defineConfig({
   server: {
     port: Number(process.env.VITE_SERVER_PORT || 3200)
   },
-  mode: process.env.NODE_ENV,
   test: {
     environment: 'jsdom',
     globals: true,