@qlover/create-app 0.7.8 → 0.7.10

package/dist/templates/next-app/src/app/[locale]/page.tsx

@@ -1,119 +1,111 @@
-import Image from 'next/image';
-import { PageParams } from '@/base/cases/PageParams';
-import { ServerAuth } from '@/base/cases/ServerAuth';
+import { Button } from 'antd';
+import { i18nConfig } from '@config/i18n';
+import { homeI18n } from '@config/i18n/HomeI18n ';
+import { PageParams, type PageParamsType } from '@/base/cases/PageParams';
 import type { PageParamsProps } from '@/base/types/PageProps';
 import { BootstrapServer } from '@/core/bootstraps/BootstrapServer';
 import { redirect } from '@/i18n/routing';
+import { ServerAuth } from '@/server/ServerAuth';
+import { BaseLayout } from '@/uikit/components/BaseLayout';
+import type { Metadata } from 'next';
+
+// const navigationItems = [
+//   {
+//     href: '/identifier',
+//     titleKey: 'HOME_IDENTIFIER',
+//     descriptionKey: 'HOME_IDENTIFIER_DESCRIPTION'
+//   }
+// ];
+
+// Generate static params for all supported locales (used for SSG)
+export async function generateStaticParams() {
+  // Return one entry for each supported locale
+  return i18nConfig.supportedLngs.map((locale) => ({ locale }));
+}
+
+// Allow Next.js to statically generate this page if possible (default behavior)
+export const dynamic = 'auto'; // Enable static generation when possible, fallback to dynamic if needed
+
+// Optional: Use revalidate if you want ISR (Incremental Static Regeneration)
+// export const revalidate = 3600; // Rebuild every hour (optional)
+
+// Generate localized SEO metadata per locale (Next.js 15+ best practice)
+export async function generateMetadata({
+  params
+}: {
+  params: Promise<PageParamsType>;
+}): Promise<Metadata> {
+  const pageParams = new PageParams(await params);
+  return await pageParams.getI18nInterface(homeI18n);
+}
 
 export default async function Home({ params }: PageParamsProps) {
   const server = new BootstrapServer();
   const pageParams = new PageParams(await params!);
   const locale = pageParams.getLocale();
+  const tt = await pageParams.getI18nInterface(homeI18n);
 
-  if (!(await new ServerAuth(server).hasAuth())) {
+  if (!(await server.getIOC(ServerAuth).hasAuth())) {
     return redirect({ href: '/login', locale });
   }
 
   return (
-    <div
-      data-testid="Home"
-      className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20"
-    >
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{' '}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <BaseLayout data-testid="HomePage" showLogoutButton>
+      {/* Hero Section */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
+            {tt.welcome}
+          </h1>
+          <p className="text-xl text-text-secondary mb-8">{tt.description}</p>
+        </div>
+      </section>
+
+      {/* Navigation Grid */}
+      <section className="max-w-6xl mx-auto px-4 py-12">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {/* {navigationItems.map((item) => (
+            <LocaleLink
+              data-testid={`HomePage-navigation-${item.href}`}
+              key={item.href}
+              title={item.titleKey}
+              className={clsx(
+              href={item.href}
+                'block rounded-lg p-6',
+                'bg-secondary',
+                'border border-border',
+                'hover:bg-elevated',
+                'transition-colors duration-200'
+              )}
+            >
+              <h3 className={`text-xl font-semibold mb-3 text-text`}>
+                {t(item.titleKey)}
+              </h3>
+              <p className="text-text-secondary mb-4">
+                {t(item.descriptionKey)}
+              </p>
+              <Button type="primary" className="w-full">
+                {t(i18nKeys.HOME_EXPLORE)}
+              </Button>
+            </LocaleLink>
+          ))} */}
+        </div>
+      </section>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+      {/* Call to Action Section */}
+      <section className="py-16 px-4 bg-elevated">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl font-bold mb-4 text-text">
+            {tt.getStartedTitle}
+          </h2>
+          <p className="text-lg text-text-secondary mb-8">
+            {tt.getStartedDescription}
+          </p>
+          <Button type="primary" size="large" className="px-8">
+            {tt.getStartedButton}
+          </Button>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+      </section>
+    </BaseLayout>
   );
 }

package/dist/templates/next-app/src/app/[locale]/register/RegisterForm.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form, Input } from 'antd';
+import { useState } from 'react';
+import { I } from '@config/IOCIdentifier';
+import { useIOC } from '@/uikit/hook/useIOC';
+import type { RegisterI18nInterface } from '@config/i18n';
+
+export function RegisterForm(props: { tt: RegisterI18nInterface }) {
+  const { tt } = props;
+  const userService = useIOC(I.UserServiceInterface);
+  const logger = useIOC(I.Logger);
+  const routerService = useIOC(I.RouterServiceInterface);
+  const [loading, setLoading] = useState(false);
+
+  const handleRegister = async (values: unknown) => {
+    try {
+      setLoading(true);
+      await userService.register(values);
+      routerService.gotoLogin();
+    } catch (error) {
+      logger.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLoginClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    routerService.gotoLogin();
+  };
+
+  return (
+    <Form
+      data-testid="RegisterForm"
+      name="register"
+      onFinish={handleRegister}
+      layout="vertical"
+      className="space-y-4"
+      validateTrigger="onSubmit"
+    >
+      <Form.Item
+        name="username"
+        rules={[
+          {
+            required: true,
+            message: tt.username_required
+          }
+        ]}
+      >
+        <Input
+          prefix={<UserOutlined className="text-text-tertiary" />}
+          placeholder={tt.username}
+          className="h-12 text-base bg-secondary border-border"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="email"
+        rules={[
+          {
+            required: true,
+            type: 'email',
+            message: tt.email_required
+          }
+        ]}
+      >
+        <Input
+          prefix={<MailOutlined className="text-text-tertiary" />}
+          placeholder={tt.email}
+          className="h-12 text-base bg-secondary border-border"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: tt.password_required
+          }
+        ]}
+      >
+        <Input.Password
+          prefix={<LockOutlined />}
+          placeholder={tt.password}
+          className="h-12 text-base"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="confirmPassword"
+        dependencies={['password']}
+        rules={[
+          {
+            required: true,
+            message: tt.confirm_password_required
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(tt.password_mismatch);
+            }
+          })
+        ]}
+      >
+        <Input.Password
+          prefix={<LockOutlined />}
+          placeholder={tt.confirm_password}
+          className="h-12 text-base"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="agreeToTerms"
+        valuePropName="checked"
+        rules={[
+          {
+            validator: (_, value) =>
+              value
+                ? Promise.resolve()
+                : Promise.reject(new Error(tt.terms_required))
+          }
+        ]}
+      >
+        <Checkbox>
+          <span className="text-text-secondary">
+            {tt.terms_prefix}{' '}
+            <a
+              href="#"
+              className="text-brand hover:text-brand-hover"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {tt.terms_link}
+            </a>{' '}
+            {tt.terms_and}{' '}
+            <a
+              href="#"
+              className="text-brand hover:text-brand-hover"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {tt.privacy_link}
+            </a>
+          </span>
+        </Checkbox>
+      </Form.Item>
+
+      <Form.Item>
+        <Button
+          type="primary"
+          htmlType="submit"
+          loading={loading}
+          className="w-full h-12 text-base"
+        >
+          {tt.button}
+        </Button>
+      </Form.Item>
+
+      <div className="text-center mt-6">
+        <span className="text-text-tertiary">{tt.have_account} </span>
+        <a
+          href="#"
+          className="text-brand hover:text-brand-hover"
+          onClick={handleLoginClick}
+        >
+          {tt.login_link}
+        </a>
+      </div>
+    </Form>
+  );
+}

