improve user password reset

app/javascript/application.js

@@ -39,6 +39,7 @@ import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
 import MountOnClick from './elements/mount_on_click'
+import VisibleOnInput from './elements/visible_on_input'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -113,6 +114,7 @@ safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
+safeRegisterElement('visible-on-input', VisibleOnInput)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/visible_on_input.js

@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input = document.getElementById(this.dataset.inputId)
+
+    this.input.addEventListener('input', () => {
+      if (this.input.value.trim().length > 0) {
+        this.classList.remove('hidden')
+      } else {
+        this.classList.add('hidden')
+        this.querySelectorAll('input').forEach(input => { input.value = '' })
+      }
+    })
+  }
+}