@idevconn/create-icore 0.6.2 → 0.7.0

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

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { Box, Button, Stack, TextField, Typography } from '@mui/material';
+import { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNotify } from '@icore/template-shared';
+import { api } from '@/main';
+
+interface Props {
+  onSuccess: (email: string) => void;
+  onSwitchLogin: () => void;
+}
+
+export function RegisterForm({ onSuccess, onSwitchLogin }: Props) {
+  const { t } = useTranslation();
+  const notify = useNotify();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [mismatch, setMismatch] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setMismatch(true);
+      return;
+    }
+    setMismatch(false);
+    setSubmitting(true);
+    try {
+      await api('/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      onSuccess(email);
+    } 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.registerTitle')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('auth.registerSubtitle')}
+        </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)}
+        />
+        <TextField
+          label={t('auth.password')}
+          type="password"
+          autoComplete="new-password"
+          required
+          fullWidth
+          margin="normal"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <TextField
+          label={t('auth.confirmPassword')}
+          type="password"
+          autoComplete="new-password"
+          required
+          fullWidth
+          margin="normal"
+          value={confirmPassword}
+          onChange={(e) => {
+            setConfirmPassword(e.target.value);
+            setMismatch(false);
+          }}
+          error={mismatch}
+          helperText={mismatch ? t('auth.passwordMismatch') : undefined}
+        />
+        <Button type="submit" variant="contained" fullWidth disabled={submitting} sx={{ mt: 2 }}>
+          {t('auth.register')}
+        </Button>
+      </Box>
+
+      <Typography variant="body2" color="text.secondary" textAlign="center">
+        {t('auth.switchToLogin')}{' '}
+        <Box
+          component="span"
+          onClick={onSwitchLogin}
+          sx={{
+            color: 'primary.main',
+            cursor: 'pointer',
+            '&:hover': { textDecoration: 'underline' },
+          }}
+        >
+          {t('auth.switchToLoginLink')}
+        </Box>
+      </Typography>
+    </Stack>
+  );
+}

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

@@ -39,7 +39,7 @@ wireMuiNotifier();
 function Root() {
   const mode = useThemeStore((s) => s.mode);
   const theme = useMemo(
-    () => createTheme({ palette: { mode, primary: { main: '#5e60ce' } } }),
+    () => createTheme({ palette: { mode, primary: { main: '#22c55e' } } }),
     [mode],
   );
   return (

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

@@ -1,200 +1,64 @@
 import { useState } from 'react';
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import {
-  Box,
-  Button,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from '@mui/material';
-import GoogleIcon from '@mui/icons-material/Google';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import { useTranslation } from 'react-i18next';
-import { useAuthStore, useNotify } from '@icore/template-shared';
-import { api } from '../main';
+import { createFileRoute } from '@tanstack/react-router';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+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';
+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 theme = useTheme();
+  const isLg = useMediaQuery(theme.breakpoints.up('lg'));
 
-  const [mode, setMode] = useState<Mode>('password');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [sentEmail, setSentEmail] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  async function handlePasswordSubmit(e: React.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);
-    }
-  }
-
-  async function handleMagicLinkSubmit(e: React.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);
-      setMode('magicLinkSent');
-    } catch (err) {
-      notify.error(err instanceof Error ? err.message : t('error.unknown'));
-    } finally {
-      setSubmitting(false);
-    }
+  function handleRegisterSuccess(email: string) {
+    setCheckEmail(email);
+    setMode('checkEmail');
   }
 
   return (
-    <Container maxWidth="sm" sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center' }}>
-      <Paper elevation={3} sx={{ width: '100%', p: 4 }}>
-        <Typography variant="h5" component="h1" fontWeight={600} mb={0.5}>
-          {t('auth.login')}
-        </Typography>
-        <Typography variant="body2" color="text.secondary" mb={2}>
-          {t('auth.email')} &amp; {t('auth.password')}
-        </Typography>
-
-        {mode !== 'magicLinkSent' && (
-          <>
-            <Tabs
-              value={mode}
-              onChange={(_, v: Mode) => setMode(v)}
-              variant="fullWidth"
-              sx={{ mb: 2 }}
-            >
-              <Tab label={t('auth.withPassword')} value="password" />
-              <Tab label={t('auth.withMagicLink')} value="magicLinkRequest" />
-            </Tabs>
-            <Stack spacing={1} sx={{ mb: 2 }}>
-              <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 sx={{ mb: 2 }} />
-          </>
-        )}
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        bgcolor: '#020617',
+      }}
+    >
+      {isLg && <AuthBrandPanel />}
 
