create-croissant 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-croissant",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/desktop/src/renderer/src/components/app-sidebar.tsx

@@ -58,10 +58,6 @@ export const publicNavItems = [
         title: "Login",
         url: "/login",
       },
-      {
-        title: "Sign Up",
-        url: "/signup",
-      },
     ],
   },
   {
@@ -157,7 +153,7 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
                       <Settings className="h-4 w-4" />
                     </SidebarMenuButton>
                     <SidebarMenuButton
-                      onClick={async (e) => {
+                      onClick={async (e: React.MouseEvent) => {
                         e.preventDefault();
                         e.stopPropagation();
                         await authClient.signOut();

package/template/apps/desktop/src/renderer/src/components/login-form.tsx

@@ -7,29 +7,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@workspace/ui/components/field";
-import { Input } from "@workspace/ui/components/input";
 import { useEffect, useState } from "react";
-import { Link, useNavigate } from "@tanstack/react-router";
-import { useForm } from "@tanstack/react-form";
-import { z } from "zod";
-
-import { authClient } from "@renderer/lib/auth-client";
-
-const loginSchema = z.object({
-  email: z.string().email("Invalid email address"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
-});
+import { useNavigate } from "@tanstack/react-router";
 
 export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -53,136 +35,21 @@ export function LoginForm({ className, ...props }: React.ComponentProps<"div">)
      window.api.openExternal(platformUrl);
    };
 
-  const form = useForm({
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-    validators: {
-      onChange: loginSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setLoading(true);
-      setError(null);
-      const { error: signInError } = await authClient.signIn.email({
-        email: value.email,
-        password: value.password,
-      });
-      if (signInError) {
-        setError(signInError.message || "Failed to sign in");
-      } else {
-        navigate({ to: "/dashboard" });
-      }
-      setLoading(false);
-    },
-  });
-
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
       <Card>
-        <CardHeader>
-          <CardTitle>Login to your account</CardTitle>
-          <CardDescription>Enter your email below to login to your account</CardDescription>
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">Login to your account</CardTitle>
+          <CardDescription>
+            Click the button below to login via your web browser.
+          </CardDescription>
         </CardHeader>
         <CardContent>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              form.handleSubmit();
-            }}
-          >
-            <FieldGroup>
-              {error && <div className="rounded bg-red-100 p-2 text-sm text-red-600">{error}</div>}
-              <form.Field
-                name="email"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        type="email"
-                        placeholder="m@example.com"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        required
-                      />
-                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                    </Field>
-                  );
-                }}
-              />
-              <form.Field
-                name="password"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <div className="flex items-center">
-                        <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                        <a
-                          href="#"
-                          className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                        >
-                          Forgot your password?
-                        </a>
-                      </div>
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        required
-                      />
-                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                    </Field>
-                  );
-                }}
-              />
-              <Field>
-                <form.Subscribe
-                  selector={(state) => ({
-                    canSubmit: state.canSubmit,
-                    isSubmitting: state.isSubmitting,
-                  })}
-                >
-                  {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
-                    <Button type="submit" disabled={!state.canSubmit || state.isSubmitting || loading}>
-                      {state.isSubmitting || loading ? "Logging in..." : "Login"}
-                    </Button>
-                  )}
-                </form.Subscribe>
-                <div className="relative">
-                  <div className="absolute inset-0 flex items-center">
-                    <span className="w-full border-t" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-                  </div>
-                </div>
-                <Button variant="outline" type="button" onClick={handleBrowserLogin} disabled={loading}>
-                  Login with Browser
-                </Button>
-                <Button variant="outline" type="button" disabled={loading}>
-                  Login with Google
-                </Button>
-                <FieldDescription className="text-center">
-                  Don&apos;t have an account?{" "}
-                  <Link to="/signup" className="underline">
-                    Sign up
-                  </Link>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
+          <div className="flex flex-col gap-4">
+            <Button size="lg" className="w-full" onClick={handleBrowserLogin} disabled={loading}>
+              {loading ? "Authenticating..." : "Login from the web"}
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </div>

package/template/apps/desktop/src/renderer/src/routeTree.gen.ts

