abhirajadhikary06 / abhirajadhikary06/openfeedback

Enhancement: Add Password Visibility Toggle on Login Form

Aberta Para iniciantes
#45 3 comentários 0 reações 1 responsável Reivindicada por @Shyam-45 Ver no GitHub
apertre3.0 medium
Linguagem predominante
HTML
Estrelas
8
Forks
15
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

### 📌 Description
The current login form does not provide an option to toggle password visibility.

Users cannot verify the password they are typing, which may lead to input errors and reduced usability.

Modern authentication interfaces commonly include an eye icon inside the password field to allow users to toggle between hidden and visible password states.

---

### 🎯 Expected Behavior
- Add an eye icon inside or adjacent to the password input field.
- Allow users to toggle between:
- `type="password"` (hidden)
- `type="text"` (visible)
- Ensure the toggle does not affect form submission logic.
- Maintain consistent styling with the existing UI design.

---

### 💡 Proposed Implementation
- Wrap the password input inside a relative container.
- Add a clickable toggle icon.
- Use JavaScript to switch the input type dynamically.

Example logic:

```javascript
function togglePassword() {
const passwordField = document.getElementById("password");
passwordField.type = passwordField.type === "password" ? "text" : "password";
}

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Examine o HTML e o CSS do formulário de login para entender a estrutura e a estilização atuais. A issue fornece uma lógica de exemplo em JavaScript para alternar o tipo do campo de senha. Você precisará adicionar um ícone de olho (provavelmente usando uma biblioteca de ícones existente ou um SVG simples) e associar o handler de clique a ele. Garanta que o novo elemento corresponda ao design de UI existente. Teste se a alternância funciona e não interfere no envio do formulário.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
css, html, javascript
Domínio
authentication, frontend
Tipo de issue
Funcionalidade
Dificuldade
2/5
Tempo estimado
1-3 horas
Status de atividade
Estagnada
Clareza
Claramente especificada
Facilidade para iniciantes
65/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.