-        {mode === 'password' && (
-          <Box component="form" onSubmit={handlePasswordSubmit} autoComplete="on">
-            <TextField
-              label={t('auth.email')}
-              type="email"
-              autoComplete="email"
-              required
-              fullWidth
-              margin="normal"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: '40px 24px',
+        }}
+      >
+        <Box sx={{ width: '100%', maxWidth: 400 }}>
+          {mode === 'login' && (
+            <LoginForm
+              onSwitchRegister={() => setMode('register')}
+              onSwitchMagicLink={() => setMode('magicLink')}
             />
-            <TextField
-              label={t('auth.password')}
-              type="password"
-              autoComplete="current-password"
-              required
-              fullWidth
-              margin="normal"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+          )}
+          {mode === 'register' && (
+            <RegisterForm
+              onSuccess={handleRegisterSuccess}
+              onSwitchLogin={() => setMode('login')}
             />
-            <Button
-              type="submit"
-              variant="contained"
-              fullWidth
-              disabled={submitting}
-              sx={{ mt: 2 }}
-            >
-              {t('auth.login')}
-            </Button>
-          </Box>
-        )}
-
-        {mode === 'magicLinkRequest' && (
-          <Box component="form" onSubmit={handleMagicLinkSubmit} 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>
-        )}
-
-        {mode === 'magicLinkSent' && (
-          <Stack spacing={2} alignItems="center" textAlign="center">
-            <Typography variant="h6">{t('auth.magicLinkSent')}</Typography>
-            <Typography variant="body2" color="text.secondary">
-              {t('auth.magicLinkSentDescription', { email: sentEmail })}
-            </Typography>
-            <Button
-              variant="outlined"
-              fullWidth
-              onClick={() => {
-                setEmail('');
-                setSentEmail('');
-                setMode('magicLinkRequest');
-              }}
-            >
-              {t('auth.magicLinkUseDifferentEmail')}
-            </Button>
-          </Stack>
-        )}
-      </Paper>
-    </Container>
+          )}
+          {mode === 'magicLink' && <MagicLinkForm onSwitchLogin={() => setMode('login')} />}
+          {mode === 'checkEmail' && (
+            <CheckEmailScreen email={checkEmail} onBack={() => setMode('login')} />
+          )}
+        </Box>
+      </Box>
+    </Box>
   );
 }
 

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

