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   | 64 +++++++++++++++++++
 .../auth_login/components/login_form.js       | 25 ++++----
 .../components/registration_form.js           |  5 +-
 app/soapbox/features/security/index.js        | 12 ++--
 app/soapbox/features/security/mfa_form.js     |  6 +-
 app/soapbox/locales/pl.json                   |  2 +
 app/styles/about.scss                         |  1 +
 app/styles/forms.scss                         | 25 ++++++++
 8 files changed, 118 insertions(+), 22 deletions(-)
 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 000000000..a6dbdad24
--- /dev/null
+++ b/app/soapbox/components/showable_password.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import IconButton from 'soapbox/components/icon_button';
+import { FormPropTypes, InputContainer, LabelInputContainer } from 'soapbox/features/forms';
+
+const messages = defineMessages({
+  showPassword: { id: 'forms.show_password', defaultMessage: 'Show password' },
+  hidePassword: { id: 'forms.hide_password', defaultMessage: 'Hide password' },
+});
+
+export default @injectIntl
+class ShowablePassword extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    label: FormPropTypes.label,
+    className: PropTypes.string,
+    hint: PropTypes.node,
+    error: PropTypes.bool,
+  }
+
+  state = {
+    revealed: false,
+  }
+
+  toggleReveal = () => {
+    if (this.props.onToggleVisibility) {
+      this.props.onToggleVisibility();
+    } else {
+      this.setState({ revealed: !this.state.revealed });
+    }
+  }
+
+  render() {
+    const { intl, hint, error, label, className, ...props } = this.props;
+    const { revealed } = this.state;
+
+    const revealButton = (
+      <IconButton
+        src={revealed ? require('@tabler/icons/icons/eye.svg') : require('@tabler/icons/icons/eye-off.svg')}
+        onClick={this.toggleReveal}
+        title={intl.formatMessage(revealed ? messages.hidePassword : messages.showPassword)}
+      />
+    );
+
+    return (
+      <InputContainer {...this.props} extraClass={classNames('showable-password', className)}>
+        {label ? (
+          <LabelInputContainer label={label}>
+            <input {...props} type={revealed ? 'text' : 'password'} />
+            {revealButton}
+          </LabelInputContainer>
+        ) : (<>
+          <input {...props} type={revealed ? 'text' : 'password'} />
+          {revealButton}
+        </>)}
+      </InputContainer>
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index 842e38832..fbfe4afb3 100644
--- a/app/soapbox/features/auth_login/components/login_form.js
+++ b/app/soapbox/features/auth_login/components/login_form.js
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { getFeatures } from 'soapbox/utils/features';
 import { getBaseURL } from 'soapbox/utils/state';
+import ShowablePassword from 'soapbox/components/showable_password';
 
 const messages = defineMessages({
   username: { id: 'login.fields.username_placeholder', defaultMessage: 'Username' },
@@ -45,19 +46,21 @@ class LoginForm extends ImmutablePureComponent {
                 required
               />
             </div>
-            <div className='input password user_password'>
+            <ShowablePassword
+              aria-label={intl.formatMessage(messages.password)}
+              className='password user_password'
+              placeholder={intl.formatMessage(messages.password)}
+              type='password'
+              name='password'
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              required
+            />
+            {/* <div className='input password user_password'>
               <input
-                aria-label={intl.formatMessage(messages.password)}
-                className='password'
-                placeholder={intl.formatMessage(messages.password)}
-                type='password'
-                name='password'
-                autoComplete='off'
-                autoCorrect='off'
-                autoCapitalize='off'
-                required
               />
-            </div>
+            </div> */}
             <p className='hint subtle-hint'>
               {hasResetPasswordAPI ? (
                 <Link to='/auth/reset_password'>
diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index a4c52ef62..ff8c987ae 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
   SimpleInput,
@@ -231,7 +232,7 @@ class RegistrationForm extends ImmutablePureComponent {
                   <FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
                 </div>
               )}
-              <SimpleInput
+              <ShowablePassword
                 placeholder={intl.formatMessage(messages.password)}
                 name='password'
                 type='password'
@@ -243,7 +244,7 @@ class RegistrationForm extends ImmutablePureComponent {
                 error={passwordMismatch === true}
                 required
               />
-              <SimpleInput
+              <ShowablePassword
                 placeholder={intl.formatMessage(messages.confirm)}
                 name='password_confirmation'
                 type='password'
diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index 2327f70a4..f54ed2a6b 100644
--- a/app/soapbox/features/security/index.js
+++ b/app/soapbox/features/security/index.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../ui/components/column';
 import Button from 'soapbox/components/button';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
-  SimpleInput,
   FieldsGroup,
   TextInput,
 } from 'soapbox/features/forms';
@@ -141,7 +141,7 @@ class ChangeEmailForm extends ImmutablePureComponent {
               onChange={this.handleInputChange}
               value={this.state.email}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
@@ -208,21 +208,21 @@ class ChangePasswordForm extends ImmutablePureComponent {
         <h2>{intl.formatMessage(messages.passwordHeader)}</h2>
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.oldPasswordFieldLabel)}
               name='oldPassword'
               onChange={this.handleInputChange}
               value={this.state.oldPassword}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.newPasswordFieldLabel)}
               name='newPassword'
               onChange={this.handleInputChange}
               value={this.state.newPassword}
             />
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.confirmationFieldLabel)}
               name='confirmation'
@@ -392,7 +392,7 @@ class DeactivateAccount extends ImmutablePureComponent {
         </p>
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
-            <SimpleInput
+            <ShowablePassword
               type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 79c86551c..816abab8a 100644
--- a/app/soapbox/features/security/mfa_form.js
+++ b/app/soapbox/features/security/mfa_form.js
@@ -11,9 +11,9 @@ import LoadingIndicator from 'soapbox/components/loading_indicator';
 import Button from 'soapbox/components/button';
 import { changeSetting, getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
+import ShowablePassword from 'soapbox/components/showable_password';
 import {
   SimpleForm,
-  SimpleInput,
   FieldsGroup,
   TextInput,
 } from 'soapbox/features/forms';
@@ -144,7 +144,7 @@ class DisableOtpForm extends ImmutablePureComponent {
           </h1>
           <div><FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' /></div>
           <div><FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth:' /></div>
-          <SimpleInput
+          <ShowablePassword
             type='password'
             name='password'
             onChange={this.handleInputChange}
@@ -313,7 +313,7 @@ class OtpConfirmForm extends ImmutablePureComponent {
                 />
 
                 <div><FormattedMessage id='mfa.mfa_setup_enter_password' defaultMessage='Enter your current password to confirm your identity:' /></div>
-                <SimpleInput
+                <ShowablePassword
                   type='password'
                   name='password'
                   onChange={this.handleInputChange}
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 8aea88a1b..f240e4ab4 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 53a20ac9d..339151f62 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 b28676a32..67ca9ce34 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>
---
 app/soapbox/features/auth_login/components/login_form.js     | 1 -
 .../features/auth_login/components/registration_form.js      | 2 --
 app/soapbox/features/security/index.js                       | 5 -----
 app/soapbox/features/security/mfa_form.js                    | 2 --
 4 files changed, 10 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index fbfe4afb3..8368cbb68 100644
--- a/app/soapbox/features/auth_login/components/login_form.js
+++ b/app/soapbox/features/auth_login/components/login_form.js
@@ -50,7 +50,6 @@ class LoginForm extends ImmutablePureComponent {
               aria-label={intl.formatMessage(messages.password)}
               className='password user_password'
               placeholder={intl.formatMessage(messages.password)}
-              type='password'
               name='password'
               autoComplete='off'
               autoCorrect='off'
diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index ff8c987ae..f0d27c297 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -235,7 +235,6 @@ class RegistrationForm extends ImmutablePureComponent {
               <ShowablePassword
                 placeholder={intl.formatMessage(messages.password)}
                 name='password'
-                type='password'
                 autoComplete='off'
                 autoCorrect='off'
                 autoCapitalize='off'
@@ -247,7 +246,6 @@ class RegistrationForm extends ImmutablePureComponent {
               <ShowablePassword
                 placeholder={intl.formatMessage(messages.confirm)}
                 name='password_confirmation'
-                type='password'
                 autoComplete='off'
                 autoCorrect='off'
                 autoCapitalize='off'
diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index f54ed2a6b..e19b1f0b7 100644
--- a/app/soapbox/features/security/index.js
+++ b/app/soapbox/features/security/index.js
@@ -142,7 +142,6 @@ class ChangeEmailForm extends ImmutablePureComponent {
               value={this.state.email}
             />
             <ShowablePassword
-              type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
               onChange={this.handleInputChange}
@@ -209,21 +208,18 @@ class ChangePasswordForm extends ImmutablePureComponent {
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
             <ShowablePassword
-              type='password'
               label={intl.formatMessage(messages.oldPasswordFieldLabel)}
               name='oldPassword'
               onChange={this.handleInputChange}
               value={this.state.oldPassword}
             />
             <ShowablePassword
-              type='password'
               label={intl.formatMessage(messages.newPasswordFieldLabel)}
               name='newPassword'
               onChange={this.handleInputChange}
               value={this.state.newPassword}
             />
             <ShowablePassword
-              type='password'
               label={intl.formatMessage(messages.confirmationFieldLabel)}
               name='confirmation'
               onChange={this.handleInputChange}
@@ -393,7 +389,6 @@ class DeactivateAccount extends ImmutablePureComponent {
         <fieldset disabled={this.state.isLoading}>
           <FieldsGroup>
             <ShowablePassword
-              type='password'
               label={intl.formatMessage(messages.passwordFieldLabel)}
               name='password'
               onChange={this.handleInputChange}
diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
index 816abab8a..78525af77 100644
--- a/app/soapbox/features/security/mfa_form.js
+++ b/app/soapbox/features/security/mfa_form.js
@@ -145,7 +145,6 @@ class DisableOtpForm extends ImmutablePureComponent {
           <div><FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' /></div>
           <div><FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth:' /></div>
           <ShowablePassword
-            type='password'
             name='password'
             onChange={this.handleInputChange}
           />
@@ -314,7 +313,6 @@ class OtpConfirmForm extends ImmutablePureComponent {
 
                 <div><FormattedMessage id='mfa.mfa_setup_enter_password' defaultMessage='Enter your current password to confirm your identity:' /></div>
                 <ShowablePassword
-                  type='password'
                   name='password'
                   onChange={this.handleInputChange}
                 />

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 ad357af03..0588d8a02 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 949f715e2..0084bc159 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"