@idevconn/create-icore 0.6.2 → 0.7.0

package/templates/apps/templates/client-antd/src/main.tsx

@@ -38,7 +38,7 @@ function Root() {
   const mode = useThemeStore((s) => s.mode);
   const algorithm = mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
   return (
-    <ConfigProvider theme={{ algorithm }}>
+    <ConfigProvider theme={{ algorithm, token: { colorPrimary: '#22c55e', colorLink: '#22c55e' } }}>
       <AntApp>
         <QueryClientProvider client={queryClient}>
           <AbilityProvider>

package/templates/apps/templates/client-antd/src/routes/login.tsx

@@ -1,193 +1,57 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { Button, Card, Form, Input, Result, Segmented, Space } from 'antd';
-import { GithubOutlined, GoogleOutlined } from '@ant-design/icons';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAuthStore, useNotify } from '@icore/template-shared';
-import { api } from '../main';
+import { createFileRoute } from '@tanstack/react-router';
+import { AuthBrandPanel } from '../components/auth/AuthBrandPanel';
+import { CheckEmailScreen } from '../components/auth/CheckEmailScreen';
+import { LoginForm } from '../components/auth/LoginForm';
+import { MagicLinkForm } from '../components/auth/MagicLinkForm';
+import { RegisterForm } from '../components/auth/RegisterForm';
 
-type Mode = 'password' | 'magicLinkRequest' | 'magicLinkSent';
-
-interface PasswordFormValues {
-  email: string;
-  password: string;
-}
-
-interface MagicLinkFormValues {
-  email: string;
-}
+type Mode = 'login' | 'register' | 'magicLink' | 'checkEmail';
 
 function LoginPage() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const notify = useNotify();
-  const setAuth = useAuthStore((s) => s.setAuth);
+  const [mode, setMode] = useState<Mode>('login');
+  const [checkEmail, setCheckEmail] = useState('');
 
-  const [mode, setMode] = useState<Mode>('password');
-  const [sentEmail, setSentEmail] = useState('');
-  const [passwordForm] = Form.useForm<PasswordFormValues>();
-  const [magicLinkForm] = Form.useForm<MagicLinkFormValues>();
-
-  async function handlePasswordFinish(values: PasswordFormValues) {
-    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'));
-    }
-  }
-
-  async function handleMagicLinkFinish(values: MagicLinkFormValues) {
-    try {
-      await api('/auth/magic-link', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: values.email }),
-      });
-      setSentEmail(values.email);
-      setMode('magicLinkSent');
-    } catch (err) {
-      notify.error(err instanceof Error ? err.message : t('error.unknown'));
-    }
+  function handleRegisterSuccess(email: string) {
+    setCheckEmail(email);
+    setMode('checkEmail');
   }
 
   return (
-    <main
-      style={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 24,
-      }}
-    >
-      <Card style={{ width: '100%', maxWidth: 380 }}>
-        <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 4 }}>{t('auth.login')}</h1>
-        <p style={{ marginBottom: 16, color: 'rgba(0,0,0,0.45)' }}>
-          {t('auth.email')} &amp; {t('auth.password')}
-        </p>
-
-        {mode !== 'magicLinkSent' && (
-          <>
-            <Segmented
-              block
-              value={mode}
-              onChange={(v) => setMode(v as Mode)}
-              options={[
-                { label: t('auth.withPassword'), value: 'password' },
-                { label: t('auth.withMagicLink'), value: 'magicLinkRequest' },
-              ]}
-              style={{ marginBottom: 16 }}
+    <div style={{ minHeight: '100vh', display: 'flex', background: '#020617' }}>
+      <div style={{ flex: 1, display: 'none' }} className="auth-brand-lg">
+        <AuthBrandPanel />
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px 24px',
+        }}
+      >
+        <div style={{ width: '100%', maxWidth: 400 }}>
+          {mode === 'login' && (
+            <LoginForm
+              onSwitchRegister={() => setMode('register')}
+              onSwitchMagicLink={() => setMode('magicLink')}
             />
-            <Space direction="vertical" style={{ width: '100%', marginBottom: 16 }}>
-              <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>
-          </>
-        )}
-
-        {mode === 'password' && (
-          <Form
-            form={passwordForm}
-            layout="vertical"
-            onFinish={handlePasswordFinish}
-            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 address' },
-              ]}
-            >
-              <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: 0 }}>
-              <Button type="primary" htmlType="submit" block size="large">
-                {t('auth.login')}
-              </Button>
-            </Form.Item>
-          </Form>
-        )}
-
-        {mode === 'magicLinkRequest' && (
-          <Form
-            form={magicLinkForm}
-            layout="vertical"
-            onFinish={handleMagicLinkFinish}
-            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 address' },
-              ]}
-            >
-              <Input autoComplete="email" size="large" />
-            </Form.Item>
-
-            <Form.Item style={{ marginBottom: 0 }}>
-              <Button type="primary" htmlType="submit" block size="large">
-                {t('auth.sendMagicLink')}
-              </Button>
-            </Form.Item>
-          </Form>
-        )}
-
-        {mode === 'magicLinkSent' && (
-          <Result
-            status="success"
-            title={t('auth.magicLinkSent')}
-            subTitle={t('auth.magicLinkSentDescription', { email: sentEmail })}
-            extra={
-              <Button
-                onClick={() => {
-                  setSentEmail('');
-                  magicLinkForm.resetFields();
-                  setMode('magicLinkRequest');
-                }}
-              >
-                {t('auth.magicLinkUseDifferentEmail')}
-              </Button>
-            }
-          />
-        )}
-      </Card>
-    </main>
+          )}
+          {mode === 'register' && (
+            <RegisterForm
+              onSuccess={handleRegisterSuccess}
+              onSwitchLogin={() => setMode('login')}
+            />
+          )}
+          {mode === 'magicLink' && <MagicLinkForm onSwitchLogin={() => setMode('login')} />}
+          {mode === 'checkEmail' && (
+            <CheckEmailScreen email={checkEmail} onBack={() => setMode('login')} />
+          )}
+        </div>
+      </div>
+    </div>
   );
 }
 

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

