diff --git a/bookwyrm/static/css/fonts/icomoon.eot b/bookwyrm/static/css/fonts/icomoon.eot
index b86375a90..33dc07eec 100644
Binary files a/bookwyrm/static/css/fonts/icomoon.eot and b/bookwyrm/static/css/fonts/icomoon.eot differ
diff --git a/bookwyrm/static/css/fonts/icomoon.svg b/bookwyrm/static/css/fonts/icomoon.svg
index a3c902a07..058c19226 100644
--- a/bookwyrm/static/css/fonts/icomoon.svg
+++ b/bookwyrm/static/css/fonts/icomoon.svg
@@ -43,6 +43,8 @@
+
+
diff --git a/bookwyrm/static/css/fonts/icomoon.ttf b/bookwyrm/static/css/fonts/icomoon.ttf
index edcbd3b75..89d3be8fa 100644
Binary files a/bookwyrm/static/css/fonts/icomoon.ttf and b/bookwyrm/static/css/fonts/icomoon.ttf differ
diff --git a/bookwyrm/static/css/fonts/icomoon.woff b/bookwyrm/static/css/fonts/icomoon.woff
index 47d4bffb5..95325ab4a 100644
Binary files a/bookwyrm/static/css/fonts/icomoon.woff and b/bookwyrm/static/css/fonts/icomoon.woff differ
diff --git a/bookwyrm/static/css/vendor/icons.css b/bookwyrm/static/css/vendor/icons.css
index b661ce8e7..6af5c2813 100644
--- a/bookwyrm/static/css/vendor/icons.css
+++ b/bookwyrm/static/css/vendor/icons.css
@@ -155,3 +155,9 @@
.icon-barcode:before {
content: "\e937";
}
+.icon-eye:before {
+ content: "\e9ce";
+}
+.icon-eye-blocked:before {
+ content: "\e9d1";
+}
diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index 67d64688f..a2351a98c 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -30,6 +30,12 @@ let BookWyrm = new (class {
.querySelectorAll("[data-back]")
.forEach((button) => button.addEventListener("click", this.back));
+ document
+ .querySelectorAll("[data-password-icon]")
+ .forEach((button) =>
+ button.addEventListener("click", this.togglePasswordVisibility.bind(this))
+ );
+
document
.querySelectorAll('input[type="file"]')
.forEach((node) => node.addEventListener("change", this.disableIfTooLarge.bind(this)));
@@ -820,4 +826,24 @@ let BookWyrm = new (class {
form.querySelector('input[name="preferred_timezone"]').value = tz;
}
+
+ togglePasswordVisibility(event) {
+ const iconElement = event.currentTarget.getElementsByTagName("button")[0];
+ const passwordElementId = event.currentTarget.dataset.for;
+ const passwordInputElement = document.getElementById(passwordElementId);
+
+ if (!passwordInputElement) return;
+
+ if (passwordInputElement.type === "password") {
+ passwordInputElement.type = "text";
+ this.addRemoveClass(iconElement, "icon-eye-blocked");
+ this.addRemoveClass(iconElement, "icon-eye", true);
+ } else {
+ passwordInputElement.type = "password";
+ this.addRemoveClass(iconElement, "icon-eye");
+ this.addRemoveClass(iconElement, "icon-eye-blocked", true);
+ }
+
+ this.toggleFocus(passwordElementId);
+ }
})();
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index ba53685f4..b8459856c 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -130,7 +130,12 @@