@@ -12,7 +12,6 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as PublicRouteImport } from './routes/_public'
 import { Route as AuthRouteImport } from './routes/_auth'
 import { Route as PublicIndexRouteImport } from './routes/_public/index'
-import { Route as PublicSignupRouteImport } from './routes/_public/signup'
 import { Route as PublicLoginRouteImport } from './routes/_public/login'
 import { Route as AuthDashboardRouteImport } from './routes/_auth/dashboard'
 import { Route as AuthAccountRouteImport } from './routes/_auth/account'
@@ -32,11 +31,6 @@ const PublicIndexRoute = PublicIndexRouteImport.update({
   path: '/',
   getParentRoute: () => PublicRoute,
 } as any)
-const PublicSignupRoute = PublicSignupRouteImport.update({
-  id: '/signup',
-  path: '/signup',
-  getParentRoute: () => PublicRoute,
-} as any)
 const PublicLoginRoute = PublicLoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -70,7 +64,6 @@ export interface FileRoutesByFullPath {
   '/account': typeof AuthAccountRoute
   '/dashboard': typeof AuthDashboardRoute
   '/login': typeof PublicLoginRoute
-  '/signup': typeof PublicSignupRoute
   '/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
 }
@@ -79,7 +72,6 @@ export interface FileRoutesByTo {
   '/account': typeof AuthAccountRoute
   '/dashboard': typeof AuthDashboardRoute
   '/login': typeof PublicLoginRoute
-  '/signup': typeof PublicSignupRoute
   '/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
 }
