@idevconn/create-icore 0.6.3 → 0.7.1

package/templates/.yarnrc.yml

@@ -9,4 +9,4 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 0
 
-yarnPath: .yarn/releases/yarn-4.15.0.cjs
+yarnPath: .yarn/releases/yarn-4.16.0.cjs

package/templates/apps/api/src/app/storage/storage.controller.ts

@@ -4,10 +4,12 @@ import {
   Controller,
   Delete,
   Get,
+  NotFoundException,
   PayloadTooLargeException,
   Post,
   Query,
   Req,
+  StreamableFile,
   UploadedFile,
   UseInterceptors,
 } from '@nestjs/common';
@@ -19,6 +21,7 @@ import {
   ApiConsumes,
   ApiOperation,
   ApiQuery,
+  ApiResponse,
   ApiTags,
 } from '@nestjs/swagger';
 import { UploadClientService } from '@icore/upload-client';
@@ -105,4 +108,29 @@ export class StorageController {
   list(@Query('prefix') prefix: string | undefined, @Req() req: AuthedReq): Promise<StorageRef[]> {
     return this.uploadClient.list(req.user!.uid, prefix);
   }
+
+  @Get('file')
+  @ApiOperation({ summary: 'Download a file proxied through the gateway (GridFS providers)' })
+  @ApiQuery({ name: 'bucket', type: String })
+  @ApiQuery({ name: 'path', type: String })
+  @ApiResponse({
+    status: 200,
+    description: 'Raw file bytes',
+    content: { 'application/octet-stream': {} },
+  })
+  async downloadFile(
+    @Query('bucket') bucket: string,
+    @Query('path') path: string,
+    @Req() req: AuthedReq,
+  ): Promise<StreamableFile> {
+    const ref: StorageRef = { bucket, path };
+    assertOwnership(ref, req.user!.uid);
+    const buffer = await this.uploadClient.downloadBuffer(req.user!.uid, ref);
+    if (!buffer) throw new NotFoundException('storage_provider_does_not_support_direct_download');
+    const filename = path.split('/').pop() ?? 'file';
+    return new StreamableFile(buffer, {
+      type: 'application/octet-stream',
+      disposition: `inline; filename="${filename}"`,
+    });
+  }
 }

package/templates/apps/microservices/auth/src/app/app.module.ts

@@ -3,8 +3,11 @@ import { Module, Logger } from '@nestjs/common';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { createClient } from '@supabase/supabase-js';
 import { SupabaseAuthStrategy } from '@icore/auth-supabase';
+import { MongoDbAuthStrategy } from '@icore/auth-mongodb';
 import { FirebaseAuthStrategy, HttpIdentityToolkitClient } from '@icore/auth-firebase';
 import { getFirebaseAdmin, FIREBASE_ADMIN_REQUIRED_ENV } from '@icore/firebase-admin';
+import { MongooseModule, getConnectionToken } from '@nestjs/mongoose';
+import { Connection } from 'mongoose';
 import { FakeAuthStrategy, missingEnv, formatEnvBanner } from '@icore/shared';
 import type { AuthStrategy } from '@icore/shared';
 import { AuthController } from './auth.controller';
@@ -15,6 +18,7 @@ const ENV_PATH = 'apps/microservices/auth/.env';
 const REQUIRED_ENV: Record<string, string[]> = {
   supabase: ['SUPABASE_URL', 'SUPABASE_SERVICE_ROLE_KEY'],
   firebase: [...FIREBASE_ADMIN_REQUIRED_ENV, 'FIREBASE_WEB_API_KEY'],
+  mongodb: ['MONGODB_URI', 'JWT_SECRET'],
 };
 
 function requireEnv(cfg: ConfigService, key: string): string {
@@ -39,6 +43,13 @@ function makeFirebaseAuth(cfg: ConfigService): AuthStrategy {
   });
 }
 
