From b94bc612c39291c37f8332a030065c3e03a6687e Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Wed, 8 Apr 2026 10:14:33 -0400
Subject: [PATCH] implement logic for a show password button

---
 static/images/closed_eye.png       | Bin 0 -> 1596 bytes
 static/images/filled_eye.png       | Bin 0 -> 1249 bytes
 static/javascript/show_password.js |  22 +++++++++++++++++++
 static/style.css                   |  34 +++++++++++++++++++++++++++++
 4 files changed, 56 insertions(+)
 create mode 100644 static/images/closed_eye.png
 create mode 100644 static/images/filled_eye.png
 create mode 100644 static/javascript/show_password.js

diff --git a/static/images/closed_eye.png b/static/images/closed_eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c8d63863f3c7bf27066f3df361cdf540b8bbfb4
GIT binary patch
literal 1596
zcmcJQ`#%#30L5oEHs*3QGNc*hG4g&))W)oJQ+buCT=UpGqZ>lGyIV7vJeFsAk(9Wm
zlw?ekkRj#W%%etLqZgr;y6)d_Klg`o&gb*}>HKsK+w;&q6(wyY005w}pNRL~%+P-Y
zQP}iTk^)}<06e=NkMm9Xed*ePC^$~-`9u9_T&G<H=rr+xPTa4~CMZamk${QX1I&=P
ztLnim&U$;LfN*<Lx9(+>AVVF5`nh0zh@NXF^M2IJT<8?Ps;a5+PJk(A;Edmf?5A|$
zeereCDE$Zc9oF2~&XkH}fb600bRe{c(J~#*GUl}CLOimM{#Q^cjL>t4ebxB(cogeR
zb4JkM!J@*iYe09#8@gc--USZnb+F)CTM`Ha+IC&tYipMdqRYpI_+9B|ll*JST7D{X
zb`3<AXZq<9I9Tnh4lecKS2h#?zXS19AaIXL<D15PJh3A$O>8>s{DOY+cs!X@D!tdd
zqf<3A&C1rc?p%C)Ji#?^2-{GIs`3lhdU9`ff9v1CR$wrV_G4mnbhK%@RBb3NP2V5!
zNvoXkn$CGe5-QyA8&+p#efGu?=QHZS@@@<HES5f0|Hd_6tv(WeVFfXUP8SM=s$#J?
z@pIQi%4%OqJ!o;o-ZEFeIcau>@o6?{wq`_nV6&miTOw<sg)!jUH;u}X>+jW5lY3@w
zR4*x&zZgYHa;Y4>lBd`>c)z{9U5ZAd18*X7moXZ6(FBpzm&dI3(6sPB5AxMmwDjHr
zx}w`lb5gvkq);odF0gWT{yzKh<Hza?83~^UD{TPJoK{y>R+hP3t`V5(HAN+7W@T-R
zip5Rgat5N?)yM8?AC??TTmes!5F?cxkuQ<-;0wXZsR6{+)SqC2S@Dpv4ze1^sW7eT
z^`O9h`Q?40)AfN=(cy@$8E8W3C1MT21LNcq?=3hXY24N-QKpnW34*s*gqOcZ)Uxw+
zDFst77OD+{2v+IrW(*PkbTTYfzAA48daMCL<AH=bu2d@Z#>tqNJ?;(U<A^`Pt5qQ;
z%{vi-9xvGiOk@cYNM`v0+tQ!U-D>T$f#oTFR*%a9&dBNHpV&&4HNrq$LGo_E^e;4s
zik4GUh%Dr0Il9*Di8&0497Zb*drCnhb#MWxJZB3bUt21F#&MYDl}a*tnvHsd_(l(E
z&L?H-i&Wm(Re7PRVvS!VFb+`i%>};OGu9ntAqH)j2w^n3DRLFej1mTaV!_&+vG=3(
zkPZH1Q;gne6QaP(hWu6SYBwvac<{Fm6b<gPT5^nW@?==u3-{q2h8~kf?Rv0f%T;=^
z)^2n5BA6#1y!Y)fV40(Cx336v8X+iRBd(Q#PTjMlhJ|g9iH_!@j`}~qh^^iCWXP2%
zvkrQAq=-c#UZm9=EVHk#Z)sy=L-{gkMz$I?11++^9v2Hq3a!Zr_caRi&=tf;3YNFr
z@H$(ki=wlJzZFM!>|bABUmG7E?{<IK&qpMP`G`lbo>63wnVH!bDIj2Du~PB_+N}WM
ziHZtrzs#$J*E^LYWy@oeNiLx(Y4p~F-5_grNJ-l?c`e6<42AE~YKHsx_*jfCt={5O
z+EP~gQ&zR&0G$y`xwrh}tr5#m!`^w>ne^Kqien1Srw<VUCf1paj5tI|CX<Dn@jHU8
zO2x6>oJ^KD=QQ;kHO+LDf1&eOwMVuTn;YD7m6!P9DlawwwDViWVbXl6y=tvh@&P4-
zrEa#Pur0a(_ds)!)PK?Sh&Rf5G7KQt7W}Yxin}+4%|D0DmiFU-kmqZN6LiB4X)ALh
z;$ofFg7rJw%e1-0xQ@`m%B0(Kic=|BPaQaOiUzj?g*=__17j*rBvHr>^$`b7`QZtg
z=Dk2N@dU&EHjT{<EM2eW&^{64b(QdgF^<JRhKu^in^^o(TAqp8YlA+`{}cZuhn&ue
v*Vcq5Z!W)DD8+Rj-p$IMU`encVBGMQZtiYoS@oND008WFKZLJwC7=HX^o7{&

literal 0
HcmV?d00001

diff --git a/static/images/filled_eye.png b/static/images/filled_eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..c62aac8e690d3655661ce12d392b85cf86ff6a30
GIT binary patch
literal 1249
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$}jSVCnI6aSW-5dmC+?C+a9rqrXLG
zd0)=S#{HjoEf^%r85HY;I9!+*89P{%925k^gk+jpgbSEX-#;)()^e*(d)kJI7awoj
zeEII>%(Yujy*yVI9$xzOjNN-a_CL)@2^_6$32Y)PYdAGHSQ(QUc=%+U91ln^G&{Ek
z2pF&(cyK{cgr$ekz@mgA>Ds~*JB9N<d_BY%6C1l12>#ymWXP0|kW*;T(bcuRbNhC+
zcIx^EyUzW5A=PkQLu+B6`kj(VCL5kB9r^U>Q}f-scljS@S?peGWxrK8s^!D6jt0e7
z8Sj&lJGZD@IrLR}y-2jEkLe@_(L0-NIy}(P^ti~Bo}O+mD=&ZF_sz3uzq%gz&9&2M
z2sT`r>@c@FHTCJebLY;vb2fCEzKS^%nAUll>%Q%R1p?WAna_`L=}o;ZwOw#|`i8JW
z*REgB&&kWHGcGA#Cooy_swwx}m3_C5w0a99gnv1wE7!Ed>c*_YhYNEJyB=`KCiGTc
zw23rVpOe^UYj6Mm(}xcqBA4vdEu7u5@rY!5h|?P#$1a9n!G$_ye4Tp*jz%TiKO#|T
zwnszE(W^_ax^3fwDgSyN3*PP(=AI$+c*)vk+i$zByxIQ2KywGTew2cqXY@Q*ubwH(
zN+wrsvGKTT9;M!=A9tf@(WN6Ew&LGnC)_w8x;w@zEi>JuZ%u1!t2jG5`}trksddwf
zJW9U!`TG8~v9{hl=@6H0$Km2hC0jfyJwDFdEAG`8(-wGX+eYuo30z5bx?YVXMw?zt
z*zs?==LD%d^UtcK9^YO%zW91+_S(uR93Rs^FA-F+p1EMfx?SO?o4;%b_+qK@n}t!K
zqjHMG#_sv{S5Ecjap;TZv`pvDb7iP1iSnF2rR(m?{K(wJ-ggCg4_#B!-QKD9fv^4W
z!Jj|tFI?St)x1aW#Whh;7fsVucPvi`F46bPRLLzY{P^+TzkkvP?=84{VDmDUbqZ@2
zojG%+#@^C$XPVBfJGBpar@sc`^__dJ-MU?n+Bvayb3x71C!V7DS8n}T|5`+D^@;k|
zC-@AyOl)ocKK}CMOIFXq52;t?0&&~KgCc^nHoTg3{o1v>yxiPc%_lqR53M@LspUU0
z{p`%H*-c?u>rL~N<E|%&x<$NFxEQiztD7ftM6&zr<F*T&rp(!!YG7{u{nd*XFFb=&
zAKrRh@HX?5(Ztt6ikmiUf2gH-LSy}s15y@2zdQ=Wgp*j-i3tiEHPcW!8rr))s_Dv{
zzj1yN{lUG<vpT0#dv{&we*Lifw)?~1-^w3%AD+JRI}pEjWxUkA>T|GdB4^^IJ*&b?
zj(Mkds%u<2S7ds)Nm^k?1H;9s*+%uY0vT)Ko76nkFzK@&yw1%Za6kF)zUHQem+p=l
z91_e41uq1+n2s?>$XK;BH5f9mweu}hNZ@HWxX_sr>7T68Ob=3>f_2=1#gjlvs*}5+
ip@F%Xqp_>2i;<a|o1v+w#a}0&9D}E;pUXO@geCy6(<q(*

literal 0
HcmV?d00001

diff --git a/static/javascript/show_password.js b/static/javascript/show_password.js
new file mode 100644
index 0000000..59c650f
--- /dev/null
+++ b/static/javascript/show_password.js
@@ -0,0 +1,22 @@
+const showPasswordButtons = document.getElementsByClassName(
+  "show_password_toggle",
+);
+
+for (const button of showPasswordButtons) {
+  button.addEventListener("click", function () {
+    const input = this.parentElement.querySelector(
+      "input[type='password'], input[type='text']",
+    );
+    if (!input) return;
+    const isHidden = input.type === "password";
+    input.type = isHidden ? "text" : "password";
+
+    if (isHidden) {
+      this.classList.add("open");
+      this.classList.remove("closed");
+    } else {
+      this.classList.remove("open");
+      this.classList.add("closed");
+    }
+  });
+}
diff --git a/static/style.css b/static/style.css
index 7186af3..868d417 100644
--- a/static/style.css
+++ b/static/style.css
@@ -95,3 +95,37 @@ input::placeholder {
     margin-bottom: 0px;
     color: var(--text-main) !important;
 }
+
+.password_box {
+    position: relative;
+    display: inline-block;
+}
+
+.show_password_toggle {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: 5px;
+    bottom: 50%;
+    transform: translateY(50%);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.show_password_toggle.closed {
+    background-image: url("/static/images/closed_eye.png");
+}
+
+.show_password_toggle.open {
+    background-image: url("/static/images/filled_eye.png");
+}
+
+.show_password_toggle:hover {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.show_password_toggle:focus {
+    outline: none !important;
+}