package/dist/templates/next-app/src/app/[locale]/register/page.tsx

@@ -0,0 +1,79 @@
+import { notFound } from 'next/navigation';
+import { i18nConfig, register18n } from '@config/i18n';
+import { PageParams, type PageParamsType } from '@/base/cases/PageParams';
+import type { PageParamsProps } from '@/base/types/PageProps';
+import { BootstrapServer } from '@/core/bootstraps/BootstrapServer';
+import { redirect } from '@/i18n/routing';
+import { ServerAuth } from '@/server/ServerAuth';
+import { BaseLayout } from '@/uikit/components/BaseLayout';
+import { FeatureItem } from '@/uikit/components/FeatureItem';
+import { RegisterForm } from './RegisterForm';
+import type { Metadata } from 'next';
+
+// Generate static params for all supported locales (used for SSG)
+export async function generateStaticParams() {
+  // Return one entry for each supported locale
+  return i18nConfig.supportedLngs.map((locale) => ({ locale }));
+}
+
+// Allow Next.js to statically generate this page if possible (default behavior)
+export const dynamic = 'auto'; // Enable static generation when possible, fallback to dynamic if needed
+
+// Optional: Use revalidate if you want ISR (Incremental Static Regeneration)
+// export const revalidate = 3600; // Rebuild every hour (optional)
+
+// Generate localized SEO metadata per locale (Next.js 15+ best practice)
+export async function generateMetadata({
+  params
+}: {
+  params: Promise<PageParamsType>;
+}): Promise<Metadata> {
+  const pageParams = new PageParams(await params);
+
+  return await pageParams.getI18nInterface(register18n);
+}
+
+export default async function LoginPage(props: PageParamsProps) {
+  if (!props.params) {
+    return notFound();
+  }
+
+  const params = await props.params;
+  const pageParams = new PageParams(params);
+
+  const server = new BootstrapServer();
+
+  if (await server.getIOC(ServerAuth).hasAuth()) {
+    return redirect({ href: '/', locale: params.locale! });
+  }
+
+  const tt = await pageParams.getI18nInterface(register18n);
+
+  return (
+    <BaseLayout
+      data-testid="RegisterPage"
+      mainProps={{
+        className: 'text-xs1 bg-primary flex min-h-screen'
+      }}
+    >
+      <div className="hidden lg:flex bg-secondary lg:w-1/2 p-12 flex-col">
+        <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={tt.feature_ai_paths} />
+          <FeatureItem icon="🎯" text={tt.feature_smart_recommendations} />
+          <FeatureItem icon="📊" text={tt.feature_progress_tracking} />
+        </div>
+      </div>
+
+      <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">{tt.title}</h2>
+          <p className="text-text-secondary mb-8">{tt.subtitle}</p>
+
+          <RegisterForm tt={tt} />
+        </div>
+      </div>
+    </BaseLayout>
+  );
+}

