From 4274b13aa7dfa0cb1fb6bbe68c2bc32423be938c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 15 Dec 2021 15:26:34 +0100
Subject: [PATCH 1/3] Add ShowablePassword component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/showable_password.js   | Bin 0 -> 1959 bytes
 .../auth_login/components/login_form.js       | Bin 2930 -> 3048 bytes
 .../components/registration_form.js           | Bin 10728 -> 10807 bytes
 app/soapbox/features/security/index.js        | Bin 13576 -> 13655 bytes
 app/soapbox/features/security/mfa_form.js     | Bin 11436 -> 11500 bytes
 app/soapbox/locales/pl.json                   |   2 ++
 app/styles/about.scss                         |   1 +
 app/styles/forms.scss                         |  25 ++++++++++++++++++
 8 files changed, 28 insertions(+)
 create mode 100644 app/soapbox/components/showable_password.js

diff --git a/app/soapbox/components/showable_password.js b/app/soapbox/components/showable_password.js
new file mode 100644
index 0000000000000000000000000000000000000000..a6dbdad242f0dda6081825730767e5e5c87e1621
GIT binary patch
literal 1959
zcmb_d!EW0y487+oxRV{gvF};j77H*ez%~?Zv1{QtbfV3XGD&Gu82<N>k}caq+g+AJ
zk&sX1BOl3%<4I`?cUY7bDy@zXY5pF4oC)vR9FJ#PY-_wdYg{WbN|Y1qLiCWui7<<@
z2Ms|Q*kL6kenVr5J(>iB{E4OANLxcYPP`Cg8Xn$ib$WO?q3JLu`n|Ah7%*jB81ub2
z29PsIHVmLmspO}#wMur8j4DoBb;$x-lL^8+ZXIZN*uZC{kAX)58+kh0wUV}=f^-63
zi!IhuV<@RlQek1KH72Vl7PFdBDr12tx_&_ZSA*ha24D{A`Ic&XR(iLD1_b?$T!fTe
zkEhNTCH%TL*S6~~!R`qF0RU}6@eX2#Z^UEQyYapdU>dKTQyF-1^V6k=n?cr@QvsNV
zo1Ts<;Kicc8F*u^ni&^v3oA-svAy^?a6f>i#@0&+Vx(%zQ<MsGhriE4<BrP&s9BQb
zRJha`y+2IMIF_+m$h`*~DACv_)egM}wN`rU+A3AEtL=#+iRsyDe8QqeQmra#;{rI8
zRr`I7cg{=Tcn<khUtk5XJqVL>?Iu<7!C`+0BetRz_GR7y0p5khBo23?1*FW=HwNuJ
zH5lUt28JJ8IBq<qy%ktu7p1RHlXR$wurJULF%2fklF)cbn}BOj;w4BRbUJ}F^+ge<
zd_>-7=pzlOdyu0<lg2ze%451^ruI1(z-n0W&O(Ev%e)COuc=-)CUJD*PMUTr?-$=>
z_=2f<+DCI({u8)RRpr5LNT%ev7Ui$JajhJSJYcM_HRcUBEagou`jw4GEc>gFju)0l
z1^f6g%=_Tkm1DwN$-UA@7e|h|GdWw(kQ~DV(U@GUF4lZW^CpO9;)ql6{w~5T8HqY?
zeNN8Txc!3bkdck6*N&qD<{m!^;P8T3I&y9STHsqhkub7EHKJ}rfl&)x?HqzXo#cK*
o`u?zEmAyh}sDYJ_SHo|5@IMH>L1&d+1@Ttd^gl?@(jAue4}jZ*O#lD@

literal 0
HcmV?d00001

diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index 842e38832e8691e171ac1926552ad5475c141bff..fbfe4afb3aad45abe0c5f0185174ad8b23ce56fa 100644
GIT binary patch
delta 194
zcmew)_CkC^GNV&wZb5!gi9&EjetBY2PHI46adCNmQHnxZQGTw1dU1YYK~jE&esVrg
zSzc;hNwI!0RAqbtRO#jfMmbhNbOX31KVUJN{F6;`vIx5{n?h-EYEk@Td3K4(QLLI^
z;d!iVlbeD3x$JV2<=I##-)EHp(@)u@fwb~ubq>+V(QN$8)%seK=d*}Up3G)5*^Wb$
OML|oyc5^U?JTm|;7(o{R

delta 73
zcmaDM{z+^@GUMhIjMA)=ceC(M&f{>JY{;rLxt3jWvLd_aWEXaU$#Yq?!Tc%g3X}h`
aa!lUEE-~4Gjbri+c4;8py!kqZATt1gP#1gv

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index a4c52ef62ed5bf9ea2e6c90a55816c72a1a4f346..ff8c987ae5cc4c606a617b8389fbaa634a836dc4 100644
GIT binary patch
delta 122
zcmaD6ygg(?5~Fo+Mt*r>Qch|>VsUYKeo=}-T2X$kf_ia&VnI@Vg?@5=Zb5!tYF<gP
kelb*Kd;wJH<_Jc1S$;JAlcl7rHZPWIWyC6xqfo;M0D_b*cK`qY

delta 30
jcmdlU@*;Rc665COjDKY&o5;9qek<3?2xjb7sNn<v(vS>u

diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index 2327f70a421e07d5aa9b3a4fbb794c578f5594b7..f54ed2a6bfff688fb44c61a9916b8ad92a2606b7 100644
GIT binary patch
delta 186
zcmeCkx}LRR3Zp=9Mt*r>Qch|>VsUYKeo@NgEJi88VyIwz0Zg=uQD*a2#-Aem=*k@x
q0w%AM<=8AB&dZKfvRrO6R`C{j4Drp53Uh?8Du&qLz&N?yq!R!+#YUe1

delta 130
zcmcbf)seMf3ghIPj6&SOnYjfysh)WSr6rr6GyWA}1@k9A6cw2~OTlq-o3RJuWPPRH
m$x?z+n~fyZSW)FCZ<pJQCUR09No4aZg<c_41wbP&G6Db$12VV(

diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 79c86551cdb22f61305375b005fa9e260eabc14d..816abab8abef2eb335f70c1e8b9dd0fd4f118511 100644
GIT binary patch
delta 109
zcmZ1z`6hD1E+&ECjQsM%q@2`%#Ny)e{Gyb}cNwJwi=l$?1u)SKOfs8qGwl@MM^nCe
co^YNRy5QtO8R5yRg=Hq!$*^tq)=Fdo0Fuutng9R*

delta 83
zcmaD8xh8VME+*M(E(L|)%-n*URJZ)1Tpc*iGq0euWHT@GUIA{fESS$VIaW(!a<`Vu
RW;qc}F)oC}<}j^kOaS9s9T@-s

diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 8aea88a1bc..f240e4ab49 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -402,6 +402,8 @@
   "follow_request.authorize": "Autoryzuj",
   "follow_request.reject": "Odrzuć",
   "forms.copy": "Kopiuj",
+  "forms.hide_password": "Ukryj hasło",
+  "forms.show_password": "Pokaż hasło",
   "getting_started.open_source_notice": "{code_name} jest oprogramowaniem o otwartym źródle. Możesz pomóc w rozwoju lub zgłaszać błędy na GitLabie tutaj: {code_link} (v{code_version}).",
   "group.detail.archived_group": "Zarchiwizowana grupa",
   "group.members.empty": "Ta grupa nie ma żadnych członków.",
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 53a20ac9d5..339151f625 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -97,6 +97,7 @@ $fluid-breakpoint: $maximum-width + 20px;
           }
 
           .input {
+            flex: 1;
             margin-bottom: 0;
             margin-right: 10px;
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index b28676a323..67ca9ce347 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -608,6 +608,31 @@ code {
     margin-bottom: 14px;
     font-weight: bold;
   }
+
+  .showable-password {
+    position: relative;
+
+    input {
+      padding-right: 36px;
+    }
+
+    .icon-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 41px;
+      width: 36px;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      color: var(--primary-text-color);
+
+      .svg-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
 }
 
 .block-icon {

From a1c7da7f62c22ad0db8e5e5b5c0f6b3ca0cde419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 15 Dec 2021 15:29:25 +0100
Subject: [PATCH 2/3] no point in passing type=password
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../auth_login/components/login_form.js       | Bin 3048 -> 3018 bytes
 .../components/registration_form.js           | Bin 10807 -> 10743 bytes
 app/soapbox/features/security/index.js        | Bin 13655 -> 13505 bytes
 app/soapbox/features/security/mfa_form.js     | Bin 11500 -> 11438 bytes
 4 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index fbfe4afb3aad45abe0c5f0185174ad8b23ce56fa..8368cbb68558d3a37f69038fd9dc54401d0771db 100644
GIT binary patch
delta 16
YcmaDMeoB19H1^5=S=l!4V%K8<06$&^aR2}S

delta 27
jcmX>l{z81iG<LR<%7Ro|^~pBu5|jV4vTdHjuEzoZk~0Zy

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index ff8c987ae5cc4c606a617b8389fbaa634a836dc4..f0d27c297649f8589bfb9549086b2c7b5b80bbc7 100644
GIT binary patch
delta 37
ncmdlU@;!KihWuoHS=PztWy&VcRpi`!M&67OCa`&~;w%mT78ecw

delta 29
jcmew!ygg)thCFjgWx-}{`Rj}z#$;~!g`3k9CvpG)upA2W

diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index f54ed2a6bfff688fb44c61a9916b8ad92a2606b7..e19b1f0b7108314d85e84989904b4863d3ce505a 100644
GIT binary patch
delta 46
ucmcbfbue=SllW!@@i6wu3gXI>x654w(<kM@^yb?NSwcYBY{tpwOgaIbs}W`Z

delta 91
zcmX?@c|B_blQ?rpWx-@`ap}np3d);57<n*m&Xsu0iYz+0TJ9nWKVKfs-|V2!D}*cw
IG~yy70O-0PO8@`>

diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 816abab8abef2eb335f70c1e8b9dd0fd4f118511..78525af772567f63c4eb5305d7fd8d3db53ff834 100644
GIT binary patch
delta 21
dcmaD8xh`_UGvUeIS~8pEM7+f|cWWgw0RU|+2x|ZU

delta 41
scmZ1%`6hD1GhybE%7V!OT9T7}wPYr%YU*s(6Ok8#3d(Qx)k<Un07|tD@&Et;


From 81abb7d49e349a5333733fd7b8f1027068a9f831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 15 Dec 2021 15:39:07 +0100
Subject: [PATCH 3/3] update snapshots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../__snapshots__/login_form-test.js.snap     | 66 +++++++++++++++++--
 .../__snapshots__/login_page-test.js.snap     | 33 +++++++++-
 2 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
index ad357af030..0588d8a02f 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
@@ -25,19 +25,48 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"
@@ -89,19 +118,48 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"
diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
index 949f715e2c..0084bc159d 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
@@ -28,19 +28,48 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
         />
       </div>
       <div
-        className="input password user_password"
+        className="input required showable-password password user_password"
       >
         <input
           aria-label="Password"
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="password"
           name="password"
           placeholder="Password"
           required={true}
           type="password"
         />
+        <button
+          aria-label="Show password"
+          className="icon-button"
+          disabled={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          title="Show password"
+        >
+          <div
+            style={Object {}}
+          >
+            <div
+              className="svg-icon"
+            >
+              <svg
+                id={
+                  Object {
+                    "process": [Function],
+                  }
+                }
+              />
+            </div>
+          </div>
+        </button>
       </div>
       <p
         className="hint subtle-hint"