mirror of
https://github.com/fastapi/full-stack-fastapi-template.git
synced 2026-11-03 20:36:27 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Alejandra
|
e0d5fcc411 | ||
|
Alejandra
|
0eff31727b |
@@ -6,6 +6,5 @@ frontend/blob-report
|
||||
frontend/dist
|
||||
frontend/node_modules
|
||||
frontend/playwright-report
|
||||
frontend/playwright/.auth
|
||||
frontend/test-results
|
||||
node_modules
|
||||
|
||||
@@ -28,9 +28,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: ".python-version"
|
||||
- name: Setup uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
cache-dependency-glob: |
|
||||
pyproject.toml
|
||||
uv.lock
|
||||
|
||||
@@ -29,9 +29,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: ".python-version"
|
||||
- name: Install uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
- name: Extract release details
|
||||
id: release-details
|
||||
run: |
|
||||
|
||||
@@ -35,9 +35,9 @@ jobs:
|
||||
# Override frontend/.env so the deployed frontend uses the same origin as the API
|
||||
VITE_API_URL: ""
|
||||
- name: Set up uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
version: "0.11.18"
|
||||
- name: Prepare database
|
||||
run: uv run bash scripts/prestart.sh
|
||||
working-directory: backend
|
||||
|
||||
@@ -66,9 +66,11 @@ jobs:
|
||||
with:
|
||||
limit-access-to-actor: true
|
||||
- name: Install uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
- run: uv sync
|
||||
working-directory: backend
|
||||
- run: bun ci
|
||||
|
||||
@@ -46,9 +46,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: .python-version
|
||||
- name: Setup uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
cache-dependency-glob: |
|
||||
requirements**.txt
|
||||
pyproject.toml
|
||||
|
||||
@@ -38,9 +38,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: ".python-version"
|
||||
- name: Install uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
- name: Prepare release
|
||||
env:
|
||||
BUMP: ${{ inputs.bump }}
|
||||
|
||||
@@ -24,9 +24,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: .python-version
|
||||
- name: Setup uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
cache-dependency-glob: |
|
||||
pyproject.toml
|
||||
uv.lock
|
||||
|
||||
@@ -22,9 +22,11 @@ jobs:
|
||||
with:
|
||||
python-version-file: .python-version
|
||||
- name: Install uv
|
||||
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
|
||||
uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
|
||||
with:
|
||||
version: "latest-known"
|
||||
# Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
|
||||
# See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
|
||||
version: "0.11.18"
|
||||
- run: docker compose down -v --remove-orphans
|
||||
- run: docker compose up -d db mailpit
|
||||
- name: Migrate DB
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
- 🔒 Secure password hashing by default.
|
||||
- 🔑 JWT (JSON Web Token) authentication.
|
||||
- 📫 Email-based password recovery.
|
||||
- ✉️ [React Email](https://react.email) for email templates.
|
||||
- 📬 [Mailpit](https://mailpit.axllent.org) for local email testing during development.
|
||||
- ✅ Tests with [Pytest](https://pytest.org).
|
||||
- 🏭 CI (continuous integration) and CD (continuous deployment) based on GitHub Actions.
|
||||
@@ -43,14 +42,6 @@
|
||||
|
||||
|
||||
|
||||
### React Email Templates
|
||||
|
||||
|
||||
|
||||
### Mailpit - Local Email Testing
|
||||
|
||||
|
||||
|
||||
### Interactive API Documentation
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -33,6 +33,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"form-data": "4.0.6",
|
||||
"lucide-react": "^1.28.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8",
|
||||
"react-error-boundary": "^6.1.2",
|
||||
@@ -843,6 +844,8 @@
|
||||
|
||||
"next": ["next@16.2.6", "", { "dependencies": { "@next/env": "16.2.6", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.6", "@next/swc-darwin-x64": "16.2.6", "@next/swc-linux-arm64-gnu": "16.2.6", "@next/swc-linux-arm64-musl": "16.2.6", "@next/swc-linux-x64-gnu": "16.2.6", "@next/swc-linux-x64-musl": "16.2.6", "@next/swc-win32-arm64-msvc": "16.2.6", "@next/swc-win32-x64-msvc": "16.2.6", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw=="],
|
||||
|
||||
"next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
|
||||
|
||||
"node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
|
||||
|
||||
"normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"form-data": "4.0.6",
|
||||
"lucide-react": "^1.28.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8",
|
||||
"react-error-boundary": "^6.1.2",
|
||||
|
||||
@@ -7,15 +7,15 @@ import {
|
||||
OctagonXIcon,
|
||||
TriangleAlertIcon,
|
||||
} from "lucide-react"
|
||||
import { useTheme } from "@/components/theme-provider"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme } = useTheme()
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme}
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: <CircleCheckIcon className="size-4" />,
|
||||
|
||||
@@ -25,7 +25,7 @@ function Layout() {
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
|
||||
<header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||
<SidebarTrigger className="-ml-1 text-muted-foreground" />
|
||||
</header>
|
||||
<main className="flex-1 p-6 md:p-8">
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
import { waitForEmailHtml } from "./utils/mailpit"
|
||||
import { emailUrl, findLastEmail } from "./utils/mailpit"
|
||||
import { randomEmail, randomPassword } from "./utils/random"
|
||||
import { logInUser, signUpNewUser } from "./utils/user"
|
||||
|
||||
test.use({ storageState: { cookies: [], origins: [] } })
|
||||
|
||||
const resetPath = "/reset-password?token="
|
||||
|
||||
test("Password Recovery title is visible", async ({ page }) => {
|
||||
await page.goto("/recover-password")
|
||||
|
||||
@@ -46,17 +44,21 @@ test("User can reset password successfully using the link", async ({
|
||||
|
||||
await page.getByRole("button", { name: "Continue" }).click()
|
||||
|
||||
const emailHtml = await waitForEmailHtml({
|
||||
const emailData = await findLastEmail({
|
||||
request,
|
||||
query: `to:${email}`,
|
||||
timeout: 5000,
|
||||
})
|
||||
|
||||
expect(emailHtml).toContain(resetPath)
|
||||
const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
|
||||
expect(resetUrl).toBeDefined()
|
||||
await page.goto(emailUrl(emailData))
|
||||
|
||||
const selector = 'a[href*="/reset-password?token="]'
|
||||
|
||||
const url = await page.getAttribute(selector, "href")
|
||||
const resetUrl = new URL(url!)
|
||||
|
||||
// Set the new password and confirm it
|
||||
await page.goto(resetUrl!)
|
||||
await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
|
||||
|
||||
await page.getByTestId("new-password-input").fill(newPassword)
|
||||
await page.getByTestId("confirm-password-input").fill(newPassword)
|
||||
@@ -93,17 +95,20 @@ test("Weak new password validation", async ({ page, request }) => {
|
||||
await page.getByTestId("email-input").fill(email)
|
||||
await page.getByRole("button", { name: "Continue" }).click()
|
||||
|
||||
const emailHtml = await waitForEmailHtml({
|
||||
const emailData = await findLastEmail({
|
||||
request,
|
||||
query: `to:${email}`,
|
||||
timeout: 5000,
|
||||
})
|
||||
|
||||
expect(emailHtml).toContain(resetPath)
|
||||
const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
|
||||
expect(resetUrl).toBeDefined()
|
||||
await page.goto(emailUrl(emailData))
|
||||
|
||||
const selector = 'a[href*="/reset-password?token="]'
|
||||
const url = await page.getAttribute(selector, "href")
|
||||
const resetUrl = new URL(url!)
|
||||
|
||||
// Set a weak new password
|
||||
await page.goto(resetUrl!)
|
||||
await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
|
||||
await page.getByTestId("new-password-input").fill(weakPassword)
|
||||
await page.getByTestId("confirm-password-input").fill(weakPassword)
|
||||
await page.getByRole("button", { name: "Reset Password" }).click()
|
||||
|
||||
@@ -1,10 +1,36 @@
|
||||
import type { APIRequestContext } from "@playwright/test"
|
||||
|
||||
type EmailSummary = {
|
||||
ID: string
|
||||
type Address = {
|
||||
Name: string
|
||||
Address: string
|
||||
}
|
||||
|
||||
export async function waitForEmailHtml({
|
||||
type Email = {
|
||||
ID: string
|
||||
To: Address[]
|
||||
Subject: string
|
||||
}
|
||||
|
||||
async function findEmail({
|
||||
request,
|
||||
query,
|
||||
}: {
|
||||
request: APIRequestContext
|
||||
query: string
|
||||
}) {
|
||||
const response = await request.get(
|
||||
`${process.env.MAILPIT_HOST}/api/v1/search`,
|
||||
{
|
||||
params: { query, limit: 1 },
|
||||
},
|
||||
)
|
||||
|
||||
const { messages }: { messages: Email[] } = await response.json()
|
||||
|
||||
return messages[0] ?? null
|
||||
}
|
||||
|
||||
export async function findLastEmail({
|
||||
request,
|
||||
query,
|
||||
timeout = 5000,
|
||||
@@ -16,27 +42,10 @@ export async function waitForEmailHtml({
|
||||
const deadline = Date.now() + timeout
|
||||
|
||||
while (Date.now() < deadline) {
|
||||
const response = await request.get(
|
||||
`${process.env.MAILPIT_HOST}/api/v1/search`,
|
||||
{
|
||||
params: { query, limit: 1 },
|
||||
},
|
||||
)
|
||||
const { messages }: { messages: EmailSummary[] } = await response.json()
|
||||
const email = messages[0]
|
||||
const email = await findEmail({ request, query })
|
||||
|
||||
if (email) {
|
||||
const htmlResponse = await request.get(
|
||||
`${process.env.MAILPIT_HOST}/view/${email.ID}.html`,
|
||||
)
|
||||
|
||||
if (!htmlResponse.ok()) {
|
||||
throw new Error(
|
||||
`Could not get the HTML for email "${email.ID}": ${htmlResponse.status()}`,
|
||||
)
|
||||
}
|
||||
|
||||
return htmlResponse.text()
|
||||
return email
|
||||
}
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
@@ -44,3 +53,7 @@ export async function waitForEmailHtml({
|
||||
|
||||
throw new Error(`Timeout while trying to get the latest email for "${query}"`)
|
||||
}
|
||||
|
||||
export function emailUrl(email: Email) {
|
||||
return `${process.env.MAILPIT_HOST}/view/${email.ID}.html`
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
@@ -25,8 +25,8 @@ export default function NewAccount({
|
||||
project_name={project_name}
|
||||
>
|
||||
<Heading>Welcome to {project_name}!</Heading>
|
||||
<Text style={bodyTextStyle}>Hi,</Text>
|
||||
<Text style={bodyTextStyle}>
|
||||
<Text className="text-[15px] leading-7 text-body">Hi,</Text>
|
||||
<Text className="text-[15px] leading-7 text-body">
|
||||
Your account has been successfully created and is ready to use. These
|
||||
are your credentials:
|
||||
</Text>
|
||||
@@ -34,32 +34,18 @@ export default function NewAccount({
|
||||
<Detail label="Username" value={username} />
|
||||
<Detail label="Password" value={password} />
|
||||
</Callout>
|
||||
<Text style={bodyTextStyle}>
|
||||
<Text className="text-[15px] leading-7 text-body">
|
||||
Get started by signing in to your dashboard:
|
||||
</Text>
|
||||
<LinkButton href={link}>Go to Dashboard</LinkButton>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
Or copy and paste this link into your browser:
|
||||
<br />
|
||||
<Link href={link}>{link}</Link>
|
||||
</Text>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
For security reasons, change your password after your first sign in.
|
||||
</Text>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const bodyTextStyle = {
|
||||
color: "#334155",
|
||||
fontSize: "15px",
|
||||
lineHeight: "26px",
|
||||
margin: "0 0 18px",
|
||||
}
|
||||
|
||||
const supportingTextStyle = {
|
||||
color: "#64748b",
|
||||
fontSize: "14px",
|
||||
lineHeight: "23px",
|
||||
margin: "0 0 16px",
|
||||
}
|
||||
|
||||
@@ -24,38 +24,24 @@ export default function ResetPassword({
|
||||
project_name={project_name}
|
||||
>
|
||||
<Heading>Reset your password</Heading>
|
||||
<Text style={bodyTextStyle}>Hi {username},</Text>
|
||||
<Text style={bodyTextStyle}>
|
||||
<Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
|
||||
<Text className="text-[15px] leading-7 text-body">
|
||||
We've received a request to reset the password for your {project_name}{" "}
|
||||
account. Choose a new one by clicking the button below:
|
||||
</Text>
|
||||
<LinkButton href={link}>Reset password</LinkButton>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
Or copy and paste this link into your browser:
|
||||
<br />
|
||||
<Link href={link}>{link}</Link>
|
||||
</Text>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
This link will expire in {valid_hours} hours.
|
||||
</Text>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
If you didn't request a password recovery, you can safely ignore this
|
||||
email.
|
||||
</Text>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const bodyTextStyle = {
|
||||
color: "#334155",
|
||||
fontSize: "15px",
|
||||
lineHeight: "26px",
|
||||
margin: "0 0 18px",
|
||||
}
|
||||
|
||||
const supportingTextStyle = {
|
||||
color: "#64748b",
|
||||
fontSize: "14px",
|
||||
lineHeight: "23px",
|
||||
margin: "0 0 16px",
|
||||
}
|
||||
|
||||
@@ -19,31 +19,17 @@ export default function TestEmail({
|
||||
project_name={project_name}
|
||||
>
|
||||
<Heading>Test email</Heading>
|
||||
<Text style={bodyTextStyle}>Hi,</Text>
|
||||
<Text style={bodyTextStyle}>
|
||||
<Text className="text-[15px] leading-7 text-body">Hi,</Text>
|
||||
<Text className="text-[15px] leading-7 text-body">
|
||||
This is a test email from {project_name}. If you're reading it, email
|
||||
delivery is configured correctly.
|
||||
</Text>
|
||||
<Callout>
|
||||
<Detail label="Sent to" value={email} />
|
||||
</Callout>
|
||||
<Text style={supportingTextStyle}>
|
||||
<Text className="text-sm leading-6 text-muted">
|
||||
If you weren't expecting this email, you can safely ignore it.
|
||||
</Text>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const bodyTextStyle = {
|
||||
color: "#334155",
|
||||
fontSize: "15px",
|
||||
lineHeight: "26px",
|
||||
margin: "0 0 18px",
|
||||
}
|
||||
|
||||
const supportingTextStyle = {
|
||||
color: "#64748b",
|
||||
fontSize: "14px",
|
||||
lineHeight: "23px",
|
||||
margin: "0 0 16px",
|
||||
}
|
||||
|
||||
@@ -3,21 +3,10 @@ import { Button } from "@react-email/components"
|
||||
type ButtonProps = React.PropsWithChildren & { href: string }
|
||||
|
||||
export const LinkButton = ({ children, href }: ButtonProps) => (
|
||||
<Button href={href} style={buttonStyle}>
|
||||
<Button
|
||||
href={href}
|
||||
className="bg-brand text-white rounded-md font-semibold text-sm mt-2 mb-7 inline-block text-center no-underline px-7 py-3.5"
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
)
|
||||
|
||||
const buttonStyle = {
|
||||
backgroundColor: "#00796b",
|
||||
borderRadius: "6px",
|
||||
color: "#ffffff",
|
||||
display: "inline-block",
|
||||
fontSize: "14px",
|
||||
fontWeight: "700",
|
||||
lineHeight: "20px",
|
||||
margin: "8px 0 28px",
|
||||
padding: "13px 28px",
|
||||
textAlign: "center" as const,
|
||||
textDecoration: "none",
|
||||
}
|
||||
|
||||
@@ -3,44 +3,20 @@ import { Section, Text } from "@react-email/components"
|
||||
type CalloutProps = React.PropsWithChildren
|
||||
|
||||
export const Callout = ({ children }: CalloutProps) => (
|
||||
<Section style={calloutStyle}>{children}</Section>
|
||||
<Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
|
||||
{children}
|
||||
</Section>
|
||||
)
|
||||
|
||||
type DetailProps = { label: string; value: string }
|
||||
|
||||
export const Detail = ({ label, value }: DetailProps) => (
|
||||
<Text style={detailStyle}>
|
||||
<span style={labelStyle}>{label}</span>
|
||||
<br />
|
||||
<span style={valueStyle}>{value}</span>
|
||||
<Text className="m-0 my-3">
|
||||
<span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
|
||||
{label}
|
||||
</span>
|
||||
<span className="block text-sm font-semibold break-all font-mono mt-1">
|
||||
{value}
|
||||
</span>
|
||||
</Text>
|
||||
)
|
||||
|
||||
const calloutStyle = {
|
||||
backgroundColor: "#f2f8f7",
|
||||
borderLeft: "3px solid #00897b",
|
||||
margin: "24px 0 28px",
|
||||
padding: "6px 18px",
|
||||
}
|
||||
|
||||
const detailStyle = {
|
||||
margin: "12px 0",
|
||||
}
|
||||
|
||||
const labelStyle = {
|
||||
color: "#64748b",
|
||||
fontSize: "11px",
|
||||
fontWeight: "700",
|
||||
letterSpacing: "1px",
|
||||
lineHeight: "16px",
|
||||
textTransform: "uppercase" as const,
|
||||
}
|
||||
|
||||
const valueStyle = {
|
||||
color: "#1e293b",
|
||||
fontFamily: 'Consolas, "Courier New", monospace',
|
||||
fontSize: "14px",
|
||||
fontWeight: "700",
|
||||
lineHeight: "22px",
|
||||
wordBreak: "break-all" as const,
|
||||
}
|
||||
|
||||
@@ -3,16 +3,10 @@ import { Heading as BaseHeading } from "@react-email/components"
|
||||
type HeadingProps = React.PropsWithChildren
|
||||
|
||||
export const Heading = ({ children }: HeadingProps) => (
|
||||
<BaseHeading as="h1" style={headingStyle}>
|
||||
<BaseHeading
|
||||
as="h1"
|
||||
className="text-2xl leading-8 font-semibold tracking-[-0.02em] text-body m-0 mb-5"
|
||||
>
|
||||
{children}
|
||||
</BaseHeading>
|
||||
)
|
||||
|
||||
const headingStyle = {
|
||||
color: "#17212b",
|
||||
fontSize: "26px",
|
||||
fontWeight: "700",
|
||||
letterSpacing: "-0.3px",
|
||||
lineHeight: "34px",
|
||||
margin: "0 0 20px",
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import {
|
||||
Body,
|
||||
Column,
|
||||
Container,
|
||||
Head,
|
||||
Hr,
|
||||
Html,
|
||||
Preview,
|
||||
Row,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
} from "@react-email/components"
|
||||
|
||||
@@ -24,88 +22,64 @@ export const Layout = ({
|
||||
children,
|
||||
}: LayoutProps) => {
|
||||
return (
|
||||
<Html lang="en" dir="ltr">
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</Head>
|
||||
{preview ? <Preview>{preview}</Preview> : null}
|
||||
<Body style={bodyStyle}>
|
||||
<Container style={containerStyle}>
|
||||
<Row>
|
||||
<Column style={contentStyle}>
|
||||
<Section>
|
||||
<Hr style={brandRuleStyle} />
|
||||
<Text style={brandStyle}>{project_name}</Text>
|
||||
</Section>
|
||||
<Section>{children}</Section>
|
||||
<Hr style={footerRuleStyle} />
|
||||
<Section>
|
||||
<Text style={footerStyle}>
|
||||
© {new Date().getFullYear()} {project_name}. All rights
|
||||
reserved.
|
||||
</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
<Tailwind
|
||||
config={{
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: "#ffffff",
|
||||
body: "#1e293b",
|
||||
muted: "#64748b",
|
||||
rule: "#e2e8f0",
|
||||
brand: {
|
||||
DEFAULT: "#009688",
|
||||
dark: "#00695c",
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
'"Segoe UI"',
|
||||
"Roboto",
|
||||
"Oxygen",
|
||||
"Ubuntu",
|
||||
"Cantarell",
|
||||
'"Fira Sans"',
|
||||
'"Droid Sans"',
|
||||
'"Helvetica Neue"',
|
||||
"sans-serif",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Html lang="en" dir="ltr">
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
</Head>
|
||||
{preview ? <Preview>{preview}</Preview> : null}
|
||||
<Body className="bg-surface font-sans text-body max-w-[560px] w-full mx-auto my-0 py-12 px-6">
|
||||
<Section>
|
||||
<Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
|
||||
<Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
|
||||
{project_name}
|
||||
</Text>
|
||||
</Section>
|
||||
<Section>{children}</Section>
|
||||
<Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
|
||||
<Section>
|
||||
<Text className="text-xs leading-5 text-muted m-0">
|
||||
© {new Date().getFullYear()} {project_name}. All rights reserved.
|
||||
</Text>
|
||||
</Section>
|
||||
</Body>
|
||||
</Html>
|
||||
</Tailwind>
|
||||
)
|
||||
}
|
||||
|
||||
const fontFamily =
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
|
||||
|
||||
const bodyStyle = {
|
||||
backgroundColor: "#f4f7f6",
|
||||
color: "#1e293b",
|
||||
fontFamily,
|
||||
margin: "0",
|
||||
padding: "32px 12px",
|
||||
}
|
||||
|
||||
const containerStyle = {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #dce7e5",
|
||||
borderRadius: "8px",
|
||||
boxSizing: "border-box" as const,
|
||||
margin: "0 auto",
|
||||
maxWidth: "560px",
|
||||
width: "100%",
|
||||
}
|
||||
|
||||
const contentStyle = {
|
||||
padding: "40px 36px 32px",
|
||||
}
|
||||
|
||||
const brandRuleStyle = {
|
||||
border: "0",
|
||||
borderTop: "3px solid #00897b",
|
||||
margin: "0 0 16px",
|
||||
width: "32px",
|
||||
}
|
||||
|
||||
const brandStyle = {
|
||||
color: "#334155",
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
letterSpacing: "1px",
|
||||
lineHeight: "20px",
|
||||
margin: "0 0 32px",
|
||||
textTransform: "uppercase" as const,
|
||||
}
|
||||
|
||||
const footerRuleStyle = {
|
||||
border: "0",
|
||||
borderTop: "1px solid #dce7e5",
|
||||
margin: "36px 0 18px",
|
||||
width: "100%",
|
||||
}
|
||||
|
||||
const footerStyle = {
|
||||
color: "#64748b",
|
||||
fontSize: "12px",
|
||||
lineHeight: "20px",
|
||||
margin: "0",
|
||||
}
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
import { Link as EmailLink } from "@react-email/components"
|
||||
|
||||
type LinkProps = React.PropsWithChildren & { href: string }
|
||||
|
||||
export const Link = ({ children, href }: LinkProps) => (
|
||||
<EmailLink href={href} style={linkStyle}>
|
||||
<a href={href} className="text-brand-dark underline break-all">
|
||||
{children}
|
||||
</EmailLink>
|
||||
</a>
|
||||
)
|
||||
|
||||
const linkStyle = {
|
||||
color: "#00695c",
|
||||
textDecoration: "underline",
|
||||
wordBreak: "break-all" as const,
|
||||
}
|
||||
|
||||
@@ -2,26 +2,10 @@
|
||||
|
||||
## Latest Changes
|
||||
|
||||
### Fixes
|
||||
|
||||
* 🐛 Fix Sonner toast theme sync. PR [#2450](https://github.com/fastapi/full-stack-fastapi-template/pull/2450) by [@chris-bs23](https://github.com/chris-bs23).
|
||||
* 🐛 Add background to the sticky layout header. PR [#2384](https://github.com/fastapi/full-stack-fastapi-template/pull/2384) by [@istoutjesdijk](https://github.com/istoutjesdijk).
|
||||
|
||||
### Refactors
|
||||
|
||||
* ✅ Simplify password reset E2E tests. PR [#2453](https://github.com/fastapi/full-stack-fastapi-template/pull/2453) by [@alejsdev](https://github.com/alejsdev).
|
||||
* 💄 Refactor email templates and components for improved styling. PR [#2451](https://github.com/fastapi/full-stack-fastapi-template/pull/2451) by [@alejsdev](https://github.com/alejsdev).
|
||||
* ♻️ Replace Mailcatcher with Mailpit for local email testing. PR [#2436](https://github.com/fastapi/full-stack-fastapi-template/pull/2436) by [@alejsdev](https://github.com/alejsdev).
|
||||
|
||||
### Docs
|
||||
|
||||
* 📝 Update README.md with Mailpit and React Email. PR [#2452](https://github.com/fastapi/full-stack-fastapi-template/pull/2452) by [@alejsdev](https://github.com/alejsdev).
|
||||
* 📝 Simplify project documentation. PR [#2442](https://github.com/fastapi/full-stack-fastapi-template/pull/2442) by [@tiangolo](https://github.com/tiangolo).
|
||||
|
||||
### Internal
|
||||
|
||||
* ⬆️ Bump setup-uv action to 10.0.1. PR [#2458](https://github.com/fastapi/full-stack-fastapi-template/pull/2458) by [@YuriiMotov](https://github.com/YuriiMotov).
|
||||
|
||||
## 0.12.0 (2026-08-12)
|
||||
|
||||
### Features
|
||||
|
||||
Reference in New Issue
Block a user