+function makeMongoDbAuth(connection: Connection, cfg: ConfigService): AuthStrategy {
+  return new MongoDbAuthStrategy({
+    connection,
+    jwtSecret: requireEnv(cfg, 'JWT_SECRET'),
+  });
+}
+
 @Module({
   imports: [
     ConfigModule.forRoot({
@@ -48,12 +59,18 @@ function makeFirebaseAuth(cfg: ConfigService): AuthStrategy {
         join(process.cwd(), '.env'),
       ],
     }),
+    MongooseModule.forRootAsync({
+      useFactory: (cfg: ConfigService) => ({
+        uri: cfg.get<string>('MONGODB_URI'),
+      }),
+      inject: [ConfigService],
+    }),
   ],
   controllers: [AuthController],
   providers: [
     {
       provide: 'AuthStrategy',
-      useFactory: (cfg: ConfigService): AuthStrategy => {
+      useFactory: (cfg: ConfigService, connection: Connection): AuthStrategy => {
         const logger = new Logger('AuthStrategy');
         const provider = cfg.get<string>('AUTH_PROVIDER')?.trim();
         const keys = provider ? REQUIRED_ENV[provider] : undefined;
@@ -78,13 +95,14 @@ function makeFirebaseAuth(cfg: ConfigService): AuthStrategy {
 
         try {
           if (provider === 'supabase') return makeSupabaseAuth(cfg);
+          if (provider === 'mongodb') return makeMongoDbAuth(connection, cfg);
           return makeFirebaseAuth(cfg);
         } catch (err) {
           // Vars present but invalid (e.g. placeholder URL the SDK rejects).
           return fallback(err instanceof Error ? err.message : String(err));
         }
       },
-      inject: [ConfigService],
+      inject: [ConfigService, getConnectionToken()],
     },
   ],
 })

package/templates/apps/microservices/notes/src/app/app.module.ts

@@ -3,8 +3,11 @@ import { Module, Logger } from '@nestjs/common';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { createClient } from '@supabase/supabase-js';
 import { SupabaseDBStrategy } from '@icore/db-supabase';
+import { MongoDbDBStrategy } from '@icore/db-mongodb';
 import { FirestoreDBStrategy } from '@icore/db-firestore';
 import { getFirebaseAdmin, FIREBASE_ADMIN_REQUIRED_ENV } from '@icore/firebase-admin';
+import { MongooseModule, getConnectionToken } from '@nestjs/mongoose';
+import { Connection } from 'mongoose';
 import { FakeDBStrategy, missingEnv, formatEnvBanner } from '@icore/shared';
 import type { DBStrategy } from '@icore/shared';
 import { NotesController } from './notes.controller';
@@ -16,6 +19,7 @@ const REQUIRED_ENV: Record<string, string[]> = {
   supabase: ['SUPABASE_URL', 'SUPABASE_SERVICE_ROLE_KEY'],
   firestore: [...FIREBASE_ADMIN_REQUIRED_ENV],
   firebase: [...FIREBASE_ADMIN_REQUIRED_ENV],
+  mongodb: ['MONGODB_URI'],
 };
 
 function requireEnv(cfg: ConfigService, key: string): string {
@@ -38,6 +42,10 @@ function makeFirestoreDB(cfg: ConfigService): DBStrategy {
   });
 }
 
+function makeMongoDb(connection: Connection): DBStrategy {
+  return new MongoDbDBStrategy({ connection });
+}
+
 @Module({
   imports: [
     ConfigModule.forRoot({
@@ -47,12 +55,18 @@ function makeFirestoreDB(cfg: ConfigService): DBStrategy {
         join(process.cwd(), '.env'),
       ],
     }),
+    MongooseModule.forRootAsync({
+      useFactory: (cfg: ConfigService) => ({
+        uri: cfg.get<string>('MONGODB_URI'),
+      }),
+      inject: [ConfigService],
+    }),
   ],
   controllers: [NotesController],
   providers: [
     {
       provide: 'DBStrategy',
-      useFactory: (cfg: ConfigService): DBStrategy => {
+      useFactory: (cfg: ConfigService, connection: Connection): DBStrategy => {
         const logger = new Logger('DBStrategy');
         const provider = cfg.get<string>('DB_PROVIDER')?.trim();
         const keys = provider ? REQUIRED_ENV[provider] : undefined;
@@ -75,12 +89,13 @@ function makeFirestoreDB(cfg: ConfigService): DBStrategy {
 
         try {
           if (provider === 'supabase') return makeSupabaseDB(cfg);
+          if (provider === 'mongodb') return makeMongoDb(connection);
           return makeFirestoreDB(cfg);
         } catch (err) {
           return fallback(err instanceof Error ? err.message : String(err));
         }
       },
-      inject: [ConfigService],
+      inject: [ConfigService, getConnectionToken()],
     },
   ],
 })

package/templates/apps/microservices/upload/src/app/app.module.ts

@@ -4,9 +4,12 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
 import { createClient } from '@supabase/supabase-js';
 import { v2 as cloudinary } from 'cloudinary';
 import { SupabaseStorageStrategy } from '@icore/storage-supabase';
+import { MongoDbStorageStrategy } from '@icore/storage-mongodb';
 import { FirebaseStorageStrategy } from '@icore/storage-firebase';
 import { CloudinaryStorageStrategy, type CloudinaryApiLike } from '@icore/storage-cloudinary';
 import { getFirebaseAdmin, FIREBASE_ADMIN_REQUIRED_ENV } from '@icore/firebase-admin';
+import { MongooseModule, getConnectionToken } from '@nestjs/mongoose';
+import { Connection } from 'mongoose';
 import { FakeStorageStrategy, missingEnv, formatEnvBanner } from '@icore/shared';
 import type { StorageStrategy } from '@icore/shared';
 import { StorageController } from './storage.controller';
@@ -17,6 +20,7 @@ const REQUIRED_ENV: Record<string, string[]> = {
   supabase: ['SUPABASE_URL', 'SUPABASE_SERVICE_ROLE_KEY', 'SUPABASE_STORAGE_BUCKET'],
   firebase: [...FIREBASE_ADMIN_REQUIRED_ENV, 'FIREBASE_STORAGE_BUCKET'],
   cloudinary: ['CLOUDINARY_CLOUD_NAME', 'CLOUDINARY_API_KEY', 'CLOUDINARY_API_SECRET'],
+  mongodb: ['MONGODB_URI'],
 };
 
 function requireEnv(cfg: ConfigService, key: string): string {
@@ -91,6 +95,10 @@ function makeCloudinaryStorage(cfg: ConfigService): StorageStrategy {
   });
 }
 
+function makeMongoDbStorage(connection: Connection): StorageStrategy {
+  return new MongoDbStorageStrategy({ connection });
+}
+
 @Module({
   imports: [
     ConfigModule.forRoot({
@@ -100,12 +108,18 @@ function makeCloudinaryStorage(cfg: ConfigService): StorageStrategy {
         join(process.cwd(), '.env'),
       ],
     }),
+    MongooseModule.forRootAsync({
+      useFactory: (cfg: ConfigService) => ({
+        uri: cfg.get<string>('MONGODB_URI'),
+      }),
+      inject: [ConfigService],
+    }),
   ],
   controllers: [StorageController],
   providers: [
     {
       provide: 'StorageStrategy',
-      useFactory: (cfg: ConfigService): StorageStrategy => {
+      useFactory: (cfg: ConfigService, connection: Connection): StorageStrategy => {
         const logger = new Logger('StorageStrategy');
         const provider = cfg.get<string>('STORAGE_PROVIDER')?.trim();
         const keys = provider ? REQUIRED_ENV[provider] : undefined;
@@ -129,12 +143,13 @@ function makeCloudinaryStorage(cfg: ConfigService): StorageStrategy {
         try {
           if (provider === 'supabase') return makeSupabaseStorage(cfg);
           if (provider === 'firebase') return makeFirebaseStorage(cfg);
+          if (provider === 'mongodb') return makeMongoDbStorage(connection);
           return makeCloudinaryStorage(cfg);
         } catch (err) {
           return fallback(err instanceof Error ? err.message : String(err));
         }
       },
-      inject: [ConfigService],
+      inject: [ConfigService, getConnectionToken()],
     },
   ],
 })

package/templates/apps/microservices/upload/src/app/storage.controller.ts

@@ -48,4 +48,11 @@ export class StorageController {
   list(@Payload() payload: ListPayload): Promise<StorageRef[]> {
     return this.strategy.list(payload.userId, payload.prefix);
   }
+
+  @MessagePattern('storage.downloadBuffer')
+  async downloadBuffer(@Payload() payload: RefPayload): Promise<string | null> {
+    if (!this.strategy.downloadBuffer) return null;
+    const buf = await this.strategy.downloadBuffer(payload.userId, payload.ref);
+    return buf.toString('base64');
+  }
 }

package/templates/apps/templates/client-antd/src/components/auth/AuthBrandPanel.tsx

@@ -0,0 +1,59 @@
+import { Space, Typography } from 'antd';
+import { CheckCircleOutlined } from '@ant-design/icons';
+
+const FEATURES = [
+  'Strategy-pattern auth & storage',
+  'Multi-provider: password, magic link, OAuth',
+  'CASL role-based access control',
+];
+
+export function AuthBrandPanel() {
+  return (
+    <div
+      style={{
+        flex: 1,
+        background: 'linear-gradient(135deg, #0d1117 0%, #0f1e0f 100%)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        padding: '48px 56px',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: '20%',
+          left: '10%',
+          width: 320,
+          height: 320,
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(34,197,94,0.15) 0%, transparent 70%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <Space direction="vertical" size={32} style={{ position: 'relative', zIndex: 1 }}>
+        <Space direction="vertical" size={4}>
+          <Typography.Title level={2} style={{ color: '#22c55e', margin: 0, fontSize: 28 }}>
+            iCore
+          </Typography.Title>
+          <Typography.Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>
+            Enterprise scaffold for NestJS + React
+          </Typography.Text>
+        </Space>
+
+        <Space direction="vertical" size={8}>
+          {FEATURES.map((f) => (
+            <Space key={f} size={8} align="center">
+              <CheckCircleOutlined style={{ color: '#22c55e', fontSize: 14 }} />
+              <Typography.Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14 }}>
+                {f}
+              </Typography.Text>
+            </Space>
+          ))}
+        </Space>
+      </Space>
+    </div>
+  );
+}

package/templates/apps/templates/client-antd/src/components/auth/CheckEmailScreen.tsx

@@ -0,0 +1,28 @@
+import { Button, Result, Space, Typography } from 'antd';
+import { MailOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  email: string;
+  onBack: () => void;
+}
+
+export function CheckEmailScreen({ email, onBack }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Space direction="vertical" size={0} style={{ width: '100%', textAlign: 'center' }}>
+      <Result
+        icon={<MailOutlined style={{ fontSize: 48, color: '#22c55e' }} />}
+        title={t('auth.checkEmail')}
+        subTitle={
+          <Typography.Text type="secondary">
+            {t('auth.checkEmailDescription', { email })}
+          </Typography.Text>
+        }
+      />
+      <Button block onClick={onBack}>
+        {t('auth.backToLogin')}
+      </Button>
+    </Space>
+  );
+}

package/templates/apps/templates/client-antd/src/components/auth/LoginForm.tsx

@@ -0,0 +1,116 @@
+import { Button, Divider, Form, Input, Space, Typography } from 'antd';
+import { GithubOutlined, GoogleOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from '@tanstack/react-router';
+import { useAuthStore, useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+interface FormValues {
+  email: string;
+  password: string;
+}
+
+interface Props {
+  onSwitchRegister: () => void;
+  onSwitchMagicLink: () => void;
+}
+
+export function LoginForm({ onSwitchRegister, onSwitchMagicLink }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const notify = useNotify();
+  const setAuth = useAuthStore((s) => s.setAuth);
+  const [form] = Form.useForm<FormValues>();
+
+  async function handleFinish(values: FormValues) {
+    try {
+      const session = await api<{
+        accessToken: string;
+        refreshToken: string;
+        user: { id: string; email: string; role?: string };
+      }>('/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: values.email, password: values.password }),
+      });
+      setAuth(session);
+      notify.success(t('auth.login'));
+      await navigate({ to: '/dashboard' });
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : t('error.unknown'));
+    }
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Space direction="vertical" size={4}>
+        <Typography.Title level={3} style={{ margin: 0 }}>
+          {t('auth.loginTitle')}
+        </Typography.Title>
+        <Typography.Text type="secondary">{t('auth.loginSubtitle')}</Typography.Text>
+      </Space>
+
+      <Space direction="vertical" size={8} style={{ width: '100%' }}>
+        <Button
+          block
+          icon={<GoogleOutlined />}
+          onClick={() => window.location.assign('/api/auth/oauth/google')}
+        >
+          {t('auth.continueWithGoogle')}
+        </Button>
+        <Button
+          block
+          icon={<GithubOutlined />}
+          onClick={() => window.location.assign('/api/auth/oauth/github')}
+        >
+          {t('auth.continueWithGithub')}
+        </Button>
+      </Space>
+
+      <Divider plain>
+        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+          {t('auth.orContinueWith')}
+        </Typography.Text>
+      </Divider>
+
+      <Form form={form} layout="vertical" onFinish={handleFinish} autoComplete="on">
+        <Form.Item
+          name="email"
+          label={t('auth.email')}
+          rules={[
+            { required: true, message: `${t('auth.email')} is required` },
+            { type: 'email', message: 'Please enter a valid email' },
+          ]}
+        >
+          <Input autoComplete="email" size="large" />
+        </Form.Item>
+
+        <Form.Item
+          name="password"
+          label={t('auth.password')}
+          rules={[{ required: true, message: `${t('auth.password')} is required` }]}
+        >
+          <Input.Password autoComplete="current-password" size="large" />
+        </Form.Item>
+
+        <Form.Item style={{ marginBottom: 8 }}>
+          <Button type="primary" htmlType="submit" block size="large">
+            {t('auth.login')}
+          </Button>
+        </Form.Item>
+      </Form>
+
+      <Space direction="vertical" size={4} style={{ width: '100%', textAlign: 'center' }}>
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          {t('auth.switchToRegister')}{' '}
+          <Typography.Link onClick={onSwitchRegister}>
+            {t('auth.switchToRegisterLink')}
+          </Typography.Link>
+        </Typography.Text>
+        <Typography.Link onClick={onSwitchMagicLink} style={{ fontSize: 13 }}>
+          {t('auth.withMagicLink')}
+        </Typography.Link>
+      </Space>
+    </Space>
+  );
+}

package/templates/apps/templates/client-antd/src/components/auth/MagicLinkForm.tsx

@@ -0,0 +1,95 @@
+import { Button, Form, Input, Result, Space, Typography } from 'antd';
+import { MailOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+interface FormValues {
+  email: string;
+}
+
+interface Props {
+  onSwitchLogin: () => void;
+}
+
+export function MagicLinkForm({ onSwitchLogin }: Props) {
+  const { t } = useTranslation();
+  const notify = useNotify();
+  const [form] = Form.useForm<FormValues>();
+  const [sentEmail, setSentEmail] = useState('');
+
+  async function handleFinish(values: FormValues) {
+    try {
+      await api('/auth/magic-link', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: values.email }),
+      });
+      setSentEmail(values.email);
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : t('error.unknown'));
+    }
+  }
+
+  if (sentEmail) {
+    return (
+      <Space direction="vertical" size={0} style={{ width: '100%', textAlign: 'center' }}>
+        <Result
+          icon={<MailOutlined style={{ fontSize: 48, color: '#22c55e' }} />}
+          title={t('auth.magicLinkSent')}
+          subTitle={
+            <Typography.Text type="secondary">
+              {t('auth.magicLinkSentDescription', { email: sentEmail })}
+            </Typography.Text>
+          }
+        />
+        <Button
+          block
+          onClick={() => {
+            setSentEmail('');
+            form.resetFields();
+          }}
+        >
+          {t('auth.magicLinkUseDifferentEmail')}
+        </Button>
+      </Space>
+    );
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Space direction="vertical" size={4}>
+        <Typography.Title level={3} style={{ margin: 0 }}>
+          {t('auth.withMagicLink')}
+        </Typography.Title>
+        <Typography.Text type="secondary">{t('auth.loginSubtitle')}</Typography.Text>
+      </Space>
+
+      <Form form={form} layout="vertical" onFinish={handleFinish} autoComplete="on">
+        <Form.Item
+          name="email"
+          label={t('auth.email')}
+          rules={[
+            { required: true, message: `${t('auth.email')} is required` },
+            { type: 'email', message: 'Please enter a valid email' },
+          ]}
+        >
+          <Input autoComplete="email" size="large" />
+        </Form.Item>
+
+        <Form.Item style={{ marginBottom: 8 }}>
+          <Button type="primary" htmlType="submit" block size="large">
+            {t('auth.sendMagicLink')}
+          </Button>
+        </Form.Item>
+      </Form>
+
+      <div style={{ textAlign: 'center' }}>
+        <Typography.Link onClick={onSwitchLogin} style={{ fontSize: 13 }}>
+          {t('auth.backToLogin')}
+        </Typography.Link>
+      </div>
+    </Space>
+  );
+}

