@percepta/create 4.1.15 → 4.2.0

package/templates/webapp/src/app/(auth)/auth/signin/CredentialsSignInForm.tsx

@@ -1,179 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input } from "@percepta/design";
-import { ArrowRight } from "lucide-react";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import React, { useCallback, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import z from "zod";
-import { FormItem } from "../../../../components/form/FormItem";
-import { IS_DEV } from "../../../../config/isDev";
-import { authClient } from "../../../../lib/auth-client";
-
-const CREDENTIALS_SCHEMA = z.object({
-  email: z.string().min(1, "Email is required"),
-  password: z.string().min(1, "Password is required"),
-});
-
-type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
-type AuthMode = "username-password" | "google" | "okta";
-
-// Defaults are empty in production so deployed instances don't suggest seeded
-// credentials. In dev we prefill with the seeded user from `pnpm db:seed` so a
-// fresh scaffold is one click away from authed.
-const DEFAULTS: Credentials = IS_DEV
-  ? { email: "app-admin@example.com", password: "password" }
-  : { email: "", password: "" };
-
-export function CredentialsSignInForm({ authMode }: { authMode: AuthMode }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [isProviderSubmitting, setIsProviderSubmitting] = useState(false);
-
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-  } = useForm<Credentials>({
-    resolver: zodResolver(CREDENTIALS_SCHEMA),
-    defaultValues: DEFAULTS,
-  });
-
-  const callbackUrl = searchParams.get("callbackUrl") ?? "/";
-  const usesCredentials = authMode === "username-password";
-  const providerName = authMode === "google" ? "Google" : "Okta";
-
-  const submit = useCallback(
-    async ({ email, password }: Credentials): Promise<void> => {
-      const { error } = await authClient.signIn.email({
-        email,
-        password,
-        callbackURL: callbackUrl,
-      });
-
-      if (error != null) {
-        toast.error(
-          error.message ??
-            "Invalid email or password. Please check your credentials and try again.",
-        );
-        return;
-      }
-
-      router.push(callbackUrl);
-      router.refresh();
-    },
-    [callbackUrl, router],
-  );
-
-  const signInWithProvider = useCallback(async (): Promise<void> => {
-    setIsProviderSubmitting(true);
-    try {
-      const { error } =
-        authMode === "google"
-          ? await authClient.signIn.social({
-              provider: "google",
-              callbackURL: callbackUrl,
-            })
-          : await authClient.signIn.oauth2({
-              providerId: "okta",
-              callbackURL: callbackUrl,
-            });
-
-      if (error != null) {
-        toast.error(error.message ?? `Unable to sign in with ${providerName}.`);
-      }
-    } finally {
-      setIsProviderSubmitting(false);
-    }
-  }, [authMode, callbackUrl, providerName]);
-
-  return (
-    <div className="grid gap-8">
-      <div className="grid gap-3">
-        <p className="app-auth-kicker">
-          <span>01</span>
-          <span>Sign in</span>
-        </p>
-        <h1 className="app-auth-title">Welcome back.</h1>
-        {usesCredentials ? (
-          <p className="app-auth-copy text-sm">
-            Need an account?{" "}
-            <Link
-              className="app-auth-link"
-              href={`/auth/signup?callbackUrl=${encodeURIComponent(callbackUrl)}`}
-            >
-              Create one
-            </Link>
-          </p>
-        ) : (
-          <p className="app-auth-copy text-sm">
-            Use your {providerName} account to continue.
-          </p>
-        )}
-      </div>
-      {usesCredentials ? (
-        <form className="app-auth-form" onSubmit={handleSubmit(submit)}>
-          <div className="app-auth-fields">
-            <Controller
-              control={control}
-              name="email"
-              render={({ field, fieldState }) => (
-                <FormItem
-                  className="app-auth-field"
-                  label="Email"
-                  fieldState={fieldState}
-                >
-                  <Input {...field} type="email" autoComplete="email" />
-                </FormItem>
-              )}
-            />
-            <Controller
-              control={control}
-              name="password"
-              render={({ field, fieldState }) => (
-                <FormItem
-                  className="app-auth-field"
-                  label="Password"
-                  fieldState={fieldState}
-                >
-                  <Input
-                    {...field}
-                    type="password"
-                    autoComplete="current-password"
-                  />
-                </FormItem>
-              )}
-            />
-          </div>
-          <div className="flex justify-end">
-            <Button
-              className="app-auth-submit"
-              type="submit"
-              loading={isSubmitting}
-            >
-              <span>Sign In</span>
-              <ArrowRight aria-hidden={true} />
-            </Button>
-          </div>
-        </form>
-      ) : (
-        <div className="app-auth-form">
-          <div className="flex justify-end">
-            <Button
-              className="app-auth-submit"
-              type="button"
-              loading={isProviderSubmitting}
-              onClick={signInWithProvider}
-            >
-              <span>Continue with {providerName}</span>
-              <ArrowRight aria-hidden={true} />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/webapp/src/app/(auth)/auth/signup/CredentialsSignUpForm.tsx

@@ -1,135 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input } from "@percepta/design";
-import { ArrowRight } from "lucide-react";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import React, { useCallback } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import z from "zod";
-import { FormItem } from "../../../../components/form/FormItem";
-import { authClient } from "../../../../lib/auth-client";
-
-const CREDENTIALS_SCHEMA = z.object({
-  name: z.string().min(1, "Name is required"),
-  email: z.string().email("Enter a valid email address"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
-});
-
-type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
-
-export function CredentialsSignUpForm() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-  } = useForm<Credentials>({
-    resolver: zodResolver(CREDENTIALS_SCHEMA),
-    defaultValues: {
-      name: "",
-      email: "",
-      password: "",
-    },
-  });
-
-  const callbackUrl = searchParams.get("callbackUrl") ?? "/";
-
-  const submit = useCallback(
-    async ({ name, email, password }: Credentials): Promise<void> => {
-      const { error } = await authClient.signUp.email({
-        name,
-        email,
-        password,
-        callbackURL: callbackUrl,
-      });
-
-      if (error != null) {
-        toast.error(error.message ?? "Unable to create account.");
-        return;
-      }
-
-      router.push(callbackUrl);
-      router.refresh();
-    },
-    [callbackUrl, router],
-  );
-
-  return (
-    <div className="grid gap-8">
-      <div className="grid gap-3">
-        <p className="app-auth-kicker">
-          <span>01</span>
-          <span>Request access</span>
-        </p>
-        <h1 className="app-auth-title">Create account.</h1>
-        <p className="app-auth-copy text-sm">
-          Already have an account?{" "}
-          <Link
-            className="app-auth-link"
-            href={`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`}
-          >
-            Sign in
-          </Link>
-        </p>
-      </div>
-      <form className="app-auth-form" onSubmit={handleSubmit(submit)}>
-        <div className="app-auth-fields">
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState }) => (
-              <FormItem
-                className="app-auth-field"
-                label="Name"
-                fieldState={fieldState}
-              >
-                <Input {...field} autoComplete="name" />
-              </FormItem>
-            )}
-          />
-          <Controller
-            control={control}
-            name="email"
-            render={({ field, fieldState }) => (
-              <FormItem
-                className="app-auth-field"
-                label="Email"
-                fieldState={fieldState}
-              >
-                <Input {...field} type="email" autoComplete="email" />
-              </FormItem>
-            )}
-          />
-          <Controller
-            control={control}
-            name="password"
-            render={({ field, fieldState }) => (
-              <FormItem
-                className="app-auth-field"
-                label="Password"
-                fieldState={fieldState}
-              >
-                <Input {...field} type="password" autoComplete="new-password" />
-              </FormItem>
-            )}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            className="app-auth-submit"
-            type="submit"
-            loading={isSubmitting}
-          >
-            <span>Create Account</span>
-            <ArrowRight aria-hidden={true} />
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}

