RocketChat / RocketChat/Rocket.Chat

feat: Add fallback placeholder for the login password field

Open Beginner friendly
#42,145 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: feature
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Proposed changes

Add a fallback translation to the password placeholder in LoginForm.tsx

Currently, the login password field uses:
placeholder={passwordPlaceholder}

If Accounts_PasswordPlaceholder has not been configured by the administrator, passwordPlaceholder can be empty, causing the password input to render without placeholder text.

As you can clearly see here the placeholder is not there in password field.
so its a good upgrade for the UI to stay presentable

Image

Steps to reproduce :

  1. Open the Rocket.Chat login page.
  2. Ensure Accounts_PasswordPlaceholder is not configured.
  3. Observe the username/email input.
  4. Observe the password input.
  5. Compare the placeholder behavior of both fields.
  6. The username/email field displays its fallback placeholder, while the password field has no placeholder text.

Before proof :

Current implementation in LoginForm.tsx:
placeholder={passwordPlaceholder}

When passwordPlaceholder is empty, the rendered password field has no placeholder.

Meanwhile, the username/email field uses:

placeholder={
usernameOrEmailPlaceholder ||
t('registration.component.form.emailPlaceholder')
}

and therefore still displays a fallback.

After proof

Expected implementation:

placeholder={
passwordPlaceholder ||
t('registration.component.form.passwordPlaceholder')
}

Expected result:

Username / Email
[ example@example.com ]

Password
[ Enter your password ]

i would like to work on this and make this changes

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in LoginForm.tsx and compare the password field with the username/email field's existing fallback placeholder behavior. Reproduce the login page with Accounts_PasswordPlaceholder unset, then verify the password input displays the fallback text while preserving the configured placeholder when one exists.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.