@@ -90,7 +82,6 @@ export interface FileRoutesById {
   '/_auth/account': typeof AuthAccountRoute
   '/_auth/dashboard': typeof AuthDashboardRoute
   '/_public/login': typeof PublicLoginRoute
-  '/_public/signup': typeof PublicSignupRoute
   '/_public/': typeof PublicIndexRoute
   '/_auth/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/_public/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
@@ -102,7 +93,6 @@ export interface FileRouteTypes {
     | '/account'
     | '/dashboard'
     | '/login'
-    | '/signup'
     | '/examples/client-orpc-auth'
     | '/examples/client-orpc'
   fileRoutesByTo: FileRoutesByTo
@@ -111,7 +101,6 @@ export interface FileRouteTypes {
     | '/account'
     | '/dashboard'
     | '/login'
-    | '/signup'
     | '/examples/client-orpc-auth'
     | '/examples/client-orpc'
   id:
@@ -121,7 +110,6 @@ export interface FileRouteTypes {
     | '/_auth/account'
     | '/_auth/dashboard'
     | '/_public/login'
-    | '/_public/signup'
     | '/_public/'
     | '/_auth/examples/client-orpc-auth'
     | '/_public/examples/client-orpc'
@@ -155,13 +143,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PublicIndexRouteImport
       parentRoute: typeof PublicRoute
     }
-    '/_public/signup': {
-      id: '/_public/signup'
-      path: '/signup'
-      fullPath: '/signup'
-      preLoaderRoute: typeof PublicSignupRouteImport
-      parentRoute: typeof PublicRoute
-    }
     '/_public/login': {
       id: '/_public/login'
       path: '/login'
@@ -216,14 +197,12 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 
 interface PublicRouteChildren {
   PublicLoginRoute: typeof PublicLoginRoute
-  PublicSignupRoute: typeof PublicSignupRoute
   PublicIndexRoute: typeof PublicIndexRoute
   PublicExamplesClientOrpcRoute: typeof PublicExamplesClientOrpcRoute
 }
 
 const PublicRouteChildren: PublicRouteChildren = {
   PublicLoginRoute: PublicLoginRoute,
-  PublicSignupRoute: PublicSignupRoute,
   PublicIndexRoute: PublicIndexRoute,
   PublicExamplesClientOrpcRoute: PublicExamplesClientOrpcRoute,
 }

package/template/apps/desktop/src/renderer/src/components/signup-form.tsx

@@ -1,205 +0,0 @@
-import { Button } from "@workspace/ui/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@workspace/ui/components/card";
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@workspace/ui/components/field";
-import { Input } from "@workspace/ui/components/input";
-import { useState } from "react";
-import { Link, useNavigate } from "@tanstack/react-router";
-import { useForm } from "@tanstack/react-form";
-import { z } from "zod";
-import { authClient } from "@renderer/lib/auth-client";
-
-const signupSchema = z
-  .object({
-    name: z.string().min(1, "Name is required"),
-    email: z.string().email("Invalid email address"),
-    password: z.string().min(8, "Password must be at least 8 characters"),
-    confirmPassword: z.string().min(1, "Confirm password is required"),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords do not match",
-    path: ["confirmPassword"],
-  });
-
-export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const navigate = useNavigate();
-
-  const form = useForm({
-    defaultValues: {
-      name: "",
-      email: "",
-      password: "",
-      confirmPassword: "",
-    },
-    validators: {
-      onChange: signupSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setLoading(true);
-      setError(null);
-      const { error: signUpError } = await authClient.signUp.email({
-        email: value.email,
-        password: value.password,
-        name: value.name,
-      });
-      if (signUpError) {
-        setError(signUpError.message || "Failed to sign up");
-      } else {
-        navigate({ to: "/dashboard" });
-      }
-      setLoading(false);
-    },
-  });
-
-  return (
-    <Card {...props}>
-      <CardHeader>
-        <CardTitle>Create an account</CardTitle>
-        <CardDescription>Enter your information below to create your account</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            form.handleSubmit();
-          }}
-        >
-          <FieldGroup>
-            {error && <div className="rounded bg-red-100 p-2 text-sm text-red-600">{error}</div>}
-            <form.Field
-              name="name"
-              children={(field) => {
-                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>Full Name</FieldLabel>
-                    <Input
-                      id={field.name}
-                      name={field.name}
-                      type="text"
-                      placeholder="John Doe"
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      required
-                    />
-                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                  </Field>
-                );
-              }}
-            />
-            <form.Field
-              name="email"
-              children={(field) => {
-                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                    <Input
-                      id={field.name}
-                      name={field.name}
-                      type="email"
-                      placeholder="m@example.com"
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      required
-                    />
-                    <FieldDescription>
-                      We&apos;ll use this to contact you. We will not share your email with anyone
-                      else.
-                    </FieldDescription>
-                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                  </Field>
-                );
-              }}
-            />
-            <form.Field
-              name="password"
-              children={(field) => {
-                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                    <Input
-                      id={field.name}
-                      name={field.name}
-                      type="password"
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      required
-                    />
-                    <FieldDescription>Must be at least 8 characters long.</FieldDescription>
-                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                  </Field>
-                );
-              }}
-            />
-            <form.Field
-              name="confirmPassword"
-              children={(field) => {
-                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>Confirm Password</FieldLabel>
-                    <Input
-                      id={field.name}
-                      name={field.name}
-                      type="password"
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      required
-                    />
-                    <FieldDescription>Please confirm your password.</FieldDescription>
-                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                  </Field>
-                );
-              }}
-            />
-            <FieldGroup>
-              <Field>
-              <form.Subscribe
-                selector={(state) => ({
-                  canSubmit: state.canSubmit,
-                  isSubmitting: state.isSubmitting,
-                })}
-              >
-                {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
-                  <Button type="submit" disabled={!state.canSubmit || state.isSubmitting || loading}>
-                    {state.isSubmitting || loading ? "Creating..." : "Create Account"}
-                  </Button>
-                )}
-              </form.Subscribe>
-                <Button variant="outline" type="button" disabled={loading}>
-                  Sign up with Google
-                </Button>
-                <FieldDescription className="px-6 text-center">
-                  Already have an account?{" "}
-                  <Link to="/login" className="underline">
-                    Sign in
-                  </Link>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}

package/template/apps/desktop/src/renderer/src/routes/_public/signup.tsx

@@ -1,16 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { SignupForm } from "@renderer/components/signup-form";
-
-export const Route = createFileRoute("/_public/signup")({
-  component: Signup,
-});
-
-function Signup() {
-  return (
-    <div className="flex min-h-svh items-center justify-center p-6">
-      <div className="w-full max-w-sm">
-        <SignupForm />
-      </div>
-    </div>
-  );
-}