From ad6ab3c023ce21523b2f19d903f4a8e67c785de2 Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Tue, 27 Aug 2024 18:23:00 +0300 Subject: [PATCH 1/6] install password visibility package install password visibility package using importmap --- config/importmap.rb | 1 + vendor/javascript/@stimulus-components--password-visibility.js | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 vendor/javascript/@stimulus-components--password-visibility.js diff --git a/config/importmap.rb b/config/importmap.rb index 2fb8a2af..4d309db2 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -10,3 +10,4 @@ pin_all_from "app/javascript/custom", under: "custom" pin "trix" pin "@rails/actiontext", to: "actiontext.esm.js" +pin "@stimulus-components/password-visibility", to: "@stimulus-components--password-visibility.js" # @3.0.0 diff --git a/vendor/javascript/@stimulus-components--password-visibility.js b/vendor/javascript/@stimulus-components--password-visibility.js new file mode 100644 index 00000000..649eaf92 --- /dev/null +++ b/vendor/javascript/@stimulus-components--password-visibility.js @@ -0,0 +1,2 @@ +import{Controller as s}from"@hotwired/stimulus";const t=class _PasswordVisibility extends s{connect(){this.hidden=this.inputTarget.type==="password",this.class=this.hasHiddenClass?this.hiddenClass:"hidden"}toggle(s){s.preventDefault(),this.inputTarget.type=this.hidden?"text":"password",this.hidden=!this.hidden,this.iconTargets.forEach((s=>s.classList.toggle(this.class)))}};t.targets=["input","icon"],t.classes=["hidden"];let i=t;export{i as default}; + From 54eeba20bd2abff9cfef33ee6ca99a3d78d2119a Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Tue, 27 Aug 2024 18:36:33 +0300 Subject: [PATCH 2/6] register the password visibility controller in the application --- app/javascript/controllers/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 632444b6..5ac2df52 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -5,9 +5,11 @@ import { application } from 'controllers/application' // Eager load all controllers defined in the import map under controllers/**/*_controller import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading' import Dropdown from '@stimulus-components/dropdown' +import PasswordVisibility from '@stimulus-components/password-visibility' // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!) // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading" // lazyLoadControllersFrom("controllers", application) eagerLoadControllersFrom('controllers', application) application.register('dropdown', Dropdown) +application.register('password-visibility', PasswordVisibility) From 89ac5a2c7829849e697da37104f956e33db1a304 Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Tue, 27 Aug 2024 18:42:11 +0300 Subject: [PATCH 3/6] conect data-visibility controller to the password field --- app/views/user_sessions/new.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb index cd294413..e47d3ca0 100644 --- a/app/views/user_sessions/new.html.erb +++ b/app/views/user_sessions/new.html.erb @@ -14,9 +14,9 @@ <%= form.email_field :email, required: true, placeholder: "email@example.com", data: { test_id: "email_field" } %> -
+
<%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field" } %> + <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %>
From 3aceee62265729ccb19c7e140f416d1bc963882a Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Tue, 27 Aug 2024 18:54:49 +0300 Subject: [PATCH 4/6] add visibility toggle button --- app/views/user_sessions/new.html.erb | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb index e47d3ca0..8786d86f 100644 --- a/app/views/user_sessions/new.html.erb +++ b/app/views/user_sessions/new.html.erb @@ -14,9 +14,15 @@ <%= form.email_field :email, required: true, placeholder: "email@example.com", data: { test_id: "email_field" } %> -
+
<%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %> +
+ <%= form.password_field :password, required: true, class: "w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %> + +
From 91201bbf743e9d1ec3a50060baa53be7e481b765 Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Wed, 28 Aug 2024 10:12:59 +0300 Subject: [PATCH 5/6] add icons and style it in the password field --- app/assets/images/icons/eye-empty.svg | 4 ++++ app/assets/images/icons/eye-off.svg | 6 ++++++ app/views/user_sessions/new.html.erb | 6 +++--- 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 app/assets/images/icons/eye-empty.svg create mode 100644 app/assets/images/icons/eye-off.svg diff --git a/app/assets/images/icons/eye-empty.svg b/app/assets/images/icons/eye-empty.svg new file mode 100644 index 00000000..0eef4117 --- /dev/null +++ b/app/assets/images/icons/eye-empty.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/icons/eye-off.svg b/app/assets/images/icons/eye-off.svg new file mode 100644 index 00000000..617fedc7 --- /dev/null +++ b/app/assets/images/icons/eye-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb index 8786d86f..499de47b 100644 --- a/app/views/user_sessions/new.html.erb +++ b/app/views/user_sessions/new.html.erb @@ -18,9 +18,9 @@ <%= form.label :password, class: "text-white italic font-bold mb-2" %>
<%= form.password_field :password, required: true, class: "w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %> -
From 0984687f76a85d7bad10faa12bbdb0849dad7fcf Mon Sep 17 00:00:00 2001 From: Wuletaw Wonte Date: Wed, 28 Aug 2024 10:26:59 +0300 Subject: [PATCH 6/6] style eye icon hover and peer focus states --- app/views/user_sessions/new.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb index 499de47b..e3c1ffc6 100644 --- a/app/views/user_sessions/new.html.erb +++ b/app/views/user_sessions/new.html.erb @@ -17,10 +17,10 @@
<%= form.label :password, class: "text-white italic font-bold mb-2" %>
- <%= form.password_field :password, required: true, class: "w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %> -