@qlover/create-app 0.7.14 → 0.8.0

package/dist/templates/react-app/src/pages/auth/LoginPage.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
-import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined, GoogleOutlined } from '@ant-design/icons';
-import { IOC } from '@/core/IOC';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as i18nKeys from '@config/Identifier/page.login';
-import LocaleLink from '@/uikit/components/LocaleLink';
+import { login18n } from '@config/i18n/login18n';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Form, Input, Button } from 'antd';
+import { useState } from 'react';
+import { LocaleLink } from '@/uikit/components/LocaleLink';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 interface LoginFormData {
   email: string;
@@ -13,9 +13,12 @@ interface LoginFormData {
 }
 
 export default function LoginPage() {
-  const { t } = useBaseRoutePage();
-  const userService = IOC(IOCIdentifier.UserServiceInterface);
-  const AppConfig = IOC(IOCIdentifier.AppConfig);
+  const tt = useI18nInterface(login18n);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
+  const AppConfig = useIOC(IOCIdentifier.AppConfig);
+  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
+  const logger = useIOC(IOCIdentifier.Logger);
+
   const [loading, setLoading] = useState(false);
 
   const handleLogin = async (values: LoginFormData) => {
@@ -25,16 +28,19 @@ export default function LoginPage() {
         username: values.email,
         password: values.password
       });
-      IOC(IOCIdentifier.RouteServiceInterface).replaceToHome();
+      routeService.replaceToHome();
     } catch (error) {
-      IOC(IOCIdentifier.Logger).error(error);
+      logger.error(error);
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="flex min-h-screen text-xs1 bg-primary">
+    <div
+      data-testid="LoginPage"
+      className="flex min-h-screen text-xs1 bg-primary"
+    >
       {/* Left side - Brand section */}
       <div className="hidden lg:flex lg:w-1/2 bg-secondary p-12 flex-col">
         <div className="flex items-center gap-3 mb-12">
@@ -43,34 +49,20 @@ export default function LoginPage() {
             {AppConfig.appName}
           </span>
         </div>
-        <h1 className="text-4xl font-bold text-text mb-4">
-          {t(i18nKeys.LOGIN_WELCOME)}
-        </h1>
-        <p className="text-text-secondary text-lg mb-8">
-          {t(i18nKeys.LOGIN_SUBTITLE)}
-        </p>
+        <h1 className="text-4xl font-bold text-text mb-4">{tt.welcome}</h1>
+        <p className="text-text-secondary text-lg mb-8">{tt.subtitle}</p>
         <div className="space-y-4">
-          <FeatureItem icon="🎯" text={t(i18nKeys.LOGIN_FEATURE_AI_PATHS)} />
-          <FeatureItem
-            icon="🎯"
-            text={t(i18nKeys.LOGIN_FEATURE_SMART_RECOMMENDATIONS)}
-          />
-          <FeatureItem
-            icon="📊"
-            text={t(i18nKeys.LOGIN_FEATURE_PROGRESS_TRACKING)}
-          />
+          <FeatureItem icon="🎯" text={tt.featureAiPaths} />
+          <FeatureItem icon="🎯" text={tt.featureSmartRecommendations} />
+          <FeatureItem icon="📊" text={tt.featureProgressTracking} />
         </div>
       </div>
 
       {/* Right side - Login form */}
       <div className="w-full lg:w-1/2 p-8 sm:p-12 flex items-center justify-center">
         <div className="w-full max-w-[420px]">
-          <h2 className="text-2xl font-semibold mb-2 text-text">
-            {t(i18nKeys.LOGIN_TITLE)}
-          </h2>
-          <p className="text-text-secondary mb-8">
-            {t(i18nKeys.LOGIN_SUBTITLE)}
-          </p>
+          <h2 className="text-2xl font-semibold mb-2 text-text">{tt.title2}</h2>
+          <p className="text-text-secondary mb-8">{tt.subtitle}</p>
 
           <Form
             name="login"
@@ -84,28 +76,24 @@ export default function LoginPage() {
           >
             <Form.Item
               name="email"
-              rules={[
-                { required: true, message: t(i18nKeys.LOGIN_EMAIL_REQUIRED) }
-              ]}
+              rules={[{ required: true, message: tt.emailRequired }]}
             >
               <Input
                 prefix={<UserOutlined className="text-text-tertiary" />}
-                placeholder={t(i18nKeys.LOGIN_EMAIL)}
-                title={t(i18nKeys.LOGIN_EMAIL_TITLE)}
+                placeholder={tt.email}
+                title={tt.emailTitle}
                 className="h-12 text-base bg-secondary border-border"
               />
             </Form.Item>
 
             <Form.Item
               name="password"
-              rules={[
-                { required: true, message: t(i18nKeys.LOGIN_PASSWORD_REQUIRED) }
-              ]}
+              rules={[{ required: true, message: tt.passwordRequired }]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder={t(i18nKeys.LOGIN_PASSWORD)}
-                title={t(i18nKeys.LOGIN_PASSWORD_TITLE)}
+                placeholder={tt.password}
+                title={tt.passwordTitle}
                 className="h-12 text-base"
               />
             </Form.Item>
@@ -114,46 +102,45 @@ export default function LoginPage() {
               <a
                 href="#"
                 className="text-brand hover:text-brand-hover"
-                title={t(i18nKeys.LOGIN_FORGOT_PASSWORD_TITLE)}
+                title={tt.forgotPasswordTitle}
               >
-                {t(i18nKeys.LOGIN_FORGOT_PASSWORD)}
+                {tt.forgotPassword}
               </a>
             </div>
 
             <Form.Item>
               <Button
+                data-testid="LoginButton"
                 type="primary"
                 htmlType="submit"
                 loading={loading}
-                title={t(i18nKeys.LOGIN_BUTTON_TITLE)}
+                title={tt.buttonTitle}
                 className="w-full h-12 text-base"
               >
-                {t(i18nKeys.LOGIN_BUTTON)}
+                {tt.button}
               </Button>
             </Form.Item>
 
             <div className="text-center text-text-tertiary my-4">
-              {t(i18nKeys.LOGIN_CONTINUE_WITH)}
+              {tt.continueWith}
             </div>
 
             <Button
               icon={<GoogleOutlined />}
               className="w-full h-12 text-base"
-              title={t(i18nKeys.LOGIN_WITH_GOOGLE_TITLE)}
+              title={tt.withGoogleTitle}
             >
-              {t(i18nKeys.LOGIN_WITH_GOOGLE)}
+              {tt.withGoogle}
             </Button>
 
             <div className="text-center mt-6">
-              <span className="text-text-tertiary">
-                {t(i18nKeys.LOGIN_NO_ACCOUNT)}{' '}
-              </span>
+              <span className="text-text-tertiary">{tt.noAccount} </span>
               <LocaleLink
                 href="/register"
                 className="text-brand hover:text-brand-hover"
-                title={t(i18nKeys.LOGIN_CREATE_ACCOUNT_TITLE)}
+                title={tt.createAccountTitle}
               >
-                {t(i18nKeys.LOGIN_CREATE_ACCOUNT)}
+                {tt.createAccount}
               </LocaleLink>
             </div>
           </Form>
@@ -166,7 +153,10 @@ export default function LoginPage() {
 // Helper component for feature items
 function FeatureItem({ icon, text }: { icon: string; text: string }) {
   return (
-    <div className="flex items-center gap-3 text-text">
+    <div
+      data-testid="FeatureItem"
+      className="flex items-center gap-3 text-text"
+    >
       <div className="w-8 h-8 bg-elevated rounded-lg flex items-center justify-center">
         {icon}
       </div>

package/dist/templates/react-app/src/pages/auth/RegisterPage.tsx

@@ -1,17 +1,19 @@
-import { useState } from 'react';
-import { Form, Input, Button, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
-import { IOC } from '@/core/IOC';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { RegisterFormData } from '@/base/services/UserService';
-import * as i18nKeys from '@config/Identifier/page.register';
+import { register18n } from '@config/i18n/register18n';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Form, Input, Button, Checkbox } from 'antd';
+import { useState } from 'react';
+import type { RegisterFormData } from '@/base/services/UserService';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+import { useIOC } from '@/uikit/hooks/useIOC';
 
 export default function RegisterPage() {
-  const { t } = useBaseRoutePage();
-  const AppConfig = IOC(IOCIdentifier.AppConfig);
-  const userService = IOC(IOCIdentifier.UserServiceInterface);
-  const routeService = IOC(IOCIdentifier.RouteServiceInterface);
+  const tt = useI18nInterface(register18n);
+  const AppConfig = useIOC(IOCIdentifier.AppConfig);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
+  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
+  const logger = useIOC(IOCIdentifier.Logger);
+
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
 
@@ -21,7 +23,7 @@ export default function RegisterPage() {
       await userService.register(values);
       routeService.replaceToHome();
     } catch (error) {
-      IOC(IOCIdentifier.Logger).error(error);
+      logger.error(error);
     } finally {
       setLoading(false);
     }
@@ -33,7 +35,10 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="flex min-h-screen text-xs1 bg-primary">
+    <div
+      data-testid="RegisterPage"
+      className="flex min-h-screen text-xs1 bg-primary"
+    >
       {/* Left side - Brand section */}
       <div className="hidden lg:flex lg:w-1/2 bg-secondary p-12 flex-col">
         <div className="flex items-center gap-3 mb-12">
@@ -42,34 +47,20 @@ export default function RegisterPage() {
             {AppConfig.appName}
           </span>
         </div>
-        <h1 className="text-4xl font-bold text-text mb-4">
-          {t(i18nKeys.REGISTER_TITLE)}
-        </h1>
-        <p className="text-text-secondary text-lg mb-8">
-          {t(i18nKeys.REGISTER_SUBTITLE)}
-        </p>
+        <h1 className="text-4xl font-bold text-text mb-4">{tt.title2}</h1>
+        <p className="text-text-secondary text-lg mb-8">{tt.subtitle}</p>
         <div className="space-y-4">
-          <FeatureItem
-            icon="🎯"
-            text={t(i18nKeys.REGISTER_FEATURE_PERSONALIZED)}
-          />
-          <FeatureItem icon="👨‍🏫" text={t(i18nKeys.REGISTER_FEATURE_SUPPORT)} />
-          <FeatureItem
-            icon="👥"
-            text={t(i18nKeys.REGISTER_FEATURE_COMMUNITY)}
-          />
+          <FeatureItem icon="🎯" text={tt.featurePersonalized} />
+          <FeatureItem icon="👨‍🏫" text={tt.featureSupport} />
+          <FeatureItem icon="👥" text={tt.featureCommunity} />
         </div>
       </div>
 
       {/* Right side - Registration form */}
       <div className="w-full lg:w-1/2 p-8 sm:p-12 flex items-center justify-center">
         <div className="w-full max-w-[420px]">
-          <h2 className="text-2xl font-semibold mb-2 text-text">
-            {t(i18nKeys.REGISTER_TITLE)}
-          </h2>
-          <p className="text-text-secondary mb-8">
-            {t(i18nKeys.REGISTER_SUBTITLE)}
-          </p>
+          <h2 className="text-2xl font-semibold mb-2 text-text">{tt.title2}</h2>
+          <p className="text-text-secondary mb-8">{tt.subtitle}</p>
 
           <Form
             form={form}
@@ -83,13 +74,13 @@ export default function RegisterPage() {
               rules={[
                 {
                   required: true,
-                  message: t(i18nKeys.REGISTER_USERNAME_REQUIRED)
+                  message: tt.usernameRequired
                 }
               ]}
             >
               <Input
                 prefix={<UserOutlined className="text-text-tertiary" />}
-                placeholder={t(i18nKeys.REGISTER_USERNAME)}
+                placeholder={tt.username}
                 className="h-12 text-base bg-secondary border-border"
               />
             </Form.Item>
@@ -99,17 +90,17 @@ export default function RegisterPage() {
               rules={[
                 {
                   required: true,
-                  message: t(i18nKeys.REGISTER_EMAIL_REQUIRED)
+                  message: tt.emailRequired
                 },
                 {
                   type: 'email',
-                  message: t(i18nKeys.REGISTER_EMAIL_REQUIRED)
+                  message: tt.emailRequired
                 }
               ]}
             >
               <Input
                 prefix={<MailOutlined className="text-text-tertiary" />}
-                placeholder={t(i18nKeys.REGISTER_EMAIL)}
+                placeholder={tt.email}
                 className="h-12 text-base bg-secondary border-border"
               />
             </Form.Item>
@@ -119,13 +110,13 @@ export default function RegisterPage() {
               rules={[
                 {
                   required: true,
-                  message: t(i18nKeys.REGISTER_PASSWORD_REQUIRED)
+                  message: tt.passwordRequired
                 }
               ]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder={t(i18nKeys.REGISTER_PASSWORD)}
+                placeholder={tt.password}
                 className="h-12 text-base"
               />
             </Form.Item>
@@ -136,23 +127,21 @@ export default function RegisterPage() {
               rules={[
                 {
                   required: true,
-                  message: t(i18nKeys.REGISTER_CONFIRM_PASSWORD_REQUIRED)
+                  message: tt.confirmPasswordRequired
                 },
                 ({ getFieldValue }) => ({
                   validator(_, value) {
                     if (!value || getFieldValue('password') === value) {
                       return Promise.resolve();
                     }
-                    return Promise.reject(
-                      t(i18nKeys.REGISTER_PASSWORD_MISMATCH)
-                    );
+                    return Promise.reject(tt.passwordMismatch);
                   }
                 })
               ]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder={t(i18nKeys.REGISTER_CONFIRM_PASSWORD)}
+                placeholder={tt.confirmPassword}
                 className="h-12 text-base"
               />
             </Form.Item>
@@ -165,31 +154,29 @@ export default function RegisterPage() {
                   validator: (_, value) =>
                     value
                       ? Promise.resolve()
-                      : Promise.reject(
-                          new Error(t(i18nKeys.REGISTER_TERMS_REQUIRED))
-                        )
+                      : Promise.reject(new Error(tt.termsRequired))
                 }
               ]}
             >
               <Checkbox>
                 <span className="text-text-secondary">
-                  {t(i18nKeys.REGISTER_TERMS_PREFIX)}{' '}
+                  {tt.termsPrefix}{' '}
                   <a
                     href="#"
                     className="text-brand hover:text-brand-hover"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {t(i18nKeys.REGISTER_TERMS_LINK)}
+                    {tt.termsLink}
                   </a>{' '}
-                  {t(i18nKeys.REGISTER_TERMS_AND)}{' '}
+                  {tt.termsAnd}{' '}
                   <a
                     href="#"
                     className="text-brand hover:text-brand-hover"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {t(i18nKeys.REGISTER_PRIVACY_LINK)}
+                    {tt.privacyLink}
                   </a>
                 </span>
               </Checkbox>
@@ -202,20 +189,18 @@ export default function RegisterPage() {
                 loading={loading}
                 className="w-full h-12 text-base"
               >
-                {t(i18nKeys.REGISTER_BUTTON)}
+                {tt.button}
               </Button>
             </Form.Item>
 
             <div className="text-center mt-6">
-              <span className="text-text-tertiary">
-                {t(i18nKeys.REGISTER_HAVE_ACCOUNT)}{' '}
-              </span>
+              <span className="text-text-tertiary">{tt.haveAccount} </span>
               <a
                 href="#"
                 className="text-brand hover:text-brand-hover"
                 onClick={handleLoginClick}
               >
-                {t(i18nKeys.REGISTER_LOGIN_LINK)}
+                {tt.loginLink}
               </a>
             </div>
           </Form>
@@ -228,7 +213,10 @@ export default function RegisterPage() {
 // Helper component for feature items
 function FeatureItem({ icon, text }: { icon: string; text: string }) {
   return (
-    <div className="flex items-center gap-3 text-text">
+    <div
+      data-testid="FeatureItem"
+      className="flex items-center gap-3 text-text"
+    >
       <div className="w-8 h-8 bg-elevated rounded-lg flex items-center justify-center">
         {icon}
       </div>

package/dist/templates/react-app/src/pages/base/AboutPage.tsx

@@ -1,5 +1,4 @@
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as i18nKeys from '@config/Identifier/page.about';
+import { aboutI18n } from '@config/i18n/aboutI18n';
 import {
   Button,
   Tooltip,
@@ -12,29 +11,31 @@ import {
   Alert
 } from 'antd';
 import { useState } from 'react';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
 
 export default function AboutPage() {
-  const { t } = useBaseRoutePage();
   const [messageApi, contextHolder] = message.useMessage();
   const [notificationApi, contextHolder2] = notification.useNotification();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
+  const tt = useI18nInterface(aboutI18n);
+
   const showMessage = () => {
-    messageApi.info(t(i18nKeys.ABOUT_MESSAGE_TEST), 2000);
+    messageApi.info(tt.messageTest, 2000);
   };
 
   const showNotification = () => {
     notificationApi.open({
-      message: t(i18nKeys.ABOUT_NOTIFICATION_TITLE),
-      description: t(i18nKeys.ABOUT_NOTIFICATION_DESC),
+      message: tt.notificationTitle,
+      description: tt.notificationDescription,
       duration: 2000
     });
   };
   const showNotification2 = () => {
     notification.open({
-      message: t(i18nKeys.ABOUT_NOTIFICATION_TITLE),
-      description: t(i18nKeys.ABOUT_NOTIFICATION_DESC),
+      message: tt.notificationTitle,
+      description: tt.notificationDescription,
       duration: 2000
     });
   };
@@ -43,7 +44,7 @@ export default function AboutPage() {
     setIsModalOpen(true);
   };
   const showMessage2 = () => {
-    message.info(t(i18nKeys.ABOUT_MESSAGE_TEST), 200);
+    message.info(tt.messageTest, 200);
   };
 
   const showDrawer = () => {
@@ -51,71 +52,65 @@ export default function AboutPage() {
   };
 
   return (
-    <div className="min-h-screen bg-primary py-6 flex flex-col justify-center sm:py-12">
+    <div
+      data-testid="AboutPage"
+      className="min-h-screen bg-primary py-6 flex flex-col justify-center sm:py-12"
+    >
       {contextHolder}
       {contextHolder2}
       <div className="relative py-3 sm:max-w-xl sm:mx-auto">
         <h1 className="text-2xl font-bold text-center text-text mb-8">
-          {t(i18nKeys.PAGE_ABOUT_TITLE)}
+          {tt.title}
         </h1>
 
         <div className="space-x-4 flex justify-center flex-wrap gap-4">
-          <Button onClick={showMessage}>{t(i18nKeys.ABOUT_BTN_MESSAGE)}</Button>
-          <Button onClick={showMessage2}>
-            {t(i18nKeys.ABOUT_BTN_MESSAGE2)}
-          </Button>
+          <Button onClick={showMessage}>{tt.btnMessage}</Button>
+          <Button onClick={showMessage2}>{tt.btnMessage2}</Button>
 
-          <Button onClick={showNotification}>
-            {t(i18nKeys.ABOUT_BTN_NOTIFICATION)}
-          </Button>
+          <Button onClick={showNotification}>{tt.btnNotification}</Button>
 
-          <Button onClick={showNotification2}>
-            {t(i18nKeys.ABOUT_BTN_NOTIFICATION2)}
-          </Button>
+          <Button onClick={showNotification2}>{tt.btnNotification2}</Button>
 
-          <Tooltip title={t(i18nKeys.ABOUT_TOOLTIP_TEXT)}>
-            <Button>{t(i18nKeys.ABOUT_BTN_TOOLTIP)}</Button>
+          <Tooltip title={tt.tooltipText}>
+            <Button>{tt.btnTooltip}</Button>
           </Tooltip>
 
           <Modal
-            title={t(i18nKeys.ABOUT_MODAL_TITLE)}
+            title={tt.modalTitle}
             open={isModalOpen}
             onOk={() => setIsModalOpen(false)}
             onCancel={() => setIsModalOpen(false)}
           >
-            <p>{t(i18nKeys.ABOUT_MODAL_CONTENT)}</p>
+            <p>{tt.modalContent}</p>
           </Modal>
 
-          <Button onClick={showModal}>{t(i18nKeys.ABOUT_BTN_MODAL)}</Button>
+          <Button onClick={showModal}>{tt.btnModal}</Button>
 
           <Drawer
-            title={t(i18nKeys.ABOUT_DRAWER_TITLE)}
+            title={tt.drawerTitle}
             open={isDrawerOpen}
             onClose={() => setIsDrawerOpen(false)}
           >
-            <p>{t(i18nKeys.ABOUT_DRAWER_CONTENT)}</p>
+            <p>{tt.drawerContent}</p>
           </Drawer>
 
-          <Button onClick={showDrawer}>{t(i18nKeys.ABOUT_BTN_DRAWER)}</Button>
+          <Button onClick={showDrawer}>{tt.btnDrawer}</Button>
 
-          <Popover
-            content={t(i18nKeys.ABOUT_POPOVER_CONTENT)}
-            title={t(i18nKeys.ABOUT_POPOVER_TITLE)}
-          >
-            <Button>{t(i18nKeys.ABOUT_BTN_POPOVER)}</Button>
+          <Popover content={tt.popoverContent} title={tt.popoverTitle}>
+            <Button>{tt.btnPopover}</Button>
           </Popover>
 
           <Popconfirm
-            title={t(i18nKeys.ABOUT_POPCONFIRM_TITLE)}
-            description={t(i18nKeys.ABOUT_POPCONFIRM_DESC)}
-            okText={t(i18nKeys.ABOUT_OK_TEXT)}
-            cancelText={t(i18nKeys.ABOUT_CANCEL_TEXT)}
+            title={tt.popconfirmTitle}
+            description={tt.popconfirmDesc}
+            okText={tt.okText}
+            cancelText={tt.cancelText}
           >
-            <Button>{t(i18nKeys.ABOUT_BTN_POPCONFIRM)}</Button>
+            <Button>{tt.btnPopconfirm}</Button>
           </Popconfirm>
 
           <Alert
-            message={t(i18nKeys.ABOUT_ALERT_MESSAGE)}
+            message={tt.alertMessage}
             type="warning"
             showIcon
             closable