package/dist/templates/next-app/src/app/api/user/login/route.ts

@@ -0,0 +1,50 @@
+import { ExecutorError } from '@qlover/fe-corekit';
+import { NextResponse } from 'next/server';
+import { StringEncryptor } from '@/base/cases/StringEncryptor';
+import { BootstrapServer } from '@/core/bootstraps/BootstrapServer';
+import { AppErrorApi } from '@/server/AppErrorApi';
+import { AppSuccessApi } from '@/server/AppSuccessApi';
+import type { UserServiceInterface } from '@/server/port/UserServiceInterface';
+import { ServerAuth } from '@/server/ServerAuth';
+import { UserService } from '@/server/services/UserService';
+import { LoginValidator } from '@/server/validators/LoginValidator';
+import type { UserSchema } from '@migrations/schema/UserSchema';
+import type { NextRequest } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const server = new BootstrapServer();
+
+  const result = await server.execNoError(async ({ parameters: { IOC } }) => {
+    const requestBody = await req.json();
+
+    try {
+      if (requestBody.password) {
+        requestBody.password = IOC(StringEncryptor).decrypt(
+          requestBody.password
+        );
+      }
+    } catch {
+      throw new ExecutorError(
+        'encrypt_password_failed',
+        'Encrypt password failed'
+      );
+    }
+    const body = IOC(LoginValidator).getThrow(requestBody);
+
+    const userService: UserServiceInterface = IOC(UserService);
+
+    const user = (await userService.login(body)) as UserSchema;
+
+    await IOC(ServerAuth).setAuth(user.credential_token);
+
+    return user;
+  });
+
+  if (result instanceof ExecutorError) {
+    return NextResponse.json(new AppErrorApi(result.id, result.message), {
+      status: 400
+    });
+  }
+
+  return NextResponse.json(new AppSuccessApi(result));
+}

package/dist/templates/next-app/src/app/api/user/logout/route.ts

@@ -0,0 +1,27 @@
+import { ExecutorError } from '@qlover/fe-corekit';
+import { NextResponse } from 'next/server';
+import { BootstrapServer } from '@/core/bootstraps/BootstrapServer';
+import { AppErrorApi } from '@/server/AppErrorApi';
+import { AppSuccessApi } from '@/server/AppSuccessApi';
+import type { UserServiceInterface } from '@/server/port/UserServiceInterface';
+import { UserService } from '@/server/services/UserService';
+
+export async function POST() {
+  const server = new BootstrapServer();
+
+  const result = await server.execNoError(async ({ parameters: { IOC } }) => {
+    const userService: UserServiceInterface = IOC(UserService);
+
+    await userService.logout();
+
+    return true;
+  });
+
+  if (result instanceof ExecutorError) {
+    return NextResponse.json(new AppErrorApi(result.id, result.message), {
+      status: 400
+    });
+  }
+
+  return NextResponse.json(new AppSuccessApi(result));
+}