@@ -0,0 +1,59 @@
+import { Box, Stack, Typography } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+
+const FEATURES = [
+  'Strategy-pattern auth & storage',
+  'Multi-provider: password, magic link, OAuth',
+  'CASL role-based access control',
+];
+
+export function AuthBrandPanel() {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        background: 'linear-gradient(135deg, #0d1117 0%, #0f1e0f 100%)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        p: '48px 56px',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          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',
+        }}
+      />
+      <Stack spacing={4} sx={{ position: 'relative', zIndex: 1 }}>
+        <Stack spacing={0.5}>
+          <Typography variant="h4" fontWeight={700} sx={{ color: '#22c55e' }}>
+            iCore
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.5)' }}>
+            Enterprise scaffold for NestJS + React
+          </Typography>
+        </Stack>
+
+        <Stack spacing={1}>
+          {FEATURES.map((f) => (
+            <Stack key={f} direction="row" spacing={1} alignItems="center">
+              <CheckCircleOutlineIcon sx={{ color: '#22c55e', fontSize: 16 }} />
+              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.75)' }}>
+                {f}
+              </Typography>
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { Button, Stack, Typography } from '@mui/material';
+import MarkEmailReadOutlinedIcon from '@mui/icons-material/MarkEmailReadOutlined';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  email: string;
+  onBack: () => void;
+}
+
+export function CheckEmailScreen({ email, onBack }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Stack spacing={3} alignItems="center" textAlign="center">
+      <MarkEmailReadOutlinedIcon sx={{ fontSize: 56, color: 'primary.main' }} />
+      <Stack spacing={1}>
+        <Typography variant="h5" fontWeight={600}>
+          {t('auth.checkEmail')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('auth.checkEmailDescription', { email })}
+        </Typography>
+      </Stack>
+      <Button variant="outlined" fullWidth onClick={onBack}>
+        {t('auth.backToLogin')}
+      </Button>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { Box, Button, Divider, Stack, TextField, Typography } from '@mui/material';
+import GoogleIcon from '@mui/icons-material/Google';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from '@tanstack/react-router';
+import { useAuthStore, useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+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 [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSubmitting(true);
+    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, password }),
+      });
+      setAuth(session);
+      notify.success(t('auth.login'));
+      await navigate({ to: '/dashboard' });
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : t('error.unknown'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={0.5}>
+        <Typography variant="h5" fontWeight={600}>
+          {t('auth.loginTitle')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('auth.loginSubtitle')}
+        </Typography>
+      </Stack>
+
+      <Stack spacing={1}>
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<GoogleIcon />}
+          onClick={() => window.location.assign('/api/auth/oauth/google')}
+        >
+          {t('auth.continueWithGoogle')}
+        </Button>
+        <Button
+          variant="outlined"
+          fullWidth
+          startIcon={<GitHubIcon />}
+          onClick={() => window.location.assign('/api/auth/oauth/github')}
+        >
+          {t('auth.continueWithGithub')}
+        </Button>
+      </Stack>
+
+      <Divider>
+        <Typography variant="caption" color="text.secondary">
+          {t('auth.orContinueWith')}
+        </Typography>
+      </Divider>
+
+      <Box component="form" onSubmit={handleSubmit} autoComplete="on">
+        <TextField
+          label={t('auth.email')}
+          type="email"
+          autoComplete="email"
+          required
+          fullWidth
+          margin="normal"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <TextField
+          label={t('auth.password')}
+          type="password"
+          autoComplete="current-password"
+          required
+          fullWidth
+          margin="normal"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button type="submit" variant="contained" fullWidth disabled={submitting} sx={{ mt: 2 }}>
+          {t('auth.login')}
+        </Button>
+      </Box>
+
+      <Stack spacing={0.5} alignItems="center">
+        <Typography variant="body2" color="text.secondary">
+          {t('auth.switchToRegister')}{' '}
+          <Box
+            component="span"
+            onClick={onSwitchRegister}
+            sx={{
+              color: 'primary.main',
+              cursor: 'pointer',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+          >
+            {t('auth.switchToRegisterLink')}
+          </Box>
+        </Typography>
+        <Box
+          component="span"
+          onClick={onSwitchMagicLink}
+          sx={{
+            fontSize: 13,
+            color: 'primary.main',
+            cursor: 'pointer',
+            '&:hover': { textDecoration: 'underline' },
+          }}
+        >
+          {t('auth.withMagicLink')}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { Box, Button, Stack, TextField, Typography } from '@mui/material';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+interface Props {
+  onSwitchLogin: () => void;
+}
+
+export function MagicLinkForm({ onSwitchLogin }: Props) {
+  const { t } = useTranslation();
+  const notify = useNotify();
+
+  const [email, setEmail] = useState('');
+  const [sentEmail, setSentEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      await api('/auth/magic-link', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      setSentEmail(email);
+    } catch (err) {
+      notify.error(err instanceof Error ? err.message : t('error.unknown'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (sentEmail) {
+    return (
+      <Stack spacing={3} alignItems="center" textAlign="center">
+        <MailOutlineIcon sx={{ fontSize: 56, color: 'primary.main' }} />
+        <Stack spacing={1}>
+          <Typography variant="h5" fontWeight={600}>
+            {t('auth.magicLinkSent')}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {t('auth.magicLinkSentDescription', { email: sentEmail })}
+          </Typography>
+        </Stack>
+        <Button
+          variant="outlined"
+          fullWidth
+          onClick={() => {
+            setEmail('');
+            setSentEmail('');
+          }}
+        >
+          {t('auth.magicLinkUseDifferentEmail')}
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={0.5}>
+        <Typography variant="h5" fontWeight={600}>
+          {t('auth.withMagicLink')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('auth.loginSubtitle')}
+        </Typography>
+      </Stack>
+
+      <Box component="form" onSubmit={handleSubmit} autoComplete="on">
+        <TextField
+          label={t('auth.email')}
+          type="email"
+          autoComplete="email"
+          required
+          fullWidth
+          margin="normal"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <Button type="submit" variant="contained" fullWidth disabled={submitting} sx={{ mt: 2 }}>
+          {t('auth.sendMagicLink')}
+        </Button>
+      </Box>
+
+      <Typography variant="body2" color="text.secondary" textAlign="center">
+        <Box
+          component="span"
+          onClick={onSwitchLogin}
+          sx={{
+            color: 'primary.main',
+            cursor: 'pointer',
+            '&:hover': { textDecoration: 'underline' },
+          }}
+        >
+          {t('auth.backToLogin')}
+        </Box>
+      </Typography>
+    </Stack>
+  );
+}