package/templates/webapp/src/app/(auth)/auth/signup/page.tsx

@@ -1,53 +0,0 @@
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { Suspense } from "react";
-import { AUTH_MODE, getServerSession } from "../../../../lib/auth";
-import { CredentialsSignUpForm } from "./CredentialsSignUpForm";
-
-type SearchParamValue = string | string[] | undefined;
-
-export const metadata: Metadata = {
-  title: "Create Account — __APP_TITLE__",
-};
-
-function getFirstSearchParam(value: SearchParamValue): string | undefined {
-  return Array.isArray(value) ? value[0] : value;
-}
-
-function getSignInPath(searchParams: Record<string, SearchParamValue>): string {
-  const callbackUrl = getFirstSearchParam(searchParams.callbackUrl);
-  if (callbackUrl == null || callbackUrl.length === 0) {
-    return "/auth/signin";
-  }
-
-  return `/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`;
-}
-
-export default async function SignUpPage({
-  searchParams,
-}: {
-  searchParams?:
-    | Promise<Record<string, SearchParamValue>>
-    | Record<string, SearchParamValue>;
-} = {}) {
-  const resolvedSearchParams = (await searchParams) ?? {};
-  const session = await getServerSession();
-
-  if (session?.user != null) {
-    redirect("/");
-  }
-
-  if (AUTH_MODE !== "username-password") {
-    redirect(getSignInPath(resolvedSearchParams));
-  }
-
-  return (
-    <Suspense
-      fallback={
-        <p className="text-center text-sm text-muted-foreground">Loading...</p>
-      }
-    >
-      <CredentialsSignUpForm />
-    </Suspense>
-  );
-}

package/templates/webapp/src/drizzle/schema/utils/jsonbFromZod.ts

@@ -1,25 +0,0 @@
-import { customType } from "drizzle-orm/pg-core";
-import type { z } from "zod";
-
-export function jsonbFromZod<TValue>(schema: z.Schema<TValue>): ReturnType<
-  typeof customType<{
-    data: TValue;
-    driverData: string;
-  }>
-> {
-  return customType<{
-    data: TValue;
-    driverData: string;
-  }>({
-    dataType() {
-      return "jsonb";
-    },
-    toDriver(value) {
-      return JSON.stringify(schema.parse(value));
-    },
-    fromDriver(raw) {
-      const parsed = schema.parse(raw);
-      return parsed;
-    },
-  });
-}

package/templates/webapp/src/lib/auth/app-auth-mode.ts

@@ -1,20 +0,0 @@
-export type AuthMode = "username-password" | "google" | "okta";
-
-const APP_AUTH_MODE: AuthMode = "__AUTH_MODE__" as AuthMode;
-
-function isAuthMode(value: string | undefined): value is AuthMode {
-  return (
-    value === "username-password" || value === "google" || value === "okta"
-  );
-}
-
-export function ensureAppAuthModeEnv(): AuthMode {
-  if (isAuthMode(process.env.AUTH_MODE)) {
-    return process.env.AUTH_MODE;
-  }
-
-  process.env.AUTH_MODE = APP_AUTH_MODE;
-  return APP_AUTH_MODE;
-}
-
-export const AUTH_MODE = ensureAppAuthModeEnv();