package/dist/templates/next-app/src/app/api/user/register/route.ts

@@ -0,0 +1,50 @@
+import { ExecutorError } from '@qlover/fe-corekit';
+import { NextResponse } from 'next/server';
+import { StringEncryptor } from '@/base/cases/StringEncryptor';
+import { BootstrapServer } from '@/core/bootstraps/BootstrapServer';
+import { AppErrorApi } from '@/server/AppErrorApi';
+import { AppSuccessApi } from '@/server/AppSuccessApi';
+import type { UserServiceInterface } from '@/server/port/UserServiceInterface';
+import { UserService } from '@/server/services/UserService';
+import { LoginValidator } from '@/server/validators/LoginValidator';
+import type { NextRequest } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const server = new BootstrapServer();
+
+  const result = await server.execNoError(async ({ parameters: { IOC } }) => {
+    const requestBody = await req.json();
+
+    try {
+      if (requestBody.password) {
+        requestBody.password = IOC(StringEncryptor).decrypt(
+          requestBody.password
+        );
+      }
+    } catch {
+      throw new ExecutorError(
+        'encrypt_password_failed',
+        'Encrypt password failed'
+      );
+    }
+
+    const body = IOC(LoginValidator).getThrow(requestBody);
+
+    const userService: UserServiceInterface = IOC(UserService);
+
+    const user = await userService.register({
+      email: body.email,
+      password: body.password
+    });
+
+    return user;
+  });
+
+  if (result instanceof ExecutorError) {
+    return NextResponse.json(new AppErrorApi(result.id, result.message), {
+      status: 400
+    });
+  }
+
+  return NextResponse.json(new AppSuccessApi(result));
+}

package/dist/templates/next-app/src/base/cases/AppConfig.ts

@@ -1,3 +1,4 @@
+import type { StringValue } from 'ms';
 import { name, version } from '../../../package.json';
 import type { EnvConfigInterface } from '@qlover/corekit-bridge';
 
@@ -12,4 +13,22 @@ export class AppConfig implements EnvConfigInterface {
   readonly appVersion: string = version;
 
   readonly userTokenKey: string = '_user_token';
+
+  readonly testLoginEmail: string = process.env.NEXT_PUBLIC_LOGIN_USER!;
+  readonly testLoginPassword: string = process.env.NEXT_PUBLIC_LOGIN_PASSWORD!;
+
+  readonly supabaseUrl: string = process.env.SUPABASE_URL!;
+  readonly supabaseAnonKey: string = process.env.SUPABASE_ANON_KEY!;
+
+  readonly stringEncryptorKey: string =
+    process.env.NEXT_PUBLIC_STRING_ENCRYPT_KEY!;
+
+  readonly jwtSecret: string = process.env.JWT_SECRET!;
+  /**
+   * login user token expires in
+   *
+   * @example '30 days'
+   * @example '1 year'
+   */
+  readonly jwtExpiresIn: StringValue = '30 days';
 }

package/dist/templates/next-app/src/base/cases/DialogErrorPlugin.ts

@@ -0,0 +1,35 @@
+import {
+  ExecutorError,
+  type ExecutorContext,
+  type ExecutorPlugin
+} from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { I } from '@config/IOCIdentifier';
+import type { DialogHandlerOptions } from './DialogHandler';
+import type { I18nServiceInterface } from '../port/I18nServiceInterface';
+import type { UIDialogInterface } from '@qlover/corekit-bridge';
+
+@injectable()
+export class DialogErrorPlugin implements ExecutorPlugin {
+  readonly pluginName = 'DialogErrorPlugin';
+
+  constructor(
+    @inject(I.DialogHandler)
+    protected dialogHandler: UIDialogInterface<DialogHandlerOptions>,
+    @inject(I.I18nServiceInterface) protected i18nService: I18nServiceInterface
+  ) {}
+
+  onError(context: ExecutorContext<unknown>): void | Promise<void> {
+    const { error, hooksRuntimes } = context;
+    const runtimesError = hooksRuntimes.returnValue;
+
+    // 优先使用 runtime 的错误, 他可能在运行时被修改
+    // 比如 RequestError 会被 AppApiPlugin 修改为 ExecutorError
+    const handleError = runtimesError || error;
+
+    if (handleError instanceof ExecutorError) {
+      const message = this.i18nService.t(handleError.id);
+      this.dialogHandler.error(message);
+    }
+  }
+}