Repository: supabase/supabase
File: apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx (TypeScript)

Code before:

  return (
    <ScaffoldSection isFullWidth className="!pt-0">
      {isError && (
        <AlertError
          className="mt-12"
          error={authConfigError}
          subject="Failed to retrieve auth configuration"
        />
      )}
      {isLoading && (
        <div className="w-[854px] mt-12">
          <GenericSkeletonLoader />
        </div>
      )}
      {isSuccess && (
        <div className="my-12">
          {builtInSMTP ? (
            <div className="mb-4">
              <EmailRateLimitsAlert />
            </div>
          ) : null}
          {isSecurityNotificationsEnabled ? (
            <Card>
              {TEMPLATES_SCHEMAS.map((template) => {
                const templateSlug = template.title.trim().replace(/\s+/g, '-').toLowerCase()
                return (
                  <CardContent key={`${template.id}`} className="p-0">
                    <Link
                      href={`/project/${projectRef}/auth/templates/${templateSlug}`}
                      className="flex items-center justify-between hover:bg-surface-200 transition-colors py-4 px-6 w-full h-full"
                    >
                      <div className="flex flex-col">
                        <h3 className="text-sm text-foreground">{template.title}</h3>
                        {template.purpose && (
                          <p className="text-sm text-foreground-lighter">{template.purpose}</p>
                        )}
                      </div>
                      <ChevronRight
                        size={16}
                        className="text-foreground-muted group-hover:text-foreground transition-colors"
                      />
                    </Link>
                  </CardContent>
                )
              })}
            </Card>
          ) : (
            <Card>
              <Tabs_Shadcn_ defaultValue={TEMPLATES_SCHEMAS[0].title.trim().replace(/\s+/g, '-')}>
                <TabsList_Shadcn_ className="pt-2 px-6 gap-5 mb-0 overflow-x-scroll no-scrollbar mb-4">

Review comment (security):
Kind of annoying: our definitions for each template don’t have much information, and the IDs are a `LIKE_THIS`. So it requires a bit of futzing in client-side code, like this. See [AuthTemplatesValidation](https://github.com/supabase/supabase/blob/dnywh/chore/auth-template-subpages/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx#L0-L1)

Code after:
    (!authConfig.SMTP_HOST || !authConfig.SMTP_USER || !authConfig.SMTP_PASS)

  return (
    <ScaffoldSection isFullWidth className="!pt-0">
      {isError && (
        <AlertError
          className="mt-12"
          error={authConfigError}
          subject="Failed to retrieve auth configuration"
        />
      )}
      {isLoading && (
        <div className="w-[854px] mt-12">
          <GenericSkeletonLoader />
        </div>
      )}
      {isSuccess && (
        <div className="my-12">
          {builtInSMTP ? (
            <div className="mb-4">
              <EmailRateLimitsAlert />
            </div>
          ) : null}
          {isSecurityNotificationsEnabled ? (
            <Card>
              {TEMPLATES_SCHEMAS.map((template) => {
                const templateSlug = slugifyTitle(template.title)
                return (
                  <CardContent key={`${template.id}`} className="p-0">
                    <Link
                      href={`/project/${projectRef}/auth/templates/${templateSlug}`}
                      className="flex items-center justify-between hover:bg-surface-200 transition-colors py-4 px-6 w-full h-full"
                    >
                      <div className="flex flex-col">
                        <h3 className="text-sm text-foreground">{template.title}</h3>
                        {template.purpose && (
                          <p className="text-sm text-foreground-lighter">{template.purpose}</p>
                        )}
                      </div>
                      <ChevronRight
                        size={16}
                        className="text-foreground-muted group-hover:text-foreground transition-colors"
                      />
                    </Link>
                  </CardContent>
                )
              })}
            </Card>
          ) : (
            <Card>
              <Tabs_Shadcn_ defaultValue={slugifyTitle(TEMPLATES_SCHEMAS[0].title)}>