@qlover/create-app 0.3.2 → 0.3.4

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

@@ -1,28 +1,33 @@
 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 { RouterController } from '@/uikit/controllers/RouterController';
 import { UserController } from '@/uikit/controllers/UserController';
-import AppConfig from '@/core/AppConfig';
 import { useSliceStore } from '@qlover/slice-store-react';
 
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
 export default function Login() {
   const { t } = useBaseRoutePage();
   const userController = IOC(UserController);
+  const AppConfig = IOC('AppConfig');
   useSliceStore(userController);
-
-  const [email, setEmail] = useState(AppConfig.loginUser);
-  const [password, setPassword] = useState(AppConfig.loginPassword);
   const [loading, setLoading] = useState(false);
 
-  const handleLogin = async () => {
+  const handleLogin = async (values: LoginFormData) => {
     try {
       setLoading(true);
-      await userController.login({ username: email, password });
-      // Redirect or show success message
+      await userController.login({
+        username: values.email,
+        password: values.password
+      });
       IOC(RouterController).replaceToHome();
     } catch (error) {
-      // Handle login error
       console.error(error);
     } finally {
       setLoading(false);
@@ -30,37 +35,124 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
-      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
-        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-          <h1 className="text-base font-bold text-center text-gray-800 mb-8">
-            {t('login')}
-          </h1>
-          <div className="space-y-6">
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder={t('email')}
-              className="w-full px-4 py-2 border rounded-lg"
-            />
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder={t('password')}
-              className="w-full px-4 py-2 border rounded-lg"
-            />
-            <button
-              onClick={handleLogin}
-              className="w-full px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200"
-              disabled={loading}
+    <div 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">
+          <div className="w-10 h-10 bg-brand rounded-lg"></div>
+          <span className="text-2xl font-semibold text-text">
+            {AppConfig.appName}
+          </span>
+        </div>
+        <h1 className="text-4xl font-bold text-text mb-4">
+          Welcome back to the future of learning
+        </h1>
+        <p className="text-text-secondary text-lg mb-8">
+          Unlock personalized AI-powered learning experiences designed to
+          accelerate your knowledge journey.
+        </p>
+        <div className="space-y-4">
+          <FeatureItem
+            icon="🎯"
+            text="AI-powered personalized learning paths"
+          />
+          <FeatureItem icon="🎯" text="Smart content recommendations" />
+          <FeatureItem icon="📊" text="Real-time progress tracking" />
+        </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('Sign in to your account')}
+          </h2>
+          <p className="text-text-secondary mb-8">
+            Enter your credentials to access your dashboard
+          </p>
+
+          <Form
+            name="login"
+            initialValues={{
+              email: AppConfig.loginUser,
+              password: AppConfig.loginPassword
+            }}
+            onFinish={handleLogin}
+            layout="vertical"
+            className="space-y-4"
+          >
+            <Form.Item
+              name="email"
+              rules={[{ required: true, message: 'Please input your email!' }]}
             >
-              {loading ? 'Loading...' : t('login')}
-            </button>
-          </div>
+              <Input
+                prefix={<UserOutlined className="text-text-tertiary" />}
+                placeholder={t('email')}
+                className="h-12 text-base bg-secondary border-border"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="password"
+              rules={[
+                { required: true, message: 'Please input your password!' }
+              ]}
+            >
+              <Input.Password
+                prefix={<LockOutlined />}
+                placeholder={t('password')}
+                className="h-12 text-base"
+              />
+            </Form.Item>
+
+            <div className="flex justify-end">
+              <a href="#" className="text-brand hover:text-brand-hover">
+                {t('Forgot your password?')}
+              </a>
+            </div>
+
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                className="w-full h-12 text-base"
+              >
+                {t('Sign In')}
+              </Button>
+            </Form.Item>
+
+            <div className="text-center text-text-tertiary my-4">
+              or continue with
+            </div>
+
+            <Button icon={<GoogleOutlined />} className="w-full h-12 text-base">
+              Sign in with Google
+            </Button>
+
+            <div className="text-center mt-6">
+              <span className="text-text-tertiary">
+                Don't have an account?{' '}
+              </span>
+              <a href="#" className="text-brand hover:text-brand-hover">
+                Create one here
+              </a>
+            </div>
+          </Form>
         </div>
       </div>
     </div>
   );
 }
+
+// Helper component for feature items
+function FeatureItem({ icon, text }: { icon: string; text: string }) {
+  return (
+    <div 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>
+      <span>{text}</span>
+    </div>
+  );
+}

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

@@ -1,11 +1,127 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import * as i18nKeys from '@config/Identifier.I18n';
+import {
+  Button,
+  Tooltip,
+  message,
+  notification,
+  Modal,
+  Drawer,
+  Popover,
+  Popconfirm,
+  Alert
+} from 'antd';
+import { useState } from 'react';
 
 export default function About() {
   const { t } = useBaseRoutePage();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [notificationApi, contextHolder2] = notification.useNotification();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const showMessage = () => {
+    messageApi.info(t(i18nKeys.ABOUT_MESSAGE_TEST), 2000);
+  };
+
+  const showNotification = () => {
+    notificationApi.open({
+      message: t(i18nKeys.ABOUT_NOTIFICATION_TITLE),
+      description: t(i18nKeys.ABOUT_NOTIFICATION_DESC),
+      duration: 2000
+    });
+  };
+  const showNotification2 = () => {
+    notification.open({
+      message: t(i18nKeys.ABOUT_NOTIFICATION_TITLE),
+      description: t(i18nKeys.ABOUT_NOTIFICATION_DESC),
+      duration: 2000
+    });
+  };
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const showMessage2 = () => {
+    message.info(t(i18nKeys.ABOUT_MESSAGE_TEST), 200);
+  };
+
+  const showDrawer = () => {
+    setIsDrawerOpen(true);
+  };
+
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+    <div 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">{t('title')}</h1>
+        <h1 className="text-2xl font-bold text-center text-text mb-8">
+          {t(i18nKeys.PAGE_ABOUT_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={showNotification}>
+            {t(i18nKeys.ABOUT_BTN_NOTIFICATION)}
+          </Button>
+
+          <Button onClick={showNotification2}>
+            {t(i18nKeys.ABOUT_BTN_NOTIFICATION2)}
+          </Button>
+
+          <Tooltip title={t(i18nKeys.ABOUT_TOOLTIP_TEXT)}>
+            <Button>{t(i18nKeys.ABOUT_BTN_TOOLTIP)}</Button>
+          </Tooltip>
+
+          <Modal
+            title={t(i18nKeys.ABOUT_MODAL_TITLE)}
+            open={isModalOpen}
+            onOk={() => setIsModalOpen(false)}
+            onCancel={() => setIsModalOpen(false)}
+          >
+            <p>{t(i18nKeys.ABOUT_MODAL_CONTENT)}</p>
+          </Modal>
+
+          <Button onClick={showModal}>{t(i18nKeys.ABOUT_BTN_MODAL)}</Button>
+
+          <Drawer
+            title={t(i18nKeys.ABOUT_DRAWER_TITLE)}
+            open={isDrawerOpen}
+            onClose={() => setIsDrawerOpen(false)}
+          >
+            <p>{t(i18nKeys.ABOUT_DRAWER_CONTENT)}</p>
+          </Drawer>
+
+          <Button onClick={showDrawer}>{t(i18nKeys.ABOUT_BTN_DRAWER)}</Button>
+
+          <Popover
+            content={t(i18nKeys.ABOUT_POPOVER_CONTENT)}
+            title={t(i18nKeys.ABOUT_POPOVER_TITLE)}
+          >
+            <Button>{t(i18nKeys.ABOUT_BTN_POPOVER)}</Button>
+          </Popover>
+
+          <Popconfirm
+            title={t(i18nKeys.ABOUT_POPCONFIRM_TITLE)}
+            description={t(i18nKeys.ABOUT_POPCONFIRM_DESC)}
+            okText={t(i18nKeys.COMMON_OK)}
+            cancelText={t(i18nKeys.COMMON_CANCEL)}
+          >
+            <Button>{t(i18nKeys.ABOUT_BTN_POPCONFIRM)}</Button>
+          </Popconfirm>
+
+          <Alert
+            message={t(i18nKeys.ABOUT_ALERT_MESSAGE)}
+            type="warning"
+            showIcon
+            closable
+            className="mt-4"
+          />
+        </div>
       </div>
     </div>
   );

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

@@ -1,38 +1,57 @@
+import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as ErrorIdentifierList from '@config/ErrorIdentifier';
+import * as ErrorIdentifierList from '@config/Identifier.Error';
+import * as i18nKeys from '@config/Identifier.I18n';
 
 export default function ErrorIdentifier() {
   const { t } = useBaseRoutePage();
 
   return (
-    <div className="min-h-screen bg-gray-100/90 py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-3xl mx-auto">
-        <div className="bg-white shadow-lg rounded-lg overflow-hidden">
-          <div className="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
-            <h1 className="text-2xl font-bold text-white">
-              {t('errorIdentifier')}
+    <div className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Header Section */}
+        <section className="py-8">
+          <div className="text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
+              {t(i18nKeys.PAGE_ERROR_IDENTIFIER_MAIN_TITLE)}
             </h1>
-            <p className="text-blue-100 mt-1">
-              Identifier From: '@config/ErrorIdentifier'
+            <p className="text-xl text-text-secondary mb-8">
+              {t(i18nKeys.PAGE_ERROR_IDENTIFIER_SOURCE_DESCRIPTION)}
             </p>
           </div>
+        </section>
 
-          <div className="divide-y divide-gray-200">
-            {Object.entries(ErrorIdentifierList).map(([key, value]) => (
-              <div
-                key={key}
-                className="px-6 py-4 flex flex-col sm:flex-row sm:items-center hover:bg-gray-50"
-              >
-                <span className="font-medium text-gray-700 mr-3 min-w-[200px]">
+        {/* Error Identifier List */}
+        <div className="grid gap-4">
+          {Object.entries(ErrorIdentifierList).map(([key, value]) => (
+            <div
+              key={key}
+              className="bg-secondary shadow sm:rounded-lg p-6 border border-border hover:bg-elevated transition-colors duration-200"
+            >
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between">
+                <span className="font-medium text-text mb-2 sm:mb-0">
                   {key}
                 </span>
-                <span className="mt-1 sm:mt-0 text-gray-600 bg-gray-100 px-3 py-1 rounded-md">
+                <span className="text-sm text-text-secondary bg-primary px-3 py-1 rounded-md">
                   {t(value)}
                 </span>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
+
+        {/* Call to Action Section */}
+        <section className="py-8 text-center">
+          <h2 className="text-2xl font-bold mb-4 text-text">
+            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_HELP_TITLE)}
+          </h2>
+          <p className="text-lg text-text-secondary mb-6">
+            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_HELP_DESCRIPTION)}
+          </p>
+          <Button type="primary" size="large">
+            {t(i18nKeys.PAGE_ERROR_IDENTIFIER_CONTACT_SUPPORT)}
+          </Button>
+        </section>
       </div>
     </div>
   );