package/templates/apps/templates/client-antd/src/components/auth/RegisterForm.tsx

@@ -0,0 +1,98 @@
+import { Button, Form, Input, Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+interface FormValues {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+interface Props {
+  onSuccess: (email: string) => void;
+  onSwitchLogin: () => void;
+}
+
+export function RegisterForm({ onSuccess, onSwitchLogin }: Props) {
+  const { t } = useTranslation();
+  const notify = useNotify();
+  const [form] = Form.useForm<FormValues>();
+
+  async function handleFinish(values: FormValues) {
+    try {
+      await api('/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: values.email, password: values.password }),
+      });
+      onSuccess(values.email);
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : t('error.unknown'));
+    }
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Space direction="vertical" size={4}>
+        <Typography.Title level={3} style={{ margin: 0 }}>
+          {t('auth.registerTitle')}
+        </Typography.Title>
+        <Typography.Text type="secondary">{t('auth.registerSubtitle')}</Typography.Text>
+      </Space>
+
+      <Form form={form} layout="vertical" onFinish={handleFinish} autoComplete="on">
+        <Form.Item
+          name="email"
+          label={t('auth.email')}
+          rules={[
+            { required: true, message: `${t('auth.email')} is required` },
+            { type: 'email', message: 'Please enter a valid email' },
+          ]}
+        >
+          <Input autoComplete="email" size="large" />
+        </Form.Item>
+
+        <Form.Item
+          name="password"
+          label={t('auth.password')}
+          rules={[{ required: true, message: `${t('auth.password')} is required` }]}
+        >
+          <Input.Password autoComplete="new-password" size="large" />
+        </Form.Item>
+
+        <Form.Item
+          name="confirmPassword"
+          label={t('auth.confirmPassword')}
+          dependencies={['password']}
+          rules={[
+            { required: true, message: `${t('auth.confirmPassword')} is required` },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(new Error(t('auth.passwordMismatch')));
+              },
+            }),
+          ]}
+        >
+          <Input.Password autoComplete="new-password" size="large" />
+        </Form.Item>
+
+        <Form.Item style={{ marginBottom: 8 }}>
+          <Button type="primary" htmlType="submit" block size="large">
+            {t('auth.register')}
+          </Button>
+        </Form.Item>
+      </Form>
+
+      <div style={{ textAlign: 'center' }}>
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          {t('auth.switchToLogin')}{' '}
+          <Typography.Link onClick={onSwitchLogin}>{t('auth.switchToLoginLink')}</Typography.Link>
+        </Typography.Text>
+      </div>
+    </Space>
+  );
+}

package/templates/apps/templates/client-antd/src/globals.less

@@ -9,3 +9,9 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+@media (min-width: 1024px) {
+  .auth-brand-lg {
+    display: flex !important;
+  }
+}