Merge branch 'showable-password' into 'develop'

Create ShowablePassword component

See merge request soapbox-pub/soapbox-fe!916

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"

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"

app/soapbox/locales/pl.json

@@ -424,6 +424,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.",

app/styles/about.scss

@@ -97,6 +97,7 @@ $fluid-breakpoint: $maximum-width + 20px;
           }
 
           .input {
+            flex: 1;
             margin-bottom: 0;
             margin-right: 10px;
 

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 {