show/hide password logic fixed (#41694)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

This PR changes the logic for show/hide password icon in the sign up
form. Fix #39399 and #41459

## What is the current behavior?
For Password Field Eye Icon Label
<ul>
<li>When password is hidden: Button shows "Hide password" label
(incorrect).
<li>When password is visible: Button shows "Show password" label
(incorrect)
</ul>
For Edge Functions Secrets
<ul>
<li>All secret values are always visible in plain text
<li>No visibility toggle functionality exists
<li>No way to hide/show individual secret values
</ul>

## What is the new behavior?

Sign-up Form Password Field:
<ul>
<li>When password is hidden: Button correctly shows "Show password"
label
<li>When password is visible: Button correctly shows "Hide password"
label</ul>
Labels now accurately describe what clicking the button will do 
<p></p>
Edge Functions Secrets:
<ul>
<li>Secret values are hidden by default (security-first approach)
<li>Each secret has its own independent visibility toggle button
<li>Hidden secrets display as bullet points (•••••••••••••••••••••)
<li>Eye icon appears when secret is hidden - click to reveal
<li>EyeOff icon appears when secret is visible - click to hide
<li>Tooltip shows "Hidden" when value is masked, actual value when
visible</ul>

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
This commit is contained in:
Shashwat Raj
2026-03-10 07:51:17 -07:00
committed by GitHub
parent 64e800c0c1
commit 68e6edd5e6
2 changed files with 11 additions and 12 deletions

View File

@@ -1,9 +1,8 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Edit2, MoreVertical, Trash } from 'lucide-react'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import type { ProjectSecret } from 'data/secrets/secrets-query'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { Edit2, MoreVertical, Trash } from 'lucide-react'
import {
Button,
DropdownMenu,