mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Monica Khoury
e143c94e5f
## What The custom SMTP password field showed a "Reveal" and "Copy" button next to text saying "this password cannot be viewed once saved" — contradictory, since those buttons implied there was something to reveal or copy. In reality the backend never returns the saved password, so the field was always blank and those buttons acted on an empty string. ## Why Reported in FE-3765: users found it confusing whether saving other fields would blank out their password, and the Reveal/Copy buttons appeared broken. ## Fix - Removed the non-functional Reveal/Copy buttons from the password input. - When a password is already saved, the field now shows a `••••••••••••••••` placeholder and copy reading "Stored password is hidden. Enter a new password to replace it." — matching the existing `STORED_SECRET_PLACEHOLDER` pattern already used in the Replication destination forms (BigQuery, ClickHouse, Snowflake, etc). - No behavior change: leaving the field blank on save still preserves the existing password (unchanged logic). ## Testing - Manually verified in the running app. - Added a component test (`SmtpForm.test.tsx`) covering both the "password already saved" and "fresh setup" states. - `tsc --noEmit`, `eslint`, and `prettier --check` all pass with no new errors/warnings. Fixes [FE-3765](https://linear.app/supabase/issue/FE-3765/custom-smtp-password-field-ux-issues) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Updates** * Configured SMTP passwords are masked, with a notice that entering a new password will replace the stored one. * For new SMTP setups, the password field prompts for the SMTP server password and does not show the stored-password notice. * The SMTP password field no longer provides controls to reveal or copy the password. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}