@@ -0,0 +1,52 @@
+import { ShieldCheck, Zap, Globe } from 'lucide-react';
+
+const FEATURES = [
+  { icon: ShieldCheck, text: 'Auth, storage & payments — wired out of the box' },
+  { icon: Zap, text: 'Strategy pattern — swap any provider via env' },
+  { icon: Globe, text: 'Multi-language, dark mode, CASL authorization' },
+];
+
+export function AuthBrandPanel() {
+  return (
+    <div className="relative hidden lg:flex lg:w-2/5 flex-col justify-between p-12 bg-[--color-card] overflow-hidden">
+      {/* Green ambient glow */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -top-32 -left-32 h-96 w-96 rounded-full bg-[--color-primary]/10 blur-3xl"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute bottom-0 right-0 h-64 w-64 rounded-full bg-[--color-primary]/5 blur-2xl"
+      />
+
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 mb-12">
+          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-[--color-primary]">
+            <span className="text-sm font-bold text-[--color-primary-foreground]">i</span>
+          </div>
+          <span className="text-lg font-semibold tracking-tight">iCore</span>
+        </div>
+
+        <h2 className="text-3xl font-bold leading-tight mb-4">
+          Enterprise-grade
+          <br />
+          <span className="text-[--color-primary]">full-stack scaffold</span>
+        </h2>
+        <p className="text-[--color-muted-foreground] text-sm leading-relaxed max-w-xs">
+          Nx monorepo · NestJS microservices · React 19. Production-ready from day one.
+        </p>
+      </div>
+
+      <ul className="relative z-10 space-y-4">
+        {FEATURES.map(({ icon: Icon, text }) => (
+          <li key={text} className="flex items-start gap-3">
+            <div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[--color-primary]/15">
+              <Icon size={11} className="text-[--color-primary]" />
+            </div>
+            <span className="text-sm text-[--color-muted-foreground]">{text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { MailCheck } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../ui/button';
+
+interface CheckEmailScreenProps {
+  email: string;
+  onBack: () => void;
+}
+
+export function CheckEmailScreen({ email, onBack }: CheckEmailScreenProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center text-center space-y-4 py-4">
+      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[--color-primary]/15">
+        <MailCheck size={24} className="text-[--color-primary]" />
+      </div>
+      <div className="space-y-1">
+        <h3 className="text-lg font-semibold">{t('auth.checkEmail')}</h3>
+        <p className="text-sm text-[--color-muted-foreground] max-w-xs">
+          {t('auth.checkEmailDescription', { email })}
+        </p>
+      </div>
+      <Button type="button" variant="outline" className="w-full cursor-pointer" onClick={onBack}>
+        {t('auth.backToLogin')}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { SyntheticEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Loader2 } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+
+interface LoginFormProps {
+  onSuccess: (session: {
+    accessToken: string;
+    refreshToken: string;
+    user: { id: string; email: string; role?: string };
+  }) => void;
+  onError: (msg: string) => void;
+  onSwitchToRegister: () => void;
+  onSwitchToMagicLink: () => void;
+  api: <T>(path: string, init?: RequestInit) => Promise<T>;
+}
+
+export function LoginForm({
+  onSuccess,
+  onError,
+  onSwitchToRegister,
+  onSwitchToMagicLink,
+  api,
+}: LoginFormProps) {
+  const { t } = useTranslation();
+  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 }),
+      });
+      onSuccess(session);
+    } catch (err) {
+      onError(err instanceof Error ? err.message : t('error.unknown'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold">{t('auth.loginTitle')}</h1>
+        <p className="text-sm text-[--color-muted-foreground]">{t('auth.loginSubtitle')}</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="login-email">{t('auth.email')}</Label>
+          <Input
+            id="login-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="login-password">{t('auth.password')}</Label>
+          <Input
+            id="login-password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="current-password"
+          />
+        </div>
+        <Button type="submit" className="w-full cursor-pointer" disabled={submitting}>
+          {submitting ? <Loader2 size={16} className="animate-spin" /> : t('auth.login')}
+        </Button>
+      </form>
+
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-[--color-border]" />
+        </div>
+        <div className="relative flex justify-center text-xs">
+          <span className="bg-[--color-card] px-2 text-[--color-muted-foreground]">
+            {t('auth.orContinueWith')}
+          </span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <Button
+          type="button"
+          variant="outline"
+          className="cursor-pointer"
+          onClick={() => window.location.assign('/api/auth/oauth/google')}
+        >
+          <svg viewBox="0 0 24 24" className="size-4 shrink-0" aria-hidden>
+            <path
+              fill="#4285F4"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="#34A853"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+            />
+            <path
+              fill="#EA4335"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          Google
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          className="cursor-pointer"
+          onClick={() => window.location.assign('/api/auth/oauth/github')}
+        >
+          <svg viewBox="0 0 24 24" className="size-4 shrink-0" aria-hidden fill="currentColor">
+            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
+          </svg>
+          GitHub
+        </Button>
+      </div>
+
+      <div className="text-center text-sm text-[--color-muted-foreground] space-y-1">
+        <p>
+          {t('auth.switchToRegister')}{' '}
+          <button
+            type="button"
+            onClick={onSwitchToRegister}
+            className="text-[--color-primary] font-medium hover:underline cursor-pointer"
+          >
+            {t('auth.switchToRegisterLink')}
+          </button>
+        </p>
+        <button
+          type="button"
+          onClick={onSwitchToMagicLink}
+          className="text-xs hover:underline cursor-pointer"
+        >
+          {t('auth.withMagicLink')}
+        </button>
+      </div>
+    </div>
+  );
+}